Retina support.

[lukasyno]

I create small game, and on desktop look good, but on ipad3(retina) look ugly.

How to best way to add retina support with pixi?

[lukasyno]

any answer?

[xerver]

I'm not sure what you are asking, or what your problem is. If the device uses retina resolution, use retina sized graphics.

[Moen]

Retina's max resolution is 2880×1800 (2048×1536 on ipad)

Iif you use graphics for a lower resolution (1920*1080 on classic desktop, aka full hd), the system (graphic) will interpolate you image, creating some blur and dirty pixels.

 

So use bigger graphics ressources, for the same sharpness use a 200*200px image on retina, instead of 100*100px on full hd

More pixel ! more precision !!

[fyb]

I'm also interested in this support.

 

The problem is that on a retina macbook the screen size is virtually interpolated to 1440*900 resolution. All non-retina graphics is scaled up. If I just load in a bigger resolution image, it's going to show up bigger and still blurry. I'd need to be able to load a 200*200px texture into a 100*100px sprite for it to be retina-sharp.

 

Any way to do that?

[Moen]

I dont think so,  but i'm still a pixi-nioob.
To my knowledge (and after few tests) the sprite size is the displayed size, if the inner texture bigger, it's resized to fit the sprite width & height.
 

 

results of this code :

      // create a texture from an image path      var texture = PIXI.Texture.fromImage("cowboy.jpg");      // create a new Sprite using the texture      var cowboy = new PIXI.Sprite(texture);      var cowboy2 = new PIXI.Sprite(texture);      var cowboy3 = new PIXI.Sprite(texture);      cowboy2.width = 20;      cowboy3.width = 300;

 

Currently, using bigger texture in smaller sprites not seems to be the solution.

[alex_h]

Is devicePixelRatio / webkitBackingStorePixelRatio what you are looking for?

 

http://www.html5rocks.com/en/tutorials/canvas/hidpi/

[lukasyno]

@alex_h YES

Ok but how to implement in pixi project? I can't manualy scale canvas because in every frame pixi reset this scale...

Cheers

[xerver]

Feel free to open an issue on the Pixi.js GitHub so @GoodBoyDigital and I can look more into it!

 

https://github.com/GoodBoyDigital/pixi.js/issues

[alex_h]

can't you just set the scale of the stage? You are right, the CanvasRenderer resets the context scale to 1 at the beginning of its render call, but the stage is the top level display object so you can just have its scale properties set appropriately to your needs and the context is then immediately set back to what you wanted it to be before all the stage content is rendered.

[lukasyno]

Ok so..

it is very easy with regular canvas but very hard with pixi..

in regular canvas this code work correct:

 

var canvas = document.getElementById("canvas");        var context = canvas.getContext("2d");        if (window.devicePixelRatio == 2) {            canvas.setAttribute('width', 600);            canvas.setAttribute('height', 600);            context.scale(2, 2);        }                context.fillStyle = "#FF0000";        context.font="30px Verdana";        context.fillText("HELLO WORLD", 0, 100);

 

 

In PIXI this code dont work:

 

 

stage = new PIXI.Stage(0xDDDDDD);        renderer = PIXI.autoDetectRenderer(600, 600);        document.body.appendChild(renderer.view);                if (window.devicePixelRatio == 2) {            renderer.view.setAttribute('width', 600);            renderer.view.setAttribute('height', 600);            renderer.context.scale(2, 2);        }                const text = new PIXI.Text("HELLO WORLD", {font: "30px Verdana", fill: "red", align: "left"});        stage.addChild(text);        text.position.y = 100;

 

line:

renderer.context.scale(2, 2);

 

dont working, if I change context.setTransform from CanvasRenderer:render

this.context.setTransform(1,0,0,1,0,0); 

to

this.context.setTransform(2,0,0,2,0,0); 

 

I can't see any result

but only if I add line to

CanvasRenderer.prototype.renderDisplayObject

if (frame) statement 

context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);

context.scale(2, 2);

 

it work (scale is change) but graphics is still blury, and scene is a bit broken (positions etc).

[Aymeric]

Hey there!

 

I'm having an issue too for understanding how retina works with pixi.js

 

I've set up the viewport this way:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Then I set up the renderer width and height to full screen with devicePixelRatio (TypeScript code there):

this._renderer = PIXI.autoDetectRenderer($(window).width() * (<any>window).devicePixelRatio, $(window).height() * (<any>window).devicePixelRatio);

I use exactly the same assets than my pc browser (1576 x 962), so if my iPad would use the retina mode it should handle them without any issue (I plan to make a x2 later), however they are displayed like if the iPad wasn't a retina one.

 

Any ideas?

[Webravenz]

I think it's because the canvas element take the retina width, and go over the screen

 

try to give it the screen size :

this._renderer.view.width = $(window).width();this._renderer.view.height = $(window).height();

[Aymeric]

Ok, after several (hundred) tests I figure it out:

- no viewport.

- the renderer code:

this._renderer = PIXI.autoDetectRenderer($(window).width() * (<any>window).devicePixelRatio, $(window).height() * (<any>window).devicePixelRatio);

It works fine, my content is / 2. I generate a 4096 * 4096 spritesheet, but it's not able to load on my ipad retina. If it's 2x spritesheets of 2048 x 2048 no issue.

Then I saw this issue: https://github.com/GoodBoyDigital/pixi.js/issues/94 and this comment is very strange.

 

Does anyone have more informations?

[inductible]

I can validate Aymerics suggestion to modify the 'standard' viewport meta tag properties (initial-scale=1.0, maximum-scale=1.0) - I'm using just "user-scalable=no", and my pixi canvas remains acceptable on high DPI devices as a result.

 

However...

 

With iOS7 there's now a flickering black line along the edge or both edges of the canvas when I omit the 'initial-scale, maximum-scale' attributes! Nightmare. I'm looking for a way to balance high DPI crispness without visual artefaction introduced by this important browser.

[AshKyd]

Since this post still has a fair bit of Google-power, I'm going to gravedig to say "this exists now!" and point out the Pixi 2 release notes which include an example of how to implement retina support.