shohan4556

[Help] Different sprite position problem for mobile devices

Recommended Posts

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.

forum-post.png

Share this post


Link to post
Share on other sites

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 :)

 

Share this post


Link to post
Share on other sites

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);

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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');

 

Share this post


Link to post
Share on other sites

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 :-)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.