traxtrack Posted June 22, 2018 Share Posted June 22, 2018 I am trying to scale things properly but I have huge issues, I read other topics like meine but the solutions did not work out, I cant figure out where my issue is. Thanks in advance guys. 1. So this part of the code makes my bg image look good on any device, but I cant use this to set the image to autoscroll on th Y axis: scaleRatio = window.devicePixelRatio / 3; var road = game.add.image(game.world.centerX, game.world.centerY, 'road'); road.scale.setTo(scaleRatio, scaleRatio); road.anchor.set(0.5); 2. So after some research I am doing this: road = game.add.tileSprite(scaleRatio, scaleRatio, 800, 600, 'road'); road.width = game.world.width; road.height = game.world.height; The problem with this code is that the background image wont scale right on mobile devices. on devices with window.devicePixelRatio == 2 the image will be huge, it wont even resize at all. In case some is wondering this is my config setup: console.log('Game state loaded'); scaleRatio = window.devicePixelRatio / 3; // var carTurnSpeed = 150; var countcars = 0; var car; var obstacleGroup; var canMove = true; var goleftonce = 2; var gorightonce = 2; // OBSTACLES vars var obstacleSpeed = 800; var obstacleDelay = 700; var platforms; var score; // Get device sizes var w = window.innerWidth * window.devicePixelRatio; var h = window.innerHeight * window.devicePixelRatio; var game = new Phaser.Game(w, h, Phaser.CANVAS, '', { render: render, }); game.state.add('boot', bootState); game.state.add('load', loadState); game.state.add('menu', menuState); game.state.add('play', playState); game.state.add('gameover', gameoverState); game.state.start('boot'); Link to comment Share on other sites More sharing options...
Recommended Posts