Stylish Waterfalls: The Journey [1/2]

In our last art update I outlined the creative steps that went into the production of the Bindstone map.  I finished off with the next steps, and in that list as a final bullet point I boldly and confidently stated, “animating the waterfalls will likely be the last step in this process and should finalize the map!”

Well, the map isn’t final. The waterfalls are though! Let’s talk about it.

First let’s break down what’s in our waterfall. Rocks, moss, water (river/stream/pool/whirlpool), and lily pads are a pretty good summary of the basic parts. You can see a screenshot of the final look for this stuff below. (Note: the buildings, tile, light trees, and stone outside the waterfall path are all works in progress and not complete.)

My 3D pipeline was already complete and the general look for the waterfall stones had already been defined structurally based on reference. I’ve described this in detail in the previous article, but essentially there are two primary styles of stones in the waterfall area. There are organic rounded shelves of the waterfall, and more blocky and chiseled stones. I’m going to pick up where the previous article left off and discuss the process of working off those 3D renders and taking the asset to completion in Photoshop.

By the time I got to the waterfall area, I had already gone through and smoothed the rest of the map. The process for smoothing was largely a mechanical one where I paint over the original rough 3D render and preserve the lighting information. This is to provide a uniform paint layer to work from, but I have not introduced many details or textures at this point. I was saving the waterfall and rock section for last, but by the time I got to it I decided it would be good to just paint the final details of that section all in one pass.

So let’s rock out and look at what goes into a stone!

The rocks are the very first area of the map that I was beginning the final detailing of. There was something kind of high pressure about moving forward on this task knowing I was aiming for a final asset. There would be no further buffer of process between the result of this and what would be seen in the game. This was essentially the beginning of the end!

I actually stressed myself out because I really wanted it to look great, but didn’t know exactly how to get there. I rallied and I spent a while researching and studying rocks in other games. My favorite and most influential resource, however, was a tutorial by SephirothArt available on youtube and in an extended format for sale on his gumroad.

Seph’s tutorials were immensely helpful in getting me started. I decided to try painting 5 stones completely separate from the 3D renders to get a good feel for the overall process. I ended up with 6.

I feel like I did a good job with these practice stones. Naturally, there were days where I was unhappy with the results of my practice, some came out better than others. I also took tentative steps to try to apply these results to the 3D render but was really unhappy with the early attempts and kept coming back to my practice. You can see these practice stones in order of completion below.

You can see a lot of golds and reds painted on the stones to make them stand out from the grass. I mixed opposing colors and added the reflected green tones to finish the look. I was inspired by Seph’s tutorial, but used my own colors. You can see some variations on the texture with some rougher areas and different types of shading. I was experimenting to see what worked.

While this let me play without constraint and get a feel for how to achieve a painterly stone texture, there was still some learning to do. The tutorial stones all had a strong light-source which made shadows and contrast pop out a lot. They also had no constraint over the original shape of the rocks as they were all invented fully in 2D. I still had to figure out how to apply this as a paint-over technique in the context of my existing map with existing rock formations.

On the actual map the lighting is much more subtle and the rock shapes are larger. Color selection had to be more subtle and was difficult to pull off without losing the style. Some of my practice applying this style to the existing render is below, but honestly my first attempts were complete disappointments.

I’m not happy with either of the examples of paint-over attempts below. They looked too much like the 3D render and the 2D tutorial method didn’t really translate as well as I had hoped. I kept re-visiting my independent practice stones from the tutorial and kept painting more until I decided I had spent enough time practicing and needed to move on. My confidence was not very high, but I felt a time pressure and was worried about losing steam on the task.

This practice period lasted a couple weeks and I decided it was time to move forward. I was feeling hesitant, but also did not want to use excessive practice as a procrastination tool. I felt like I had enough experience to do a good job so I just buckled down and started.

I began in the middle near the lower area that had really strong light on it to ease into the task. I was able to finish about one cluster each day. You can see a representation of 4 clusters below representing 4 days of work.

To achieve the final look I start by smoothing the stone texture in the 3D render. This is an extra step not present in the original tutorials because the tutorial stones were built from scratch. My base layer was a lot messier and more detailed and simplifying the colors was a necessary first step. This is done by sampling color from the 3D render and painting over that render with a smooth brush. Sample, paint, repeat.

After the initial smoothing step I increase the saturation by 60% in Photoshop. It expands the color palette and gives a more dynamic color range.

The brushes I used were the same ones used in Seph’s tutorials (available as part of the isometric stones tutorial pack). I would smooth the faces with a round brush, then switch to chalk type brush to add a rougher texture. I carved out grooves in the stone to break up the faces and edges to obscure the original 3D geometry a bit and make the stones appear more natural in shape.

The final detailing was the scratches, marks, and highlights to the stones which dramatically made them look more authentic and weather worn.

Finally, I adjusted brightness and contrast and increased both by 12. It gives the stones a small visual kick that helps a lot. This is what the stones look like before and after I finish with each section. I am trying to get the 3D render to look as much like a 2D painting as possible, that’s the whole point of painting over the render in the first place.

It took constant focus to get the simplified natural look I was trying to achieve. Some days I was better at this than others. If my mind was wandering I could easily slip into making the same repetitive brush patterns that went against the shape of the stone. My hand would tend to create circular hook shaped patterns if I lost focus. I paid a lot of attention to the curves, faces, edges, and lighting. Working from light to dark, bottom to top helped keep the whole piece consistent.

The closeups above show details and brush strokes coming out well with various lighting conditions.

The reason I took this part of the map to completion first is because it is at the edge of the map and is not where the player will be usually looking. By working on this less critical area before finalizing the rest of the painting I could gain valuable practice painting in the final style with less pressure on the results. I’m proud of how it came out.

With the rocks finished I decided to just dive right into painting the pools.

It actually went really smoothly and took very little practice to get right, I feel like the effort I put into painting the rocks translated really well and it felt good to breeze through this task!

I started by smoothing out the blue as it was already there from the 3D render (we had a partially transparent blue waterline placed in each pool.) I used the same chalk brush on the stone walls and floor and brought in darker blues depending on the depth of the pool. I made all the edges softer to give the appearance of being submerged. I added small clusters of stones resting under water and carved out larger cracks on the bottom of the pool. I am actually really happy with how they turned out. I think they look great!

At this point all the stones and pools took roughly 3 weeks of work not counting my practice time. With all the pools complete I had one remaining pool larger than the rest. The bottom of the waterfall where the streams all join to become a river flowing directly into the well. This was the last water-submerged area that I needed to paint over.

I knocked it out on a single Sunday evening. I smoothed the whole area and painted the larger stones, then I slowly added little stones that were clustered together and made the river bed. I was so happy it just took a single really productive evening to complete since I was planning on spending few days on that area! Below are some before/after pictures of the final river pool texture.

You can see the panels of the inside of the river actually are extensions of the tile from the 3D model which just happens to intersect with the river. Because I designed the tile in 2D and Michael did the 3D sculpting of them I didn’t realize this visual artifact was unintentional but I really liked the look of it. So I kept the panels and painted them as intentional walls inside of the river using a similar technique to the stones.

Because the 3D render of those walls was unintentional some of the tiles were different heights and dropped down awkward distances. There was also an early decision to have a large broken piece of the well in the stream, but in an effort to visually simplify the area I decided to eliminate it. These changes required some freehand painting to erase them.

You can see the progress below:

Everything came together really clean. At this point I have the stones and pools complete!

It’s time to go with the flow and draw some waterfall streams.

The technical work involved in stream animations will be described in part 2 by Michael. He was working on the technology required to bring this to life alongside my own work. At this point he had a working concept and idea of how to integrate my streams in the game engine. What he needed at this point was a painted guideline of the streams he could use as a tracing guide in our engine and animate.

With this in mind I spent a couple days figuring out how and where precisely I wanted those waterfall streams to flow. I paid special attention to the shapes of the rocks and how water would flow over them naturally. You can see it took an intermediate step where I had highlights to help visualize the final look before revising and flattening the water to provide a simple outline for animation in the game engine.

With those waterfalls painted and bundled up for Michael to integrate in the game it was time to start the next task. Moss. I have said it before, but…

I seriously hate moss. There’s no pun here. Moss just sucks ass.

Part of the reason I hate moss, is that it is hard to paint simply without making the texture distressingly busy. It is also the final layer of color on the waterfall which means there’s no hiding any mistakes here. It needs to look good. I have studied how other artists do moss and it is usually just the silhouette of it with hints of detail. There’s a beauty to abstract detail, but it is hard to get right. I felt very hesitant to cover up all the beautiful stonework I had painted with something that didn’t stand up to the same bar of quality.

I had a hard time finding a brush to do it in. Then because I wasn’t fully invested in covering up the stones I kept making the patches of moss too small even though Michael had suggested it should grow larger and cover more and I agreed with him. It was hard to bring myself to do it. I was starting to feel a bit of a mounting time pressure to solve this visual issue as well. This is entirely internal, of course, but I was already pretty happy with how the waterfalls were coming out and I didn’t want to over-invest time in the outside edges of the map.

