Sprite Animation
Hey, everyone!
This week we thought we’d share a bit about our pipeline for character sprites, from initial design to animation.
There will be a lot of animated elements to do for Psychroma, including but not limited to visual effects, background elements, special cutscenes, default/special character sprites & possibly even character portraits. Pixel art animation is very low-memory, quick to execute and scalable. This is basically what influenced our decision to go with a pixel art style with Psychroma. Since we knew we wanted to increase the amount of visual effects and animation but don’t have the rigs to support high-res 2d art or 3d animation, we knew pixel art would be the best solution and the most flexible, quick process.
All that being said, we had never worked in pixel art before Psychroma, so there was a bit of a learning curve. Luckily, it wasn’t too much of a leap as artists to work in this new style, since pixel art still draws from a lot of design fundamentals and techniques. Honestly, it was the breath of fresh air we needed for our style to evolve and inspire us to do so much more with our designs. Working in pixel art software Aseprite opened up the ability to animate quickly directly in the program, without requiring an Adobe software to render or animate or sacrificing a ton of RAM to run.
When we began work on the character sprites, we started with rough concept designs in photoshop. Lindsay’s preferred pipeline still includes a high-res digital drawing that then gets translated to a reference layer in Aseprite.
For each character we needed to work out basic characteristics for each character that felt natural, made sense for the story and allowed the artist a lot to work with in terms of costuming and physicality. For example, we knew for our main protagonist that they are a digital “medium”, so we wanted their outfit and style to be reflective of a spiritual or shamanistic person.
After the rough sketch, Lindsay imports the drawing into Aseprite, under a “reference layer”, which is basically a type of layer that is locked and uneditable. This makes it easy to work off of without manipulating it by accident. This is the part where we have to take sizing into consideration. The size in which you work at this stage determines and influences the way the sprite will look in the game, so we have to set our canvas size with that in mind. Our resolution is 640x360p, which means that all of our sprites have to be sized to 128x128p. This is the size we set our sprite canvas to in Aseprite.
After tracing the line art, Lindsay then goes in with color. Often in pixel art, having a set color pallet for all your assets ahead of time saves you a lot of time with this stage, as well as ensures that the finished art looks cohesive when it’s ready to go into Gamemaker. Rowan and Lindsay came to a consensus for what colors to use in Psychroma’s prototype so that the tilesets matched the sprite work. There is a wonderful free color pallet website we like to use called Lospec where we take a base sample and add what we think we need to it. Here’s the base pallet we used.
The coloring stage can take awhile due to experimentation and assessment from all the team members. But after a few passes we usually find one we like the best. Again, the great thing about Aseprite is it’s speed and ability to edit on the fly.
Next is the animation step. Depending on our needs, certain sprites need differing amounts of animation. For our main character, we need them to be able to walk, idle, lay in bed and sit up from the bed (and this was just for the prototype). But generally with character sprite animation, we like to start with the basics first, which includes walking and idling. Walk cycles are notoriously difficult to get looking right and depending on your render style, may be more complicated than others. For our animations we wanted to give them a sense of subtlety and weight, as well as use frame-by-frame as opposed to a puppet animation or rotoscoping. This meant gathering reference as well!
Guidelines and references really help with shape and volume consistency in your animation. Lindsay often works with 3 reference layers, one with the key frames of the animation, one with the default rendering of the character and the “onion skin” layer setting turned on, so to see the last 2 frames of the animation at all times. Also, this is where we find breaking up each moving part into separate layers really helps keep things neat and organized. In the end, the Aseprite file looks something like this.
Finally, after much reviewing and editing and re-drawing, and we are happy with an animation, it’s time to export. Exporting is very simple in Aseprite, but can be a bit unintuitive at first. There are specifications that come down from the programmer about how to name the exported file and what file type to export it to. We go with the most common method, which is called a sprite sheet. This is basically a strip that resembles a film reel, that’s broken up by each frame of your animation and then is saved as a .png or .jpg file. The strip is then imported into Gamemaker and Gamemaker can easily and systematically read each frame as an animation and turn it into an animated sprite automatically. Sprite sheets are super fast and easy to do, and it’s great for importing a ton of sprite animations all at once. And the greatest thing about them is how small they are! Here is what a sprite sheet looks like, and here is the animation as a gif.
This method has really allowed us to change and update polished assets really quickly and seamlessly, which is perfect for an agile, iterative style of development.
We hope you’ve enjoyed this week’s devlog! Until next time.
