Recreating the Wanderers Journey

For as long as I can remember, I loved hiking. More precisely, I loved hiking but hated going back the same way I arrived. A loop though? Perfect. Each step forward brings the promise of discovery. Nothing beats for me the feeling of walking up a slope and discover a magnificent vista - finally see the destination, a lake, contemplate a sunset, or find the perfect camping spot.

It’s this feeling of exploration and anticipation that I aim to capture in the travel screen of Infinite Storyes. The discovery of the unknown is thrilling, but in the case of a game it can be problematic. What if I miss out on something important? That’s where the procedural storyteller comes into play, ensuring that you get a satisfying story whatever your decision is. But that is a story for another time.

The painting behind it all

My reference picture for this is a painting that got stuck into my head ever since I first saw it. For the longest time, I could not remember its name, but I recently stumbled upon it, and now, it is my beacon. I give you the “Wanderer above the sea of fog” by Caspar David Friedrich. This is almost everything I want from my travel screen, with the exception that I want my character to feel more insignificant when faced with the unknown, and be therefore much smaller in the frame.

My goal as this first iteration of the travel screen is to recreate this feeling.

Implementing the Parallax Effect

To get this feeling, the solution I considered is to use the parallax background. This takes several fixed sprites that compose, together, an image, but each layer move with different speeds relative to the camera.

This effect is mostly used in side-scrollers game, to stimulate the effect of a distant horizon slowly moving as your character zip through the level. In this setup, the background sprites are made to repeat on the x-axis. In my case, however, the whole x-axis encodes meaningful information, and I need to be able to see almost all the horizontal extent of each layer without “running out” of the distant layers.

The way I solved this was to have only slightly different speeds on the x-axis, but having a strong parallax effect on the y-axis. This way, the character has the feeling of coming up a mountain and uncovering what lies beyond, but when moving on the side, it just give a slight effect that makes it feel less flat.

To determine the proper distance between the layers, when drawn in the pixel art editor (I use Aseprite), I experimented quite a bit, and found a currently satisfactory middle ground. The composition of the image “at rest” has to differ quite a lot to the final product, because of the parallax effect. To faster get a nice visual, I used this excellent background from Ansimuz, which I resized to my resolution, and reshuffled the layers. Here is the original picture:

and here it is after rescaling and moving around in my editor:

Note how the layers have become separated. And don’t mind the disparition of the moon, I wanted to be able to animate it separately. Here it is in action, in Godot:

Notice the following things:

• the cloud layers are animated, but the motion needs tuning
• my castle and character placeholder art is ever so slightly worse than the surrounding environment… I hope that by the time I get to drawing the actual stuff, I will have make significant progress on this front - or found someone that can realize the artistic side of my vision :)
• the reveal of the name - which will serve as a way to move forward on the map, needs some more work, it can sometimes bug out, and I never managed to smooth out entirely the font being used.
• the camera is controlled by the player, with the standard WASD movement, and you can pan, and zoom, to focus on details.

The Path Ahead

As a first pass, to validate the art style, it is serviceable. I can see this screen being used to plan the next move. The goal will be, in the near future, to be able to generate procedurally part of this image. My goal is to blend procedural and hand-crafted elements seamlessly. Point-of-interest structures will be authored - castles, caves, etc. Maybe structure parts as well (to be able to compose a castle out of basic building blocks), drawn at different resolutions depending on the layer it sits on. Then the landscape shape will be added procedurally, and the final composition made by selecting fitting authored structures corresponding at the underlying world data. The world will be represented as a graph, but that is a topic for a future blog entry.

Once I will start working on the procedural generation of these travel screens, I will go back to smooth out the experience and feel, but for now, I will leave it there. This is also something I’m trying to adhere to: not to be perfectionist, otherwise the game will never get out.

Next week I’ll make a brief detour and go over my pixel-art setup for Godot 4.0. Indeed, I did not find online a complete solution for having both smooth pixel-art and being able to use modulation colors on sprites - I needed this to blend my character with the background. Expect more technical details, and come back in two weeks to an exciting reflection about graphs! In the meantime, whatever you do, keep creating!