Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Mobile device resolution issue


Kubenexion
 Share

Recommended Posts

Hello everyone !

I have an issue when I want to use my game on mobile device:

Case 1: With stage scale sets to 1, on mobile device I see only 1/4 of my game.

Screenshot_20160521-151430[1].png

Case 2: With stage scale sets to 1 / resolution (= 1/2 on my mobile device), my game is four times as small as the expected size.

Screenshot_20160521-151353[1].png

But when, in case 2, I manually change the stage scale to 1 (using the browser console during runtime) the stage fit perfectly, as I expeted.

Here is an extract of my code:

var Game = {
    
    initialize: function(width, height, resolution) {
        this.renderer = PIXI.autoDetectRenderer(width, height, {
            view: document.getElementById("game-canvas"),
            resolution: resolution < 2 ? 1 : 2
        });

        var loader = PIXI.loader;
        (resolution < 2) ? loader.add("spritesheet", "img/spritesheet.json") : loader.add("spritesheet", "img/spritesheet@2x.json");
        loader.load(this.onAssetsLoaded.bind(this));

        this.stage = new PIXI.Container();
        this.stage.width = this.renderer.width;
        this.stage.height = this.renderer.height;

        // case 1:
        this.stage.scale.x = this.stage.scale.y = 1;

        // case 2:
        this.stage.scale.x = this.stage.scale.y = 1 / this.renderer.resolution;
    }

    // ...
};

var resolution = window.devicePixelRatio || 1;

Game.initialize(window.innerWidth, window.innerHeight, resolution);
Game.start();


I dont know if it is a bug or if I'm doing something wrong ?

Link to comment
Share on other sites

I'm sure that you dont have to scale your stage for different resolutions. 

Your situation is impossible, there is no way that with scale=0.5 actual scale is 0.25. Do you use some esoteric computations may be? Like doing something with stage.width and stage.height?

 

UPD. Ok, i understand whats going on, ill explain in next post.

Link to comment
Share on other sites

Ok, first, renderer.width, renderer.height:

var w = 800, h = 600;
renderer = new WebGLRenderer(w, h, { resolution }); 
console.log(renderer.width, renderer.height); // 800 600
renderer.resize(801, 601);
console.log(renderer.width, renderer.height); // 1602 1202 YES, ITS BUCKED UP

stage.width = renderer.width; //means now that stage.scale will be adjusted that way all elements will fit inside (1602, 1202), yes, that's your problem

stage.width = renderer.view.width/renderer.resolution; // that will always work, resize or not resize, that's a good fix.

 Conclusions: Please dont use stage.width and stage.height. Renderer width and height changes after resize and its known bug.

Link to comment
Share on other sites

Ok, actually without setting stage.width and stage.height I'm in case 1: I only see 25% (upper left corner) of my game on mobile device.

In CSS I set the canvas width and height to 100%.

How can I fit my game view to have the same render with different resolution without scalling the stage ?

Link to comment
Share on other sites

5 minutes ago, Kubenexion said:

Ok, actually without setting stage.width and stage.height I'm in case 1: I only see 25% (upper left corner) of my game on mobile device.

In CSS I set the canvas width and height to 100%.

How can I fit my game view to have the same render with different resolution without scalling the stage ?

That's the point: you dont have to change anything except renderer.resolution. If it doesnt work for you, please give me minimal demo an tell which version of pixi do you use, I'll fix it :)

Link to comment
Share on other sites

this.background         = new PIXI.extras.TilingSprite(Utils.Texture.gradient, this.renderer.width, 100);
this.background.scale.y = this.renderer.height / 100;

What is that? I told you about renderer.width and height problem. Please use your own width and height that you have in "initialize".

Link to comment
Share on other sites

That background affects stage.width and stage.height, because, duh, there's only background in the stage when you call game.start(). Also any object that you bring out of (0,0,width, height) will affect stage.width and stage.height. Width and height of container are not fixed, they are calculated with getLocalBounds(), based on children positions. If you change them, in reality you are changing the scale.

/me Eagerly Waiting for your fix of "renderer.width -> width". Hope it helps :)

Link to comment
Share on other sites

  • 8 months later...
On 5/21/2016 at 11:41 PM, ivan.popelyshev said:

Ok, first, renderer.width, renderer.height:


var w = 800, h = 600;
renderer = new WebGLRenderer(w, h, { resolution }); 
console.log(renderer.width, renderer.height); // 800 600
renderer.resize(801, 601);
console.log(renderer.width, renderer.height); // 1602 1202 YES, ITS BUCKED UP

stage.width = renderer.width; //means now that stage.scale will be adjusted that way all elements will fit inside (1602, 1202), yes, that's your problem

stage.width = renderer.view.width/renderer.resolution; // that will always work, resize or not resize, that's a good fix.

 Conclusions: Please dont use stage.width and stage.height. Renderer width and height changes after resize and its known bug.

What is renderer.width and renderer.height? How about renderer.view.width and renderer.view.height? Does that change after resize? My ipad screen size is only 1/4 of my laptop browser's screen size when I use renderer.view.width and renderer.view.height.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...