I'm new working with Phaser 3 and Apache Córdova for create mobile Android games.
I have created a game of 1200 x 800 px. It looks fine in tablets but in smartphones doesn't. How can I scale it to work in multiple screen sizes?
Additionally, I need help to force to landscape the game orientation using Phaser 3.
Thanks
Phaser, while great at game building, is not really about building a structured mobile or web-app. Hence, building a neat looking game app or PWA with Phaser requires an HTML + CSS wrapper, a void which Ionic perfectly fills.
Scaling refers to how the game canvas will scale on different screen sizes. We can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.
Phaser 3 is the new version of the Phaser Game Framework series. It includes a brand-new custom WebGL renderer designed specifically for the needs of modern 2D games. Phaser uses both a Canvas and WebGL renderer internally and automatically switch between them based on browser support.
function create () {
window.addEventListener('resize', resize);
resize();
}
function resize() {
var canvas = game.canvas, width = window.innerWidth, height = window.innerHeight;
var wratio = width / height, ratio = canvas.width / canvas.height;
if (wratio < ratio) {
canvas.style.width = width + "px";
canvas.style.height = (width / ratio) + "px";
} else {
canvas.style.width = (height * ratio) + "px";
canvas.style.height = height + "px";
}
}
To control screen orientation, add the following to the applicationManifest xml in the build/src/main directory of your android project. This will disappear every time you rebuild from a package creator like capacitor, so you'll need to replace it every time you generate an android project.
<application
...
android:screenOrientation="landscape"
>
<activity
...
android:screenOrientation="landscape">
...
</activity>
</application>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With