Godot 4: 3D Pixel Art

Stylized 3D Pixel shader in Godot 4! Make a pixel art style game with all 3d graphics.

[RosaliaEmerald]

This video is amazing. I literally put one of my projects on hold because I couldn't figure out how to do the pixel effect properly. Now I can get onto the art-style proper! Thank you!

[edgartdev]

0:21 Edit viewport resolution
1:32 Visual Shader
4:42 Manual Shader

[maxmustermann]

You can also create a custom viewport. Basically method 1, and then you upsample that viewport with nearest and your game itself is still in the full resolution, so you're putting UI in the default viewport.

[creationsmaxo]

Thanks a lot for this short tutorial.
From what I have tried, if someone want to display things in relation to the original resolution of specific kinds of game, I have set the FloatParameter to a min of 64 and a max of 1024 and the step to 64 and the result is pretty much consistent with:
64 = Atari level of pixels.
192 = NES level of pixels.
256 = GBA level of pixels.
384 = SNES Level of pixels.
576 & 640 = PS1 level of pixels (576 is kinda like FF7's backgrounds. 640 is kinda like Vagrant Story backgrounds' textures level of details)
1024 = PS2/PC Pixels arts styled games. A bit like if you made HD 2D sprites.

Personally, I find a certain charm from using a value of 448 it's kind like the classic games on SNES, but with a little extra crispiness around the pixels that flows really well with animations.
You also get just enough light details on the meshes from things like torches, flashlights and/or fire flashes.

Lastly, one thing that isn't explained well in this video is the fact that the pixelated effect is order-based, meaning that if you put the Node that contains the effect as the last node of the Nodes' list of a scene and have, above, other UI nodes, those UI nodes content will be affected by the Pixelated effect.
I have created a scene that I can drag&drop in any viewports I want the effect applied on. This allows me to, for example, generate in-game rotating/animated icons with the same pixelated effect in my UI without affecting the UI itself. :D

[vas-poenitentiae-]

The second and third method no longer work, but I've figured out how to make the shader from method 3 work again...

1. Change the sprite2d node to a canvaslayer node
2. Add a colorect to it as a child node
3. Add a new shadermaterial to the colorect node
4. Add your shader to the new shadermaterial

And then it should work perfectly. Please tell me if this doesn't work for you and I'll figure out a way to fix it.

[skaruts]

An alternative to the first method is to change the scale in the "stretch" settings. Iirc you need to have the other setting set to "viewport". This creates the same effect. (No need to use the width/height overrides with this method.)

[indieology]

Great tutorial, thank you for explaining everything so well!

[travh_]

Great tutorial, I used Pixel Shader 1's code and it works good. I had an issue where the pixelation shader was rendering upside down, to fix this I just set the Sprite2D's Offset to Flip V and that resolved the issue.

[leonstansfield]

looks cool, some different approaches to 3D pixel art in godot! I like it!

[DevWaddle]

when testing the second method, it just shows the Sprite 2d. Is there a way to solve this?

[stingly]

Very well explained - I appreciated the in-depth look at the visual shader too. I was wondering if you had any benchmarks on the performance of each option? I would have thought that the first option would be the fastest, but genuinely curious how much of difference running the pixelation through a shader would cause.

[dailyfunnytv]

great video. I would like to propose a recommendation. it would be very helpful if you added some animated cube rotating or a floating sphere with a sine movement so we can actually see how the pixels look for a bigger moving 3d object.

[tigrex]

Awesome, straight to the point tutorial! Thank you!!

[who]

very good stuff sir! i wonder how would you go about adding some pixel outlines to each mesh?
also commenting for the algorithm, thank you so much... 😭

[chrisnevermorebotha]

Thank you, very much. Great video. Any chance for some procedural animation with IK? Or maybe your water simulation shader from Unity to Godot please?

[wizardofyore]

awesome tutorial! thank you for explaining it so clearly

[hungryhedgehog]

Using a display filling sprite to make a postfx shader is an odd way to go about it. Thanks for tutorial

[ΔΑΝΙΗΛΚΑΤΡΑΝΤΖΗΣ-ιυ]

in the second method if you go to the visibility, Clip Children and you put it clip only, it fixes

[sutsuj]

Wouldn't using a Texture Rect also work ? (then you don't have to adjust the width and height, if you click on full rect)

[bajambus]

hey I know this is an old video but I'm having a problem with method 2. for some reason its just not working for me, when I run the game there's just a stretched sprite in my camera view, I don't understand what I'm doing wrong, any help would be appreciated as it seems to be the best method displayed in the video