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. 🙂
Objective
Modularity
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)
Reference
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
