iPhone X - How to draw in the corners?

iPhone X - How to draw in the corners?
0.0 0


Is there any official support for iPhone X there already?

Can we already (somehow) use the full screen and draw in the corners?

Did anybody realize it already?


As I think there can’t be some “support”, but just recommendation, because it’s really depends on your game. And why do you want draw there? It’s prohibited.
Designing for iPhone X
I did like that SpriteBuilderX - editor for Cocos2d-X with C++ support
and here my all other resolution support idea - Actual Apple devices?


Theoretically, it is not so difficult to implement support.

Now I can only give a theory about iPhone X.
The current version of the engine runs in full screen mode on iPhone X, and getFrameSize() returns 2436x1125 (or 1125x2436), right?

According to the guidelines, the background image should fill the entire screen, but UI should be inside Safe area, right?


In fact, we can calculate the origin and the size of the Safe area.
And we can calculate it in the Design Resolution coordinate system.

So we can add getIPhoneXSafeAreaOrigin() and getIPhoneXSafeAreaSize() in addition to getVisibleOrigin() and getVisibleSize(). And if we use it to position UI, then everything will be fine.

Please correct me if I’m wrong.

  • Note

Although this can be implemented, I do not think it is a good idea to add new features to the engine just because of one phone.


And we can find out if this is iPhone X based on the resolution of the screen. Or maybe cocos engineers will suggest the better solution?


Tagging the Engineering Team

Some 3rd grade phone, well android phones developers can(probably will) copy it’s resolution and idea.
So just checking by resolution it’s bad idea. That should be check by device version https://stackoverflow.com/questions/11197509/how-to-get-device-make-and-model-on-ios/11197770#11197770

Ok, with getIPhoneXSafeAreaSize what next?


I hope that they will not copy the resolution. :smile:

Now this resolution corresponds only to iPhone X, but even if it is not iPhone X, then in this case UI will just be inside the Safe area. But I agree with you about check by device version.

What do you mean?


How to design you UI in game depends on that?


If you use Design Resolution, then you’re probably using getVisibleOrigin() and getVisibleSize(), right?
Like it is done in the HelloWorld.

I think most developers do.

The main idea

Size origin;
Size size;

if (isThisIPhoneX())
    origin =  getIPhoneXSafeAreaOrigin();
    size = getIPhoneXSafeAreaSize();
    origin = getVisibleOrigin();
    size  = getVisibleSize();

Then use the origin and the size to position your UI.

Unfortunately for me, I do not use getVisibleOrigin() in my code since I use FIXED_HEIGHT, so I now have to add it everywhere.


In corners you should fill with bg and\or even gameplay scroll elements, so whats the plan how to you will place you UI in appropriate location and gamplay ? I’m just asking… I already did this, without problems, just interesting how other will do actually this topic is duplicate of Designing for iPhone X


Yes, I know that you have found a solution, but since I prefer to do things by code, I suggested a quick idea.

I edited the previous post, please read.


Could you show how HelloWorld looks on the iPhone X now? I wonder if I’m right.


If you read my posts Actual Apple devices? all there


Yes I did. But I’m wondering how the default template (HelloWorld) looks like on this device.

Just wondering though. I’m not going to release on iOS in the near future.


I don’t have to worry at all about all this even new device will arrive, my SBX will do all.


You were the one who asked. :smile:

Now I need to get some sleep. Goodnight.


@KAMIKAZE It’s not allowed to draw on the corners, according to docs you can draw there.

@Priority10 did you manage to get some background drawing to work on the corners?


Yes, but I think you should be using GitHub Master for sure. Any other version will fail at this since the iPhone X is new.


What? You said allowed not allowed? I don’t understand. UI can’t be there. All here - read and watch carefully Designing for iPhone X


@framusrock I have no xCode to try. But I know that the engineers worked on this, so try github code.


Yes, they have the better solution or Yes, use the screen resolution?