iPhone X - How to draw in the corners?

cocos2d-x C++
#4

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?

@slackmoehrle

Tagging the Engineering Team
#5

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?

#6

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?

#7

How to design you UI in game depends on that?

#8

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();
}
else
{
    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.

#9

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

#10

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.

#11

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

#12

If you read my posts Actual Apple devices? all there

#13

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.

#14

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

#15

You were the one who asked. :smile:

Now I need to get some sleep. Goodnight.

#16

@anon98020523 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?

#17

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.

#18

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

#19

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

#20

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

#21

Hi, I have just updated my project to ios11 and “iphonex” and I would like to share some thoughts.

Safe area was introcuded with ios11 and I am pretty sure it will be used in the future phones with ios. This is why we shouldn’t stick to “if iphoneX” check. I think there should be just a method like “getSafeAreaRect” (or getAreaForUI) and all the UI (user game touch zone :P) should be positioned in that area. All background elements should be positioned with origin and visibleSize.

In case of other platforms safe area insets may return just 0 (assuming safe area is inside visible size).

I am using cocos2dx v12 and it seems to work.

#22

Yes, you’re right, since I’m not an iOS developer, I just wrote the first thing that came to mind. :slight_smile:

p.s.
The engine already supports this.

#23

Ah… I didn’t notice that final solution was just pushed :wink: Thanks @Priority10 for the info. I will merge it. At least I was thinking right :wink: