Sometimes people ask me, “Alanay, how do you create nice looking backgrounds for smaller to mid-sized projects?” And I tell them, “You have to move your hips and dance.“ Dancing isn’t just being able to move to music, and making backgrounds is just as much art as it is a science. There are artistic rules for composition, color-schemes, depth, and general aesthetics and flow – and there are rules for the technical aspects, i.e. trying to cram all that beauty into a game without dropping your FPS to zero.
Understanding both sides of the spectrum will allow you to play and coordinate your backgrounds to not only be aesthetically pleasing, but also assists with making your backgrounds run on multiple systems. To help you understand a bit about both spectrums from my perspective, I would love to share my views on the matter by using RITE of ILK related content.
(Figure 02: Background in RITE of ILK – showcasing trees in the LODS view)
The biggest technical help any artist can get comes from good LODS, smart landscapes, and cheap materials. If you want a mountain range filled with trees, then you will have no choice but to use billboards (also known as planes with an image slapped on top of it).
For just a second, imagine a 500 (five-hundred) Tris tree. And now imagine using thousands of these trees, visible on your screen at the same time… and rethink that thought. Just a quick calculation: 500 * 1000 will add up to 500,000 tris (that’s three extra zeroes!) for just the trees in your background. When considering backgrounds, every Tri counts and you are forced to either have an optimization genius on your team or to downscale. Even an optimization genius can’t work magic and expecting one to downplay your lack of optimization is downright silly.
In RITE of ILK we use four LODs for trees, ranging from LOD0 to LOD3, and of which the first three LODs are models. The fourth and final LOD3 is a billboard. To give you an example, our biggest tree contains over fourteen-thousand triangles! It’s a humongous tree. That tree in LOD2 (third LOD) has 2,822 triangles, while our billboard variant (LOD3) has 32 triangles. When considering background/distance usage and the ‘thousand trees’ example from before, you can quite literally save 2,790 triangles per tree and 279,000 triangles overall if you were to implement these billboards for background usage. This makes it possible to place trees to your heart’s content!
(Figure 03: Huge trees with LODS)
Clearly, I’m playing devil’s advocate here to try and convince you to, PLEASE, for the love of everything sweet and dandy, use LODs and especially billboards for your backgrounds. If the technical aspects of this do not impress you enough to start using it, then let me try and convince you by explaining aesthetics next.
Everyone wants to make a game that looks and runs crisp and smooth. “But how can we use billboards and still make the game look good?” Well, that’s a good question. Do you know why concept artists often put clear imagery in the foreground or midground and just leave scribbles and silhouettes for in the background? Some might have guessed it already, but they do this to create an optical illusion. Using a behavioral phenomenon of interest called core object recognition, you can help the brain identify what is in the background by having it identifiable in the fore– or midground. By showcasing a high-end tree in the foreground, the average brain technically doesn’t need more than scribbles and shapes to make it read properly in the distance. This doesn’t mean that having lousy trees in the background will be excusable – an ugly tree will still get you an ugly billboard. So, how to go about that?
In my opinion, you should spend quality time on your billboards. A way to go about it is to have your tree in a billboard atlas (a technique in which you combine several textures together) from several different perspectives. You then go on to ‘paste’ this on a billboard with multiple planes and have the camera/viewport decide what plane to render and show. Using this technique, you can have your tree be “3D” and ever-changing depending on the perspective you’re looking at it from. However, for really far-far distances, this feels a bit redundant and you would be better off using simple, straightforward planes as billboards. Rendering your high-end tree onto a 2D image is bound to be a sure-win on any distance.
(Figure 04: Billboard multiple planes functionality – different perspective, different plane)
A lot of people seem to think that the lighting or details on the tree within the billboard matters, but considering the distance and placement of the billboard, it shouldn’t be an issue. Allow me to convince you by closely looking at the pictures below. We’re in a dense forest (jungle could also work) in the first example and you can’t even see that far. The density of the level makes it improbable you’re even going to be seeing any billboards. Look at the bright and open second example image of an island and tell me whether you can identify every single, individual tree on that island or the next? Can you see more than a bunch of rocks, some sun and shading, and something green on the island? I can’t tell what type of trees are on that island or how many. For all I can tell, it might as well be a giant broccoli (FYI I’m calling it broland).
(Figure 05: Dense jungle image / Bright Island image)
What the images do contain is shadow. Unfortunately, shadows are necessary to create a feeling of depth in your backgrounds. I say it’s unfortunate because background shadows will definitely make your FPS sink faster than Titanic.
We use Unreal Engine 4 and UE4 has tricks to pull off lower resolution shadows for in the distance, such as, distance field shadows. Ideally, you wouldn’t need to turn on the shadows on all your billboards but only the most prominent ones so that they can cover enough ground for all of them.
One thing to remember is that your struggles are likely not just your own and are shared by many people all across the world. If you’re using a popular engine, such as, Unity or Unreal Engine, it’s likely that there are people looking for similar answers online or that the engine itself has already solved it by implementing some sort of tool or extension. In my case, I often found myself struggling for answers that were already implemented by UE4, such as their smooth LOD system.
Islands generally don’t grow legs and walk, and trees don’t get up and dance. However, that does not mean that backgrounds should be created without dynamics.
To make your backgrounds visually appealing, you need to appeal to the people by creating the illusion of something “being alive in the far distance.” A world only feels like a world and not a game map or level when players are fed the illusion of livelihood. In the fore and midground you have wind, critters, particles, etc. to cover dynamism. But for in the distance, you could use shadows, clouds, and such to your advantage. Your background will become a lot more dynamic by adding read-adability to it. To give you an example, I cheaply photoshopped the example island image of before in order to show you how I would go about tackling its readability in a game scene.
(Figure 06: Bright Island images; edited (left) and the original (right))
I only added some fog to make the island and distance more easily readable, break up the island, and give it more atmosphere. I find it super important to keep my colours natural – for fog, a combination of simple light blue and deeper blue is my fan-favorite. The above image took me about one minute in Photoshop, but you get the gist of it.
In RITE of ILK, we use a material light function on top of our sunlight to fake the shadowcasting of moving clouds, which helps in easily breaking up that boring and stale mountain and/or sea -range.
(Figure 07: Without Cloud Material Function (Left) and with Cloud Material Function (Right))
You have to imagine the clouds’ shadows are moving and are not a constant black blob, they vary in thickness and disperse/fuse with other clouds as time goes on.
To engulf our environment backgrounds with depth, we created a brilliant cloud material that we slapped on a simple plane, and then place on specific places on top of bigger meshes. As is visible in the example below, it moves along and behind meshes to create a feeling of dynamism and air. The sky clouds are also moving and in addition foliage is moving along slowly to give an extra boost to that airy feeling. We didn’t use a single particle for this particular shot in the scene. Instead, we have a plane with a material that pans several different clouds textures, moving at different speeds, all across the plane.
(Figure 08: Dynamism and readability in RITE of ILK)
Dynamism should not come at the expense of lag! Like I said, creating backgrounds is art and science.
Thanks for reading through this blog and I hope you found it somewhat useful! If you have any questions or remarks, feel free to leave a comment so I can get back(ground) to you. Much love, Alanay.