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

resize hidpi issues


jopoo
 Share

Recommended Posts

Hi, Just started using Pixi.js for a small interactive animation. How it works:

650x320 max dimension but still using devicePixelRatio to set resolution for PIXI. It needs to be fluid - scaling the canvas to outer div using 100%. So canvas is set to 1300x640 in retina but still retains 640x320.

Everything is working fine apart from when resolution is set to 1 icons looks awful (please see screengrabs)

I'm loading svgs as textures into PIXI sprite. The svgs have been saved out @2x their size and then set to correct width and height using scale.

I could just save two versions as pngs and then load depending on devicePixelRatio, which I've tried and although an improvement the canvas still scales down further for mobile and still looks bad.

Any suggestions welcome.

My render options:

view: _canvas,
transparent: true,
resolution: _res,
clearBeforeRender: true,
antialiasing: true

i basically need smoothed images when scaling. oN another note how to scale from center with Container, pivot hasn't worked? 

@1x.png

@2x.png

Link to comment
Share on other sites

Thank you think it worked (ignore red ring) saved png at 128x128 scaled down 38x38 although its not as good as I hoped.

Surely there is a better method for scaling down, bit of a drawback as need to be able to smoothly scale things.

Is there anything else that can improve render image quality?

Failing that does anybody know of a way of scaling (fluid) down a div with lots animated elements who have absolute positions and set width and heights, so that they retain positions but just scale proportionally to the div? 

Screen Shot 2017-01-09 at 18.05.22.png

Link to comment
Share on other sites

Thanks for having a look. Its strange because everything looks crispy in hi res but normal resolution things start to look quite bad and I need to upscale and downscale. I think client will have an issue with the scaling so going with svg instead of canvas I think.

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