For our second devlog our Tech Artist Basti will take you behind the scenes of our announcement trailer and show you some of the things we did to take our pixel art from merely imitating the past to something that resembles your romanticised memories of it - a guide on taking pixel art "to the next level" if you will:
Now first, what is the problem when we "just" imitate the past? When we take a look at screenshots from our childhood games, most of what we like about it is the memory of playing that game as a child. If we had no connection to those games already, we probably wouldn't find them appealing today. To prove my point, here is what Aethermancer looks like without any of the effects. Not very exciting, right? (Even though the pixel art itself is still amazing!)
To make it more exciting we first add some more movement to the scene. Now I'm no pixel artist, so I can't animate anything in the environment. What I can do however is add some particles. That's a good start, but I think we can do better.
The next steps are a bit more technical, but I hope it's entertaining for you none the less. One thing modern games really like to brag about is how good their lighting is, and we wanted to do that as well. There's just the problem, that lighting in 2D doesn't look as convincing as it does in 3D... at least by default.
As you can see we have some problems with the lighting. For example the player light shouldn't light up the top of the cliffs. To make the lighting a bit more "natural", we need some additional information about each object in the scene. Mostly that is "Is this object horizontal or vertical" and "How far above the ground is this pixel". When we visualize that information, we get a colorful image like this one:
Now with that additional information we can tell the lights to only light up objects that are facing the light and are not too far above or below it. This helps us create an illusion of depth so the player has a better feeling for the space they are moving through. That's already pretty good and conveys the mood of the scene a lot better than before.
Still, there is not a lot of movement going on. So next we're going to add some wind to blow through the trees and the grass. Our goal here is that the scene never really stands still. Right now the "wind" consists out of two parts. The first part is this randomly generated texture that represents the wind in the environment:
The second part is caused by the movement of the player. When you walk around, the Aethermancer leaves an invisible trail that affects the wind around themselves. With this trail we can fly through the fields and push the wheat aside. They also wobble back into place once we're gone.
Lastly every game with a gloomy mood needs fog, so we're also going to add that. Now for the fog to be convincing, we need to take the rest of the effects into account. First we need to make sure the fog only covers things up to a certain height, so we keep the illusion of a three-dimensional space. Also the wind needs to interact with the fog. If you look closely, you will see the pattern of the wind texture in the fog.
Now with all those little tricks we managed to make the scene look a lot more lively and gloomy at the same time. And that's the final result we arrive at:
Hope you enjoyed these behind the scenes insights into our game! Also, for better comparison here's the before and after in one video:
