phaser [Help] Different sprite position problem for mobile devices

[shohan4556]

Hello, I have noticed that my sprite position is not constant its differ for different mobile device please take a look at the image.

BasicGame.Game.prototype = {

    init: function () {
     // also tried RESIZ not working 
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;

        this.scale.setResizeCallback(this.gameResized, this);
        this.scale.updateLayout(true);
        this.scale.refresh();

    },

    preload: function () {
        this.load.image('cake','asset/cake-color.png');
    },

    create: function () {
        this.image1 = this.add.sprite(this.game.world.centerX,this.game.height-150,'cake');

        this.image1.anchor.setTo(0.5, 0.5);
        this.image1.scale.setTo(this.game.global.scaleRation);

    },

    gameResized: function (width, height) {
      // this.image1.x = Math.round(width/2);
       //this.image1.y = Math.round( height-120 );
    }

};

I have tried Scale Manager SHOW_ALL AND RESIZE but no result.

is there any way to fix the problem, please help me.

[megmut]

Phaser SHOW_ALL doesn't actually scale 100% of the time. Not properly anyway. It sticks to the same aspect ratio calculated from when you created the game, however it doesn't determine if it needs to scale according to maximum width or maximum height. I'm in the process of writing a blog at the moment showing how to fix this issue, it's pretty straight forward but if have a look at the USER_SCALE, and the letterbox in relation to game design, that should be a good guide on where to get started

 

[VitaZheltyakov]

Use code:

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

 

[shohan4556]

3 hours ago, megmut said:

Phaser SHOW_ALL doesn't actually scale 100% of the time. Not properly anyway. It sticks to the same aspect ratio calculated from when you created the game, however it doesn't determine if it needs to scale according to maximum width or maximum height. I'm in the process of writing a blog at the moment showing how to fix this issue, it's pretty straight forward but if have a look at the USER_SCALE, and the letterbox in relation to game design, that should be a good guide on where to get started

 

So Whats the solution of the problem ?

Should I use SHOW_ALL or USER_SCALE to solve the problem. please share your thought.

[shohan4556]

2 hours ago, VitaZheltyakov said:

Use code:

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

 

I tried your code but I dont know why its not working.

The scaling method you showed here I had used my project before it just scale game objects but the position problem is still happening.

[VitaZheltyakov]

7 hours ago, shohan4556 said:

I tried your code but I dont know why its not working.

The scaling method you showed here I had used my project before it just scale game objects but the position problem is still happening.

this.image1 = this.add.sprite(this.game.world.centerX,this.game.height-(150*scale_ratio),'cake');

 

[Tom Atom]

Hi, your first device has aspect ratio 1.77, while the second has aspect ration 1.66.

There is no easy solution and using only scale parameter will not help. You have to implement some logic dependent on type of your game. Some time ago I wrote article about this (already pasted this on forum several times). Solution there works for me - I can prevent both letterboxes and stretching of game (up to some extent). You can read it here: http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html

Basically, you define some "save area", that is visible every time and some areas, that are visible only on some aspects.

Another thing which I found very benefitious and which is not mentioned in article is, that I place 0,0 point into the middle of screen:

            // set camera and world bounds
            this.world.setBounds(-this.game.width / 2, -this.game.height / 2, this.game.width, this.game.height);
            this.camera.focusOnXY(0, 0);

 Then I can place all objects relative to center of screen (for example BG image with anchor 0.5, 0.5) - after resizing the game the center is still ... in center :-)