Advanced Techniques In Pixelart Animation

ByScarlett Evans

Pixel art is a form of digital art where images are edited and displayed on a pixel-by-pixel basis. It emerged in the 1970s with the advent of early home computers and gaming consoles that had very limited graphics capabilities. Designers worked within these constraints to create intricate artwork and animations using limited colors, resolution, and dimensions (Wikipedia, https://en.wikipedia.org/wiki/Pixel_art).

Early pixel art was used in popular arcade games like Space Invaders and Pac-Man. As home consoles gained popularity in the 1980s and 90s, pixel art allowed games to have animations and detailed graphics despite memory and resolution limitations. Developers mastered techniques like using sprite sheets and frame-by-frame animations to create fluid movement and vivid game worlds.

Today, pixel art remains popular for its retro aesthetic. Modern pixel artists use specialized software to create detailed animations, buildings, characters, and scenes one pixel at a time. The limitations of the medium drives creativity and allows artists to convey complex ideas or stories using minimalist visuals.

Tools and Software

There are several popular programs commonly used by pixel artists for animation. According to Reddit users on r/gamedev, Aseprite is one of the most used software tools for professional pixel art animation. Aseprite provides a wide range of features tailored for creating sprites and animations, such as layers, timeline editing, onion skinning, and converting animations into sprite sheets.

Adobe Photoshop is another common choice, as it’s a versatile graphics editing program with animation capabilities. However, Photoshop lacks some specialized pixel art tools that programs like Aseprite have. Still, Photoshop is used by many pixel artists due to its advanced features and wide adoption.

Other popular options include Piskel, an open source web-based editor, GraphicsGale, which has built-in support for limited color palettes, and Pro Motion NG, which focuses on pixel art game development.

Color Palettes

Color palettes are an essential part of pixel art animation. Since pixel art uses a limited resolution, having a limited color palette is important for maintaining a cohesive and stylistic look. Pre-made color palettes are a great resource for beginners who want to focus more on the animation techniques than color theory. Sites like Lospec offer a wide selection of palettes organized by color and style. When creating custom palettes, it’s recommended to stick to 12 or fewer colors and focus on high saturation tones that pop against neutral backgrounds.

Choosing colors that work well together can be challenging. Knowledge of color theory is helpful for creating balanced, harmonious palettes. As described in a Skillshare course, using tools like Adobe Color can aid in building a color palette based on established color harmonies and seeing how the colors interact (source). Starting with a core triad or tetrad harmony provides a solid foundation. Other tips include limiting colors to 2-3 tones per hue, adding neutrals for versatility, and emphasizing contrast between palette colors.

Sprite Sheets

A sprite sheet is a collection of animation frames in a single image file. Using sprite sheets allows for efficient storage and rendering of animations in pixel art. Some best practices for creating effective sprite sheets include:

pixel art animations utilize sprite sheets to efficiently store and render animation frames.

Optimize layout – Organize similar poses horizontally and animation cycles vertically. This allows the game engine to load only required parts of the sheet. Leave some buffer space between frames to avoid artifacts.

Plan cycles – Design reusable sections that loop seamlessly for walk cycles, attacks etc. Minimize redundant frames by reusing existing ones.

Maintain consistency – Use a consistent number of frames across actions. Keep canvas size, palette and proportions the same.

Allow for expansions – Leave some blank space to accommodate additional frames or animations later.

Minimize size – Use the smallest canvas needed to fit all frames. Output files as compressed formats like PNG to optimize loading.

Animate efficiently – Avoid animating every pixel. Animate only key parts and use techniques like smearing and onion skinning.

Test implementation – View the sheet in-engine early and optimize as needed. Ensure frames match gameplay and flow properly.

With mindful planning and organization, sprite sheets enable fluid expansive animations while minimizing file sizes.

(Source: https://lospec.com/pixel-art-tutorials/tags/sprites)

Frame-by-Frame Animation

Frame-by-frame animation is a traditional technique where each frame is drawn individually by an artist. This allows for complete control over each frame, enabling smooth transitions between frames for fluid motion and advanced effects. According to this article, early cartoons like Disney’s Snow White used this technique to create incredibly detailed and smooth traditional cel animation.

Some of the earliest video games also relied on frame-by-frame animation. For example, the 1980 Atari game Adventure used simple frame-by-frame sprite animations to depict the player character moving. The animator drew each frame separately, adjusting the character’s position incrementally in each frame to achieve a sense of lifelike motion. This technique was common in early 2D games before digital tweening became more feasible.

Special Effects

Special effects can add excitement and energy to pixel art animations. Some creative techniques to try include:

Particle effects – Explosions, smoke, fire, and other particle effects look great when done pixel-by-pixel. Optimize particles to use the least number of frames and colors needed for the desired effect.

Screen shakes – A screen shake effect brings vibration and impact to big moments in the animation. Carefully adjust the intensity, direction, and duration of shakes for best results.

Flashes or palette swaps – Quickly flashing brighter colors or temporarily changing the color palette is an easy way to make attacks and impacts more dramatic.

Creative use of special effects adds excitement without overdoing it. Focus on supporting key moments in the animation when possible.

Parallax Scrolling

Parallax scrolling is a popular technique used in pixel art to create a sense of depth and perspective. It involves moving background layers at different speeds to simulate 3D space on a 2D plane.

To implement parallax scrolling with sprite sheets, you need to separate your background art into layers. The foreground layer will scroll faster than midground layers, which scroll faster than distant background layers. Each layer can be animated on a spritesheet to loop seamlessly.

By moving these layered background images at different rates as the main viewpoint scrolls, you can achieve an illusion of depth. Distant layers will scroll slower in relation to closer foreground layers, creating a multi-layered parallax effect. This adds visual interest and realism to side-scrolling or top-down pixel art games and animations.

Parallax scrolling takes advantage of the limited resolution in pixel art to portray 3D spaces efficiently. With thoughtful layering and speed differentials, you can build immersive retro worlds and environments. The technique has been widely used in 2D games like Sonic and Mario to make flattened worlds feel vibrant and deep.

For pixel artists, it’s a valuable skill for portraying depth. Experiment with separating background art into 3-5 layers and tweaking their relative scroll speeds for best effect. With practice, you can master multi-layered parallax movement to bring your pixel art to life.

Source: https://www.slynyrd.com/blog/2019/11/12/pixelblog-23-parallax-scrolling

Dynamic Lighting

Dynamic lighting can add a lot of atmosphere and immersion to pixel art games. Simulating lighting changes like day/night cycles or flickering lights helps set the mood and enhances gameplay. There are a few techniques for implementing dynamic lighting in pixel art:

Normal Maps – Applying normal maps to sprites allows you to simulate lighting interactions without altering the base sprite. Normal maps can create the illusion of bumps, dips, or grooves in a flat 2D surface to react with light sources (https://www.reddit.com/r/gamedev/comments/5eamph/dynamic_lighting_and_pixel_art/).

Palette Shifting – Cycling through color palettes for a sprite can simulate effects like flickering lights. Going from a well-lit palette to a darker one creates the effect of lights turning on or off.

Vertex Coloring – Using vertex colors to tint sprites can simulate global lighting changes like the transition from day to night. Slowly shifting vertex colors from warm to cool tones transforms the scene.

Light Masks – Masking out areas of light and darkness that move over a scene is an easy way to create moving light sources or shadows.

With clever usage of normal maps, color palettes, vertex colors, and masks, dynamic lighting can greatly enhance the atmosphere of pixel art games.

Animation Principles

When animating pixel art, it’s important to apply the 12 principles of animation. The principles help make the animation more realistic, dynamic, and appealing. Taking the time to properly implement techniques like squash and stretch, anticipation, staging and follow through will elevate pixel art animations.

A key principle to focus on is anticipation. This is the preparation for an action, like a character crouching down before jumping. Building proper anticipation before movements helps communicate what will happen next. It adds weight and believability to the animation. For pixel art, even a few extra frames of anticipation can make a big difference.

Follow through is also important. This means objects continue to move after the action is completed, like clothing or hair still swaying after a character stops. Generous follow through can add life and personality to pixel art characters. Subtle effects like lingering dust clouds after a character lands from a jump can also enhance the animation.

Exaggerating movements and poses is another effective way to inject expressiveness and appeal into pixel art animations. Since there are less pixels to work with, pushing key poses further can help communicate emotion and energy.

Study real life movement and motion to help implement the principles. Observe how objects accelerate and decelerate when starting, stopping or changing directions. The principles will bring polish and sophistication to any pixel art animation sequence.

For more information see: https://pixune.com/blog/12-principles-of-animation/

Optimizing for Retro Hardware

Pixel art animation originally emerged as a necessity due to the technical restrictions of older gaming hardware like the Game Boy, NES, and SNES. These systems had very limited processing power, memory, resolution, and color palettes. For example, the original Game Boy had a 160×144 resolution black and white display and could only display 4 shades of grey. Working within these tight constraints required pixel artists to carefully optimize their animations.

Some tips for optimization include:

  • Use the limited color palette strategically. Choose colors that will provide the most contrast.
  • Minimize the number of colors per sprite. Stick to 2-4 colors for best results.
  • Keep animations simple and frames limited. Too many frames will slow down the animation.
  • Reuse sprite sheets and backgrounds when possible.
  • Use dithering and shading techniques to create the illusion of more colors.
  • Focus the animation and action on the center of the screen since the edges get distorted.
  • Avoid large solid black areas which can create visual artifacts.
  • Test the animation on real hardware whenever possible for optimal results.

With clever optimization and artistic skills, pixel artists were able to create beautiful animations and games even with the extreme limitations of retro gaming systems.