resize event only gets called when the screen gets smaller

[luschn]

In order to create a fully responsive game, i´d like to listen to the resize event, but it only gets called when i resize the screen to smaller values. This is my code (well, part of it):

export default class MainState extends Phaser.State {
	constructor() {
		super();
	}
	init() {
		this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
	}
	resize(width, height) {
		console.log(widht, height);
	}
}

In the resize callback, i resize my game elements - they obviously get smaller when i make the screen smaller. But if i increase the size of the window again, the callback never gets called. Is there any workaround for this? Is this a known issue?

[rich]

The problem is elsewhere in your code / css, as this works fine no matter how it's scaled:

var game = new Phaser.Game("100%", "100%", Phaser.AUTO, '', { preload: preload, create: create, resize: resize });

function preload() {

    game.load.image('einstein', 'assets/pics/ra_einstein.png');

}

var sprite1;
var sprite2;

function create() {

    game.scale.scaleMode = Phaser.ScaleManager.RESIZE;

    sprite1 = game.add.sprite(0, 0, 'einstein');

    sprite2 = game.add.sprite(game.width, game.height, 'einstein');
    sprite2.anchor.set(1, 1);

}

function resize(width, height) {

    sprite2.x = width;
    sprite2.y = height;

}

 

[luschn]

you know what, it suddenly worked. i only changed some react stuff (my game runs on react and phaser) - using a single route now, with phaser only. i had several routes before, because my game will get pretty big with many states and i wanted to create webpack bundles for several code parts....but i may even remove react now, because now it´s pointless if i just load phaser...

anyway, react messed it up, not entirely sure why (because there was no additional content next to phaser). maybe someone knows what could go wrong, but i would consider this closed for me

[luschn]

ok, it may not even be related to react. i found out that resizing does not work correctly if i add the canvas div on my own (<div id="canvas"></div>) - if i don´t add any canvas div and let phaser create it > works perfectly fine. in that case, there is no div around the canvas tag.

[rich]

Phaser doesn't do anything to the canvas tag that it creates itself, that is any different to if its given a div to inject a canvas tag in to.

Which in my mind points to a CSS problem somewhere on the page.

[luschn]

there´s nothing on the div, nothing on the body, ... really weird. and still, it does make a difference for me if i create the div on my own. maybe i´ll try it in a fresh html file later...