Jump to content

Retina support.


Recommended Posts

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 !!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;



renderer.context.scale(2, 2);


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





I can't see any result

but only if I add line to


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

Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 2 months later...

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.




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.

Link to comment
Share on other sites

  • 1 year later...

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.

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.


  • Recently Browsing   0 members

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