I’ve developed an HTML5 mobile game using Cocos Creator. It is released in various hosting sites. One of them wants to add a sticky banner at the top of the game which will be visible all the time during gameplay. But I can’t change the layout and UI of in-game components for this, so I was thinking of adding this banner outside of the game using custom HTML divs. As the banner div cannot overlap the game I tried reducing the height of the HTML canvas using canvas.height, canvas.clientHeight, canvas.style.height so that the game will only render below the banner div. But none of these properties is working as intended. Is there a proper way to do this?
Here are two images for reference. This is how it currently is:
Firstly, clientHeight and clientWidth doesn’t control canvas’ pixel resolution. Secondly, Cocos rely on frame size to readapt the canvas resolution to the outer frame div (view.frame)
We provide view.setFrameSize and view.setDesignResolutionSize to change and resize, but need to check how it could work for your scenario. Directly manipulating the canvas size won’t take effect.
The best practice is to change web platform template with your own customized index file and css file so that you can add banner statically. Then your game would adapt to the game container during loading process, no need to do any adjustment in runtime
Thanks! I’ll try the custom templates. Is this supported in v2.x? I’m using v2.4.11.
PS: I tried the methods you suggested during our Discord discussion but unfortunately it’s not working.
For future visitors, I tried calling cc.view.setDesignResolutionSize() and cc.view.setFrameSize() methods after changing the canvas.height property but they are not working as intended.
