HD-2D Style in Godot 4.1
ฝัง
- เผยแพร่เมื่อ 23 ก.ย. 2023
- In this video, I'll go through how to implement some of the key elements from the Octopath Traveler style in Godot 4.1. These concepts can also be generalized for 3D or 2.5D games.
☕ Download the source code on Ko-Fi
ko-fi.com/s/08b0d19e78
🕛 Time Stamp
1:30 Pixel Art Player
5:35 Level Design Elements
8:54 Light, Shadow and World Environment
10:14 Bloom Settings
10:28 Depth of Field Settings
10:56 Vignette
11:20 God Rays
🗑️ Pastebin
Character Body 3D Code: pastebin.com/JH941YCE
SpringArm 3D Code: pastebin.com/EZwjLshn
Vignette Shader: pastebin.com/2jsep56W
🛒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
Pixel Art - cainos.itch.io/pixel-art-top-...
Spritesheet - www.spriters-resource.com/ds_...
Music
'Permafrost' by Scott Buckley - released under CC-BY 4.0. www.scottbuckley.com.au - เกม
Some tips for people following this:
- The player animation should have both feet on the ground between each step, or should not show that frame at all whilst walking
- Maybe slow the player down a little - he seems to be walking a little too fast for it to look right in a larger scale project
- Move the camera up a little - whilst your player should be the centre of attention, you should still be able to see what's in front of him
Great tutorial!
thanks for the great tips!
I advise beginners to not use this tutorial as it does gloss over some finer details on creating this from scratch. Otherwise, it's a good tutorial for more seasoned devs.
Also the walk animation code is pretty bad. You can achieve the same thing just by checking the input axis value for all 4 directional inputs, then playing the correct animation based on the number it returns. If no input is detected, stop the animation. There’s no reason to manually update the frames when you can just call .play(“animation_name_” + direction) method on your animation player mode. It’s unnecessarily complex and weirdly limiting.
What tutorial should we use ;-;
@@catcactus1234 explain it in code form so I can ̶c̶̶o̶̶p̶̶y̶ ̶a̶̶n̶̶d̶ ̶p̶̶a̶̶s̶̶t̶̶e̶ ̶i̶̶t̶ understand it better
@@catcactus1234 can you explain it in code form so I can c̶̶o̶̶p̶̶y̶ ̶a̶̶n̶̶d̶ ̶p̶̶a̶̶s̶̶t̶̶e̶ ̶i̶̶t̶ understand it better
@@catcactus1234 Can you give a more in depth explanation, or point to a video that explains what you are talking about regarding checking the animations based on axis value?
I love your videos on HD2D! I appreciate how you walk through an entire scene, not just one aspect of the scene. It allows me to understand exactly how you went from scratch to the final product!
This has helped me kickstart my project so much!! I thank you from the bottom of my heart!
Your content is amazing! Your editing, speed, and style is top notch!
Thank you for all of the effort you put in.
Awesome!🎉 . I'm eager to see combat mechanics from your game. Keep the good work!
Thanks for the kind words! You're in for a treat, I'm currently planning the combat mechanics for my game!
Instead of incremental turns, the easiest method for turning is just if Input.is_action_pressed: "move_left" rotation.y += 1 x delta. (-= if your going right.)
This really helped me a lot! Thank you for the video :)
Thank you very much for your tutorial, I have been looking for it and I had given up on this type of 2D to 3D format and it came out recommended, keep it up (if by chance you see spelling errors or misspelled words, I used a translator.).
Thanks for the kind words! Glad you find this helpful and good luck on your project!
Dude wtf, this is top notch quality tutorial, keep going bro!
Really learned a lot from this video, much appreciate.
Fantastic video! Thank you so much.
great 2.5d tutorial, thanks!
glad that you like it!
This is exactly what I was looking for, thank you sir!
Thanks for the kind words, glad that I could help!
Suggestion:
add a normal map on the 2D sprite so it react with the light dynamically.
Thanks for the tip, going to research about that next!
nah that always looks ugly
If you draw a pixel art of something and you have to spend time to make a normal map of it -> A lot of time -> Solution : draw pixel with shadow cast same direction with 3D direction light
but how to enable shadow for the sprite ? my spite3D is not casting shadows
You can simply mark the UV as triplanar instead of setting its coordinates to 3, 2 ,1.
the checkbox for this is right below the UV scale and offset
that's cool, thanks for the tip!
you angryybot are a scholar and a gentlebot
Fantastic video!
Great tutorial as always
Thanks for the constant support!
thanks a lot, great video
3:57 what value does "facing" represent?
My character's sprite is blured. How I fix this?
I can't find the sprite sheet for download
This is fire, I've been looking for a HD-2D Style tutorial on Godot but almost all videos teach it on UE5. Do more videos about HD-2D Style and can you explain everything step by step. I'm a total beginner.
Glad that you find this useful. Sure, think I can make a video for a total beginner.
Curious which parts you find difficult to follow in this video so I can improve them
For example at min 3:12 you typed some code for the animation, where do I type it? is it a script attached to the animation?Honestly your videos are very informative but for absolute beginners the pace might be fast. Also there is another ytuber who posts similar 2DHD tutorials for UE5, you can probably grow your channel by doing the same thing for Godot. his channel is CobraCode incase you wanna get some ideas.@@gamedevaki
Cool, thanks for details. CobraCode looks cool, thanks for the recommendation!
Umm anyone realize the walking code is in Vector2? I debugged this for 30 mins to realize i needed to have direction.z instead of direction.y to move up and down.
I'm playing around with making something like this so I'll ask here and see if someone recognizes my issue if that's alright? I can see the invisible parts of my sprite when it moves. It blurs whatever's behind it so you can clearly see the edges of the sprite frame. Any idea what could have caused this? It's not even animated yet, it just happens when the player moves. I have the spritesheet imported the way you did it and I can't really find anyone else who's got this issue and it's driving me nuts :P
Thanks learned a lot
Glad to hear that!
i have the problem that th players feed are like inside the tiles from a y direction with collision detection, is there some kind of offset so that the sprite does not seem to have its feet cut off from the block tiles?
I usually offset it based on the position of my tile. e.g. if my floor tile is on default position (0,0,0) and has a height of 1, I'll offset it by 0.5
how is your project going?
Well, that's quite a tutorial there !
Fantastic
Thanks, glad you like it!
@@gamedevaki Just show everything then loll
Should the SpringArm3D be bound to the player character? Shouldn't it be used in the level scene and the level scene inherits the player character? sry, i'm new to game development and just trying to think about structure a bit for my project as well. Hence, for some reason my animations for moving forward, back, left and right don't seem to work correctly. i think i did everything as according to the video. The sprite seems to orientate the specific frames at least in the directions it should look, but then is stuck on the one frame animation instead of doing the rest of the 6 frames for the specific direction it is facing. Anyone having a similar problem?
I'm mainly using the SpringArm3D to control the camera in relation to the player, that's why I bind it to the player.
That way, when the player moves to different stages, it will still have the same SpringArm3D and Camera attached to it.
after godot completely failed to load and properly displays basic 3d models I also tried to use the 2.5d aproach but after I noticed godot is bugged even to load a bunch of images I just went back to unity
And if you want to add animations to attack moves Animation of storage position Do I have to draw another picture png and do it all over again?
Yeah, you need a separate animation for attacks.
Nice Tutorial. To the point.
Unfortunately I have to look for another approach for implementing my 2D Character with Skeletal Animations into a 3D World.
Bodyparts are using 2D Sprites (with 6 Frames for Directions).
I do not think that it will work with Sprite3D?
Maybe I need to look for some Tutorials with viewports in mind.
But the video was overall useful and I still got plenty to take with me to make a 3D World rather quick and easy.
Thank you for the Tutorial
Te amoooo!!!!
If i make it in mobile renderer, ¿ who are the parameters i need to change ?
mobile renderer would need some tweaking in the Depth of Field and bloom settings for greatest impact. World environment and light settings also need some tweaking for minor improvements.
I absolutely need this moving environment folllowing the camera of the character like you made with trees! Is that possible in Unreal Engine 5?
I need this tutorial in Unreal Engine :/
ah sorry, I don't have experience with Unreal Engine.
I didn't really do anything crazy in this tutorial so it should be applicable to Unreal Engine 5
How do you get the trees to sway?
I've made a video to go through the tree sway here - th-cam.com/video/g17C_EXna3M/w-d-xo.html
I might adapt some of these ideas to Godot 3.5 since I probably won't be switching to Godot 4.0+ just yet.
Good idea! Might need some tweaking though, especially in WorldEnvironment
can you make a video on how to flip the sprite of an enemy or other npc correctly so that they always face the player when you rotate the camera? My code only works when I am not rotating the camera. In my code, I make the enemy calculate the distance vector3 between it and the player when it is agro and normalized it, then I make the enemy choose to flip sprite or not based on the x axis of it. It worked fine before I saw your video and decide to add the rotate camera to the game like don't starve.
off the top of my mind, I'm thinking of using RayCasting to identify the camera position relative to the players to decide on the flipping and facing.
I Just have a question, how i can make the facing code? Like i should make a "onready var"?
Sorry, I don't quite get the question you are asking. Do you mind giving me more context?
@@gamedevakii'm sorry for the delay, i got an error in the code: 'The identifier "facing" isn't declared in the current scope.' I use godot 3.5 because i cant use godot 4
I'm still new at godot
thanks for the context. yes, you need to define the variable through something like "var facing = 0"
it's been a while since I've last used Godot 3.5, so I don't remember the intricacies but you would need to make sure facing is usable by the entire script, not just the function.
you should be able to do that by placing "var facing = 0" outside of all functions
@@gamedevaki ok!!! Thank you!
Do you have any plan to make a game in steam?
That's like the dream! Not sure how long it takes for me to get there though.
Sad we didnt get to at least see the result at the end of the video
Wow, keep these awesome videos coming! What a relief to find someone who gets to the point, and also has great taste. Plus, you are the only tutorial maker I have yet to come across who does not sound castrated. For real: so much content I won't access because I can't bear hearing the eerily common soy tone - and often ESL (English as a Secondary Language) pronunciation. It all results in sounding like fingernails scratching across a chalkboard. Thanks for being different!
Very good video - nice and detailed but not going into lot of details - very good pacing.
Thanks for the kind words, glad that you enjoy this video!
🙏
I feel like a dithered shadow shader would set this off.
thanks for the great idea, let me try figure that out!
-Animating a sprite sheet like you described in the first part of the video is a bad idea. When you eventually will need to edit those animations it will quickly become an unmantainable mess, especially if you do it in code. It's better to use AnimationPlayer instead, since it has way more built in functionality and is easier to use for people that don't usually code, like animators, designers and sprite artists.
-Did you dub this video using an AI voice model?
Thanks for the good point.
In my opinion, animation player is ideal for complex animations like cut scenes or battles.
I would prefer my approach for homogenous animation - imagine having to set the same key frames for 100s of sprite. Of course, it is up to each developer to make the judgement call.
Yes. Using Tortoise TTS model.
This really isn't showcasing bloom or DoF very well (to be fair, a lot of Octopath players feel the effect is too strong in that game). I think you should build another scene and reassess whether your shaders are working as intended
Thanks for the feedback. Agree that I failed to give bloom or DoF the showcase it deserves.
Let me work on another video focusing on those effects across multiple scenes for a better showcase.
Claiming HD-2D doesn't work on web is completely false, it's the shaders that you use in the scene that don't work. HD-2D as a visual style can 100% work on Web / mobile.
Are you alive?
is...this voice an AI?
Recommendation: remove the AI voice use your own or ask a friend to read the line.
thanks for the feedback, being an Asian with English as my second language makes this a little challenging.
not to mention the hate I've gotten from my old videos for my accent and grammar mistakes
making videos is just a hobby for me, so I rather just use an AI voiceover so I don't need to deal with the haters lol
I appreciate the current voice settings used. It's clear and not hard to listen to like other AI voices. Better to be able to understand what is being conveyed clearly. I have struggled to follow some other tutorials where the mic used is not very good quality or there's no voiceover at all, so this is very helpful. Thank you OP!
do you know what ai voice did he use? i've heard mostly in yt shorts?
4:45 this code makes my skin crawl, please never do this. initiate all your stuff first, then make the if statements which just set a variable to either +PI/2 or -PI/2, then tween. this is so much needless code duplication.
Your previews are way too short, show off what you've made for longer! Lol
thanks for the feedback, I'll try adding longer previews in the future. curious what do you think is a good length for the end results showcase?
why you charge for source code?
It is his code he can do whatever he wants with it. Support other devs youtube ads don't pay the bills
if you don't wanna pay for it, follow the tutorial
It's marketing trick and nothing wrong with it
unsub because you sell out, why no free code? greedy.
@@iFruit9iXven dude is hilarious 😂. He's the epitome of "beggar asking too much"
It is his code he can do whatever he want with it don't be an 8 years old and grow up.
Lol you're pathetic
or take the time to follow the tutorial and learn from it, and you'll end up with the source code without having to pay. Get a grip
Oh no, and here I was excited to see your asset flip on kickstart. Shame...
I love this pixel-art HD style! Do you have a Twitter or Discord where we can talk about game dev?