Graphics Mobile Overlay Mockups

I'm working on a mobile game and I want to make sure it looks right on different mobile devices. Specifically, in this case I want to make sure I don't put anything in areas that might be covered on a device that has rounded corners or a notch. So I want some type of overlay I can put up on my GUI layer so that I make sure nothing goes in those areas.

I've tried Googling what I want, but I must not be using the right search terms, so I'm hoping someone here knows what I'm talking about and can point me in the right direction.

 

For video editing, especially back in the day, there were safety margins around the edge of the whole frame where you avoid putting text as some tv's would cut this off.

You could do the same for your game - set a margin around the whole screen (8%?) where no important UI (text/buttons) goes.

 

Android Pie allows you to emulate a notch through the developer options on the device itself. As for rounded corners, well, I guess you could try installing the roundr app, but really just assume that someone will have a device with rounded corners and don't use the corners for anything that can't be cut off. (For example, I was drawing a message log starting at the very bottom of the phone, and a device with rounded corners cuts off part of the first letter of the message text. My "solution" was to bump the text up a bit. Unfortunately, this means I can't fit as many messages, and, because GMS2 doesn't have a function to test for rounded corners, I need to simply assume that ALL devices will be unable to use that space.)

I posted a thread about this here, and I submitted a request to add a feature that relays the result from Android's built-in function is_rounded().

I recommend that you also submit a feature request for this.