Godot 4: 3D Pixel Art

[@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!

[@wisdompls]

I went to post this exact comment. Fantastic video, very helpful, no bs, and even put the code right in the description. Easiest subscribe ever

[@vas-poenitentiae-08]

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.

[@kyriedarling]

This worked for the second method for me as well - thank you very much!

[@devpolybytes]

I did something similar as well! I added a TextureRect as a child node of the Camera3D, added a PlaceholderTexture2D to it, set the anchor preset to full rect so it would be the exact right size for the viewport, and then followed the same steps with the material and shader.

[@sainmanstanding]

Appreciate the update!

[@xsnnnv7v]

is there way to apply this effect to only one object?

[@vas-poenitentiae-08]

@@xsnnnv7v are the other objects 2d or 3d?

[@maxmustermann3938]

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.

[@intergalacticGM]

I was going to comment the same thing. What I don't remember is if the viewport node have some refresh rate limitations. Afaik no but I might be wrong. Not to mention that it gives a sporadic warning sometimes, I keep receiving notifications about the issue, like it's not solved yet. Anyhow, it works and it's very easy to implement.

[@maxmustermann3938]

@@intergalacticGM I do think I heard Viewports specifically in 4 behave a bit buggy

[@Juke172]

I wonder which is better: upscaling viewport or downscaling with shader. I would assume upscaling is less expensive process for GPU/CPU, because for shader you have high resolution viewport before the shader is applied. Shader would be better if you wanna add some more effects before and after that. So using shader is more versatile. Though if viewport is buggy I wouldn't bother with it right now.

[@TheRhalf]

Wouldn't this be better performance wise?

[@LexGear]

@@TheRhalf I too would like to know. Because method two in the video is actually more intense.

[@edgartdev]

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

[@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

[@indieology7336]

Great tutorial, thank you for explaining everything so well!

[@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.)

[@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?

[@travh98_]

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.

[@travh98_]

To have the shader fill the viewport even after resizing the window, I replaced the Sprite2D with a Control node (Layout set to Full Rect) , a VBoxContainer inside of that (also set to Full Rect) and inside of that I put a TextureRect with tthe Godot icon.png, Expand set to On, Flip V set to On, and the ShaderMaterial on that TextureRect. Now I can fullscreen, half screen, drag the edge of the game window and the shader will fill it.

[@dailyfunnytv358]

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.

[@chrisnevermorebotha3040]

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?

[@crigz]

Ohh that'll be a fun one!

[@stingly142]

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.

[@tigrex62090]

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

[@who2273]

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... 😭

[@wizardofyore]

awesome tutorial! thank you for explaining it so clearly

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

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

[@hungryhedgehog4201]

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

[@AslanSilva]

Great video!!

[@wellhellotherekyle]

You’re a legend. Thank you!

[@TurquoiseFranklin]

This helped a lot. Thank You!

[@sutsuj6437]

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)

[@bajambus9091]

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

[@vas-poenitentiae-08]

I've figured it out... So you know how he used a sprite2d? Well that's the wrong node to use for it. Simply replace that node with a canvaslayer node with a colorect child node. Then add a shadermaterial to the colorect and add the shader to it. By doing that, it works flawlessly. If you need a more detailed explanation, then just ask me.

[@dudleydoop661]

@@vas-poenitentiae-08 tysm it worked

[@LexGear]

The issue I have with the second method is that the generated pixels are of the same ratio as the screen itself, not square. Is there an easy way to fix this?

[@olly3b]

Excellent video. Thank you.

[@redex991]

very very good tutorial, thank you!!

[@jtn191]

How did you get those really nice, light shadows?

[@GodotEnjoyer]

Is there any way to have 2d pixel art game with high overlay in godot 4.2 with fixed integer scaling?

[@RogueEva]

never tried it but can't zou have multiple viewports? one for pixelation of game and unpixelated one for UI?

[@alexeykurilo4381]

Interesting stuff, thanks.

[@simonw.1223]

how do I know this shader language like should I look it up in godot?

[@anispinner]

As soon as we reached realistic graphics we started moving backwards.