How do I limit game to the "safe area" on iOS?

[divVerent]

I am making an application in Ebiten UI (Ebiten chosen mainly because it runs on HTML5 including desktop and Android and on iOS).

It's already kinda working, except that part of the UI overlaps with camera cutouts and UI controls:

I discovered this concept of a "safe area" in Xcode:

However, I can't seem to find any way to constrain the MTKView that the GameViewController owns to this safe area. The storyboard editor looks like it should be able to do that, but I can't figure out how - the very promising "Add New Constraints" dialog I can open at the bottom right is all greyed out as well:

How does one do that?

(Sadly I can't run the HTML5 version on iOS - I'd actually prefer that, but Safari doesn't support the Web MIDI API...)

[hajimehoshi]

What about getting the safe are from the Objective-C world and inject it to the Ebitengine world?
https://stackoverflow.com/questions/47075615/objective-c-how-to-create-self-view-inside-safe-area-programmatically

[divVerent]

I guess that would work, but is that really the intended way? The Xcode editor there totally feels like I can somehow make a view whose bounds are limited by the safe area, and stick all of Ebitengine into that view - I just don't seem to understand how (like, can't even figure out how to place anything in the container view object that totally exists).

Like, I can make a container view, and there's a system of constraints, and from what I read, it can honor the safe area. So all I need to know is how to do that - or failing that, maybe it's easier to just write the XML structure of what I need?

Going this route might work, but I will have to see what it takes to make Ebiten UI restrict itself to the smaller size (e.g. by using AnchorLayout and reconfiguring it when the safe area changes: https://github.com/ebitenui/ebitenui/blob/master/_examples/widget_demos/anchorlayout/main.go#L32).

[divVerent]

Actually, instead of dealing with AnchorLayout mess, reading Ebiten UI source, maybe I can just pass a SubImage in Draw() and it's happy: https://github.com/ebitenui/ebitenui/blob/master/ui.go#L79 appears to be what is propagating the screen size down to the widgets.

Edit: SubImage approach doesn't work, as Ebiten UI can only deal with images that have the origin at 0, 0. Otherwise the entire UI is shifted.

[divVerent]

Thanks - this appears to work indeed.

Seems one can't reconfigure AnchorLayout once created, but I can just recreate the entire UI when insets change (already doing that on resolution change anyway). As both events are primarily triggered by screen rotation and tend to happen in the same frame, that's fine.

I still think it's some nasty hackery to do it this way and there must be a way to do it with the storyboard... but meh. This works. Thanks!