Ultimate Guide to Stylized Trees on Roblox

INTRODUCTION

It’s hard to miss the current trend with stylized trees in the development community right now, with the release of PBR materials I’ve seen some amazing work surface on the platform that would have seemed like a pipe-dream just years ago. More specifically, I’ve seen the evolution of immersive environments take player experiences to a whole new level. If you haven’t seen some of the amazing worlds and assets that I’m referring to, I highly suggest taking a look at these examples that personally inspired me:

Nature-embedded objects can make or break your environment … If your trees feel too static or stiff, the game will feel dead. Vice versa, if your trees flow into your game world and breathe freshness and liveliness into the players’ surroundings you won’t just make your domain believable, you’ll transcend your users into a deeper experience they won’t forget. In my opinion, trees have deep roots in how your game feels to a player, and by mastering them, your end-result as a digital story-teller will increase tenfold.

If you are wanting to know how to create stylized trees in Blender, how to export and import them, how to texture them, and experiment with them – you are in the right place!

OVERVIEW

This guide will cover the following topics:

  • Visualizing your end-result

  • Creating a particle texture

  • 3D modeling a tree base

  • Vertex Groups and Weight Painting

  • Creating a particle system

  • Node setup, visualizing your WIP in the viewport

  • Fine-tuning, tweaking, prepping, exporting

  • Importing to studio, creating a game-ready asset

  • Tips and tricks (poly-count, variance, style)

1. END PRODUCT

Before jumping in – think about what your complete tree will look like. Maybe you were inspired by someone and want to make a similar rendition. Maybe you’re making an alien tree for an alien planet. What color is it? How is it shaped? How would it grow? How will it fit into your environment?

It’s important to draw an idea of your tree either on paper or in your head before you start the creation process. Your end result may look different from what you visualize right now, but it’s important to give yourself a sense of direction first.

Once you have a general idea, make a mental note and write down the properties you want your tree to have. Use this sketch checklist as a guide moving forward and during the general creation process.

Here’s mine:

  • Bright green leaves

  • Thicker base trunk

  • Shorter and wider branches

  • Smooth shaded

  • Will be placed in a park environment

2. TEXTURE CREATION

Because these trees are alpha/texture driven, a considerable chunk of mastering stylized foliage is learning how to create a good texture. You could do everything else right but have an undesirable end-result because your texture isn’t done correctly or is done poorly. To understand how to create a texture correctly for this use case, we need to understand how this texture will be used on the tree and how it will be manipulated using Blender’s internal particle system.

There are multiple ways to do this without using a particle system, some of which I may add to this guide later, but for the purposes of this tutorial, I’m focusing on a particle-based method using planes and textures.

When this is duplicated many times on the tree model, we want to use as few planes as possible to generate a good result. If the texture only included a single leaf, we would need to generate 1000’s of particle planes to create a similar result and replicate the abundance of leaves on a tree with each object. In this case, we can include extra detail in the texture to minimize the number of polys and planes generated. You can make virtually any texture to fit any style of foliage, but I have found that drawing a branch and varying the leaf size dramatically reduces the amount of geometry on your model with virtually no loss of detail.

Here’s the texture that I made for this post and what I will use as a reference:

Notice that this encapsulates a couple rules of thumb on top of my properties sketch:

  • Many leaves, not one
  • Includes a branch

This was made in Photoshop using the pen tool to create simple leaf shapes and duplicating them to make the branch of a tree. I painted a simple branch and connected the leaves to each other on a background layer. The branch isn’t required, but I found that it adds stylized detail that really makes the leaves pop.

Take some time to also think about color, you may want to make more than one version of your texture for shade variation in your game (lightgreen.png, darkergreen.png, etc.) You may also find that the colors you use in Blender will look slightly different in Studio/your game lighting.

Here’s the process I used to create my tree texture from start to finish:

  • Made a general leaf shape with Photoshop’s Pen Tool

  • Duplicated the shape to morph together a branch

  • Painted in a branch underneath the leafs

From there, I painted a simple branch underneath and scaled the entire texture to fit better onto the canvas. I exported it as a PNG to my project folder. Don’t forget to remove the background layer to the image so the exported picture is transparent. Upload your new texture to Roblox as a decal and save the asset ID.

Remember, depending on the type of tree you are wanting to make, and depending on the properties sketch you came up with, your time spent on texturing could vary dramatically. You could very well spend hours hand-painting each leaf in the texture or spend less time using a simple approach like the one I outlined above.

3. TRUNK AND TREE SHAPE MODELLING

With our newly created branch texture in our back pocket, we’ll start creating the actual 3D tree model and a tree trunk that our texture will be grown on. There are MANY ways you can do this, but my personal favorite is the skin method. Open a new project file in Blender and delete camera and light objects.

  • Create a single vertex by demolishing the default cube

  • Use E to extrude the vertex into lines that will represent branches and eventually the shape of your tree

Next, we’ll start adding 3D geometry to our tree frame. Start by adding a skin modifier with the object you just made selected.

  • Activate the skin modifier on your frame

