How to make 3D Pixel Art in Godot! (godot 3.X)
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 2024
- In this video, I discuss how the godot engine can be used for some nice 3D pixel art using some simple shaders! We explore how to pixelate the screen, limit the colour palette and project nice cloud shadows for 3D pixel art in godot!
This is a Godot tutorial not Brackeys 2022.1 game jam indie devlog It is an indie game devlog tutorial with indie games like Breath of the wild 2 hyper light drifter. Godot is a open source game engine like unity and Godot tutorial how much money did my indie game make!? it is a game made by 1 person - a solo devlog! This indie game unity devlog is a unity 3D tutorial devlog. Godot.
Resources:
Palette limiting shader: • How to Limit Color Out...
Toon shader: • TRUE BoTW Shader | Maj...
Cloud shader: / shader_to_create_simpl...
Follow me on Twitter: / leonstansfield0
And check out the game on Itch.io :leon-stansfield.itch.io/ - เกม
![[UNCUT] ฝันรักห้วงนิทรา | EP.3 (1/4)](http://i.ytimg.com/vi/zVXAFD1OLZg/mqdefault.jpg)
If you're looking for the "authentic" isometric look, then you'll want to set your camera rotation to X: atan(1/2), Y: 45, Z: 0. The X is roughly 26.565 degrees, and it should give you a (mostly) nice 2 pixels across by one pixel up stepping.
I look forward to trying this out, I think having a 3d pixel environment like this, and then billboarded 2d pixel art sprites for characters would be a great aesthetic.
like octopath traveler?
That's essentially what I've been doing for my game! I love the aesthetic it produces.
that would look so cool, maybe like the ds pokemon games?
@@flashfreak62 Looks awesome, but its pixelart on 3D meshes. It doesn't use this palette-pixelation postprocessing.
I love the 3D pixel art aesthetic
Keep up the good work 👍
Love how the final scene turned out!
I only just started poking around in Godot, but this helped me with shadows in my 2D scenes- even though my window size was set to 640x480, the they were too smooth. Halving the window size and setting the test width and height actually made the shadow edges consistent with sprites. So, thank you!
Today you taught me how to fix a scene with 16x16 sprites- maybe one day I'll be in a position to use this vid to set up a cool 3D scene:)
As a Unity user trying to investigate switching to Godot, and looking to create this look I’m so grateful this video exists!
It’s super reassuring to see that it is not only possible, but simple too.
Though, I feel like this scene you work on is very inspiring by t8ssel8r’s game project, which I think is a great reference for this look.
At any rate, thanks a lot for making and sharing this video! :D
Awesome video and nice explanation :D your scene looks great!
I loved this! Thank you so much for making it!
Thank you,I've been looking for a way to do it in godot. Subscribed
Thanks a lot for another great video!
The explanations for the code were so good, that I could just add them as comments near every code block, and make sure I can understand what's going on even if I come back to it 1 year from now :)
I will say, I only learned 'till now to to program 2D basics. Learning more into graphics, shades and what not seems really threatening haha seems like there's so much to learn
Glad it helped! Dont be scared of shaders, they seem complicated but godot has a great community to help you as well as a bunch of free shaders to drag and drop from sites like godotshaders.com!
You're a legend for this one, cheers!
Thanks man it's really awesome
i really like 3d pixel art can't wait to see ur game project on steam
great video! thanks man.
really nice video mate
Awesome video thanks for sharing! The scene looks beautiful. Did I missed it or how did you created the wavy grass?
Edit: nevermind, just discovered your other video about it.
This was awesome and I think it’s time to make some top down 3D games now!
looks nice
OMG ITS ACEROLA! (thanks, I aspire to make videos as good as yours :D)
You can find converters online for the colors :)
You know with the pallet colors you could just use a single image of the pallet and a number of the colors and divide the uv by the color amount to find where to sample each color. It be a lot simpler than 46 uniforms and then putting all of that into an array. And it makes it easy to swap pallets later or make specific tweaks to it without having to go through all that
It also improves performance
Appreciate the vid. Been trying to find the right solution for pixelizing in my godot game. One problem I've had with your method in the current version of godot is that there isn't a test height or width. I'm not sure if that is related, but when I change the viewport height/width to my target resolution pixels will sometimes visibly stretch (or pixels that *should* be a certain color don't appear at all).
I'm wondering if maybe this is because movement isn't scaled to the pixel grid?
I know this video is from a long time ago but any help would be greatly appreciated
Hey man any ideas on making a grass tutorial? Ive been having a lot of trouble getting the shaders to both do billboard as well as grass swaying without it all going to shambles
Doing a comparison to find the closest color for everything pixel for every frame will eat up you frame budget. You want to precompute that. Use a lookup texture, colors are vectors so you could arrange every color of your palette in a cube and then convert the original color into coordinate to the corresponding color, no comparison, very fast.
I would actually recommend making your grass blades shorter and slightly thicker, most grass in pixel art follows this to help it read better. Essentially just make the grass more similar to a few thin leaves rather than a blade of grass. Right now, it still reads as grass near the stone but it's not clear in open fields. What would also help is if you make it so that your grass receives shadows. I would also recommend looking into outlines to help show depth and normal creases. Getting clean, single pixel outlines is pretty tough but I could explain how I did it if you need me to. I've researched t3ssel8r's 3d pixel art pretty extensively and recreated almost everything in his videos, in my own style of course. The only thing I haven't recreated is his terrain editor which I really wish I had the knowledge to make. For anyone else, I am willing to explain how I recreated the style.
My grass blades are actually already only 1:1.5 width to height. As well as this, I will not be turning on shadows for my multi-mesh instances both due to the performance hit and that it causes grass in areas not in shadow to be visible (I like how it is not all visible). I have discussed outline shading with some of my friends but it seems very difficult in Godot to the fact that we have no access to the normals buffer, meaning we can only detect if there is a significant difference in depth between neighbouring pixels (using the depth texture), and not if there is a significant difference in normals. making outlines using this can be ok, but they are not perfect. Also I actually just prefer pixel art without outlines, similar to hyper light drifter... it's up to personal preference and that's what I have preferred in my own work :P. If you have managed to recreate the outlines in Godot, I am curious to hear how you may have gotten past this however, if you want to share :)
I actually don't use Godot often so I'm not sure how this could translate into that engine. But in Unity, I am able to render what the camera sees to a texture and so if I apply a normals shader to the entire scene, it essentially gives me the normals buffer. Like I said before, I'm not sure how that would translate into Godot. I also really do like the art style of hyper light drifter, I'm excited to see your take on the style.
@@dominic_sanchez Dude, t3ssel8r is a fucking legend. He is making one of those rare indie games you are hyped about like it's a tripple-a release 20 years ago. If you have recreated anything similar in Godot, would you mind to upload some screenshots or a trailer? Is the screenshot in your youtube title image from your game using pixel-shaders?
@@NoqtisI agree, t3ssel8r's work is amazing and I'm really excited to see where he takes his game. I use Unity, I haven't really used Godot enough to make something similar but I'm sure it's possible. You're correct about my profile banner, but everyone says pixel shaders which isn't really correct. I would say that t3ssel8r's video titles sometimes give people the wrong idea for what's actually happening in his videos. All I do is render my game at a low resolution which is what t3ssel8r said he also does in one of his comments. I've really debated uploading a video with what I have. I'm proud of what I've made, it's just that seeing the swarm of people in t3ssel8r's comments that just want a hand holding tutorial without actually seeing that he explains everything in either his video description or in his comments doesn't sound like a fun thing to manage. I would be fine sharing a screenshot but I don't really know a good place to share them at, any recommendations?
@@dominic_sanchez
You can upload images on imgur.
And I understand the pixelated style isn't 'a real shader'. I'm just using the name for convince. And I'm too much of a noob to understand why it isn't being done with shaders. Wouldn't shaders give more control how pixels are being depicted?
In this video for example if the cube from the start is being 'converted' into pixel style his borders at the bottom are sloppy. Is the only way getting a nice pixel art line fiddling around with the 3d model and the perspective? And wouldn't shaders enable to be a bit more precise? Maybe something on top of the resolution solution?
I'm only doing 2D games in Godot or let's call them prototypes. I need a bit more training in coding to be able to make full fledged games. I'm always looking for gamers and game developers because I love talking about game design. If you are interested, feel free to add me in Discord. My username is Xeon#2901.
You are welcomed to hit me up every time you wanna talk about something related zu Games or their development. If you need inspiration or an outsider perspective on your game ideas, I'm eager to help. Might take some hours til I answer though. Not very much of a multitasker. I like to focus on everything I do.
WOW I AM AMAZED THIS IS BEAUTIFUL!
Can you make the project files public plsssss?
If not you are kind of obligated to turn this into a longer project, as it is way too beautiful.
I am actually intending on this being a long term project, but Ill try to set up a quick project to upload to github if i remember later :D
@@leonstansfield 👀 that would be nice, i struggle with the shadow/lightning and camera settings 😅
man this is so cool
uweeeeeeeee
you can use the following script to generate your uniform vec4 for the palette values:
#youll need a ColorRect in the scene to grab the RGB values from
var colors =[ ]
var color_values = "1b112c, 413047 ,543e54, 75596f, 91718b, b391aa"
#color values from the hex code of the palette with a coma between each one (you can just copy then all in one go from lospec and use godots replace function to remove the "#" and replace them with ",")
var color_number = 1
func _ready():
colors = color_values.split(",")
for i in colors:
$ColorRect.modulate= Color(colors[color_number - 1])
print("uniform vec4 color_" + str(color_number) + " = vec4(" + str($ColorRect.modulate.r) + "," + str($ColorRect.modulate.g) + "," + str($ColorRect.modulate.b) + ",1.0);")
color_number += 1
#and then just paste the printed output into the shader script
Hello! Very nice video. How exactly did you do grass? Its the same method like in your other video about grass? Thanks!
Yes, it's similar to my grass video. I actually have been using the spatial gardener plugin as opposed to the scatter plugin however, as it handles LOD itself, but both are very good .
cool
I started making a game some time ago, and I use the same methods for the pixel art style. Also what is the grass you used?
Thats awesome! I made a video about grass in godot which I reccomend taking a look at (shilling for myself lmao). Since I made that video a new tool has appeared on the scene called the godot spatial gardener, which is perfect for painting multi mesh instances over scenes and I have used it here. I highly reccomend it! Link: github.com/dreadpon/godot_spatial_gardener/issues
need this fs fs
My brain: i want to make a animal crossing new horizons like game but pixel/ me: clicks this video/ this video: good tutorial + animal crossing music/ me:🙂😀😃
hey those Shadows in orthographic camera projection are so clean how did you do that ?
They should just be the default directional light shadows!
Wow that looks so beautiful! I wonder if there's a better way to do that color palette shader that doesn't include 46 uniforms. Maybe something texture based?
That might be a video idea I could steal hehe.
I did think that... but if it works it works :P I guess rendering at a low resolution makes up for it?
@ilams Could you share that information with me as well? I'd love to learn more about this
@ilams I would love to see it as well
it can be done by pre-computing a 3D lookup texture that encodes the correct color for a given rgba coordinate, that's also how color grading works
@ilams This is awesome, thanks for sharing! I'm currently working on implementing something similar in unity.
I've got the downscaling and the toon shader down, and in order to get rid of blurry pixels from anti aliasing I use a post-processing shader to limit the palete to colours from a texture.
The part I'm stuck on is the perfect pixel camera with sub pixel movement. I'm also thinking about whether or not I want edge detection.
"I'd rather spend one hour doing something than 6 automating it." He's an impostor! Blasphemy!
I wander where to get the cloud noise texture?
hmm me too.
(spoiler alert, its just a noise texture)
What is your godot theme ?
I just stole the dark theme colours from one note for Windows 10 :P
did you change anything with the shadows? Mine are just super dark.
All my grass shadows are turned off if that's what you mean. As well as that I recommend adjusting your ambient (in the world environment) and directional lights to lighten up the shadows to your liking
@@leonstansfield thank you I’ll try it out when I have time. Appreciated
I got the shadows working i believe! Is it possible you're willing to share the Apollo color codes for the color picker shader?
@@ryscale4014 yeah for sure: uniform vec4 color_1 = vec4(0.08984375, 0.125, 0.21875, 1.0);
uniform vec4 color_2 = vec4(0.14453125, 0.2265625, 0.3671875, 1.0);
uniform vec4 color_3 = vec4(0.234375, 0.3671875, 0.54296875, 1.0);
uniform vec4 color_4 = vec4(0.30859375, 0.55859375, 0.7265625, 1.0);
uniform vec4 color_5 = vec4(0.44921875, 0.7421875, 0.82421875, 1.0);
uniform vec4 color_6 = vec4(0.640625, 0.86328125, 0.85546875, 1.0);
uniform vec4 color_7 = vec4(0.09765625, 0.7421875, 0.82421875, 1.0);
uniform vec4 color_8 = vec4(0.14453125, 0.3359375, 0.1796875, 1.0);//
uniform vec4 color_9 = vec4(0.2734375, 0.5078125, 0.1953125, 1.0);
uniform vec4 color_10 = vec4(0.45703125, 0.65234375, 0.26171875, 1.0);
uniform vec4 color_11 = vec4(0.65625, 0.7890625, 0.34375, 1.0);
uniform vec4 color_12 = vec4(0.8125, 0.8515625, 0.56640625, 1.0);
uniform vec4 color_13 = vec4(0.30078125, 0.16796875, 0.21484375, 1.0);
uniform vec4 color_14 = vec4(0.4765625, 0.28125, 0.25390625, 1.0);
uniform vec4 color_15 = vec4(0.67578125, 0.46484375, 0.33984375, 1.0);
uniform vec4 color_16 = vec4(0.75, 0.578125, 0.44921875, 1.0);//
uniform vec4 color_17 = vec4(0.83984375, 0.70703125, 0.578125, 1.0);
uniform vec4 color_18 = vec4(0.90234375, 0.83203125, 0.69921875, 1.0);
uniform vec4 color_19 = vec4(0.203125, 0.109375, 0.15234375, 1.0);
uniform vec4 color_20 = vec4(0.375, 0.171875, 0.171875, 1.0);
uniform vec4 color_21 = vec4(0.53125, 0.29296875, 0.16796875, 1.0);
uniform vec4 color_22 = vec4(0.7421875, 0.46484375, 0.16796875, 1.0);
uniform vec4 color_23 = vec4(0.8671875, 0.6171875, 0.25390625, 1.0);
uniform vec4 color_24 = vec4(0.90625, 0.75390625, 0.4375, 1.0);//
uniform vec4 color_25 = vec4(0.140625, 0.08203125, 0.15234375, 1.0);
uniform vec4 color_26 = vec4(0.25390625, 0.11328125, 0.19140625, 1.0);
uniform vec4 color_27 = vec4(0.45703125, 0.140625, 0.21875, 1.0);
uniform vec4 color_28 = vec4(0.64453125, 0.1875, 0.1875, 1.0);
uniform vec4 color_29 = vec4(0.80859375, 0.33984375, 0.234375, 1.0);
uniform vec4 color_30 = vec4(0.8515625, 0.5234375, 0.2421875, 1.0);
uniform vec4 color_31 = vec4(0.1171875, 0.11328125, 0.22265625, 1.0);
uniform vec4 color_32 = vec4(0.25, 0.15234375, 0.31640625, 1.0);//
uniform vec4 color_33 = vec4(0.4765625, 0.2109375, 0.48046875, 1.0);
uniform vec4 color_34 = vec4(0.6328125, 0.2421875, 0.546875, 1.0);
uniform vec4 color_35 = vec4(0.7734375, 0.15234375, 0.31640625, 1.0);
uniform vec4 color_36 = vec4(0.87109375, 0.515625, 0.64453125, 1.0);
uniform vec4 color_37 = vec4(0.03515625, 0.0390625, 0.078125, 1.0);
uniform vec4 color_38 = vec4(0.0625, 0.078125, 0.12109375, 1.0);
uniform vec4 color_39 = vec4(0.08203125, 0.11328125, 0.15625, 1.0);
uniform vec4 color_40 = vec4(0.125, 0.1796875, 0.21484375, 1.0);//
uniform vec4 color_41 = vec4(0.22265625, 0.2890625, 0.3125, 1.0);
uniform vec4 color_42 = vec4(0.33984375, 0.4453125, 0.46484375, 1.0);
uniform vec4 color_43 = vec4(0.50390625, 0.58984375, 0.5859375, 1.0);
uniform vec4 color_44 = vec4(0.65625, 0.70703125, 0.6953125, 1.0);
uniform vec4 color_45 = vec4(0.77734375, 0.80859375, 0.796875, 1.0);
uniform vec4 color_46 = vec4(0.91796875, 0.92578125, 0.91015625, 1.0);
@@leonstansfield Highly appreciated brother. Keep up the good work.
i subbed.
Does this work in Godot 3.5.1, or do I need to be working in Godot 4 in order to make this happen?
I only use the latest stable version, so yes It works with 3.5.1
@@leonstansfield Thanks!
Do you know of a fix for the pixel jitter
I would also like to know 🤔
I don't think it would be possible due to the pixilation being created through down scaling each frame unfortunately. Its not a massive deal breaker for my project but I don't know any solutions other wise, sorry!
hm, looks familiar ;)
:0
Your work is a massive inspiration!
@@leonstansfield Credit where credit is due. I think it's great that you want to provide some information on how to do this, but the fact that ur environment example is almost identical to t3ssel8r's made me wonder why u didn't at least mention him.
I see what you’re saying, although not sure what the engine has to do with it. What I mean is, is the fact that you build almost the same environment with the stairs and pillars, this ruins like vibe with the grass, it is almost identical ;)
No hard feelings from me, I still enjoy when someone is putting out any stuff relating to this kind of style.
onready var sprite = $Sprite
func _ready():
var color_cont = 0
var data = sprite.texture.get_data()
data.lock()
print("{")
for i in sprite.texture.get_width():
for j in sprite.texture.get_height():
print("vec4("+str(data.get_pixel(i,j))+"),")
color_cont += 1
print("}")
print("total of "+str(color_cont)+" colors")
generates a palette
Thank you!
uhhhh if only there would be better solution to palette coloring :C
There almost definately is, I would love to revisit making my own shader thats easier to use and more efficient but I have been struggling to find the time recently :P
i am very bad in shaders and recently i used the same cloud code but i lowered the alpha opacity at the edges, but i did not find a way to lower the shadow opacity, can anyone give me a hint?????? 🥲🥲🥲