Menu
I`m looking for a way to sort of zoom in/zoom out on my Phaser app depending on the screen size while keeping the ratio (and not altering the canvas size pixelwise as shown on the sketch), I tried so many snippets but everybody is sort of looking for something else, this is what I'm looking for(also, the code below where the screen gets "full screened" works on desktop but not on mobile):
var game = new Phaser.Game(1100,600, Phaser.Canvas,"gameDiv");
var mainState = {
init: function () {
game.renderer.renderSession.roundPixels = true;
game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.arcade.gravity.y = 800;
game.physics.arcade.gravity.x = -10850;
},
preload: function(){
//Loads background imagery
game.load.image(`background`, "assets/background_1877_600.png");
},
create: function(){
// function to scale up the game to full screen
// function to scale up the game to full screen
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
game.input.onDown.add(gofull, this);
function gofull() {
if (game.scale.isFullScreen)
{
//game.scale.stopFullScreen();
}
else
{
game.scale.startFullScreen(true);
}
}
background = game.add.tileSprite(0,0,1877,600,`background`);
},
update: function(){
background.tilePosition.x -= 0.25;
}
}
game.state.add(`mainState`,mainState);
game.state.start(`mainState`);<html>
<head>
<title>Agame</title>
<script type="text/javascript" src="phaser.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
html, body{
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>If you have any idea on how I could achieve this, let me know
886
Can you do something like this at the start.
var x = 1100;
var y = 600;
// window.onresize = function(event) {
// }
var w = window.screen.width;
if(w > 900){
//ok
}
else if(w > 600){
x = 600;
y = 400;
}
else {
x = 300;
y = 100;
}
var game = new Phaser.Game(x,y, Phaser.Canvas,"gameDiv");
This will only work when you load a new device but you can add screen change event to resize while screen change its up to you.
146
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
