HTML5 Canvas Resize on Runtime

Cocos Creator
#1

Hi,

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:

img_20230912(1)
img_20230912(1)285×519 1.62 KB

And this is how I want it to be:

img_20230912(2)
img_20230912(2)284×519 1.98 KB

Cocos Creator: v2.4.11

#2

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

#3

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.

#4

Build template doc for 2.4 is here
https://docs.cocos.com/creator/2.4/manual/en/publish/custom-project-build-template.html

#5

Use `cc.view.setViewportInPoints(0, 0, 720, 1280 - 100);'Can achieve the effect of adjusting the game screen.

This is the finished effect:
59397

This is the test project:
59397.zip (332.1 KB)

#6

Sorry for the very late reply. I was working on a different project during this time.

Yes this will change the UI, but also mess up UI input handling, like buttons will not be clickable after resizing. You can see this in your test project itself.

#7

I tried changing the canvas style like this:

// add top margin
function setWindowMargin(margin) {
  const canvas = document.getElementById("GameCanvas");
  const isLandscape = window.innerWidth > window.innerHeight;
  if (isLandscape) {
    canvas.style.left = `${margin}px`;
    canvas.style.position = `relative`;
    canvas.style.marginLeft = `0`;
  } else {
    canvas.style.top = `${margin}px`;
    canvas.style.position = `relative`;
    canvas.style.marginTop = `0`;
  }
}

setWindowMargin(60);

When the game loads I can see that the canvas has resized properly. But as soon as I click on the game, it automatically resizes and fills the whole screen again. I don’t want that. How can I prevent this? I disabled all the fullscreen code from index.html and main.js.