GDC Logo

Producing Optimized 2D Paintings in Unity: Procedural Period for Stylized and Optimized 2D Foliage

Posted on

Remember: This textual content was initially revealed on LinkedIn. In case you have the benefit of my article, please click on on by and keep in mind sharing on social media and connecting with me!

Video video games need detailed background paintings. Whereas usually not central to the gameplay, top quality and numerous background paintings is required for storytelling, immersion, seen attraction, and customary polish. An absence of choice in background timber is noticeable in a recreation. Creating a variety of timber by hand takes quite a few effort, and each variation needs bespoke work from an Artist.

Procedural Period might be utilized for this downside by reducing the need for bespoke content material materials creation. As a developer, you usually is not going to have full administration over your Procedural period work. This makes it considerably properly suited to such background content material materials – ​​content material materials that is obligatory nevertheless is not going to break the game if it’s not solely good.

A programmatic technique to foliage moreover permits for a particular look and magnificence to be created by parameters, after which further numerous barely using these parameters.

LSystems For Foliage Period

No alt text provided for this image

LSystems have been used extensively for foliage period. The algorithm is after all suited to producing branching timber and vegetation. It permits for a degree of randomization and permits you to administration the aesthetics of what you generate by the utilization of parameters and tips.

Basic LSystems are easy. Branching, measurement, angle, and iteration rely covers this.

Nonetheless What Can You Do To Generate Additional Aesthetic Work?

I cherished the aesthetic of Kate Compton’s work and modeled my very personal after it, with the added requirements that regardless of I create needs to be acceptable for real-time simulation in Unity, so it might presumably be used as a tool for paintings period for 2D Unity video video games. Kate has shared her foliage PCG work along with guides for these starting out with PCG –

I added the subsequent parameters:


division angles

Division width

Max division measurement

Max leaf measurement

base color

Coloration variation


Leaf shapes

leaf facet ratio

Petal rely

Petal dimension

Petal kind

Petal base color

Petal saturation

Division spikiness

division taper

No alt text provided for this image

Together with Seen Variance

What to ensure that you further choice for each generated tree, so there aren’t merely duplicates all through?

Generate a forest by “altering it somewhat bit”. Take the underside model, saved in a building (DNA), after which change associated parameters by only a bit to generated an similar tree of the similar species. Repeat x10 or x100 and you’ve got a forest that’s uniform nevertheless not filled with the similar cloned tree.

Previous this, Kate moreover shares some widespread concepts for further seen choice whilst you’re using PCG strategies.

Listed beneath are some ideas she suggests for enhancing distribution, so each factor you generate appears to be pure and has some variance.

1. Barnacling – Embody big objects with a few smaller or maybe even quite a few tiny ones to supply it a further pure look.

2. Footing – Guarantee each factor you generate appears to be favor it matches in with the world, principally by coping with the place objects would work collectively (On this case the tree division and the underside would overlap inside the kind of roots)

3. Greebling – Initially utilized by these working at Industrial Light & Magic for the actual outcomes of Star Wars. Add small particulars to large surfaces to make them appear further sophisticated and attention-grabbing.

No alt text provided for this image

After together with smaller, barely modified timber subsequent to each one:

No alt text provided for this image

In order so as to add to this, you might also simulate growth – Improve division measurement, leaf rely, flower rely, and ultimately iteration rely over time.


I went with the obvious technique first – merely manipulating mesh place and rotation using a sine wave. I apply this with a wind vitality variable relative to the hole from the underside of the tree – so principally, the inspiration wouldn’t switch the least bit, and the treetops will switch in all probability probably the most. It appears to be okay for a stylized 2D recreation.

I later used Shader Graph to maneuver the entire animation to the GPU – manipulating vertex place using shader code works merely as properly and ends in considerably higher effectivity.

Information Buildings – Plant DNA

Period is randomized nevertheless deterministic. In case you utilize the similar parameters, you’ll get the similar tree as soon as extra. In a method, the development of parameters is a tree’s DNA.

Generate a tree you need? Put it apart’s DNA. Load it later to re-use in your recreation.

Taking this extra, you can cross-breed and evolve species using Genetic Algorithms. The tree DNA is already outlined as a struct of floats.

Merely put, use a genetic algorithm to combine two halves of DNA collectively after which mutate them to create a model new species. Then set it up so a designer can select two timber they like and blend them collectively.

You can extend this concept into gameplay – add some participant generated content material materials by allowing avid gamers to generate their very personal vegetation, save them, evolve them, re-plant them, and so forth.

How Do You Optimize Mesh Period For Producing And Simulating Foliage In Precise-Time In Unity

Period is sluggish and does take some time. As long as the code just isn’t unnecessarily sophisticated, you’ll get 300 timber in a number of minute and maybe add a loading show if you must try this all through gameplay.

