Posted by

Environment Artist and World Builder at Quantum Soup Studios.

Introduction

Hi! My name is Antony and I am an Environment Artist and World Builder at Quantum Soup Studios where we are working on our debut title TALESINGER: Voice of the Dragon. You can find out more about the game, and us, at our WEBSITE.

In this 3 part article, I am going to discuss the creation of game-ready grass and vegetation for use within the Unity Game Engine.

In this section, we will look at some techniques for creating and editing textures for foliage in Photoshop.

SOURCING MATERIALS AND REFERENCE IMAGES

The most important thing to understand about vegetation (whether you are basing yours from real world plant-life or not) is that it is NATURAL in the way that it grows and appears. The purpose of a game artist is to craft everything in a way that looks aesthetically pleasing whilst retaining that sense of 'believability' within the game’s setting and in order to achieve this we should ALWAYS start with sourcing reference material; whether that’s online or real-world reference gathering.

ONLINE REFERENCE GATHERING

The internet is a great way for us to find source material that we might not have access to otherwise, or sometimes a 30 second search will yield better results than trying to take similar reference in the real-world. However, online reference does have its pros and cons whilst working on a project, which are explained below:

PROS

  • Instant searching for potentially hundreds of thousands of reference images
  • Huge amounts of variation in the search results
  • Reference can be gathered quickly and made into offline libraries

CONS

  • No real control over the reference material’s actual content (angles, lighting etc.)
  • Some images are copyrighted to individuals/sites
  • Image format/resolution can be a problem initially

A good example of this would be something that is local to me: the humble dandelion. As it is currently out of season in my surrounding area, below are some reference images I found online by simply typing dandelion into google…

Images found with a basic search on google.
Images found with a basic search on google.

Though these are good reference images for the way in which the dandelion grows, they aren’t great for the details of the plant itself. The lesson here is to be smart and specific with your searching, so to get the necessary images for the texture I continued with the following searches…

“Dandelion Leaves”

An assortment of dandelion leaves.
An assortment of dandelion leaves.

"Dandelion Flowers"

More focused search on yellow flowers.
More focused search on yellow flowers.

"Dandelion Stem"

Finally, some stems for the base of the flower stalk.
Finally, some stems for the base of the flower stalk.

Though the reference you get may not be 100% what you need to finalise a texture, they’re definitely a good starting point. I then repeated these steps for another plant that I knew I would be using a lot; the Stinging Nettle.

TEXTURES AND ‘ATLASING’ FOR GAMES

Texturing is the part of the process where we need to be picky about the content we want to create. Whilst most assets traditionally require you to create a 3D object, UV map it then texture it, working with foliage mostly tackles this development process back to front.

Below, you can see how I have used various pieces of gathered reference images to create a texture of ‘parts’ rather than of complete plants. [Note: you can use complete plants too, but to keep a good degree of re-usability and variation I decided to set the parts out separately].

A collection of various flower parts.
A collection of various flower parts.

You can also see that I have got both the dandelion and stinging nettle plants on the same texture sheet. This is known as texture atlasing, which basically allows us to place a variety of textures on the same sheet which are referenced by various objects within a scene.

For example, below we have two methods of creating four individual plant textures. Atlased and Non-atlased…

Atlas Texture

An 'atlased' texture example.
An 'atlased' texture example.

Non-Atlased, Individual Textures

4 Separate texture samples.
4 Separate texture samples.

As you can see, the atlas texture has a resolution of 1024×1024 pixels. This means that each quadrant of its space is 512×512 pixels. Ultimately, we can fit 4 textures of 512×512 size onto this, creating a single 2D texture image. This can be referenced in-engine for all of the assets that use it, resulting in 1 draw call.

The second image depicts another method, whereby all of the plant textures are individual files at a resolution of 512×512 pixels. Though these are the same size as they would be within the atlas texture, EACH texture will result in 1 draw call in-engine.

‘Atlasing’ your textures can help in a number of ways…

  • You can plan out a range of assets at once, minimising the need to repeat the same process for lots of unique textures
  • Given the relatively low detail on most vegetation, you can afford to fit more onto individual texture sheets than many other assets
  • It saves HUGE amounts of memory and draw calls when creating variations of assets

There are also some things to be aware of when planning to atlas textures…

  • Does each texture set have enough padding in its surrounding areas? (this is significant for foliage opacity and ensuring details don’t ‘bleed’ onto each other)
  • Will the assets generally be used together? (Calling a large texture atlas for a small asset when none of the other atlas space is being used will affect performance)
  • Do all of the assets require the same shader type? (Try to avoid combining opaque texture sets with textures that require areas of transparency for example

PADDING AND MASKING TEXTURES FOR A GAME ENGINE

Padding and masking is one of the final stages in Photoshop for foliage texture creation, and should be given some consideration if the vegetation you are using is heading toward the more photo-real, transparent dependent pipeline.

PADDING

Below, you can see the process of how to add opacity padding to a texture set.

The process of padding textures using Gaussian Blur.
The process of padding textures using Gaussian Blur.

1. Ensure your original texture has 2 layers to begin: your base_colour background type layer and a layer with all of your plant texture parts on

2. Copy the plant parts layer, and drag it beneath your original layer

3. Apply a Gaussian Blur filter to the copy layer

4. You should see some slight blurring if the radius of the blur is large enough

5. Copy this blurred layer a couple of times to increase the effect

6. Highlight all of the blurred layers and press CTRL+E to merge them into a single layer

7. Repeat steps 3-5 for a stronger effect!

This process helps the outside edge of the visible parts of a texture the further away we get from it in engine. Leaving areas to a solid colour can sometimes cause the white ‘halo’ effect we sometimes see around leaves and grass in games.

MASKING

Masking our texture is the process in which we decide which parts of the image will be visible, and which will be masked out or ‘invisible’ to the player. It can be one of the more tricky aspects of foliage texture creation, depending on your source images, so take your time here.

In film, a green-screen is used to essentially ‘cut out’ the background. The reason the colour green is used is because it contrasts really well with skin tones. In games, we can use the same technique for masking and selecting areas within a texture, though in the case of vegetation green may be an inappropriate colour.

For this example, I am going to first prepare my texture atlas by merging all of my cut out flowers onto a single layer, ensuring that there is no background to any of the layers. I am then going to fill a new layer in Photoshop with a solid magenta colour, and drag it underneath my merged flower/plant layer.

The next step is to merge both of these layers together, as shown in the image below…

Combining the Magenta and transparent layers.
Combining the Magenta and transparent layers.

This allows you to now utilise the ‘Colour Range’ selection tool in Photoshop instead of having to rely on the magic wand or lasso tool.

Selection via Colour range.
Selection via Colour range.

On selecting the magenta colour from the dialog box, I can go into the channels tab in Photoshop and create a new layer to reveal an alpha channel. Inverting the original selection and filling with white will give a perfect result mostly, but the selection may require some additional modification to be accurate for every instance.

Creating an Alpha layer in the Channels tab.
Creating an Alpha layer in the Channels tab.

I usually save my files as 32-bit Targas unless the project demands that I work with another file-type. Using TGA files means that the alpha channel is saved directly into it, with no need for a bespoke alpha map to be created as an extra.

I hope this has explained texture atlasing for foliage a little more, and with some practice this approach can net you some really good results. In the next part, we will discuss taking textures into Maya/3Ds Max and the process of creating 3D plants.

Latest from our Creators