image

  • While in edit mode, use “Ctrl + A” to scale the geometry generated from your tree frame

  • Using this scaling method, select specific vertices and continue to fine-tune scaling to shape the branches and trunk of your tree model

Once your desired tree shape is complete, choose whether you want smooth or flat shading (totally optional and depends on your preference) – then exit back into Object Mode and apply the skin modifier.

Next, we’ll spend some time optimizing the mesh to remove the unnecessary geometry in places we won’t be needing it. For this tutorial, we will use the decimate modifier. I recommend switching back and forth between wireframe and solid mode while adjusting the upcoming values so you can get an idea of how much detail you are losing/retaining at a glance. Also, keep a note of the “Face Count” while lowering the “Ratio” value to get a better idea.

  • Add a Decimate Modifier with your object selected and adjust the “Ratio” to the desired detail level

Keep in mind how many trees you will need in your game, and how that might affect the amount of detail on your tree. If you’re working with a showcase in a limited scene, you may only need a handful of trees – and in this case (a park scene) I can work with a little more detail. If this is for a large game map with 100s of trees, you will want to make this value lower. If the geometry is becoming unrecognizable with the desired number of faces, you may want to adjust your mesh manually or start over with a new frame and fewer branches/detail, then repeat the skin modifier steps.

When you are happy with your tree shape and polycount, apply the decimate modifier in object mode.

4. VERTEX GROUPING AND WEIGHT PAINTING

Now that we have the shape of our tree, we now need to think ahead and decide where we want our leaves to show on the model. We want to control where the leaves grow, and we can do this by creating vertex groups. We can then use weight painting to control the density of leaves in certain areas of the tree.

  • Enter Edit Mode, then navigate to the Object Data panel on the right-hand properties toolbar

In wireframe view, select all vertices and parts of the tree that will have leaves

  • With those parts selected, hit the “+” button under the Vertex Group tab in the properties panel

1

I recommend naming this vertex group something like “LeafBranches” so it’s easier to reference later on.

  • Switch to Weight Paint mode and adjust the “Strength” of your brush to 0.5, paint the density of your leaves on the branches you specified in your vertex group (control brush size by hitting F and moving mouse, right-click to save)

The weight painting will help you control an even distribution of leaves that fade in and out of parts that have no leaves and parts that do. Both the vertex group and weight painting will be assigned to our particle system in the next steps.

5. PARTICLE SYSTEM

In this section, we’ll start creating our particle system. First, we’ll need an object to assign as our particle. In this case, the particle will be the texture we created earlier. We can simply attach our texture to a plane, and use this object to act as our particle.

  • In Object Mode, insert a plane and slide it to the side of your tree model

  • Split your screen and open the UV image editor. Open your texture into the editor and have both windows side-by-side

  • Split your screen again with the Shader Editor and create new material for the plane

  • Temporarily visualize the texture onto the plane so we can see what we’re doing. Then set the origin point of the plane to the start of the stem of the branch on your plane

By setting the origin point of your plane to the start of your stem, we can control where the particle will grow from. In this case, we can make it appear as though the branch texture is growing out from the 3D branch by always merging the branch tip to the mesh itself. To do this, I click on the tip of my branch to place the 3D cursor. Then use search and “Origin to 3D Cursor” to set the object’s origin point to the 3D cursor.

  • With your tree model selected, navigate back to your properties panel and click on the Particle Properties tab, hit the “+” to create a new particle system

It’s important to make sure your particle system is using “Hair” instead of “Emitter” for this guide, you may also want to lower the number of particles to something more reasonable like 100. If you want a different look, try using Emitter and volume to create a canopy above your branches. For this, you would instead apply the particle system to a separate mesh in the shape of your leaf canopy.

  • Under the Vertex Groups drop-down, select the vertex group that we created earlier for “Density”

1

  • Under the Render drop-down, select Render As “Object” and select the texture plane as the Instance Object

1

Adjust scale to the desired size, this depends on the look you’re going for and how “full” you want your tree to appear. It will also depend on the amount of detail on your texture and how many leaves you have inside the image. (Hold down Shift to use slider slower)

6. VIEWPORT VISUALIZATION

Next, we’ll need to visualize our tree in Blender so we can tweak it through the viewport. We need to change the material of the particle object in a way that allows us to render the transparent PNG texture. Using the Shader Editor, I use this method to visualize the tree in Cycles.

1

You may also need to go back to the properties tab under Material and change the Blend Mode to “Alpha Blend”. If you followed this correctly, you should see transparent leaves when you enter rendered mode. Make sure you switch your rendering engine to Cycles instead of Eevee in the Render tab.

7. TWEAKING/PREPPING FOR EXPORT

Now that our particle system is fully active and we’re able to render the leaves in the viewport, we need to make some tweaks to the particles so our particle objects are rotated correctly and randomized. This will depend on what orientation you created your texture in, there are different ways to do this but I like to rotate the particle object itself until the particles on the tree are facing straight up.

  • Go back to the particle properties and select “Advanced” under the top portion of the particle tab. Then, check “Rotation” and make sure the Orientation Axis is on Global Z, with Phase at 1

  • Select the particle object in object mode and rotate on the Z-axis until the leaves on the tree model are facing straight upward

  • Introduce some randomness by increasing the randomize slider and randomize phase sliders until you get the desired look