Nonetheless the generated timber needs to be optimized for effectivity as properly. Background paintings is strictly that- background. You can’t have an extreme quantity of CPU/GPU work and draw calls being taken up by background paintings – it’s needed for foreground paintings, animations, shaders, lighting, AI, gameplay, and plenty of others.

The branches are explicit particular person sprites and there aren’t that lots of them.

The leaves are generated meshes, which have 4 vertices each. That’s important for the stylized look and choice. That’s the place lots of the rendering time is spent, so that’s the place optimization have to be focused.

Right here is how I handled optimization:

Shared provides

Each leaf has the similar set of parameters and colors are determined contained in the shader based mostly totally on the pixel’s distance to the underside. Which suggests a single event of a fabric could also be shared by each leaf in a tree.

Optimized shaders

For starters, use Unity’s URP and associated unlit URP shaders.

Shader-based wind animation

The GPU tends to be underused compared with the CPU, so it’s almost on a regular basis helpful to maneuver sophisticated computations to the GPU. On this case, it’s greater to simulate wind by making use of a sine function to the mesh vertices (I actually like Shader Graph for this). The selection may very well be altering object positions and rotations using C# code, which may almost on a regular basis perform worse.

Combine meshes to chop again draw calls further

I discovered a pair years prior to now all through a particular problem (VR Educational Video video games for the oil and gasoline enterprise) that Unity’s Static and Dynamic batching are inefficient. I assumed that the number of meshes in a scene wouldn’t matter, merely the triangle and vertex rely. It appears, you can typically improve effectivity by pretty a bit by combining meshes wherever attainable, reasonably than solely relying on batching.

I actually just like the Straightforward Mesh Combine asset from the Unity Asset Retailer for this.

Sooner than combining meshes:

No alt text provided for this image

No alt text provided for this image

After combining meshes:

Draw Calls decreased to spherical 33%, Batches decreased to 0.5% of the preliminary rely.

No alt text provided for this image

CPU and GPU time almost halved, which could loosely be translated to indicate that effectivity and physique price is likely to be 2x greater.

No alt text provided for this image

Blended, unanimated

No alt text provided for this image

No alt text provided for this image

This nonetheless takes up an trustworthy amount of rendering time because of the number of meshes used. Framerates are nonetheless okay, nevertheless might presumably be a difficulty when you occur to’re specializing in low-end {{hardware}} or need totally different costlier computation for graphics, AI, or gameplay.

Billboards For Effectivity – Probably Not In This Case?

If you’ll get away with out animations, you don’t want explicit particular person meshes anymore. I needed to take a look at using Render Texture to supply billboards reasonably than rendering timber with a complete lot of leaf meshes.

Here’s what my script does:

  1. Isolate timber to their very personal layer and make sure the render to texture digital digital camera solely sees that layer (Culling masks).
  2. Coronary heart the digital digital camera on the tree.
  3. Render what the digital digital camera sees to a texture.
  4. Apply this texture to a sprite.
  5. Disable the tree and substitute it with a single sprite.

That’s sluggish though. Each tree have to be rendered individually, one a physique. Takes about 10 minutes for a 100 timber. The end result reduces draw calls drastically and brings down physique time.

No alt text provided for this image

No alt text provided for this image

This didn’t work as anticipated for me – draw calls, triangles, and vertices are decreased, nevertheless the exact physique rendering time didn’t go down. So in the long term, combining meshes appeared to supply me greater effectivity.

Good Machine Design

For this problem, my focus was on being able to iterate and prototype quickly, and by no means quite a bit on the usual or usability of the tip product. Nonetheless, I gave somewhat bit little little bit of thought to machine design:

  • A single struct for plant DNA – I’m reiterating, nevertheless this makes for good machine design along with all parameters that affect period are saved and accessible collectively.
  • Each parameter has fixed constraints every throughout the code and throughout the editor UI – As a result of distinctive traits each parameter is responsible for, setting these constraints makes it easier to iterate further along with use the machine. This ensures each factor you’re producing nonetheless resembles the shapes you’re going for.
  • Unity UI sliders for each parameter, constrained within the similar method.
  • UI for various capabilities – I can select vegetation by clicking on them, after which each substitute them, evolve them with the genetic algorithm button, or save and cargo them.

No alt text provided for this image

A very obvious subsequent step for good machine design may very well be to utilize Unity Editor Scripting, perhaps with the UI Toolkit, to make this UI accessible by the Unity editor reasonably than by in-game UI.

Final Concepts

For me, this problem was an trustworthy and fast begin line for transferring into further PCG content material materials. In the event you want to uncover out further about PCG, I’d positively recommend attempting out Kate’s weblog proper right here –

Effectivity optimization was key for making certain what I’m producing can actually be utilized in an precise recreation. I is prone to be attempting into 3D foliage period subsequent, so optimization and easily learning about in all probability probably the most surroundings pleasant strategies to render 3D paintings in Unity is likely to be necessary for that.

After this, I labored on a tool for procedural narrative period. Keep a watch mounted out for an article about that one rapidly!