Pseudo 3D in Godot 4
Вставка
- Опубліковано 3 чер 2024
- Hello everybody,
Today I will show you how to write a shader in Godot 4 that tackles a very interesting topic: Pseudo 3D
Pseudo 3D is a 2D environment that uses Affined 2D Textures to create the illusion of depth and perspective. This effect was mostly seen in the 90s but has died out because of the advancements in computer technology. Yet the visual style does still intrigue people enough to re-invent it.
Hopefully you can too, and don't be scared if things are a bit difficult to understand. You can always ask me in the comments for help.
Good luck and success with your project!
Download the project here:
github.com/GitKindoSaurProduc...
Hello there!
If you have any questions or you've spotted improvements to the code or explanation please let me know.
I am here to help and listen to get you further in your project =)
Good luck!
Thanks for the tutorial! I'm just curious, you mentioned that the sprite needs at least 1 transparent pixel on the borders. Why is this?
Sorry for my late response, didn't see ya there :)
Well the shader takes the last color that's on the border to fill in the remaining viewable shader.
Meaning that the shader is trying to always show a rectangle and not any other kind of shape we force our map to look like.
If you look at my example map of Mario Kart you can see that, if my ALPHA border wasn't there, the last color it would use is the BLACK color. Which isn't something you'd want to see around your maps background.
@@KindoSaur Aaah I see! I just tested this and I noticed it yeah, the border colors extend to the infinite haha. Thanks for taking the time to respond!
Something is wrong with the rotation. Doesn't look like the driver is in the center of the rotation, possible it happens in the bottom, but it should be exactly where the player is to make the illusion work.
That's true, I simply placed a Yoshi sprite ontop of the Shaded Sprite2D.
But you can add a small offset to the Rotation Pivot Point to fix this.
I didn't do this to because I wanted to finish the video at some point, I was a bit excited to show it to you all.
@@KindoSaurwhat about a part 2? Very interesting video, you could give us more details and whatnot. Great video!
Thank you for your compliment!
I am thinking to build further on this as well. But I am not sure what kind of extra details need to be added.
Unless we want a full remake of Super Mario Kart SNES specifically 🙂
@@KindoSaur One possible addition is to detail how to add topographical elements to the 2d space. For example, pipes which move with map, or a possible background with some sort of parallax that adds a dynamic backdrop. (I don't even know if this is possible, I'm only a few weeks in)
It would be fun to get into the weeds of manipulating the transformation matrix per scanline to produce the 3D illusion like the original game :)
I was just considering this style of 3D the other day... I think it might be my favorite. Looking forward to copying this technique, thanks for posting.
You're welcome!
Keep me posted if you've started a project.
Let me know if you need any help
Super unique tutorial! Thanks for making it
This is really impressive, thank you!
Thanks for your compliment =)
If you're going to expand on this, I HIGHLY request adding collision. That is one of the core things you need to make a 3D game.
There is a ton of requests going for a Part 2. So you'll see it appear soon I bet =)
For collision, you could probably have a bunch of collision shapes somewhere in the scene and have them be the actual object physics and then adjust the transformation of the map and sprites relative to the map based on their locations.
😮.... this was one of my highest myisteries ... thanks a lot for this approach!!
I enjoy watching videos showing love for Mode7!
I would like a tutorial for rendering sprites within the context of mode7. :)
Keep up the good work!
Same here!
It really needs to be shown more because you can do some really fun stuff with it
And thanks for the compliment =)
amazing, man! thanks for sharing 👏
Super cool, thanks for sharing!
You are welcome =)
This is mind blown🤯
Great video! This is a good way to get into pseudo 3d and SNES Mode 7-type games! 🙂👍
One thing you could expand upon when it comes to pseudo 3d is sprite scaling as seen in games like OutRun and Road Rash, I'd be curious to learn more about that aspect as well.
Thanks for your suggestion, I'll look if I can add it in the next part =)
Congrats ! This reminds me the game "Street Racer" on Sega genesis, which managed to make pseudo 3d even if it was supposed to be impossible outside of the super nintendo. (a forgotten really fun game)
I'm really curious if you make a sequel to this video !
True, I recently played another fun Racing game on the GBA called: "Shifting Gears - Road Trip"
This one uses even more bends and curves!
I'm not quite old enough to have a strong appreciation for this style, but I could see it used to good effect for some things, especially now that you can certainly plop down and transform many many sprites as billboards and have that kinda 80s Sega arcade look like afterburner or outrun.
great video, you should make more! It was very well done! Would you by chance take requests for game features to make tutorials on?
Thanks for your compliment!
I always like to hear what people are currently looking for in the next tutorial but I do need to add that I'm not always available to work on tutorials.
I do keep a notepad near so pass me a topic and I'll write it down =)
It's so complex, thanks for sharing ❤, I'll have to watch the video several times. It would be great if you made a template that can be modified and can be used as a started pack for a retro game.
What kind of retro aspects would you want to see in such a package?
For this tutorial you can download my project from my Github page so that you can tinker around as well =)
subbed, great content my friend
Thank you for the sub and the compliment!
This is awesome
Thanks!
Wow Awesome great project merci beaucoup !!! thank you very much I am not speak english
Thank you very much =)
awesome tutorial
Thank you
Hey, I've been looking for something like this!
Happy to see that this video came right on time =)
Awesome video with great explaining. 👍
next, can u make video Pseudo 3D like Outrun Game? 🤤
I have seen quite a lot of requests for it :)
My favourite SNES mode.
Absolutely!
This is awesome - now i have to subscribe in the off chance you make a flat plane into a sphere shader 😂
Thanks for the compliment and ... maybe ;)
Hey great video. One question though, can´t you do this in real 3d? Would that not be the same visualy?
Its indeed possible within a 3D environment and its also a lot easier to do (Just a couple and planes or Sprite3D Nodes).
But its the technique that I found the most interesting to work on.
And I also saw quite a lot of people asking to recreate this effect but outside of OpenGL.
Thanks for asking =)
@@KindoSaurwhich is more performant on low end hardware though?
For those of you who don't know this art style was the pioneer of 3d games. By squishing and stretching a 2d image they were able to emulate perspective.
A division of Nintendo experimented with Polygons thus creating the original Donkey Kong Country. How ever the SuperNintendo wasnt powerful enough to carry 3d models so they converted the polygons into sprites.
It wasn't until the N64's release that Nintendo could do games that were fully 3D. But even then 2D sprites were still being used in some scenes such as Mario Kart 64.
Donkey Kong Country was done by Rare, and the technology they used was by SGI. 3D games in general are considerably older than any of these. Both drawing polygons and mapping textures to surfaces with perspective correction. Going even further back for non-realtime purposes. Pixar did a lot for this in the 80s, among others.
The best examples of early 3D for nintendo would probably be Doom on the SNES as well as Starfox on SNES, but for this effect specifically, pilotwings and f-zero being launch titles. Those experimenting with rendering polygons on the SNES or at least an enhanced SNES were Argonaut, who i don't think were part of nintendo at all.
But yeah, Nintendo were one of the first to bring such 3D effects to home consoles. Some features of the SNES were almost designed with this in mind.
Kinda right in some of the broad strokes, but getting a lot of the details not quite right, but Nintendo were generally using methods that had already been well-established, but they were able to bring the technology to consumers.
Great video ! My suggestion for part 2 : how to simulate slopes like in Outrun :) s
Outrun worked pretty differently in giving its illusion than super mario kart. It had almost like, different graphics for the road that various components would animate over time and sprites would move and scale around with the appearance of following the track, and would for each row of pixels, follow a curve to give the appearance that the track was turning and either skipping or doubling rows of pixels to give the appearance of going up or down a hill. This is certainly possible to do in godot, but it would require a different approach.
@@Aeduo thanks for the clarification :)
I usually call this mode 7.
Love2d days
5:32 Shouldn't xy be equal to -98 instead?
Also, at the end, it seems like the map rotates around the camera and not around the car.
I think you are right 😅
In another comment I indeed adressed this issue as well. And was simply because I wanted to show my project after working on it for a pretty long while.
You can add a small offset to the Pivot Rotation Position to make this effect work again =)
I was on my way to comment this, just a nitpick on the dot product operation, a small mistake. But nonetheless it's important to point it out just in case.
Worst part is that I kept checking and recalculating to see if I was correct before adding that part into the video.
Oh well, lets just say that its just difficult to calculate
The only thing missing is being able to do it with a tilemap.
Might be a new challenge I can do 😁👍
How can one implement drifting and sliding?
I'll be back for this one
😥😭You are just late by one day, wanted to make something like this in a game jam...
Thus I then tried 2.5d in 3D
Aww man!
I am sorry to hear that, hopefully you can apply this in the next Jam :)
Keep me posted if you do!
@@KindoSaur No issue brother! I'll let u know!!! ✨✨✨
Btw, thanks for project file 🗃️
No problem!
This effect is well known as MODE 7 from SUPER NES.
If you add that to the title of the video, more people will be able to see this video.
Good suggestion, I had added this Mode inside of the Tags of this video so it should be visible already.
I did see TheOneLoneCoder also use both names.
Thanks for the heads up =)
Will this be continued to add collisions ?
I am thinking about it as this was my favorite project to do =)
This is REALLY cool appearance-wise, but you can do 2.5D in Godot with 2D assets in a 3D scene.
What language is Godot written?
Gdscript, similar to python. You can also use c#
But I may ask... Why? (Im considering your goal is finish a game, not just learning)
I really want to reintroduce retro game techniques to this era of development.
So that Pseudo 3D (in this example) becomes more common and allow new unique games to be made.
And I want to create an archive for myself for when I get stuck re-using this effect.
Coz why not? Depends of what aesthetic or retro style you are searching for
Nice video. I think you could skip the matrix multiplication section since most people should have learned that in algebra class, and if someone doesn't know it it's going to be a while before they understand the why of any of the other math. (Like, deriving the height matrix.)
A cool extension would be to add a bit more fake 3D by procedurally extruding the colorful course blocks into cubes.
There is a game made for the Gameboy Advance called Asterix and Obelix XXL. And there they have full fake 3D environments and objects.
I reaally wanna know how they did that, maybe what you're saying is a part of that puzzle.
nintendo did it using assembly and a limited hardware, limited color pallete
Dealing with all that matrix math is unnecessary if you just rely on Godot's built-in 3D engine. You can achieve the same effect with a flat polygon plane for the terrain and a 3D camera. This is only worthwhile as a developer exercise to learn the math and recreate history. An end consumer will not care how it is created.
That is indeed true,
In the end it does not really matter to the player what is done to present a game to them. But if you wanted to make an actual Retro game for a real Retro system, Godot could help you Demo the idea as this doesn't require you to setup OpenGL with GLFW (to name something).
And for some it might even present a solution to other types of shader effects :)
But that is not pseudo 3D
Why do this when you can do real 3D and make it look like pseudo 3D, saving time for the same end result?
The reason for me making this effect within a shader has to do with the fact that it allows for an extra challenge, which I always like, and also getting to know the WHY and HOW this effect was/is done.
It might also help people look for different approaches to solve certain issues, since both your approach and my approach come with positives and negatives.
Thanks for your question :)
"Why so much work when-"
Vibes. The vibes, man
If you care only about result I’m just telling you it doesn’t really work like that in the industry, it’s fine tho, but also a bad practice 🤷♂️
why wouldn't you use 3D?
Thank you
You're welcome!