So, as I often do when in doubt, I spent some time studying reference material. I looked at a bunch of art and nature photos of waterfalls and moss. If you look at it up close, it actually looks like really tiny pine needles. There are different variants, but it grows in thick patches and underneath it is actually a deep red in most cases. So it has these really contrasting colors to it naturally which make it more yellow, although it can be vibrant red or deep green.

Realizing it wasn’t just flat greens that made up moss really helped, but even knowing this and trying a few methods I wasn’t satisfied with the results. I tried several methods, Michael liked the second and third images below, all of them are incomplete attempts to try different styles. Ultimately I needed to think it over a bit.

I wanted to add more details and growth to the waterfall area beyond moss, and had specifically considered adding lily pads.

So I padded the time between finishing the moss!

Serendipitously during our walk to work Michael noticed some lily pads growing in the fountain in front of the Santa Monica City Hall. We ran over and snapped a ton of pictures to use as reference and it gave me new energy and space to mull over the moss.

Over the next couple days I painted about 9 different lily pads in total. The reference photos were fantastically helpful as I realized lily pads are not all green. The smaller ones seem to sometimes start out brown/red and it is only as they grow larger that they turn green. The flowers bud from underneath the water and rise out to bloom on the surface.

This was a really refreshing bit of painting and after painting a few re-usable pads and lily’s I was able to mix and match them and arrange several clusters to position around the river and in the pools. I adjusted lighting where necessary and am really happy with the results!

Michael took these and added them to the engine complete with a subtle bobbing animation and we’ll be covering that in part 2 of this article when he digs into the technical details of animating and integrating assets into the Bindstone engine.

After I completed the lily pads, I returned to the moss and was comfortable enough to do what needed doing. I decided to lay down larger clumps of moss and focus more on the piece as a whole instead of agonizing about the stones I was covering so much. I laid them out very similarly to how I laid down the water streams. The moss should follow the stone’s natural shape and contours that I had originally painted.

This more confident approach worked out really well. When I turned on the water path layer, it interacted with the moss layer really well. I spent time painting down a dark crimson base color and painted a lighter green over the top. Tackling this in a multi-layered approach with different colors helped bring a depth and detail to the final result that I think reads really well.

I did the base color with a flat brush and I ended up using a leaf brush scaled down and modified to create a fluffy moss texture for the highlight green color. After laying down highlights I also soften the edges of the base layer with an eraser to finish the paint layer.

Final color correction to the moss layers finished the look. I increased the brightness and contrast of the moss layers in Photoshop and did some slight color balance changes to push the colors and shadows. I also applied a gradient over the moss layer which bumped the color closer to lights and added a fade as the light tapers off to a more blue/violet at the top of the waterfall.

This whole process took a couple weeks.

To give a little sense of perspective of where the 3D render started and the painting ended it helps to see them side by side. Here we have the 3D render on the left, the rocks/pools in the middle, and the moss on the far right.

Finally with effects you can see the full thing together!

This whole adventure leaves us with one final asset before I turn the mic over to Michael for some real talk about technical effects and shaders.

Try not to get dizzy as we take the plunge into the final section of this article!

That final asset is at the heart of our map’s focus and is actually the center of the Bindstone well! The well is the goal that creatures leap into in order to score points for your team. We wanted an interesting effect for the water flowing in a spiral and this called for a whirlpool texture!

This was the whirlpool image that I heavily referenced for our whirlpool texture. Thanks google image search!

This was a heavily referenced hand painted asset that took a couple days to paint. The little dots above the swirl on the left are particle effects which Michael will describe as well, but the actual swirl is a faded/spun version of the image on the right. I free hand painted this from the reference above (no tracing). I made artistic changes in certain areas to make it a bit more dramatic. Also, some areas have been shifted around to fit better into a smaller circle. I haven’t completed it just yet, only because it looks just fine in the engine as is. I will be completing this at a later time if I reuse this same texture for other assets in the game.

With that said, I’ll go ahead and leave you with a video showing all of this in motion. Join us in a couple weeks for part 2 and an in-depth discussion about how all of this stuff got animated and integrated in our game engine! There will be code for those interested!

Don’t forget to subscribe to our mailing list for major updates and beta keys when we have them! Like and subscribe on Youtube as we post video updates on our channel from time to time!

Now lean back and enjoy!

Leave a Reply