Pixelblog – 23 – Parallax Scrolling — SLYNYRD


The canvas in my example is 96 pixels wide, which can divide by 1,2,3,4,6,8,12,16,24,32,48. This is a good size as it gives a lot of options for perfect scroll rates, and you can see the jumps between the increments follows a consistent upward curve, which will result in natural jumps in speed between layers.

Before you get too far along it’s good to test out the motion of your layers to make sure the relative speed feels appropriate for the perceived depth of the image. Generally, I start with my furthest background layer scrolling at 1 pixel per frame, and each layer that gets closer to the viewer scrolls at the next faster perfect rate. Sometimes when I want movement slower than 1 pixel per frame I do 1 pixel per 2 frames, which requires the image to repeat twice on the same screen, as it only travels halfway across the canvas throughout the loop. However, I try to avoid slower than 1 pixel per frame, as the motion can look a bit jittery.

Made in Photoshop

Now I’ll take you through my process to animate parallax scenes in Photoshop, using the frame animation tools. Frame animation in Photoshop is pretty bare bones, but it always gets the job done. With proper planning and organization, I’ve managed to create a number of complex animated scenes with it. There’s something deeply satisfying and almost hypnotic about creating the perfect animation loop under the limitations of frame animated pixel art.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *