2.5D parallax effect in GODOT 2D engine. Similar to the background parallax in Hollow knight!

This video outlines a good method to create a pseudo 3D or 2.5D parallax effect in the GODOT 2d game engine. This parallax is different from the one you often see in endless scroller games, and does not use the ParallaxBackground node. Hollow knight implements its parallax using the 3D engine, which has some advantages in regards to lighting. However, the parallax effect will function the same way using this method and it is better for anyone preferring to work in the 2d-engine.
Further reading on the pseudo-3d effect can be seen in Godot docs: godotengine.or...

[@Nonsensical2D]

In regards to the method of darkening the foreground, the method given is not the best. What is probably better is to nest all sprites under a Node2D (so that you can toggle and untoggle visibility). And on top of that use canvasmodulate to darken all the sprites on that canvaslayer.

[@4bluekitty]

This. Precisely this video is what I was looking for. Thank you so much for an awesome vid!

[@Nonsensical2D]

Glad it helped :)

[@karlas55]

In case anyone looked for Godot 4 shader, I found that this shader script works just like in the video: shader_type canvas_item; uniform float lod: hint_range(0.0, 5.0) = 0.0; uniform sampler2D SCREEN_TEXTURE: hint_screen_texture, filter_linear_mipmap; void fragment() { vec4 color = texture(SCREEN_TEXTURE, SCREEN_UV, lod); COLOR = vec4(color.rgb, 1.0); }

[@Hafgren]

I'm so glad I decided to try Godot, I spent an unreasonable amount of time trying to get this effect to work in UE4 with no luck.

[@LANMEE2]

This is ageing extremely gracefuly with the recent unity fiasco. I came back to this video because i remembered that you are also developing in godot. Potential idea for a video, how to setup a hollow knight like camera in godot, with the resolution size, edge pannings, secret room panning etc

[@strider2788]

Thank you for this. The best 2.5D example I've seen.

[@sabotagethefool]

Fantastic video my guy, been enjoying your stuff! You deserve more recognition :D

[@Nonsensical2D]

Thank You! I appreciate it :)

[@trevor-marloy]

Dude, it's fantastic video, you literally saved me! I scoured docs, forums, socials, and I could found nothing, what can me help to create 2.5 scene. I've been racking my brain for weeks, trying to code. Your video out of date a little bit, but you gave me direction, that let me continue developing my project. Thanks!

[@HamdiRizal]

I love this short no-nonsense tutorial like this. Straight to the point. Can you make the fireflies tutorial next?

[@Nonsensical2D]

Do you mean the particles that fly around? I might do one in the future, but I already have some videos that I have started with that I need to finish first. I did a quick search and this seems like a no-nonsense tutorial on how you could get going with it: kzbin.info/www/bejne/fGKpqp1pgc2ShsU .

[@Abby-ug4xc]

By far the best channel for 2D game development... the way you explain things is so simple & easy to understand! Do you think you could do a version of this tutorial for Unity? 😅 Or do you exclusively use Godot? Edit: I see now the thing I'm thinking of is the 2.5D layering... a video on that would be great too!!

[@Nonsensical2D]

I have been thinking about doing one for a while, but I just now downloaded unity again and opened my old project but since I haven't used it for 3-4 years I simply don't remember much or know what might have changed. So I don't think I could do a decent tutorial on the topic, at least not at the moment, I recommend the unity2D subreddit though, there are probably quite a few people there that could point you in the right direction, which should be using z-depth and layering your sprites in a 3D space.

[@Abby-ug4xc]

@@Nonsensical2D Thank you, I will check it out!

[@Malak-rb6vu]

yeah , he's a hidden gem!

[@robertofauri]

Amazing, dude! Greetings from Brazil!

[@bluespider6537]

I just wanna say thank you for showing this tutorial I've tried it on my little point and click game, it's perfect TwT

[@vkronik]

Great video, I am just start to learing game development and this technique what i want to use in my future game. thanks.

[@Lukifah]

you are a great artist

[@Nonsensical2D]

Thanks :)

[@ianmclean9382]

Wow, Thats some really nice paralax

[@pawapawa3710]

Man, just what I was looking for

[@averyminya]

Hey! I've had a lot of this swimming in my mind for a few weeks and I finally got around to finishing up some assets to give this some practice! And I must say, as a first time developer this was one of the most straightforward projects to play with. I did run into one issue however, which is the relationship between the camera, player, and these background canvas items. Do the sizes of the assets drastically impact how they are placed in the world? Basically, the assets are "sprawled" across the map, and so in perspective view gets pretty inaccurate compared to the in-game camera. This has been awesome though, thank you so much. This is one of the best videos I've found for learning overall, and your whole channel is a goldmine for art in general, not even game dev specific crafting. Thanks, very much.

[@averyminya]

Also would there be a way to do a seeded room or a procedural generated room in this style? I'm wanting to make an arena similar to how the game Revita has its levels set up, but I'm not sure if they were crafting each room manually or did it procedurally.

[@Nonsensical2D]

The parallax scaling of the asset does impact how big they are in the scene, but a workaround that you can do is to use the transform bar to scale the asset bigger equal to how much you scale it down with parallax. so if your parallax scaling is 0.8, then your transform scaling would be 1/0.8 = 1.25 and these would cancel out to make the asset the exact same size you drew it as. I have used this workaround when doing parallax in pixel art, in order to ensure perfect pixel density throughout the scene.

[@Nonsensical2D]

I am not familiar with Revita though. but as long as there is a "transition" between rooms it would probably work quite well, but stitching part of scenes would to my mind sound quite complicated (since the parallax wouldn't stitch that nicely)

[@averyminya]

@@Nonsensical2D Thank you so much for the response!

[@morganp7238]

your vids are so good, you got a new sub

[@jihoonjung215]

thank you for the information!

[@morganp7238]

Have you made a vid on the fireflies background? That would be great. It's a beautiful effect.

[@Nonsensical2D]

Thanks! I am assuming you are referring to the particle effects. I generally don't make engine specific content sadly. This is basically the only video on Godot, I prefer to talk about general art concepts and ideas.

[@thomasdelange1888]

Hey, not sure if I'll get a response, but does anyone know if GameMaker has feature similar to the "Canvas Scaling" in Godot? From what I can tell, the only thing that "scale" alters is the size, and the only thing "depth" alters is the layer order. I'm extremely novice tho, so if anyone has some clarification, it would be immensely appreciated

[@JasonLothamer]

Do you always use a tilemap for the level blocking? Or sometimes static bodies? Or a mix? I was using a tilemap but once I got a lot of tiles in it it started to slow down. And I didn't really consider my level that big. Great video, btw!

[@Nonsensical2D]

I personally use tilemaps for the level, makes it easier to ensure that the distances will be correct (since you know how many tiles your character can jump up). But with that said I am intending to make smaller rooms and stitch them together with portals, similar to how Rogue Legacy works, so I don't really work with large tilemaps. My issue will generally be to ensure that the scene loads quick enough. So I don't really have a good answer for what will be best for you.

[@Godot-sv7jk]

Hello! Thanks for the content. Just a question! Are the blocks used throughout the level and remain in the game?

[@Nonsensical2D]

Hmm, I'm not entirely sure what you mean, but if you are referring to the grey blocks I use to tile the game, in my case they are part of the tile map, but I hide the tilemap when the game plays (so that they aren't visible), and the colliders will still be active even if the tilemap isn't visible. But this is quite specific to my workflow (most people probably make use of their tile map) and not something that needs to be copied, It's just how I prefer working.

[@leonstansfield]

How do you get other objects, like my player to be on the right layer? my player, no matter what Z index I use, is always behind everything.

[@leonstansfield]

I figured a solution, after many weird bugs from different attempts, but putting all the objects on the actual playing field under the '0' canvas item works fine as far as I can tell. Obviously make sure its scale is set to 1.

[@Nonsensical2D]

@@leonstansfield One thing you can do is to change the layer of each canvas layer, layer 1 will always be drawn on top of layer 0 which will always be drawn on top of layer -1. So you if you don't want to adjust the order manually, you can adjust the layer number.

[@jhovala]

big lesson

[@felipefacundes1]

Perfect !!! Thanks ! Thanks ! Thanks !

[@rakhmanovtr]

You are the best, thank u very much for this guide, i catched it and then im going to watch other your videos Is it possible to make in godot such a visualization in a 2d platformer with a 3d object: the character stands to the left of the object and sees the front side and the left side of the object, similarly to the right side? sorry if the question is stupid, I've only been in game development for a couple of days and I don't know much yet

[@GregX999]

Have you noticed the bounding boxes not lining up with the sprite visuals on layers with a scale != 1? In the video, it looks like they always line-up correctly. For me, the offset gets more pronounced the more I move the viewport from the origin. (In Godot 4)

[@Nonsensical2D]

I also get this issue, I don't actually know how to solve it, I think the reason it isn't that clear is that the viewport is kept fairly centered when filmed, but it does happen to me too.

[@Juke172]

I think I heard that Team Cherry doesn't use parallax effect for their Hollow Knight game at all. It's just 3D world with perspective(non-orthographic) view of the world. All the sprites are placed in 3D position in space. Bu I maybe wrong of course. Haven't tried it out. Actually I might try to make the same in Godot.

[@Nonsensical2D]

You are absolutely right, I have a video discussing the differences between 2.5D and 'endless scroller parallax', where I talk about how Team cherry Implemented their parallax. But this implementation is really more applicable in Unity which is more of a 3D engine. But since Godot has a dedicated 2D engine there are some considerable downsides with using the same implemenation as Team Cherry did, namely you have to use 3d Godot. The implementation that I show here would basically look and function the same way as the hollow knight parallax from the player-perspective, but can be made in the 2D engine. If you work in unity, the Team cherry implementation is really good (and what I used to use when i was working in Unity).

[@Juke172]

@@Nonsensical2D I made a quick mock up of this in Godot. I think it works fine. But yes you need 3D nodes then. There's Sprite3D node you can use for this purpose. I use perspective camera that's far enough for elements to be in view and zoom it in with FOV-setting.

[@Juke172]

@@Nonsensical2D Yeah I noticed that using 3D you don't get the tilemap and other nifty features specific to 2D. you would have to do them yourself or live without them. I see that Godot keeps the 2D and 3D very separate. Unity basically can switch back and forth because it's only related to camera, how you see the world, well mostly. But you can mix and match 2D and 3D features easier. I'm kinda starting to like Godot though, so I need to tinker around with it more. One disadvantage I see in Godot is that C# documentation is really lacking.. Even though most of the scripts are mostly same in GDscript and C#, there's always some differences.

[@Nonsensical2D]

Ye, I personally never really liked C# in unity, which is in part due to how much I've used python in the past. I think that there might be some benefits to writing some things in C#, but for a lot of it GDscript is pretty decent and could be worth testing.

[@sunset9388]

great video!! but can someone please explain why the pivot point of the sprite changes when i move it and how to fix it? because if i want to do this with a tilemap my tile placement will not match with my mouse

[@frizzlefry176]

thanks for showing this! I hope to someday make a game with sprites I have drawn. Do you have other videos on how to get your drawings into unity without issues? I’m guessing make sure that the background is transparent. And it has to be a PNG file, correct? I don’t know if sizing matters when being drawn or anything. If you ever want to go more into details over this sort of thing for complete noobs like myself that would be amazing! Thanks for showing how you create tiles for your playable area first! Is it coding you put in to make it solid? I still have so much to learn but I’m trying!!! Thanks for your time 😊

[@Nonsensical2D]

So this is done in Godot and not Unity, achieving the 'hollow knight parallax' in unity would look somewhat different, because the engines are different. Ye, pngs are the way to go, but you would obviously save the drawing in psd format, krita format or procreate format (whichever drawing program you might be using) :) Sizing can matter quite a bit, I think a moderately decent rule of thumb is that if you are intending to make your game in 1080p, then think roughly about how much of the screen you want the asset to occupy in game (so if it covers 10% of the screen, then it would need to be at least 108x192 to not become blurry), then to be on the safe side you should probably make it at least twice as large as you need it to be, if not even more, because you can always downscale the asset when you upload into the engine. I'll try and cover sizing of assets in the future, it is quite a big topic. Good luck!

[@cartuliuZ]

You can put particles in the paralax ? Sorry if muy english is bad

[@Nonsensical2D]

Ye, you can have particles in layers further back or further in front no problem. it can potentially be slightly more demanding since you have more space you need to cover, but it still works

[@GregX999]

I know you posted this quite a while ago, but I was wondering how you got the "fog" effect sprite to only affect layer -1, but also got it to stay in place as the player moves instead of moving with the the canvas layer. The only thing I can think of is to attach a script and have it constantly update its global position to match the camera's - but that seems a bit janky.

[@Nonsensical2D]

