Watch Instead

The Challenge

Pixel art animation is like gardening, but instead of planting seeds, you meticulously place each flower, leaf, and speck of dirt by hand.

In my first game, Return, I crafted over 450 frames of animations for the player's character. With 30 enemies, bosses, environmental elements, and additional characters, that's a total of 3000+ frames of hand-drawn pixel art.

In my latest project, players can customize characters with helmets, chestplates, pants, boots, and backpacks. In a looter shooter game like this, a diverse collection of clothing is crucial for the player. With thousands of outfit combinations, each requiring frames for animation, the workload multiplies very fast.

The Solution

Faced with the task of animating each armor piece individually, I explored alternatives to streamline the process.

Sprites are made up of pixels representing red, green, blue, and alpha values. Since shaders read the RGBA value for each pixel, I can utilize the RG channels on a map sprite to represent XY coordinates on a separate texture sprite. I could then apply the color from the texture to the map using the coordinates. Since I’m not using the blue channel for anything, I can use it to differentiate sections of the map.

The Innovative Workflow

The workflow involved creating the base animation for the character using Aseprite and drawing the base map over each frame.

I then imported the map into GameMaker and implemented a skin constructor to create a struct that could have textures applied to maps. The end result? A streamlined process where animations only needed to be done once, and enemies and human characters could be easily created by changing the skins applied to their maps.

Taking it a Step Further

I added a debug view that allows me to customize the sex, skin color, hair style, and hair color. I render these details onto the skins using surfaces before they’re applied to the maps. In the future I plan to move this logic into a character customizer that the player can use.

Conclusion

This shader technology is simple yet powerful for sprite alteration, saving me hundreds of hours better spent on the development side.

If your game's character requires extensive customization and you don't want to resort to rendering a 3D model as pixel art or animating by hand, this method could be perfect.

Download GameMaker example project