The objects inside the saveArea are always visible on all screen sizes.
There are two scaling strategies. FIT and SMOOTH. The example below uses SMOOTH. To try the strategy FIT, set SCALE_MODE on line 5 to ‘FIT’.
The problem I’m having is the interactive portion. On lines 77-88, I added shape inside a container, and made the container be interactive, and a simple pointerup event. When I click on the container, I don’t see anything in the console. However, if I resize the window, then I see the expected results.
Thanks @gregmax17,
I think this has something to do with the order of calling the resize functions. If you simply add the setTimeout function below, at the bottom of the file, it will work.
//--
setTimeout(() => resize(), 1000)
})
I know this is not a suitable solution, but I thinks I’m on the right track.
Thank you for taking the time to reply. I did just that in the window.onload event and in the MainScene, but no luck. Its really strange.
Is there something else that needs needs to be called in addition to the game.scale.resize method? The refresh method? Something in the input manager maybe? (just throwing out random ideas, I’m really new to Phaser myself)
I just noticed that the issue is only present on codepen. Probably because the game is embedded as an iFrame.
I also noticed that in the browser the function this.scale.on('resize', (gameSize, baseSize, displaySize, resolution) is triggered once at the beginning of the game, event though the screen does not resize. On codepen, this function is only triggered after the window gets resized.
It works as expected on my phone and in the browser.
I do not know if I have to write something in addition or if it is a phaser scaleManager bug.
I actually have a similar issue… it seems the hit area created by a setInteractive call on a sprite, doesn’t update when you manipulate the canvas css. If I remove the game.canvas.style lines, the hit areas update as expected - though of course the resizing is all messed up.
Not sure we’re talking about the same issue!
I actually tried removing the pointer events on the sprites and re-adding them on resize, but that didn’t seem to make any difference. I’m not sure we’re supposed to be messing with the canvas styles when the scale manager is handling things.
@StealthGary I think I know what you were encountering, I was too. Set the scale mode in your game config to Phaser.Scale.NONE. The resize functions we were creating, SMOOTH or FIT, are more custom and override what Phaser is doing internally.
@gregmax17 Thanks, that worked! Strangely, I’d read in the docs that the resize method should only be used when the scaling mode is set to ‘NO_SCALE’ - I’d tried that to no avail, but ‘NONE’ seems to work. I guess they’re two different things.
I designed it to be used in full screen. I see that you have other html around it. I guess you have to change the code a bit. For example, I guess, in your case you have to use the width and height of the wrapping div (“core”) in stead of the window.innerWidth and window.innerHeight like below:
const w = window.innerWidth // put the widht of the core div here?
const h = window.innerHeight // put the height of the core div here?
Also maybe you have to adjust the parent in scale to core?
scale: {
parent: 'phaser-game', // put 'core' here?
}
Ohhh, you where referring to this. This is actually a really bad example. It was my first attempt to implement a nice scaling strategy. It works very different than the strategy in this topic. Actually in the example you use, the canvas does never change its size. Only the css does the work by hiding some part of the canvas based on the aspect ratio.
I do not know if this example can easily be used in what you are building. I guess it is a css problem, because, as I mentioned above, the canvas size stays the same.
Personally I would not use the approach you are using, but the approach I published in this topic instead.
Hey Again @yannick,
Thanks again for your help but this one also doesn’t work for my case, I believe as you said it’s an issue with my css and like sidebar’s and stuff, i’ll try to make it some other way.
