Joe Kopena Posted September 10, 2015 Share Posted September 10, 2015 In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker:http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ I hope it's of use to somebody, and would love to hear any comments about any errors or sub-optimal code.Thanks! Darker, coter and OnGe 3 Quote Link to comment Share on other sites More sharing options...
darkoverlordofdata Posted October 21, 2015 Share Posted October 21, 2015 This is great, I haven't seen all of this info tied together before, mostly I've found bits and pieces all over the web. I have a question about the use of 2x files. I've seen these used in IOS demos, but in Andoid demos, the usual advice is to use the pixel ration as a scaling multiplier for a single set of images. Why should I use 2 sets of files? What is the benefit over soft scaling? Quote Link to comment Share on other sites More sharing options...
Joe Kopena Posted October 21, 2015 Author Share Posted October 21, 2015 Thanks, I'm glad you got something out of it!I believe it's the same as for the Retina displays. The DPI on high end Androids is similar or even above Apple devices at this point, so you'd want to use hi-res images for the same visual quality reasons. Even my now aging S3 has a ridiculously good display compared to my laptop, and requires double scaling the assets to get a useful image size. My assumption is that this issue is mostly only talked about in terms of Retina because:It's more recent that there are such non-Apple devices;The capability is not as conveniently branded under a single trademark buzzword ("Retina");There's a lot more variance across Android devices so it's similarly not really meaningful to discuss as an Android thing and there are literally billions of Android devices to which it doesn't apply.But if the DPI on a device is high enough, I don't see why you wouldn't apply the same techniques. That said, I don't do this professionally or anything, so there could certainly be something I'm missing. Quote Link to comment Share on other sites More sharing options...
darkoverlordofdata Posted October 22, 2015 Share Posted October 22, 2015 Well, it's brilliant. I applied the @2x strategy on another tutorial I've been working through, and the difference was jaw dropping. When viewing my page on both a nexus4 and a samsung galaxy, all the graininess went away, and I no longer see the individual pixels. Quote Link to comment Share on other sites More sharing options...
mattstyles Posted October 22, 2015 Share Posted October 22, 2015 Just be careful to balance up tip-top images with the added weight of all those extra pixels, particularly if your target market in mobile, where a 3G connection is only going to exacerbate. Usually I think the crisp images outweigh the extra load time, but its unique to the use-case. Quote Link to comment Share on other sites More sharing options...
CragVFX Posted October 27, 2015 Share Posted October 27, 2015 This was extremely helpful! Thank you a ton, I had no idea about the "resolution: window.devicePixelRatio" ... which fixes all of my mobile quality issues! Quote Link to comment Share on other sites More sharing options...
psygnus Posted October 27, 2015 Share Posted October 27, 2015 Thank you for the effort!Nice tutorial very helpful! Quote Link to comment Share on other sites More sharing options...
Darker Posted October 27, 2015 Share Posted October 27, 2015 Bookmarked. I'm going to need this really soon 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.