Current development status and new pixel art animation techniques
Hello everyone! Long time no see since our last update. First of all, we feel the necessity to say that this is going to be one of the most challenging updates to write down, both in terms of development and content. We found ourselves in a point where we can’t post much graphic stuff since newer enemies, stages, and scenes enter the spoiler territory and could potentially ruin the surprises of the story.
The last few months have been particularly difficult regarding the game's progression for multiple reasons. On one side, I faced some health issues that have led me to slow down and avoid pushing myself too hard with the project. Having only one person in the studio in charge of the animation process is really hard, more so considering the level of detail put into every element in motion. I’ve spent most days working almost 12 hours in front of the monitor, and finally reached a point that compromised my well-being (with all the pressure of the delay as the cherry on top).
The team got a little preoccupied about it (I even had to go to rehab for severe back problems) and urged me to spend less time at work while they helped me with some of my pending tasks as much as they could. Now I can say that I’m in better shape and conscious about when to take longer breaks from the project, but this will inevitably resent the development process and the possibility to end milestones ASAP.
The other significant setback has been the final boss, which resulted in a challenging experience both in terms of design and animation. The scenery, traps, and almost every element that takes place in the final stage it’s humongous and led us to rethink specific mechanics and find new animation techniques due to its size.
Another graphic challenge was the reverse map. Remember the inverted castle that can be visited in Symphony of the Night after fighting Richter? Well, we are doing something similar, but instead of turning everything upside down, we are changing the assets of all the backgrounds and adding entirely new wall decorations, platforming surfaces and an all-new set of enemies due to an event that takes place after the player has visited the entire map. We think that this infuses new life into the game’s last act, expanding both the narrative and gameplay experiences.
The downside of this process is none other than the time-consuming labor of matching the new aesthetic elements with the already designed backgrounds and gameplay structures. Sigrid is working on the color-adjustment for this stages while finishing the assets that modify the gameplay structure.
On his part, Carlos is fine-tuning the code and testing bosses, menus and everything else that runs on the back.
And now onto the most asked question: “When will I be able to play the game?”. We know that you are eagerly waiting for it, but a realistic decision from our part will be to move the release window to 2019 (no specific date yet). We’d love to give you an earlier date but this is the state of things as of now. If we are capable of speed things up we’ll keep you informed.
With all dev-related matters out of the way, we can show you some exciting things and techniques that could also help other pixel artists when facing the same problems as we did. Check them out.
Working on the final Boss
The design and size of this boss ended up being more complicated than expected, and as much as we’d love to give away all the specifics that surround this character, it would be a bad idea to reveal its entire appearance (clearly for story-wise purposes).
Despite this, we can show certain parts to approach the new animation process required for most of its assets and share some info regarding the size and scale of the combat so that you can have an overall idea of the challenges faced during its development.
One of the main concepts of this design was to conceive a platform focused clash, where players had to reach its different hit-points while keeping an eye on other enemies and traps deployed by this character.
With this in mind, the first thing that we did was creating a path for Subject W to move from one hit point to another, considering on the overall scale of the stage. Different ideas were taking into consideration while defining the bones of the stage such as:
- The distance that a player can reach between multiple surfaces, both in single and double jumps
- The traps that will appear from point A to point B (hit-points) and their progression to increase the difficulty curve after each hit (PLFC boss routines consist on doing three hits, either by using skills or solving situations).
- The height of the stage and the camera tracking to avoid motion sickness after repeated jumps.
- Balance between safe areas and delusive/unstable surfaces through the map.
- Incorporation of additional enemies (other Subjects) to increase the difficulty due to the accumulation of skills and enhancements acquired along the game.
- Position of the different characters and elements that can appear through the combat.
- The direction of the camera during cutscenes to show how the boss changes after each hit and the visual guides needed to represent the curse of action.
- Planning and structuring animations by pieces to differentiate interactive parts, attacks, platforms, decorative elements + the use of speed variations to enhance specific effects on multiple sequences.
Taking all of this into consideration, we outlined the space in our vector grid where the rest of the designs have been made. Everything is scaled into this editor so we can change easily every representation of an object/platform/character and translate it later into pixel art.
After this, we created a raw environment of 3 x 3 stories inside our Unity’s level editor to do real-time tests with Subject W. That was the time to fine-tune the distance between platforms and position the placeholders for the different objects before stepping into the drawing board.
Frames upon frames of animation
We ended up with a boss composed of 100 ~ layers. Each layer has 30 frames of animation making a total of 3,000+ individual drawings, with almost the size of the entire scenario. It’s the biggest component of the entire game.
Additional sequences were added later in Aseprite to create easier animations, but at the beginning, we couldn't relay in our trustful pixel art program to develop the massive parts of this character. Performing this task with a highly detailed illustration per frame was undoable, so we started searching for other tools that were able to transform, rotate and distort the size of a layer without redrawing each frame separately.
The solution to this problem appeared to be the use of triangular meshes on .png files that allowed us to establish transformation points on specific frames inside the timeline and let the program distort each sprite on its own.
It was also essential to find a tool that allowed us to work with the lowest resolution possible since our graphics required pixel-perfect rotation and scaling.
Some of the programs that we tested where:
- Spine: possibly the best tool to animate this kind of sprites and export them later to Unity. Supports pixel-perfect style animations disabling the linear filtering in Settings, and also has a bone system and a mesh tool. On the downside, it is not the cheapest program, and its Essential version doesn’t support the mesh option (our main need).
- DragonBones: a free Chinese copycat of Spine. Almost the same tools and functionalities as the previous one, but we didn’t manage to use the mesh tool properly (it returned the graphics to non-pixel perfect sprites or didn’t export the sequences correctly).
After Effects: it ended up being our solution to import our layered document and animate everything at once with the use of its puppet pin tool. If you decide to use it for animation, you can use the 30-day trial or download it for a low monthly price for the period of time you’ll need it.
After Effects -or AE in short- isn’t the most friendly program out there, but it served its purpose in order to simplify the animation process. These are some of the pros and cons of pixel-art animation with After Effects:
- You can import a multilayered Photoshop document with each layer positioned in place in your composition.
- Pixel perfect rendering.
- Easy to use puppet tool with different mesh options.
- Easy to use velocity curves and adjustment layers (color balance, etc.).
- It can import groups composed of layers, keeping things organized.
- Able to shorten or enlarge sequences while maintaining the equidistance between keyframes and create different starting points inside a loop via code snippets.
- If a .psd file is changed outside After Effects it doesn’t update the composition with the new elements.
- Also, if you create a mesh over a sprite and the sprite has more or fewer pixels it would end up breaking the animation/mesh or not working at all.
- The pixel transformation is not always as clean as you want it to, so it requires fine-tuning in Aseprite/ other pixel programs that support .png sequences.
- It can’t export all the layers separated at batch in once, you have to export them one by one (there are external plugins to do so, but didn’t manage to make them work properly).
This is a sample of one the parts created with puppet pins. Instead of redrawing the lumps frame by frame (it would take hours to obtain a fluid animation like this drawing free-hand style), the program does all the heavy lifting by transforming the points assigned to each part of the sprite.
Creating a composition to animate and exporting the layered drawing
As we stated in the pros and cons above, AE doesn’t update a .psd file once is imported, so we needed to figure out another way to import layers that allowed us to make changes if necessary without losing the already made animations. Our solution was to check the -File > Generate > Image Assets- option in Photoshop which exports all layers separately with .png extension in real time and later import them at once to After.
Ordering 100 layers in the timeline was a little tedious, but we didn’t find another solution at the time. Next step consisted on marking all layers with the dotted line icon inside the timeline’s quality and sampling checkbox.
What a mesh!
With the composition ready to animate we used the puppet tool, establishing a simple mesh and adding puppet points in the key areas that we wanted to move or deform on each layer.
Usually, three keyframes (initial, middle and final) are enough to create a good animation, but you can also add multiple keys to generate a great, detailed movement. The first and last keyframes are left untouched since they will become the standard position of the sprite. It’s the middle key the one that we need to move, so the loop goes to this position and returns to its original point later. To show the keyframes the layer/s need to stay selected while pressing the U key. The F9 key (also right-clicking the frame and going to > keyframe assistant) adds ease In and Out velocity parameters for a smooth transition between keyframes.
The composition settings were designated to 25 frames per second with a non-specific timeline set up. At first, we exported the layers with 4 seconds of frame rendering, which resulted in 60 frame animations (reeaaally smooth but extremely heavy for Aseprite when we needed to import a ton of .png sequences into a single file. The other downside was that most of the frames required polishing, so we decided to shorten the anims with a 2 seconds frame rendering (using the stretch option accessed by right-clicking the columns on the timeline). This way the keyframes keep their equidistance, giving us a 30 frame animation, way more manageable considering the number of layers.
Comparison between a 60 and a 30 frame sequence. The 30 frame animation was smooth enough and required less rework + it’s more manageable.
Exporting the sequence to a pixel-art program
Now with the render bar/ work area cropped to the 2 seconds mark each layer is exported separately by clicking the dot of the timeline (solo option) to isolate its content and send it to render (ctrl+M).
The render queue shows the selected timeframe and a bunch of options. For this process we created a specific profile with a set of parameters that fitted our needs:
- Render settings: at 15 fps (the speed used by us in most Unity anims)
- Output module: png sequence, RGB + Alpha (to preserve transparency around the objects)
After the export, we end up with a folder full of png's named in sequential order. When the first .png is dragged into Aseprite the rest will follow the chain import and... voila! You have a 30 frame animation ready to go in .ase format.
Now all the misplaced pixels and surface spikes are erased.
The jagged lines and shapes are cleaned to obtain a sharper animation. It takes some time to edit all the frames of a sequence, but it’s still less time consuming than animate from scratch. The other benefit comes from being a mechanical task, so other members of the studio can help with the process and speed things up.
In some cases, the layer order is altered to create a more natural movement, and some frames are shortened to avoid repeated frames originated by the ease In and Out interpolations of After Effects.
This is the final animation of the first sprite shown. Some effects were added later on Aseprite using the FX tool to blur green circles and create the glowing effect. The white reflection on top of each lump is drawn by hand.
Well, and that’s more or less the animation process using a mesh tool outside Aseprite. I will encourage game designers to use this option IF they work well with the Adobe suite, but probably the best option is to use the Spine program if they can afford it.
The Secret labs
Well, they are not “secret” per se, but we called them like that because of their dark aesthetic and the isolated feel of their design. Inside this subdivision of G.E.R. the bioengineering team tests the other Subjects (Were did they come from? Is every safety protocol secured?) so a lot of surprises can happen around this part of the facility.
We are always worried about the superposition of characters and interactives with their backgrounds, but this time we didn’t face the same kind of trouble. Other labs that have clearer walls needed subtle color gradients applied to them to create a contrast and help the interactives to stand out. The challenge with this kind of scenery was the opposite: trying to blend a little these elements with the overall tones of their surroundings.
The use of color grading adjustment layers helps merge the different tones and adds more richness and depth to this stages.
When we were designing the multiple assets for this labs, we’ve opted to change the white/clear surfaces with metallic ones, going for a more industrial, cold look. New machines have been designed for this part with orange signs to help them stand out and give you tips about where to go or what things can be used. We've also added a lot of glass elements with a vibrant blue-ish color enhanced by the use of highly contrasted color curves.
Background walls are composed by a set of desaturated green layers behind a dark gradient to showcase the absence of light (it is a bad idea to isolate dangerous light-absorbing forms inside a bright environment). The glasses on the back are tinted with darker colors, giving the notion of solitude and mystery. What things can appear on the other side?
The containment tanks can be seen alongside this rooms, and some designs represent that not everything is going to be as expected for the scientist that work with this Subjects.
This one is not a regular tube...
And that’s about it!
Even with the shortcuts showed in this post, the design process and the amount of animation conceived the last months was overwhelming, more so considering the pile of setbacks that we faced. In any case, we think that ending the game with a huge battle and putting all things at stake would be a cool gaming experience, so all the hours put into it will be worth it.
We hope that this info is helpful to devs and amateur artists alike. It’s hard to find detailed pixel-perfect bone and mesh tutorials out there, so at least we can contribute to the gaming community and shed some light in the use of techniques that don’t require free-hand pose by pose animation.
See you around, and don’t forget to comment! Now we can answer each backer individually with the improved message system of Kickstarter ;)