3D pixel art in Godot 4
0:39
Жыл бұрын
Пікірлер
@NeriQward
@NeriQward 3 күн бұрын
Hi, can you please make a tutorial how to make something like this but in 2D?
@MassiveDestructionSP
@MassiveDestructionSP 19 күн бұрын
Been trying to do something like this in Godot (as a Godot beginner). Do you do multiple passes? If not, how do you access the depth and normals for the edge checks?
@erabeus
@erabeus Ай бұрын
This is great. I had created my own version but this is way more elegant. The only issue I'm getting is when objects move diagonally, because of the snapping they will eg. snap left, then up, then left, etc. which creates a rapid jitter effect that noticeably blurs the edges of the object, even at 60fps but especially at higher framerates. You can see it a bit in your blue cube as it turns quickly, but it's not as bad because it's moving relatively slowly. Any ideas besides keeping everything in the game at a low speed or capping fps to 30? Edit: I just realized too it probably also has to do with the fact that I’m targeting 640x360 rather than 320x180 so the jitter is more rapid.
@erabeus
@erabeus Ай бұрын
Experimenting more it looks like it's actually the object moving too little (~1 pixel) per frame, so bumping up the speed or capping the framerate at 60 so the object moves more than one "staircase step" per frame helps alleviate the issue. I wish there was a way to render individual objects from the same angle to avoid the temporal aliasing, but not restrict them to the pixel-snapped basis of the world. But the only way I can think of doing that is having a camera-subviewport setup for every single moving entity which seems super jank.
@denovodavid
@denovodavid Ай бұрын
Unfortunately the snapping is kinda the point. Having unaligned objects requires rendering them outside the scene as you said, but then you have the trouble of compositing it back together. You could probably to it in a performant way if you have full control of the render pipeline, but within Godot seems difficult. Pixel perfect diagonal movement at less than sqrt(2) pixels per frame is basically flawed, something has to be compromised. Perhaps you could make an educated guess and snap to perfect diagonals if the object's velocity is that direction.
@iadoptedanalien
@iadoptedanalien Ай бұрын
How do you handle interpolation in Godot when the monitor's refresh rate, FPS, and physics tick rate are not synchronized? For example, when I increased the monitor's refresh rate to 75Hz, I lost smoothness in movement, and it only returned when I adjusted the physics tick rate to 75 and enabled VSync to lock it at 75 FPS. Is there a way to maintain smoothness without having to make this adjustment manually
@iadoptedanalien
@iadoptedanalien Ай бұрын
btw, your video is amazing and is helping me a lot
@denovodavid
@denovodavid Ай бұрын
hmm... from my understanding, it should be smooth if all updates are run in _process (every frame), which they are in my scene. I only have a 60hz monitor, but I've tried all vsync modes and it's smooth in all of them. If you're doing work in _physics_process, then you're dependent on the physics tick rate and will need interpolation to smooth out the physics movement betwixt rendered frames. Unfortunately, automatic 3D physics interpolation has only just been merged upstream and will be in Godot 4.4, but there's likely a workaround or manual way to do it.
@iadoptedanalien
@iadoptedanalien Ай бұрын
​@@denovodavid Thanks for the response! THAT WAS EXACTLY IT. For some unknown reason, I put the camera_rig in _physics_process, and moving it to _process() resolved the smoothness issue. I'm using 4.4, but I disabled the physics interpolation on the camera because it was bringing back the "pixel creep." For my case, it seems better to keep the interpolation disabled.
@sw97058
@sw97058 2 ай бұрын
This works fantastically, and with some careful tweaks (3d sprite pixel size .0037m, camera size 22.5m, final sprite offset y 0.5px), I was able to line up perfectly with our pixel art for 540p. Now we can mix 2d sprites with 3d backgrounds and it looks seamless.
@KhrisGamin11
@KhrisGamin11 4 ай бұрын
Can you make a tutorial for this? It's so amazing!
@ratone1238
@ratone1238 5 ай бұрын
Hopefully the pixel perfect outline video is still coming!
@MrUlipi
@MrUlipi 7 ай бұрын
Could you make a tutorial on how to do this in Unity? I really like the 3D pixel art style but I don't know how to do it
@kieunghiaduong4848
@kieunghiaduong4848 7 ай бұрын
Thank you
@jamieroland538
@jamieroland538 8 ай бұрын
tutorial?
@jerrygreenest
@jerrygreenest 8 ай бұрын
That's pretty.
@0xkeez
@0xkeez 9 ай бұрын
So good man, so so good
@gutzimmumdo4910
@gutzimmumdo4910 9 ай бұрын
can u do a tutorial on how to do this in unity? i understood everything but i dont see a x offset nor y offsets in unity camera, u know what equivalent is?
@denovodavid
@denovodavid 8 ай бұрын
You should be able to use a parent object with the camera as a child, then offsetting the camera's transform. I originally did this in Godot, then realised x/y offset was simpler. Since the parent is now the "true" transform of the camera, you'll probably want to use that for all the relevant calculations. I don't use Unity anymore, so maybe Cinemachine has something that can make it simpler...
@gutzimmumdo4910
@gutzimmumdo4910 8 ай бұрын
@@denovodavid hey thenk you! il try
@iamahtic
@iamahtic 9 ай бұрын
Tutorial anytime soon?
@dmsys6516
@dmsys6516 9 ай бұрын
can we see a tutorial of exactly we can make it
@dmsys6516
@dmsys6516 9 ай бұрын
Amazing
@jimmyu4829
@jimmyu4829 9 ай бұрын
Amazing Video! I was wondering if there’s any way this could work with “Crigz Vs Gamedev”’s set up? kzbin.info/www/bejne/jXPScqOFg6hqmK8si=A5PwDfGwtO9M6Mee
@habibyahya788
@habibyahya788 10 ай бұрын
i love this so much
@havidarou
@havidarou 10 ай бұрын
I'm trying part 2 and 3 in the latest Godot version (4.2.1 I believe) and it only renders the blue background, do you know what might be the issue?
@denovodavid
@denovodavid 10 ай бұрын
`README.md` explains how to override the project settings for part 2/3 to work :)
@havidarou
@havidarou 10 ай бұрын
@@denovodavid didn't see that, thank you :)
@killerbadsad
@killerbadsad 10 ай бұрын
This helps a lot, thanks! Any eta on the next vid? :) Thanks!
@havidarou
@havidarou 10 ай бұрын
Awesome!
@OctagonalSquare
@OctagonalSquare 10 ай бұрын
This is dope! My game is all 2D with a static camera so I’m not going to need it now, but definitely saving this for later in case I make a new game that needs it
@Fullstackdesign
@Fullstackdesign 10 ай бұрын
Does the pixelated look come from the camera? If so would the camera try to pixelate 2D HUD components? How would you avoid objects getting pixelated?
@denovodavid
@denovodavid 10 ай бұрын
By the end, the pixelation happens within a SubViewport, of which the texture is displayed on a 2D node at the standard resolution of the window. So, if you put 2D/UI elements in the SubViewport, they will be pixelated, and if you place them outside, they will be at full resolution.
@Fullstackdesign
@Fullstackdesign 10 ай бұрын
@@denovodavid Excuse the questions, I am new to Godot, To clarify, any objects(2D or 3D) placed outside of the pixelated SubViewport will not get pixelated right? I like the pixelated art style however, I am conflated if whether its best to pixelate objects via a shader or by camera.
@denovodavid
@denovodavid 10 ай бұрын
@@Fullstackdesign yes, objects inside the subviewport are rendered separately to a smaller texture, thus pixelated when scaled up. (Just note, with this setup you cannot mix 3D pixelated and 3D non-pixelated objects together with correct depth sorting.)
@TheFlawlessFinale
@TheFlawlessFinale 10 ай бұрын
Cheers for the great video, I implemented this on small project to fix pixel creep on terriain objects. After the changes, the terrain is working a charm but now the character object that the camera follows has the pixel creep, do you know of an easy fix for this whilst retaining control over the character?
@selkie6341
@selkie6341 2 ай бұрын
I had a similar issue, but I had some luck with camera following by limiting the game max FPS to 30. (Character in the snap group of course)
@daliborgarza5244
@daliborgarza5244 10 ай бұрын
My implementation is almost identical to yours, if only i had found this video before.
@RafaelRodrigues-jq6uc
@RafaelRodrigues-jq6uc 11 ай бұрын
this is incredible beautiful work
@espuks
@espuks 11 ай бұрын
This looks so cool! Any chance of a tutorial? I'm trying to make a game with this same style
@ermilburn02
@ermilburn02 Жыл бұрын
Wouldn't it make more sense to only calculate p1 and p2 if snap is true? Otherwise you're calculating it just to do nothing with it, potentially wasting some processing time.
@denovodavid
@denovodavid 11 ай бұрын
Yes, the snap toggle is mainly for showcase/debug though; I always have it enabled in my main project.
@marcuslola
@marcuslola Жыл бұрын
Great video, just what I was looking for! Is there any way to apply the texel snapping to 3D animated objects though? Snapping moving objects is straightforward enough, but I'm not sure if the same principle can be applied to 3D models with imported animations.
@denovodavid
@denovodavid 11 ай бұрын
Animated skinned meshes would require different techniques for that 2D feel. In addition to snapping, I would throttle the framerate of animation and rotation.
@Wanfanel
@Wanfanel Жыл бұрын
Only blue box shadow don't work
@sourenamoradi5195
@sourenamoradi5195 Жыл бұрын
wow great work, keep it up!👍
@Phrate
@Phrate Жыл бұрын
Might be a silly unrelated question, but how did you get your Godot to look like that? I can't seem to find any themes or whatnot online.
@denovodavid
@denovodavid 11 ай бұрын
In editor settings I just set base color to #2d2e2f and accent color to #ffc500, that's it :)
@thoughtseer2139
@thoughtseer2139 Жыл бұрын
Would it be possible to get this working with a Perspective Projection camera?
@GiseudoOliveira
@GiseudoOliveira 2 ай бұрын
nice question, does this approach supports also perspective projection?
@windtp2292
@windtp2292 Жыл бұрын
nice video, waitting for next.
@sergey_a
@sergey_a Жыл бұрын
0:02 It looked like a simple flat drawing in Paint. And then the real magic began. Very beautiful.
@myates9529
@myates9529 Жыл бұрын
Its cool to see the actual impl now, I had given it a whirl a while back after seeing your reddit posts. I think I was pretty spot on, only exception being the hook on the rendering server and snapping individual objects :D. Thanks for sharing this info! Did you ever have any luck (or try) using this approach while using 3D Sprites mixed in? I had issues getting the 3D sprites to feel consistent with the output resolution, no matter how much tinkering I did with the orthographic size + pixel size of the Sprite3D... either way, good stuff
@denovodavid
@denovodavid 11 ай бұрын
I don't see a reason why it shouldn't work with 3D sprites. I would make them always face the camera (billboard), and scale the sprite size to match the same texel size as the output. The sprite origin might also play a role, making sure it's not snapping to the centre of a texel or something.
@thygrrr
@thygrrr Жыл бұрын
Ive been looking for something like this, very inspiring. I want to do a more anime Style Look but had ruled out pixels because I didn't think of unsnapping stuff after rendering. Why can't you snap only in the shader, though?
@denovodavid
@denovodavid Жыл бұрын
You likely can snap using only a shader, as long as you pass the appropriate "snap space" to it. I just didn't want to add custom shaders to everything.
@Tymon0000
@Tymon0000 Жыл бұрын
How can you do pixel perfect shadows?
@denovodavid
@denovodavid Жыл бұрын
hmm... maybe you would have to texel snap the object in view space and in light space. During the light space depth pass, it should be possible to snap vertices to texels, but I don't think that translates one-to-one with view space texels when sampling the attenuation. This requires further investigation.
@dreiden69
@dreiden69 Жыл бұрын
I was here :T
@Kosro
@Kosro Жыл бұрын
Thank you so much for this! I'm also loving your Editor Theme, is it available anywhere?
@denovodavid
@denovodavid Жыл бұрын
In editor settings I just set base color to #2d2e2f and accent color to #ffc500, that's it :)
@Kosro
@Kosro Жыл бұрын
@@denovodavid Huh, I appear to be blind.. Appreciate it, thanks! And please keep the t3ssel-imit8or tutorials coming.. I feel like there's a bunch of awesome looking indie games just around the corner ;)
@fransbstrom1666
@fransbstrom1666 Жыл бұрын
Something I've been trying to solve using this method is having a camera smoothly follow a moving snapped object without any jittering that works with large pixel sizes (say 6 pixels per world unit for an example). If I understand it correctly the problem is when the applying the snapping error offset from the camera the moving object will be visually offset by the snapping error and thus appear jittery. Have you tried anything to fix this issue?
@denovodavid
@denovodavid Жыл бұрын
Yeah it's an awkward issue that affects 2D pixel art games as well, it only has partial solutions with trade-offs: - If you have an animated 3D character with a soft attached camera, it may be better to *not* snap them at all, as pixel creep from animation and movement will be far less noticeable than jittering. - If you soft attach to a consistently moving snapped static mesh it's basically impossible to avoid jittering. You will have to snap the object and hard attach the camera with no snapping to avoid the jitter, but you won't have sub-texel smooth movement. (My main project is at 640x360, so even hard attached movement is still pretty smooth.) - The only other way I can think is to render the object separately and insert it into the scene at a sub-texel level. That's a whole other pipeline to manage, but might be worth it if you really want those chunky texels. There's probably a way to mitigate the jitter by selectively snapping/unsnapping things based on speed and follow logic, but I haven't explored that yet.
@asteranx
@asteranx Жыл бұрын
It's also worth noting that these techniques are useful in 2d as well as 3d to get a more 'authentic' retro presentation. It will ensure that your world and characters are always pixel aligned visually to one another while allowing their physics bodies to exist in a more continuous space. Especially useful if you make sure to keep your texel density consistent and everything scaled to the correct size.
@ghostradiodelete
@ghostradiodelete Жыл бұрын
Does this still work if you say...rotate the camera around a hooked up path and also rotate a spotlight around that same path? Asking for a friend....named me. I have a pretty neat pixel shader now, which if you look at the code it's ridiculously complex, but it looks super neat, it throws an outline on everything too. But what it doesn't do is prevent the blurry movement like you've done here. Only I wonder if you moved you turned the camera would it still stay so nice? Because that's what I'd like on my game. No luck getting it to work so far, but, i'm not very smart soooo.
@denovodavid
@denovodavid Жыл бұрын
Rotating the camera will always cause some form of pixel creep; it's a whole new "perspective" on the scene. There's no real way to snap if the camera rotated in the current frame. That being said, the solution here will continue snapping correctly once rotating has stopped.
@ghostradiodelete
@ghostradiodelete Жыл бұрын
@@denovodavid ah..in that case my dungeon crawler will just have some blur when turning, and that's okay, it's pretty quick. thanks!
@actualgamedev
@actualgamedev Жыл бұрын
Thank you for ruining an original art style. Now even dumb wannabe game dev that can't figure anything by themself without a fucking tutorial can have that beautiful style in their shitty game event before t3ss3l8r releases his. At least other developper toying with that art style had the decency to not release tuts and let the actual creator enjoy the result of their labor. Now every futur indie game will have that style and it's already outdated. thank.
@actualgamedev
@actualgamedev Жыл бұрын
@@thehogman. "being this mad over more people being able to make art" there's a typo here, you probably meant "mad at people normalizing the plagiarism of an original signature art style"
@denovodavid
@denovodavid Жыл бұрын
Yeah I'm not sure that a few lines of camera code I wrote in an afternoon really constitutes an art style. I know you like t3ssel8r's style a lot, but you cannot just take this code and have a game that looks like his. There's so much stuff to cover: toon lighting, outlines/edge highlights, cloud shadows, grass/foliage rendering, terrain, water shaders, particles systems, weather, god rays, and so much more VFX. There are assets you can buy on the Unity asset store that already handle the camera and outlines, it's not some secret technique. Personally, I would love more indie games in this style, it's my favourite, and the reason I got into shader programming.
@starbi
@starbi Жыл бұрын
Nice, the idea is also applicable to any engine you're working with. My first iteration was doing exactly this in Unity.
@denovodavid
@denovodavid Жыл бұрын
Hey I remember watching your video! And yeah, the snapping and smoothing only requires the most basic of 3D pipelines :)
@zarblitz
@zarblitz Жыл бұрын
This is one of those things that seems so simple and clever once it’s demonstrated, and yet I wouldn’t have thought of it :)
@Voyageonyt
@Voyageonyt Жыл бұрын
Looking great! The metallic surfaces are visually cool and unique :)
@denovodavid
@denovodavid Жыл бұрын
Thanks! I've since moved to simple toon lighting, but it would be cool to bring some of the shiny stuff back :)
@JudahCaruso
@JudahCaruso Жыл бұрын
Super cool and I really love the format! Hope to see more videos soon. Also, what’s the screen drawing software you’re using? Looks like Milton but uses a screenshot as the canvas
@denovodavid
@denovodavid Жыл бұрын
Thank you! It's a sysinternals tool, ZoomIt: learn.microsoft.com/en-us/sysinternals/downloads/zoomit
@jsonchin
@jsonchin Жыл бұрын
Great explanation. What do you use to write on the screen while you explain?
@denovodavid
@denovodavid Жыл бұрын
Cheers! I use ZoomIt: learn.microsoft.com/en-us/sysinternals/downloads/zoomit
@americoperez810
@americoperez810 Жыл бұрын
Does this take screen resolution changes / window resizing into consideration?
@denovodavid
@denovodavid Жыл бұрын
Yes, I didn’t show that version of the code specifically, but it works just fine in the final scene.