Animating pixel sprites can be complicated. You will need some basic understanding of motion, but other than that anyone can do it!
This article will explore the basics of animating with HypeHype's PixArt tool, plus some tips and tricks for more general use.
Frames are the individual images that make up an animated sprite. When frames are played one after another, they create the illusion of continuous motion. In HypeHype's PixArt editor, you can have an unlimited amount of frames, allowing for intricate animations.
The speed at which frames play can be changed in the PixArt editor's settings. Simply tap on manage, scroll down to the bottom, and move the slider or enter the number under Animation Frames. A smaller number will make all frames play faster, while a higher number will do the opposite. Every sprite frame will be shown for "n" app frames, where "n" is the Animation Frames number. Bear in mind that the app runs at 60fps, which means that with the default setting of 12 Animation Frames, each frame plays for 0.2 seconds.
Animators usually work with keyframes and in-betweens. The first refer to the key points in the animation, while the second are the frames in between the key moments. The in-betweens help make the animation smoother.
Frames can either be created from scratch, or duplicated from a previously existing frame. To do either, go to the Frames menu on the bottom toolbar and tap on the hamburger menu. Here, you can select to either Create, Duplicate, or Delete a frame.
Frames can't be moved around at the moment. This is a feature we will work on in the future. For now, there is a trick you can use to move frames around:
At this time, it is not possible to set a speed for each individual frame. One way to set a singular frame to last longer is to duplicate it. You can do this several times until it feels right. You can also change the Animation Frames setting like explained above, although this will affect all frames.
Onion skinning is a technique used in animation to see the frames before (or after) the selected frame. In the HypeHype PixArt editor, it is possible to see up to 3 frames before the current frame. You can also turn this feature off by moving the slider to 0.
It is particularly useful when animating to see how movement will flow in between each frame.
This can be done the same as with any sprite: Open the Build menu, navigate to PixArt, and select the sprite you want to add. You will see that it is previewing the animation on this menu. From here, you can either drag it or tap on the scene to add it.
In order to make it play the animation, the PixArt Controller node needs to be added to it. This will not only enable the animation, but will also allow you to control the sprite. For more information on how this works, see our documentation.
Bear in mind that all animations in PixArt are looping!
Remember, animation in pixel art can be challenging, but with practice and dedication, you'll see improvement over time. Enjoy the process and keep experimenting!
Experiment: Try different techniques and styles to find what works best for you.
Seek Feedback: Share your work with others and be open to constructive criticism. The easiest way is to publish your work and ask others for feedback.
Analyze Classic Pixel Art Games: Look at games with excellent pixel art animation like "Super Mario," "Sonic the Hedgehog," or more recent titles like "Shovel Knight" and "Celeste."
Use References: Don’t hesitate to use reference materials, whether they are real-life videos, other animations, or even live-action footage.