iPhone X cocos2dx-3.16

iPhone X cocos2dx-3.16


I am using cocos2dx-3.16. When i am running in iPhone X there are black screen in both size Like this pic. I need full screen support for iPhone X

i am stuck hear please help me


Make sure your loading screen has the correct resolution.
Secondly you need to insert the launch image of correct size for iphone X


Dear bilalmirza,

i used 2436px × 1125px for landscape but it does not solve my problem.


What does your AppDelegate say?

What is in your info.plist?

Are you using storyboards?

What launch images do you have specified?


You need in xcode flags full screen mode , xcode 9.0+ with iphone x support and iphone X loading image to have it in full screen.


How can I setup above configs? in my Info.plist file UIRequiresFullScreen already set to YES but there are still black gaps on two sides


Are you using Storyboards or static launch images?


I use Storyboard


[Solved] Use Asset Catalog for Launch Image Source and place image with size like the link



I use Launch Image but still cannot archive safe area


those PRs will help you


I tried Storyboard for launch screen but still cannot stretch scene to cover whole Safe area. there are still blank area on both sides. Regarding API to get SafeArea, how should I use it?


dumganhar add a simple test case at the getting SafeArea PR, here


Oh sorry, I use javascript with Cocos Creator, really dont know where I can apply it cause scenes built by IDE UI


@trungnt85 I don’t know which version of Cocos you are using but I have implemented getSafeAreaRect into Cocos Creator.


This is my code:

 if (cc.sys.os == cc.sys.OS_IOS) {

            var safeArea = cc.director.getSafeAreaRect();


I use the safeArea var to adjust the sizes of the nodes…


I tried to as below

if (cc.sys.os == cc.sys.OS_IOS) {
const safeArea = cc.director.getSafeAreaRect();
cc.view.setDesignResolutionSize(safeArea.width, safeArea.height, cc.ResolutionPolicy.EXACT_FIT);
but the game scene exceed the safe area


When I develop my projects, I add my nodes as children of a main node when possible. I then use cc.director.getVisibleSize().width and cc.director.getVisibleSize().height to get the screen width and height and then use cc.director.getSafeAreaRect() to adjust those values. I then adjust the scale of the main node to match those sizes and then align my main node so that it gets placed where I want on the screen.

I add my nodes as children to avoid scaling all children individually. I just adjust the main node scale and it adjust all children automatically to avoid future complications because both Apple and Google can change screen size requirements at any time… I try to calculate things on my own because I know best how I want my scenes to fit and look.