jopoo Posted January 9, 2017 Share Posted January 9, 2017 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? Quote Link to comment Share on other sites More sharing options...
Fatalist Posted January 9, 2017 Share Posted January 9, 2017 Your textures need to have mipmaps to look good when downscaled. In PIXIv4 you just need to make sure texture dimensions are a power of 2 and mipmaps will be generated. Quote Link to comment Share on other sites More sharing options...
jopoo Posted January 9, 2017 Author Share Posted January 9, 2017 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? Quote Link to comment Share on other sites More sharing options...
Fatalist Posted January 9, 2017 Share Posted January 9, 2017 Make sure there is some transparent padding around the circle in the png. For the straight line - are you using PIXI.Graphics? Quote Link to comment Share on other sites More sharing options...
jopoo Posted January 9, 2017 Author Share Posted January 9, 2017 Yep, I am still not convinced of quality. If you have a minute here is the source code: https://drive.google.com/file/d/0By-FTOluVRGMMlhWZU9RNm9zdGc/view?usp=sharing Quote Link to comment Share on other sites More sharing options...
jopoo Posted January 9, 2017 Author Share Posted January 9, 2017 also any advice advice on scaling from the centre would be appreciated. I tried changing container to Sprite and setting anchor to 0.5 but it still didn't have desired effect Quote Link to comment Share on other sites More sharing options...
Fatalist Posted January 9, 2017 Share Posted January 9, 2017 I added a one-pixel transparent padding to the devices icon and it looks better - http://imgur.com/a/vztq8 For the lines - Graphics lines are not perfectly antialiased so you can use this class: http://pixi-graph.netlify.com/LineSprite.js . Quote Link to comment Share on other sites More sharing options...
Fatalist Posted January 9, 2017 Share Posted January 9, 2017 1 hour ago, jopoo said: I tried changing container to Sprite and setting anchor to 0.5 Yeah that should be working... Quote Link to comment Share on other sites More sharing options...
jopoo Posted January 10, 2017 Author Share Posted January 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
Fatalist Posted January 10, 2017 Share Posted January 10, 2017 I don't know, my monitor has devicePixelRation of 1 and the devices icon downscaled with pixi looks exactly the same as downscaled with Illustrator. But for your scenario, it does make sense to just use svg. Quote Link to comment Share on other sites More sharing options...
jopoo Posted January 10, 2017 Author Share Posted January 10, 2017 Yeah I just needed to get on as not much time. Hopefully get to play some more with PIXI in the future. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.