Since the parallax is entirely dependent on the canvas layer you can deselect follow viewport on a canvas layer that only affects the blur shader and then it will be 'attached to the camera'. It will look odd in the editor if you do it this way, but it works quite well in other regards.

[@GregX999]

@@Nonsensical2D Ah! Nice - it works! But... I tried to do the same for the sprite with the blur shader, but it doesn't seem to work. It only seems to blur the contents of the canvas layer that you place it in. Is there a way you got that work? --- FIGURED IT OUT -- I had to adjust the Canvas Layer's "Layer" property, since I gave each Canvas Layer a unique Layer property to ensure proper draw order and to be able to control what layers any specific light source will affect (ie: have a light that only illuminates the items in the "Background_2" layer.)

[@bekturbektenov1707]

so, since we are using the canvas node it will kinda draw in front of camera where ever it goes? If yes, how to make a parallax effect with the foreground/background that is not stationary? I mean, in every region of the map there is a certain foreground, and I want it to have a parallax effect. Does this way work on it as well?

[@Nonsensical2D]

we are using the canvas layers and you can pmake it affect different layers in the settings (negative layers for background and positive layers for foreground for instance), and then with scaling you get the parallax effect, as you can see when i run my example i do get the parallax effect and it looks pretty much the same as hollow knights.

[@pythonxz]

Wait, you can move objects in the editor at runtime and it updates in the build? I thought that wasn't possible in Godot since it runs a standalone client. I guess I have one more reason to use Godot.

[@Nonsensical2D]

Yes, you can move it with no problem, you can generally also add more sprites as long as the texture already exists in the build. I almost always make my scene with the game running

[@-Solenya]

Nice tutorial thx! How would you transition between two different parallax if you want the environment to change while your character is running?

[@Nonsensical2D]

Hmm, I'm not entirely sure I understand the question, what type of two different parallax?

[@-Solenya]

@@Nonsensical2D Sorry i was talking about the parallax background node that lets you parallax an image for ever in the background with mirroring the image, but i dont think you used this in your video. :)

[@noalarmsplease5872]

Looks great! Can help me understand how you imported the character art? What resolution do you use when making the sprite? When I import my character art it looks so pixelated and blurry. I’ve already adjusted the import settings a million different ways but I’m having no luck. Any help would be appreciated.

[@Nonsensical2D]

Hmm, I make the character sprite in 4000x4000, but that is mostly because i use them in my videos. In game they are 256x256 with lossless compression. I can't say for sure where the problem is, but try and ensure that the size of the character matches the resolution in game. I think my character is like 1/10 of the screen, so I could probably get away with making it 128x128 pixels, but if you were to import say a 64x64 sprite but make it as big as my character, then it would have to upscale and you would most likely see each individual pixel/'blurry mess'. So like if you make your character smaller, is it still blurry?

[@noalarmsplease5872]

@@Nonsensical2D Thanks for the reply. If the sprite is 256x256 lossless compression, what is your window dimensions? 1920 x 1080 or 4K?

[@Nonsensical2D]

@@noalarmsplease5872 So I haven't really done optimization on that end, 256x256 is definitely larger size than it should be, im targeting 1080p. So I don't necessarily recommend to have the same size as me, but if you are sitting with a low resolution sprite, maybe it's blurry because it is too low resolution compared to how large you make the sprite in game.

[@ic3yfr0ggy51]

👍

[@rhammer6068]

Well shit, that method for dof is a hell of a lot easier than the camera stacking method that Im using in unity

[@Nonsensical2D]

Ye, its surprisingly easy compared to unity xD

[@goofedhunter]

Is it better to use tile map or just overlay an asset over a platform to create the parallax effect for a hollow knight like game?

[@Nonsensical2D]

I tend to prefer staging it by placing assets in front, because you get a bit more freedom of placement, but I honestly think it comes down to personaly preference.

[@goofedhunter]

@@Nonsensical2D Does it affect the consumption of memory space and draw calls?

[@Nonsensical2D]

@@goofedhunter yes it can, if you are not looking out for it, placing assets freely can be worse for performance generally. I really recommend learning to read the monitor for draw calls and similar.

[@goofedhunter]

@@Nonsensical2D gotcha thx, good to know all this =)

[@georgmethner9886]

Could you make this for unity too?

[@Nonsensical2D]

Yes, I could probably do that!