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

  • @-XFR-
    @-XFR- Жыл бұрын

    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

    @gamedevaki

    Жыл бұрын

    Thanks for the kind words! Are there any specific tutorials you want to see?

  • @extravirginoliveoil2
    @extravirginoliveoil210 ай бұрын

    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

    @gamedevaki

    10 ай бұрын

    Glad you find this helpful!

  • @alt-q1y

    @alt-q1y

    10 ай бұрын

    Ayy welcome to Godot brother, it's a good time to switch over

  • @movgto3392
    @movgto33926 ай бұрын

    00:40 me always when I have to make an important decision

  • @omaraboudou1255
    @omaraboudou12558 ай бұрын

    Hands down the best godot tutorial i've seen. Straight to the point, clear explanation. No time wasted. Keep it up !

  • @jimmio3727
    @jimmio372710 ай бұрын

    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

    @gamedevaki

    10 ай бұрын

    thanks for the insights!

  • @theconfusedcat159

    @theconfusedcat159

    3 ай бұрын

    i love you so much for this

  • @UltimatePerfection

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

  • @NexusBaum
    @NexusBaum5 ай бұрын

    thank you SO much! been looking for this for ages!

  • @Neumonics429
    @Neumonics4294 күн бұрын

    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

  • @josephbates8117
    @josephbates81176 ай бұрын

    This is amazing!

  • @itscashew1075
    @itscashew1075 Жыл бұрын

    as a beginner diving into game development, this is amazing! This is just perfect. thank you!

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks for the kind words, glad you find this useful!

  • @loftypancake
    @loftypancake8 ай бұрын

    Wow this is great, thanks!

  • @Ferukin7575
    @Ferukin75753 ай бұрын

    you saved my life, i was struguling to make something like this, thank you

  • @rustyshackleford6788
    @rustyshackleford67888 ай бұрын

    This is a God-send. I thank you deeply.

  • @piousthepious
    @piousthepious Жыл бұрын

    Awesome! Really cool tutorial

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks for the kind words, glad you enjoyed it!

  • @d_ogo
    @d_ogo10 ай бұрын

    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

    @gamedevaki

    10 ай бұрын

    Thanks for the kind words, it really meant a lot to me!

  • @kiyasuihito
    @kiyasuihito Жыл бұрын

    I like the dramatic voice over, feels like I'm listening to an audiobook

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks for the kind words, glad you like this!

  • @thecrazybird

    @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 :-)

  • @dazaizer0
    @dazaizer09 ай бұрын

    How to fix the fact that the brightness of the screen with the shader changes depending on the directional light?

  • @tigergamespl2713

    @tigergamespl2713

    4 күн бұрын

    have you figured it out?

  • @dankmemequeen9581
    @dankmemequeen958111 ай бұрын

    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

    @gamedevaki

    11 ай бұрын

    thanks for the kind words, glad you find this video useful!

  • @michelangeloalesi3920
    @michelangeloalesi39209 ай бұрын

    Thank you so much!

  • @tellezgerardoruben5202
    @tellezgerardoruben52029 ай бұрын

    Thanks a lot!!

  • @seasonal02
    @seasonal02 Жыл бұрын

    another element of the original implementation is the use of outlines using the depth and normal buffers

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks for the insights, will be exploring those two next!

  • @tigrex62090
    @tigrex62090 Жыл бұрын

    Subbed and activated notifications! Thanks a bunch man!

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks for the support!

  • @DarkGigalaxie
    @DarkGigalaxieАй бұрын

    thank you so much

  • @nicolassartor107
    @nicolassartor10710 ай бұрын

    Very nice!

  • @gamedevaki

    @gamedevaki

    10 ай бұрын

    Thanks!

  • @TheTruesey
    @TheTruesey Жыл бұрын

    Great explanation

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks!

  • @spikemonster7857
    @spikemonster78574 ай бұрын

    Thank you so much

  • @rhevoramirez7969
    @rhevoramirez79696 ай бұрын

    Thanks!

  • @iBeamPro
    @iBeamPro Жыл бұрын

    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

    @gamedevaki

    Жыл бұрын

    Thanks! Yeah, t3ssel8r done some amazing works!

  • @ropepores4688
    @ropepores4688 Жыл бұрын

    I remember that video lol. It's was interesting to watch how you solved this with Godot.

  • @gamedevaki

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

  • @semihylmaz3949
    @semihylmaz39494 ай бұрын

    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

  • @renji-hjk
    @renji-hjk Жыл бұрын

    just what i was looking for 🤝

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Glad you find it useful! 🤝

  • @lokofck4533
    @lokofck45339 ай бұрын

    Its all great, but i cant see any particles in blend mode mix. Do you have any workaround for that?

  • @sauravsharma9725
    @sauravsharma97259 ай бұрын

    Thank you

  • @Axiassart
    @Axiassart10 ай бұрын

    This channel is a gold mine!

  • @gamedevaki

    @gamedevaki

    10 ай бұрын

    Glad that you feel that way! :)

  • @teawacrossman-nixom7696
    @teawacrossman-nixom76968 ай бұрын

    AWESOME

  • @SkorgeSlaps
    @SkorgeSlaps9 ай бұрын

    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?

  • @Harald723
    @Harald723 Жыл бұрын

    i hade the same problem but finaly its fixed thx!

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    glad to help

  • @cannedcup
    @cannedcup24 күн бұрын

    tysm

  • @notcarbuncle1493
    @notcarbuncle14932 ай бұрын

    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

  • @vas-poenitentiae-08
    @vas-poenitentiae-088 ай бұрын

    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?

  • @99JasonKim
    @99JasonKim Жыл бұрын

    neat tutorial

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    thanks!

  • @alexanderstreng4265
    @alexanderstreng426511 ай бұрын

    Pretty cool video. Just wondering, if it would be possible to do this as a canvasitem instead of using a meshintance?

  • @gamedevaki

    @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

  • @Brutus-Maximus
    @Brutus-Maximus10 ай бұрын

    Thank you very much for the video! What kind of a performance hit does this make?

  • @gamedevaki

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

  • @samaluh
    @samaluh9 ай бұрын

    yo! awesome. i seem to be having troubles wih transparent/translucent textures

  • @jared7650
    @jared7650 Жыл бұрын

    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

    @gamedevaki

    Жыл бұрын

    Thanks for the comment! The closest I've found are the Godot documentation. Admittedly, I haven't done much research into shaders yet.

  • @ziggycross
    @ziggycross4 ай бұрын

    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.

  • @arjandekker4728
    @arjandekker47288 ай бұрын

    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 ^_^

  • @ridingatthenightok
    @ridingatthenightok5 ай бұрын

    Can i use on a 2D project?

  • @Bjornerokk
    @Bjornerokk3 ай бұрын

    It's free behind the pay wall?

  • @kortpr
    @kortpr9 ай бұрын

    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

    @1234567890135792468

    6 ай бұрын

    it's because it's receiving light, you need this at the start of your code "render_mode unshaded;"

  • @mouseroot8053

    @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

    @notcarbuncle1493

    2 ай бұрын

    ​@@1234567890135792468 ayyy you fucking king you fixed it for me thanks

  • @woodsy4458
    @woodsy445810 ай бұрын

    legend

  • @gamedevaki

    @gamedevaki

    10 ай бұрын

    thanks!

  • @cubothecuboid
    @cubothecuboid6 ай бұрын

    how do i do it in 2d though

  • @Ruben-pq5iu
    @Ruben-pq5iu6 ай бұрын

    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

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

  • @Waffle4569
    @Waffle456910 ай бұрын

    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

    @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

    @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

  • @Cospel
    @Cospel10 ай бұрын

    God bless you

  • @sventomasek
    @sventomasek5 ай бұрын

    Anything that has a material with transparency enabled becomes completely invisible. Is there any way to fix this?

  • @wielbicielgoebi3313

    @wielbicielgoebi3313

    4 ай бұрын

    You need to change the transparency from Alpha to Alpha Hash or Alpha Scissors. Hope it helps.

  • @1234567890135792468
    @12345678901357924686 ай бұрын

    render_mode unshaded; at the start fixes the gray/black square when rotating the camera

  • @gertrudegaming817

    @gertrudegaming817

    6 ай бұрын

    that really helped me thank you

  • @paremyoutube

    @paremyoutube

    4 ай бұрын

    Thanks a ton, dude! :D

  • @DinoLitOfficial

    @DinoLitOfficial

    Ай бұрын

    YOOOOO thx soo much!

  • @vellendev
    @vellendev Жыл бұрын

    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

    @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

    @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

    @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

    @vellendev

    Жыл бұрын

    @@gamedevaki of course! Looking forward to it :)

  • @gamedevaki

    @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

  • @artiartem
    @artiartem6 ай бұрын

    Can you add a dithering effect? Often, pixel art uses certain amount of colors, this will be very helpful and more stylistic.

  • @gamedevaki

    @gamedevaki

    5 ай бұрын

    Great idea, let me look into this

  • @gomolemomolefhi8929
    @gomolemomolefhi89297 ай бұрын

    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

    @gamedevaki

    5 ай бұрын

    Hi, I don't have support for Godot 3 at the moment

  • @ukeman1143
    @ukeman1143 Жыл бұрын

    anyone know if this could hypothetically work in 2d?

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    it should technically work, you would probably need to apply the shader to a canvas layer instead of a quad mesh

  • @Roxor128
    @Roxor12810 ай бұрын

    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

    @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

    @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

    @gamedevaki

    10 ай бұрын

    Thanks so much for the insights!

  • @xampl_
    @xampl_ Жыл бұрын

    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

    @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

  • @spaaske
    @spaaske5 ай бұрын

    The music and the voice made it so dramatic!

  • @godofdream9112
    @godofdream9112 Жыл бұрын

    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

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

  • @habiks
    @habiks10 ай бұрын

    Why not just render at 320x200 and stretch?

  • @gamedevaki

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

  • @MangaGamified
    @MangaGamified Жыл бұрын

    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

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

  • @onajimidori5887
    @onajimidori5887 Жыл бұрын

    How different for Godot 3.5

  • @gamedevaki

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

  • @Relivino
    @Relivino Жыл бұрын

    Is the voice in the video yours or is it some kind of text-to-speech thingy? Seriously asking!

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    It's a text-to-speech voice

  • @zeektm1762

    @zeektm1762

    Жыл бұрын

    @@gamedevakiwhich tool?

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    @@zeektm1762 I'm using tortoise-tts by neonbjb

  • @fapumafu2616
    @fapumafu26163 ай бұрын

    Спасибо брат

  • @ropepores4688
    @ropepores4688 Жыл бұрын

    First! 😎

  • @gamedevaki

    @gamedevaki

    Жыл бұрын

    Thanks for the support!

  • @knightofepikness69
    @knightofepikness692 ай бұрын

    it has no way of showing textures

  • @FATBOI_GX
    @FATBOI_GX10 ай бұрын

    Just make the game a lower resolution

  • @gamedevaki

    @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

    @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

    @gamedevaki

    10 ай бұрын

    @@FATBOI_GX That's very insightful. Thanks for the advice!

  • @nascentspace
    @nascentspace10 ай бұрын

    why does this guys voice sound ai generated

  • @gamedevaki

    @gamedevaki

    10 ай бұрын

    I'm using Tortoise TTS

  • @zippityzoop2576
    @zippityzoop25766 ай бұрын

    AI voice

  • @khlorghaal
    @khlorghaal4 ай бұрын

    wtf is that fragment math lol, i dont think you should be teaching others if youre that new

  • @mamontain
    @mamontain8 ай бұрын

    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

    @gamedevaki

    5 ай бұрын

    Think this shader might be too limited for this use case.

Келесі