0

I can not understand what is the discrepancy between the expected result and what is actually. In the first example, I set the width of the gui-window to the width of the screen, and the height to 0.3 of the height of the screen, placing this on the screen I found that part of the image didn't fit on the screen.

core result screenshot

You can make sure that the gui-window is cropped from the following screenshots, where I added a padding of 100 pixels when adding an image to the scene

code result screenshot

Can anyone explain why the Phaser behaves this way and how to fix it?

winner_joiner
  • 12,173
  • 4
  • 36
  • 61
Zagnetto
  • 13
  • 2

1 Answers1

0

I think the main problem is tht you are not using the function as you should.

The function setDisplaySize just changes the images and distorts it (link to the documentation). that the image is cut off has probably to do with the the passed width and height. The game - scene might be smaller that the window size.
Instead of innerHeight / innerWidth you could use this.scene.game.config.height / this.scene.game.config.width, this two properties should return the correct sze of the current html-canvas-object.

btw.: if you want to keep the border without distortion, i recommend using nine-slice check out this feature (available starting with the version 3.60 and above) https://labs.phaser.io/view.html?src=src/game%20objects/nine%20slice/create%20nine%20slice.js

btw.: when posting question (or answers), it is always better to post the code, and not a screenshot of the code.

winner_joiner
  • 12,173
  • 4
  • 36
  • 61
  • Thanks, you are right, the problem is that innerHeight/innerWidth is not the same as the scene size – Zagnetto May 17 '23 at 18:14