1

Because you will need to attach the texture to each plane in Studio, you will need to do a simple unwrap on the particle object.

  • Click the particle object, under edit mode select “UV” and from the drop-down menu select “Unwrap”

1

To prep your tree for export, you need to convert the particles on your tree to a single mesh. To do this, you will need to navigate to the modifier tab and select “Convert” with the tree model selected in object mode

  • Take the converted mesh and export the selected objects as one OBJ, save to your project file

  • Export the base model/trunk as an OBJ and save it to your project file

I recommend after exporting to either Ctrl+Z the particle to mesh conversion or delete the mesh portion in Blender after you export your assets. I’ve noticed Blender tends to bug out if you don’t for whatever reason and if you don’t and it also leaves (pun intended) a mess in your Blender workspace.

8. STUDIO IMPORT

Only a few more steps!

  • Import the meshes into MeshParts and assign the location they carried over from their OBJ files. Scale them up in the studio and group them into a model. For the leaves mesh, insert a SurfaceAppearance object.

1

Take the texture ID of your uploaded texture and enter it into the “ColorMap” portion of the SurfaceAppearance object. Change AlphaMode to “Transparency”

9. RESULT

Congratulations!

Don’t forget to share your tree!

I hope you enjoyed the guide, please keep in mind there are many different ways to make textured trees and this is just one method – but I thought I would contribute to the trend and help those that are either curious or wanting to jump into this without knowing how. This is also a great guide if you’re wanting to familiarize yourself with different aspects of Blender other than 3D modeling (modifiers, particles, nodes, etc.)

146 Likes

Good job on the guide, looks quite nice!

1 Like

Thx for this i will try to use this

1 Like

Okay, you definitely were not wrong with Ultimate. Truly is a very epic tutorial. Thanks for the help!

1 Like

Thank you for the tutorial. I’m going to try making stylized trees. If I can make stylized trees, then I’m going to use stylized trees in my upcoming game in the future. I’ve started to stray away more from the Roblox look for me upcomming game.

It looks nice! The style looks like it’s anime styled.

1 Like

Took me quite a while to make, but after a couple hours of experimenting and retrial, I finally ended up with something I am satisfied with.

Thanks for this tutorial, appreciate it.

2 Likes

I have this problem where I can only see the leaves in weight paint mode. Help? I’ve been rereading the tutorial over and over and it looked like I did everything right but I just can’t see it in viewport.

3 Likes

This tutorial isn’t helpful and it’s a bad one for people who aren’t experienced in using Blender. I will explain why this tutorial isn’t helpful.

Step 3 is a bit confusing for me but I was able to learn what he did and I was able to move on to the next step. He mentioned “demolishing the default cube” which means delete the whole cube but he deleted all of the points on a cube except for one and moved the point to the center.

This tutorial doesn’t explain how to go into wire frame mode and I had to go look it up on google to know how to do it. This is where some users learning to make stylized trees quit the tutorial and give up.

This tutorial fails to explain which buttons to click in order to get to the add the modifier object panel. For example, when he mentioned, “add skin modifier”, he only shows a screen shot what it looks like. Some users who are not experienced in blender will give up completing the tutorial at this step. Luckily, I had some little experience in adding modifiers to an object so I was able to figure this out.

The part where he explained about the shader editor and how to temporary visualize a texture is the worse part from my point of view. He didn’t show how to split the screen. He skipped the step before he temporary visualized the texture.

This tutorial would have been a lot better if he included the troubleshooting section.

I got stuck at the part where he mentioned about shader editor and texture visualization.

I was looking forwards torwards making stylized trees for my upcoming game to better fit the cartoony stylized art style and not the standard Roblox blocky art style.

5 Likes

TreeIt doesn’t work anymore.

I have a DirectX12 and the program just doesn’t open.

Could it be that Windows 11 doesn’t support it or something?

1 Like

Tweaking section is completely unnecessary unless you want that effect. So you could export it without tweaking, Just as a little mention, you can adjust the scale slider to give a more random effect of the leaves.

This is a very good tutorial for someone who’s modelling for a long time!
The only issues I’m afraid is, beginner modellers would have a hard time trying to find a way how they would visualize the UV texture onto the plane.

You just showed a picture of the nodes you used in Step 5:Particle System and not how to access the shader editor.
Other than that, the tutorial is crystal clear and shows how stylized trees are made from scratch!

EDIT: To visualize the image, go to shader editor by clicking the shading tab after texture paint

image

then click Shift+A To search and then search “Image Texture”.
image

After inserting an Image Texture node, click the open button and insert your desired picture.
image

After inserting the image texture and loading the image, Drag the Image texture’s “Color Node” and connect it to Material property’s (Principled BSDF) Base Color node.
image

Result:
image

10 Likes

cool tutorial, but this isnt a data structure…

Uhhhh… He never said that it was.

1 Like