XaiJu
Shattered Pixel
Shattered Pixel

patreon


Display Cutouts | Patreon Weekly #325

Hey Patrons, in this weekly I’m going to go over some technical changes I plan to make to display layouts on Android and iOS.

There’s also an audio Q&A this month! There’s a list of questions and timestamps below the weekly.

Notches and Hole Punches

Let me quickly take you back to 2017. Phone displays were all perfect whole rectangles, as god intended. Then Apple made this in 2018:

I understand the desire here, people want selfie cameras and also big edge-to-edge displays, but in my opinion the notch is a horrid compromise between the two. It creates a region of the screen that’s mostly useless most of the time. I would rather just have a thin display bezel or no selfie camera at all. Of course, everyone copies Apple, and now notches or hole punches are pretty much ubiquitous.

When I upgraded my phone last in 2019, I very specifically picked one with no hole punch and a pop-up selfie camera (a Oneplus 7 pro) and happily stopped thinking about notches entirely. For the last 6 years I’ve seen Shattered with a perfect full-screen display. Meanwhile everyone else has been getting the system status bar on iOS, and a black void on Android:

I’m thinking about this again now, as recent Android changes are forcing Shattered to actually handle notches in some way. Sure I could just have the app itself put a black void there instead of the system, but I might as well look and see if anything better can be done.

So after a quick survey, here’s how display cutouts currently look:

There’s still no way for me to do much with devices that have big bulky notches, but it seems that display cutouts on the whole have gotten a lot smaller. I think it may be possible for me to actually support some of these, and let devices with cutouts display Shattered in true fullscreen!

For most menus this is as simple as just lowering the title text and top-right back button, but the in-game UI is a bit more complex. Obviously rendering it into a larger notch wouldn't work without major changes:

But for the more medium sized ‘dynamic island’ things are a lot more promising. This could maybe work with the health bar moved up slightly and the buff bar on two rows:

And with smaller modern android hole punches (S24 Ultra pictured here) the game almost totally works as-is:

So I'm going to need to do a bit more testing and designing, but it's looking like some older devices will need to stick to showing a void or the status bar, but more modern ones should be able to get true fullscreen with relatively small UI changes!

Audio Timestamps

This month there were 21 questions from 11 Patrons

Comments

I haven't made solid decisions yet, but I am considering migrating the 'fullscreen' toggle in the settings to basically be a 'render into notch' setting. At the same time though, you would be able to quickly check the time by just swiping down from the top of your screen, as normal in any other fullscreen app.

Shattered Pixel

Would you consider adding a settings option to retain the current display cutout UI? I have an iPhone with a dynamic island and I tend to loose track of time while playing, so I really appreciate having the clock and/or a background timer visible to keep me on track. This might be minority opinion, but I don't mind the black bars on top and bottom of the display that avoid the rounded corners. Not a deal breaker if you can't for whatever reason. I'm not sure how complicated it would be to maintain compatibility if you have to make code changes on Android.

Nicholas

Yeah it's not great. I understand that having a black void isn't a great user experience but having to work around an 'almost but not quite a rectangle' screen is a pretty bad developer experience. Shattered's in an unfortunate spot too because a fair bit of the UI is at the top. I have considered moving it down but I really like how the vast majority of interaction happens toward the bottom and 'informational but low interaction' UI is at the top. Desktop sort of mimics this by having all the interaction stuff at the bottom-right. atm my plan, as I mention in the weekly, is to make small adjustments to the top UI to support the most common Android hole punches, and maybe the dynamic island while I'm there, but if the cutout is any bigger the game is just going to largely stick to the 'black void' approach, maybe with a tiny bit of themeing so that it's less jarring.

Shattered Pixel

That edge-to-edge enforcement is one of the worst breaking changes Google ever perpetrated. I'll be tuned to read your solution in source. (Oh and the answer to 15:54 should be "depends on whether it's a Python swallow or a Fallout swallow"?)

Robert Heinig


More Creators