HitArea offset after window resized

Phaser 3
1

Hi,
I’m working on a game with one interactive element, for which I created hitArea in scene’s start() function:

var hit_area = new Phaser.Geom.Rectangle(-17, -15, 34, 51);
this.myobject.setInteractive(hit_area, Phaser.Geom.Rectangle.Contains);

This works well until window is resized. My canvas has fixed size and is horizontally centered using CSS inside the window. But it seems like after resize, whole canvas with it’s content has moved but object’s hit Area stays in place and therefore is not aligned with object anymore.

hitarea
hitarea.png800×800 8.57 KB

When I resize window to original position, it is well aligned again.
When I start game with smaller window size, hit Area is aligned but after resize (stretch window width) it is offset from object to other side - e.g. still stays in same offset relative to window left border - but not accordind to canvas coordinates.
I tried to removeInteractive() and then setInteractive() with same arguments after each window resize but it is not working. Is there an option to reset hitArea after window is resized?

1 Like
2

I’m with @Grepy! How do you fix this?

3

Sounds like a Scale Manager problem. See Parent and Display canvas containment guidelines.

1 Like
4

Thank you - I didn’t find the solution there but it pointed me in the right direction:

Rather than centering the canvas parent div via CSS - I stretched parent div across screen and centered canvas in phaser config using autoCenter: Phaser.Scale.CENTER_BOTH

This way the problem is solved allthough I’m not sure why setting position of the parent div causes this error.

1 Like
5

I had the same problem and i solved it like this:

  1. I didn’t add anything to the game config (no scale, parent, autocenter)

  2. I wrapped the canvas with a div that onResize i set it to the window size.

    window.addEventListener('resize', resize, false);

    function resize(container) {
   container.style.width = window.innerWidth + 'px';
   container.style.height = window.innerHeight + 'px';
 };

  3. The canvas css:
    canvas { padding: 0; margin: auto; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-user-select: none; -webkit-user-select: none; max-width: 100% !important; max-height: 100% !important; }

6

I was able to solve this problem with this code. I’m using a parent container, with no scale and no autocenter.

window.addEventListener('resize', () => {
    scene.scale.setParentSize(Constants.APP_WIDTH, Constants.APP_HEIGHT);
}, false);
7

Phaser v3.50.0 will have a fix for this.

8

function resize() {
let game_ratio = 640 / 960
let window_ratio = window.innerWidth / window.innerHeight
let container = document.getElementById(“thegame”)
if (window_ratio > game_ratio) {
container.style.height = window.innerHeight + “px”
} else if (window_ratio < game_ratio) {
container.style.width = window.innerWidth + “px”
container.style.height = window.innerHeight + “px”
}
}

window.addEventListener(“resize”, resize)

let gameConfig = {
type: Phaser.CANVAS,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.RESIZE,
parent: “thegame”,
width: 640,
height: 960
},
}

try this :slight_smile: