Slay the Spire Clone Godot 4 Tutorial: Card Dragging & State Machines (02/08)

24,197
0
Published 2023-11-25
Welcome to the second installment of the "Slay the Spire Clone in Godot" series using the powerful Godot engine! šŸŽ®
In this beginner-intermediate tutorial, we'll continue our game development journey by implementing the main card dragging mechanic for our game. Let's dive in!

šŸš€ Part 2 - Card Dragging Mechanic & State Machines
00:00 - Slay the Spire demo
00:40 - End result
01:29 - Creating the CardUI Scene
08:23 - Adding CardDropArea and Hand to the Battle Scene
13:06 - State Machine explanation
15:43 - Basic CardUI and CardState base class scripts
18:47 - Coding the CardStateMachine
21:06 - Adding Nodes and Scripts for the 4 States
23:00 - Coding the Base State
25:09 - Coding the Clicked State
26:21 - Coding the Dragging State
30:27 - Coding the first version of the Released State
30:55 - Hooking up all the systems, fixing bugs
42:10 - Using the CardDropArea do detect if we should reset the CardUI
46:27 - Fixing one last bug and wrapping up

šŸ‘©ā€šŸ’» Source code for Season 1 on GitHub:
github.com/guladam/deck_builder_tutorial/tree/seasā€¦

šŸŽ“ Learn More About Godot:
Godot Docs:
docs.godotengine.org/en/stable/getting_started/steā€¦
docs.godotengine.org/en/stable/getting_started/firā€¦

Heartbeast:
Ā Ā Ā ā€¢Ā GodotĀ 4Ā TutorialĀ -Ā HeartĀ PlatformerĀ Ā 

Card Fanning Tutorial by Bramwell:
Ā Ā Ā ā€¢Ā HowĀ IĀ FanĀ 3DĀ CardsĀ inĀ GodotĀ 4Ā Ā 

ā˜• If you want to support me, buy me a coffee at:
ko-fi.com/godotgamelab

šŸ”„ Connect with Me:
Instagram: www.instagram.com/adamgulacsi/
Twitter: twitter.com/adam_gulacsi
Mastodon: mastodon.gamedev.place/@guladev

#godot #godotengine #2d #tutorial #godotgamelab

All Comments (21)
  • @godotgamelab
    Hey Everyone! Thanks for the overwhelming support you showed with this series so far! :) I just wanted to let you know that I added timestamps and chapters for my videos so hopefully it's easier for you to navigate if you want to. (you can also find them in the video description) Keep on cookin' and Cheers!
  • @LuizMoratelli
    So good to see a series with good code / architecture!
  • @718Outdoors
    I love how you show the final result of the episode at the beginning
  • @jmh6559
    I really loved the part that explained the principle and function of the object to be implemented step by step by taking the elevator as an example before working on the code, which most tutorials didn't put in even its the simplest and most central part as a "tutorial". So much appreciate for a great video and series!
  • @Ocdib
    One comment: when pasting code (esp. for signals, e.g.: signal transition_requested(from: CardState, to: State), it would help if you explain the thought process behind each function or signal a bit slower. EDIT: e.g.:18:10 onwards Thank you!
  • @lexsdragon1554
    omg this series is exactly what I needed! Thank you so much!
  • @reIMAGEN
    This is a great series. Wonderful work mate.
  • @aaronsommers9078
    Great video! Thanks for creating this content that allows beginners to see some more complex code that is explained well, as well as well-organized! Knowing how to organize code efficiently is something that I have been struggling with, but these videos are a great example!
  • Im not trying to do this, but once i got watching, im pretty convinced that im gonna watch the whole series for the sheer amount of knowledge ur spilling. thank you!
  • @Ocdib
    Very clear. Found you through your reddit post. I love your pace!
  • @yogiwiguna9602
    Thanks for the tutorial keep it going. It's help me to learn about the State Machine more , still a little bit confused but i try to watch it over and over again.
  • @Soroosh.S83
    You don't know how much it helps when you add chapters. The tutorial itself is great I love how you maintain to teach us with patience and good quality I'm more excited to see more of this series ā¤
  • @marcelburdon9795
    I really appreciate how you run the program multiple times, and take little breaks going "this should work, right?" only to show us what we're missing, instead of just dumping all the correct code on the viewer right away. Explaining what is missing, or why it is necessary makes me understand the components a lot better. Also interesting to do input-mapping so late into the tutorial, usually YouTubers knock that away in the first few minutes, without ever really elaborating on it, whilst you do the code first, and the mapping second, makes me actually understand just a little bit better. Despite having previous programming experience, GDscript is still a little tough on me, but I'm slowly learning, and hopefully after a few more videos I'll be comfortable adding my own additions! (like the 3D card fan, switching out the assets and themes, etc. and eventually adding my own non-StS gameplay mechanics) The Godot interface is still rather overwhelming, it's as if PhotoShop and Excel had a baby, with the sheer amount of menus and buttons, but your calm way of guiding the viewer through it is making it a bit more comprehensible. I'll try to maybe get a tutorial or two done daily (though I might be lazy in the weekends) and hopefully by the time I'm done I can get a little creative with the code! Statemachines are still a little scary, but I think I'm getting a hang of the logic, although the code formatting and syntax itself is somewhat complicated.
  • @attilasipos3481
    KĆŗltĆŗrĆ”lt Ć©s megfelelő technolĆ³giĆ”t hasznĆ”l az Ćŗr! Emellett Ć©rtelmes kĆ³dot Ć­r!!!
  • @underscorerx
    amazing tutorial. here's some engagement to bump it up in the algo
  • This is an amazing series so far and I look forward to watching the rest of it. I think you're doing a great job of keeping concepts at the beginner / intermediate level. I am someone who knows more or less what the nodes are meant to do and has cobbled together a few small projects. Especially without a computer science background, knowing design patterns or game architecture is invaluable, and is teaching me stuff I didn't even know I needed to learn. You're doing a great job of explaining the "why" as well as the "what".
  • @nandomax3
    Amazing content. I was wandering how to expand the concepts tought by the shaggy dev on the Advanced State Machine video to use signals to change states too. Your implementation looks really similar to mine, although I don't like the request_transition(from, to), it's a nice way to organize those piece of code
  • @TheCamulous
    Hey, first I want to say this is an absolutely amazing series! I just have one problem I can't solve for the life of me. Everything is working with the exception of snapping the cards back to hand if you right click or play outside the play area. I've set up debug checks to see where it is going wrong. According to those everything is running and it seems that the child.reparent(self) call in hand.gd is running but simply not reseting the position of the card. I would love any direction on where to keep looking for issues!