Open HawkenKing opened 1 month ago
To address the issue of inconsistent scaling and margins on iOS, follow these steps:
Check Scale Mode: Ensure you are using the correct scale mode. In your game configuration, set scale.mode
to Phaser.Scale.RESIZE
.
Adjust Centering: Verify the centering constants in /src/scale/const/CENTER_CONST.js
. Use Phaser.Scale.Center.CENTER_BOTH
to center the game canvas both horizontally and vertically.
Handle Resize Event: Listen for the resize event in your game and adjust the game container accordingly. Use the RESIZE
event from /src/scale/events/RESIZE_EVENT.js
.
this.scale.on('resize', (gameSize, baseSize, displaySize, previousWidth, previousHeight) => {
// Adjust gameContainer position and scaling here
});
Check for iOS Specific Issues: Add specific handling for iOS devices if necessary. You can detect iOS using user-agent strings and apply specific styles or adjustments.
Update Phaser Version: Ensure you are using the latest version of Phaser, as there have been updates and bug fixes related to the Scale Manager. Refer to the changelog in /changelog/3.60/ScaleManager.md
for details.
These steps should help resolve the margin and scaling issues on iOS.
/src/scale /src/scale/const/CENTER_CONST.js /src/scale/events/RESIZE_EVENT.js /changelog/3.60/ScaleManager.md
edited the code sample to be more simple, the key issue is autoCenter: Phaser.Scale.CENTER_BOTH
When used on iOS it creates a margin at the top.
A fix is being applied on the following urls, although it is undocumented(?) and not part of the code samples it is displaying.
https://labs.phaser.io/view.html?src=src/scalemanager\zoom%20manual%20resize.js
https://labs.phaser.io/view.html?src=src/scalemanager\fit%20and%20snap.js
Version
Description
Using Phaser.Scale.RESIZE, for a pixelart game, that fills the browser window size, and scales to a fixed game size. (in this case, 144 by 256). On PC and android, the code is fine. the gameContainer group is centered in the screen. On iOS, the gameContainer is pushed down by a margin, and the pixel aspect ratio is squashed vertically slightly. the code doesn't add a margin.
Example Test Code
https://phaser.io/sandbox/A3KSEgq7
Additional Information
tested on iPhone 12