For my first post here, I thought I’d talk about my experimentation with trying to create nicer looking trees in a roguelike.
Traditionally, tree’s are usually represented by something like a brown “T” character. While this may look fine and work for other roguelikes, but it runs contrary to the central visual design vision for the game, which is to create as beautiful ascii roguelike as we can.
First things first
The first thing to think of, is how does a tree look from the top down? I came to the conclusion that drawing circles on top of circles, overlapping a single point looked pretty convincing, as long as the “top” circle covered the center points of all of the rest of the circles:
Instead of just creating green blobs on top of each other, we lerp between two colors based on the distances from the center. Not only that, but we experiment with swapping the dark and light colors around:
This gives us a little bit more “proper” looking tree, where the most “light” hits the top. We’ll come back to this a bit later.
The next things to experiment with, is the circle radius size for smoother blends, and the amount of “nodes” per tree. All of the above trees were 3.5 tile radius, 4 node trees. Nodes are randomly placed within half the radius size of the center.
In the pictures above, we generate a few trees with 5 and 6 nodes respectively, while keeping with the previous rule of drawing the top most node in the center, covering up the center points of the bottom nodes. Now, we’re looking a bit more tree like! Next, lets try some larger radius trees!
With a radius of 5.5, the gradients are much smoother, but now they take up a lot more space. They also still don’t look very natural.
So, what does it look like if we were to build an entire forest of trees, mixing varying radius sizes, and nodes?
Not too bad so far. But something is still missing.
We’re not done yet
The next thing to tackle, is breaking up the very smooth and unnatural perfect, consistent gradients. Trees in the real world, have variation in color, so lets simulate that here!
So, we still want to have the gradients from the center out, but now we will modify the lerping value by a random amount:
With only a minor tweak to the value, we don’t gain too much from it. Lets try a larger number!
Hmm, we’re definitely closer, but there is too much variance here, lets tone it back a bit:
There we go! Not only do we have a distinct gradient, but its also a bit random and varies enough to give a believable result. Now that we have that going for us, lets swap the pallets again and see how they look:
Improved results once again! I personally do enjoy both pallets, so lets pick between them at random:
Pretty interesting results! This experiment lead to the the idea of making “lower” nodes darker, and “higher” nodes brighter to help simulate a little bit of height and depth of the trees.
Even with the darker centered color pallet, the results are really convincing.
The final results look pretty great to me. With a little bit of experimenting, you can get some very nice looking, and convincing effects. This can also lead to interesting secondary effects, like the birth of new mechanics or engine tech. Since we’re creating a dungeon crawler, we don’t have much use for trees. This experiment did spark an idea for a new system.
The Canopy System
I won’t go into much detail about this new system in this post. Instead, I’ll share this gif:
I’ll go more indepth with this system in the future. For now, thanks for reading! Feel free to leave a comment or come join us on Discord!
For more information about Ascension, check out our home page.