Joe Kopena

Basic Scaling, Animation, and Parallax Tutorial

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.