Pixelation Shader in Godot 4.0 (Beginner's Perspective)
Ойындар
An attempt to recreate @t3ssel8r pixel art shader in Godot 4.0
I'm pretty new to shaders, so this is a very noobish attempt. Happy to hear how others would do this!
☕ Download the Shader Project
ko-fi.com/s/c4745172c0
🛒Amazon Affiliate Links
If you feel like shopping and supporting me, here are some of my essential buys
Productivity Mouse - amzn.to/3pqQjjN
Low Profile Productivity Wireless Keyboard for Multiple Devices - amzn.to/43YtenR
The BEST Office Chair - amzn.to/3NLbrKW
Graphics Tablet for Your Game Assets - amzn.to/46zlNoX
HDMI Extender - amzn.to/3NLDcTN
🏅🏅Attributions🏅🏅
Assets Used
Skybox - artstn.co/m/1LgWz
Models - quaternius.itch.io/150-lowpol...
References
docs.godotengine.org/en/stabl...
Music
'Permafrost' by Scott Buckley - released under CC-BY 4.0. www.scottbuckley.com.au
Пікірлер: 145
Absolutely love this, please do more tutorials like this. Sometimes you really do want a tutorial that is short and straight to the point.
@gamedevaki
Жыл бұрын
Thanks for the kind words! Are there any specific tutorials you want to see?
thank god you made this, because of some guy in unity you basically saved me alot of time to remake my game in godot
@gamedevaki
10 ай бұрын
Glad you find this helpful!
@alt-q1y
10 ай бұрын
Ayy welcome to Godot brother, it's a good time to switch over
00:40 me always when I have to make an important decision
Hands down the best godot tutorial i've seen. Straight to the point, clear explanation. No time wasted. Keep it up !
You can also just set the project settings -- Godot will do pixel perfect with pixels larger than normal without any of this. Project Settings > Display > Window > Stretch > Scale, Mode, Aspect adjustments. Have a play with them.
@gamedevaki
10 ай бұрын
thanks for the insights!
@theconfusedcat159
3 ай бұрын
i love you so much for this
@UltimatePerfection
2 ай бұрын
Not when you want to render the UI at a "normal" resolution. Or have a way for the player to disable the pixelation.
thank you SO much! been looking for this for ages!
I have been trying to wrap my head arround shaders in godot for a week or two, this helped me more than any other tutorial
This is amazing!
as a beginner diving into game development, this is amazing! This is just perfect. thank you!
@gamedevaki
Жыл бұрын
Thanks for the kind words, glad you find this useful!
Wow this is great, thanks!
you saved my life, i was struguling to make something like this, thank you
This is a God-send. I thank you deeply.
Awesome! Really cool tutorial
@gamedevaki
Жыл бұрын
Thanks for the kind words, glad you enjoyed it!
loved the video, the time - information ratio is amazing, but i loved the way you explain so i wouldn't mind longer videos if it ever feels like a burden, take it easy, much love
@gamedevaki
10 ай бұрын
Thanks for the kind words, it really meant a lot to me!
I like the dramatic voice over, feels like I'm listening to an audiobook
@gamedevaki
Жыл бұрын
Thanks for the kind words, glad you like this!
@thecrazybird
10 ай бұрын
My thinking exactly! It could just as well have been about that time a cave diver got stuck and had to be rescued. Same intensity :-)
How to fix the fact that the brightness of the screen with the shader changes depending on the directional light?
@tigergamespl2713
4 күн бұрын
have you figured it out?
love the video! im new to shaders and this helped me understand them a bit more. Cool voice as well. Like a movie trailer of something, lol
@gamedevaki
11 ай бұрын
thanks for the kind words, glad you find this video useful!
Thank you so much!
Thanks a lot!!
another element of the original implementation is the use of outlines using the depth and normal buffers
@gamedevaki
Жыл бұрын
Thanks for the insights, will be exploring those two next!
Subbed and activated notifications! Thanks a bunch man!
@gamedevaki
Жыл бұрын
Thanks for the support!
thank you so much
Very nice!
@gamedevaki
10 ай бұрын
Thanks!
Great explanation
@gamedevaki
Жыл бұрын
Thanks!
Thank you so much
Thanks!
Nice video. It's crazy how no one has fully figured out how t3ssel8r did his 3d pixel art. There are so many videos referencing his and trying to figure it out.
@gamedevaki
Жыл бұрын
Thanks! Yeah, t3ssel8r done some amazing works!
I remember that video lol. It's was interesting to watch how you solved this with Godot.
@gamedevaki
Жыл бұрын
Thanks! I don't think I've fully solved it yet, but I do think the Pixelation shader gets most of the job done.
Thanks a lot! Can you please tell me if you know a way to display 3d text whilst this is running? I don't want the text to be pixelated
just what i was looking for 🤝
@gamedevaki
Жыл бұрын
Glad you find it useful! 🤝
Its all great, but i cant see any particles in blend mode mix. Do you have any workaround for that?
Thank you
This channel is a gold mine!
@gamedevaki
10 ай бұрын
Glad that you feel that way! :)
AWESOME
Everything works perfectly, except my Particle Emitters (a rain effect in my game) doesn't project through the mesh, is there anyway to resolve that?
i hade the same problem but finaly its fixed thx!
@gamedevaki
Жыл бұрын
glad to help
tysm
fucking finally, ik its the generic thing to say but every other tutorial on this was so long and skipped stuff, this was right to the point
I applied this directly the the camera of a first-person character, and the screen gets darker as I look further up to the sky. Is there a way to fix this?
neat tutorial
@gamedevaki
Жыл бұрын
thanks!
Pretty cool video. Just wondering, if it would be possible to do this as a canvasitem instead of using a meshintance?
@gamedevaki
11 ай бұрын
thanks! canvas_item is possible, but the pixelation will be applied to all elements visible in the camera. I choose a mesh_instance to make it apply pixelation on select elements
Thank you very much for the video! What kind of a performance hit does this make?
@gamedevaki
10 ай бұрын
Thanks for watching, this was my first attempt at shaders, so the performance definitely wasn't optimized. I'm currently learning about pre-render and baked mesh to try creating pixel models with better performance. Still experimenting, so no real answer for that yet.
yo! awesome. i seem to be having troubles wih transparent/translucent textures
Interesting video, do you know if any resource that goes through step by step what are the different parts that build up a shader like you started doing in this video?
@gamedevaki
Жыл бұрын
Thanks for the comment! The closest I've found are the Godot documentation. Admittedly, I haven't done much research into shaders yet.
So I'm also quite new to shaders, but I think there is a significant problem with this approach. From my understanding, this method renders the scene at full resolution, and then 'scales' that render down to the target resolution. However, this means you are still using the GPU resources required for rendering at full resolution, even though you are later throwing away a lot of that information. It is better if you render the scene in the lower resolution first and then scale that result up, instead of the other way around. I've never done this in Godot so couldn't suggest a method, but thought I should add in case anyone has a solution.
I'm new to Godot... and I'm surprised how easy some stuff can be. This can be great for a 2D pixel game as well to make the cast shadows all pixely so the style doesn't suffer ^_^
Can i use on a 2D project?
It's free behind the pay wall?
I got mine working in every aspect except the mesh is blocking the camera with a black rectangle. I can hardly see the filter working through it but i can't figure out how to get the filter without the darkening from the mesh it seems to have something to do with rotation. if i rotate the mesh, the filter applies correctly, but as i continue rotating it, it starts to fade back to black. this includes real time rotations when running the game. any idea how to fix this?
@1234567890135792468
6 ай бұрын
it's because it's receiving light, you need this at the start of your code "render_mode unshaded;"
@mouseroot8053
5 ай бұрын
@@1234567890135792468 This solved the light issue I was having, thank you so much, the problem was when you rotate the player so the sun was hitting the mesh, your quick fix was exactly what I was looking for.
@notcarbuncle1493
2 ай бұрын
@@1234567890135792468 ayyy you fucking king you fixed it for me thanks
legend
@gamedevaki
10 ай бұрын
thanks!
how do i do it in 2d though
Does this mean people on high resolution monitors will have smaller pixels than those playing on low resolution monitors? (is there a way to prevent this?)
@gamedevaki
5 ай бұрын
yeah, I didn't consider the different monitors resolution previously. we should be able to add a function to figure out the different monitor resolution and divde it accordingly.
This method of pixelation is popular but not very optimized. Your GPU is doing all the work of a higher resolution and you're just throwing it away using a nearest neighbor filter that's more expensive than an actual nearest neighbor filter. It's much better to render the scene at a lower resolution
@gamedevaki
10 ай бұрын
Thanks for the insights! Would like to hear more about this. I'm very new to shaders, so this is my best attempt at trying to replicate t3ssel8r's showcase given that I can't find any detailed breakdown for that. I tried rendering the scene at a lower resolution, but my UI elements becomes unreadable. Curious to learn how you managed to resolve that?
@nzundist
10 ай бұрын
@@gamedevaki 1. make your 3d scene - including a camera 2. make a 2d scene w/ the GUI 3. In the 2d scene: a) include a subviewport and add instance of your 3d scene under that -- now the 3d content is being drawn to an offscreen buffer! b) add a TextureRect with layout to fill the (2d) scene view and set its texture to be a ViewportTexture -- which you point at the Subviewport for its content 4. tweak the SubViewport settings to make the render size small - thus pixelizing content. Your project view settings remain 'normal' for default resolution / stretching / etc. Thus the GUI is rendered at target resolution. The SubViewport + TextureRect gives you a scaled & stretched view of the 3D scene but you position it just like any other 2d component in your GUI. Screenshot of the effect: imgur.com/a/QOV8ZpU
God bless you
Anything that has a material with transparency enabled becomes completely invisible. Is there any way to fix this?
@wielbicielgoebi3313
4 ай бұрын
You need to change the transparency from Alpha to Alpha Hash or Alpha Scissors. Hope it helps.
render_mode unshaded; at the start fixes the gray/black square when rotating the camera
@gertrudegaming817
6 ай бұрын
that really helped me thank you
@paremyoutube
4 ай бұрын
Thanks a ton, dude! :D
@DinoLitOfficial
Ай бұрын
YOOOOO thx soo much!
Great tutorial and explanation. Could you make a tutorial on how to make a ground telegraph that has a gradient fill over time like with certain abilities in Albion Online or Wildstar?
@gamedevaki
Жыл бұрын
Thanks for the positive feedback. I haven't played both of those games. Do you have any specific abilities names that I can reference?
@vellendev
Жыл бұрын
@@gamedevaki thanks for the reply! There is a video called “Wildstar: Warrior telegraphs with a suggestion” about 2 mins in you will see the light blue telegraph on the ground and it fills with a gradient based on how long it takes to cast the ability
@gamedevaki
Жыл бұрын
@@vellendev ah I get what you mean now. feels like you don't really need a shader to do something like that though. let me see if I can make a video about that. thanks for the suggestion!
@vellendev
Жыл бұрын
@@gamedevaki of course! Looking forward to it :)
@gamedevaki
Жыл бұрын
@@vellendev I'm currently experimenting with simple fill over time effect for telegraphing attacks. Will take a while to clean up and make a tutorial, but here's a link to the experimental code if you are still figuring it out. ko-fi.com/s/4c1129668c
Can you add a dithering effect? Often, pixel art uses certain amount of colors, this will be very helpful and more stylistic.
@gamedevaki
5 ай бұрын
Great idea, let me look into this
Hiya its a great tutorial and wanna attempt on godot 3(cause 4 is not allowing vulkan for some reason) but I cannot find the code on Kofi
@gamedevaki
5 ай бұрын
Hi, I don't have support for Godot 3 at the moment
anyone know if this could hypothetically work in 2d?
@gamedevaki
Жыл бұрын
it should technically work, you would probably need to apply the shader to a canvas layer instead of a quad mesh
Ah, obvious question: Why not just render at a lower resolution in the first place? Instead of rendering at 1920*1080 and post-processing in a shader, just render at 240*135 and do a nearest-neighbour resize to 1920*1080. Would be way faster as you're only rendering 1/64 of the pixels and nearest-neighbour scaling is about as fast as you can get. Heh. I just realised that you'd be getting a lower resolution than I do when playing old games in DOSBox. They typically run at 320*200. That said, I have used the approach in the video, but it was for a video filter in Media Player Classic (which can run shaders over the video) back when I was still on Windows. Unfortunately, there doesn't seem to be a cross-platform equivalent and MPC is strictly Windows-only, despite being open-source (and no, it doesn't work properly with WINE, I tested it out just yesterday).
@gamedevaki
10 ай бұрын
I initially tried rendering at lower resolution, but my UI elements and skybox also ended up pixelated. I was experimenting with this shader for use with a HD-2D game, so rendering at low resolution don't really meet my use case. Sounds cool to apply this to a video filter!
@Roxor128
10 ай бұрын
@@gamedevaki Don't render everything at the same resolution. There's lots of precedent for it in old games. Plenty of old FPS games had a low-resolution option that would render the world at half-resolution to get a bit of speed out of a slow machine, while drawing the UI at full resolution. Even more common was the option to shrink the view down and add borders (because 320*200 was as low as you could go and still have 256 colours (hacking text-mode could get you 160*100 with 16 colours)). You could play Doom in a postage stamp if you wanted (or had a computer slow enough that it was necessary to get the game playable). Render the world in one resolution, resize it up to the running resolution, and draw the UI over the top. You may even be able to skip that last step if the view is strictly rectangular and just replace the world view's contents. Okay, that's probably penny-pinching for performance these days, but it would have been worthwhile back in 1993 if it saved you redrawing the lower quarter of the screen. As for the skybox, also doable with this kind of approach. Draw that first, then when doing the low-res render of the world, mark the space for the sky transparent and make use of that when putting down the world, then do your UI last. High-res sky, low-res world, and high-res UI.
@gamedevaki
10 ай бұрын
Thanks so much for the insights!
Can a shader like that work with a 2d scene. What if you have a rigged character and you use skeleton animation with it and you want to make him pixelated.
@gamedevaki
Жыл бұрын
it should technically work, you would probably need to apply the shader to a canvas layer instead of a quad mesh, and set the canvas layer between the rigger character and your 2d camera
The music and the voice made it so dramatic!
I dont know shader coading, actually I dont like it ... I usaly use vidual shader. Is there any way..? That i can use to manipulate shader propertise .. lets say change color of a object from gdscript. (godot 4).. Thanks in advance.
@gamedevaki
Жыл бұрын
I haven't really tried visual shader, mainly because I get overwhelmed by all the information the visual shader presents. Let's break things down, if we want to change the color of object, then we would likely need to update the albedo of the material. Depending on what object you are making changes to, modulate might also be another option.
Why not just render at 320x200 and stretch?
@gamedevaki
10 ай бұрын
I initially tried rendering at lower resolution, but my UI elements and skybox also ended up pixelated. I was experimenting with this shader for use with a HD-2D game, so rendering at low resolution don't really meet my use case.
Thanks great tutorial, But if I would be picky I guess make it less conspicuous it's a shader/camera effect, like I mean as the light flickers, say the trunks and branches increases/decreases by a few pixels. There are some literal pixel assets and low poly assets and dynamic lights don't act this way. Maybe I'll make an example. How like some 2D art or Ghibli 2D style are inconspicuous even tho they are 3D.
@gamedevaki
Жыл бұрын
Thanks for the feedback! Yeah, definitely agree that the shader have some limitations that I'm currently not well equipped to resolve. Indeed, the ideal scenario is to handle the lighting differently from the models. Would be great if I can someday incorporate even a fraction of Ghibli 2D style into my works!
How different for Godot 3.5
@gamedevaki
Жыл бұрын
Haven't try implementing it in Godot 3.5 yet. I think the syntax might be different, but the principles should be the same.
Is the voice in the video yours or is it some kind of text-to-speech thingy? Seriously asking!
@gamedevaki
Жыл бұрын
It's a text-to-speech voice
@zeektm1762
Жыл бұрын
@@gamedevakiwhich tool?
@gamedevaki
Жыл бұрын
@@zeektm1762 I'm using tortoise-tts by neonbjb
Спасибо брат
First! 😎
@gamedevaki
Жыл бұрын
Thanks for the support!
it has no way of showing textures
Just make the game a lower resolution
@gamedevaki
10 ай бұрын
Thanks for the suggestion! I tried rendering the scene at a lower resolution, but my UI elements becomes pixelated as well. Curious to learn how you managed to resolve that?
@FATBOI_GX
10 ай бұрын
@@gamedevaki I don't use HD ui for low resolution games. Personally I think it looks ugly and a waste of performance if the game is at a "low resolution" tho it really isn't. You could try redrawing ui smaller and Anti-alias it while Conforming to the resolution size to smooth it.
@gamedevaki
10 ай бұрын
@@FATBOI_GX That's very insightful. Thanks for the advice!
why does this guys voice sound ai generated
@gamedevaki
10 ай бұрын
I'm using Tortoise TTS
AI voice
wtf is that fragment math lol, i dont think you should be teaching others if youre that new
Hi, I'm trying to use this shader for a 3D fps project. I have 2 cameras with different fov, one for player vision (layer 1) and one to overlay hands and weapons (layer 2). When I enable this shader mesh for layer 2 it pixelates the hands/weapons but makes the rest of the world invisible with just environmental background active. Would you know a solution or a workaround?
@gamedevaki
5 ай бұрын
Think this shader might be too limited for this use case.