CODEWITHSUNDEEP
pixi.js
Xin Chen
Xin Chen

Reputation: 107

pixi.js retina display doubled in size

I know the same question has been asked by other people before, but that was a long time ago and the API are changed, and they didn't solve my problem.

Here is my problem:

I have a problem about retina display, let's take iPhone 6 for example. The size of the screen is 375x667, and the device pixel ratio is 2, which means the physical pixel is 750x1334 and the CSS pixel is 375x667.

If we want a full screen canvas, what we usually do is to set the canvas size to 750x1334, and then set the actually display size of canvas to 375x667.

This is what I have done in pixi.js(v5.1.1):


let app = new Application({
    width: 375,
    height: 667,
    antialiasing: true,
    resolution: 2,
    autoDensity: true,
})

I set the resolution : 2, and autoDensity : true, but when I add a sprite with size of 750x1334, it only shows a quarter of the sprite(The size is doubled). It seems that the autoDensity is not working.

What now I am doing is setting the whole stage with scale(0.5):

app.stage.scale.set(0.5);

It temporarily solved my problem, but I feel like this is not the current way to go. You shouldn't use scale for this kind of thing.

What should I do then?

Upvotes: 1

Views: 2864

Answers (2)

Michael Ramos
Michael Ramos

Reputation: 5817

Don't scale the stage.

When autoDensity is enabled, PIXI adjusts the CSS size of the canvas to match your logical dimensions (375x667 in this case), but the internal buffer is scaled to 750x1334 because of resolution: 2.

Sprites added to the stage are sized to the logical dimensions (375x667), not the internal resolution.

I guess you want a full screen sprite?

If you want the sprite to cover the entire canvas:

  • Divide the sprite's physical dimensions by the resolution.
const sprite = PIXI.Sprite.from("path_to_sprite_image.png");
sprite.width = 375; // Logical
sprite.height = 667; // Logical
app.stage.a

This should have worked. Unless you have scaling baked into the sprite, eg @2x

In this case

  • Use the baseTexture.scaleMode to adjust how the sprite is scaled.
const texture = PIXI.Texture.from("path_to_sprite_image.png");
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;

const sprite = new PIXI.Sprite(texture);
sprite.width = app.screen.width; // Automatically scales to the logical width
sprite.height = app.screen.height;
app.stage.addChild(sprite);

Upvotes: 0

Ted Brownlow
Ted Brownlow

Reputation: 1117

Use CSS to set the canvas size in CSS units, and initialize the renderer using the proper dimensions according to the devices pixel ratio.

let canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let app = new Application({
    width:window.innerWidth*window.devicePixelRatio,
    height:window.innerHeight*window.devicePixelRatio,
    antialiasing: true,
    view:canvas
});

Upvotes: 2

Related Questions