Mobile device resolution issue

[Kubenexion]

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.

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.

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/[email protected]");
        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 ?

[ivan.popelyshev]

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.

[ivan.popelyshev]

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.

[Kubenexion]

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 ?

[ivan.popelyshev]

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

[Kubenexion]

Only changing renderer.resolution let me in case 1...
 

If you want to try: online demo

[ivan.popelyshev]

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".

[ivan.popelyshev]

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

[Kubenexion]

Using initial width and height for the background size solved the problem.

Thanks you for your fast answers

[ivan.popelyshev]

YAY! =^_^=

Summary: You used incorrect width/height to create background, which actually affected stage size because background was the largest element there.

[caymanbruce]

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.