Pseudo pixel art & texture palette shader – 2nd version

Disclaimer: This is a work in progress and, I’m always learning and trying to improve. UI aesthetics and other elements don’t reflect the final product. πŸ™‚



Easy and fast to change visuals without leave the engine.

Lightweight (quad overdraw, shader complexity, texture footprint).

Support Unreal Foliage Tool.

The pipeline

Reference image > Pixi Editor > Photopea > Blender > Unreal Engine

Images size: 1024×1024

Final tree average file size: 10~40kb, almost zero information in the image file, only 8 basic colors (RGBCMYK+W)


The important part here is to have some natural looking silhouette.

Pixi Editor

Use the reference, set the Tool Size to 1px and I start drawing over the reference.

On the right, the end result.

Most of the time, I’m full on zoom. Also, use the navigator to guide you, once done, I save all the files and send to Photopea (you can use any image editor software) to build my trees.

Below some of the leaves that I did. But for the leaves, no reference has been used.

Building the trees

In Photopea I and start to build the tree, using the other image files I create in Pixi Editor.

Now I give to different image a color ID. Ofc the final tree can have leaves sharing the same color ID.

After done building the tree, I end up with something like the image below:

Making “tree D”

I import and set the tree image on a standard material, assign that material to a plane, and use the cut tool to do a cut-out.

After the cut-out I have a mesh like the one below:

The Unreal Engine moment

I created a material function that isolate the Red, Green, Blue, Cyan, Magenta, Yellow, Black and White color from a texture.

When I feed the texture that I made in the “Building the trees” section, the shader create a mask for those colors, allowing me to replace those colors with any other color I want.

But to keep consistence I use the texture below

This is the texture I use to “paint” the entire game.

8 colors in a 252×32, 190 bytes image file.

Below the material instance:

Overview: 8 colors texture (the one above) have 8 collumns, in the Global Scalar Parameter Values I can set which column of color to use on a specific color id.

Optimization Viewmodes

shader complexity
quad overdraw