State Management in 2D GAMES

[@Frankslaboratory]

In this class we learn how to give a game character SPECIAL ABILITIES, using the state pattern. Do you also want me to show you how to give a game multiple LEVELS, or are you able to implement that yourself after watching this?

[@javifontalva7752]

Yes please! Wonderful vid as usual!

[@tarcisiooliveira8810]

Yes, it would be amazing to have a level system, it would be cool to see you implement a map transition system

[@worldbest3097]

cant wait for multiple level damn great!

[@JustSomeGirlWithRedHair]

thanks a lot frank, you are one of the best teachers ngl, and i am so grateful for your videos man. i hope to see more explanation videos to topic similar to these

[@Profitrol29]

I have been using this pattern for two year after I read the book “game programming patterns”. The pattern is as powerful as Command pattern or Sandbox. I love it. You can create a flexible and scalable architecture that will be easily maintained. Thank you for the video. I’ve never met programmers that use the patterns. I happy to know that not only I use them.

[@atandatosinpeter427]

Awesome! Now I feel even more capable of managing my game states. Thank you for the tutorial.

[@javifontalva7752]

WoW. Your code is better and better. I am impressed!

[@Frankslaboratory]

Thank you Javi. I try to implement something new with every video

[@kerrykreiter445]

Frank, your tutorials are always inspiring! Thank you!

[@Frankslaboratory]

Hi Kerry. Glad to hear that. Thank you for taking the time to leave a comment

[@Radu]

Nice work! I will be teaching state machines next academic year :-D but it's gonna be much more theoretical than this. I might share this video with my students so they can have some fun :-)

[@Frankslaboratory]

Hi Radu, happy to hear that. Are you planning to make any KZbin content on this topic? I would really like to see your approach.

[@javifontalva7752]

That would be amazing.

[@alvarobyrne]

@@Frankslaboratory agree

[@JAVERDO_69]

I was watching a lot of videos about this and this is the best explained video of all. Thanks Frank, your video saved me a lot of headache. keep on the hard work. 💪💪

[@Frankslaboratory]

Glad you found some value, thank you for letting me know 💪

[@Green68200]

(1) thank you for this video as always full of resources and concepts

[@Frankslaboratory]

Hi. I'm here to help 😊

[@braveitor]

Fantastic tutorial, very informative and easy to understand. Thank you!

[@aylictal]

Hey Frank. Having some difficulty with this pattern for a few reasons. I will give the hypothetical: Pretend you're developing an RPG and in this RPG you can battle many different types of enemies. Your character might be a knight with a sword swinging animation, or an archer with a bow shooting animation, or whatever! Pretend its a jack of all trades and he can do any of those. This isn't my problem and your pattern works great here because those states are in isolation. My problem arises when I need to combine states. Say an enemy goblin shoots me with a poisoned arrow and my character is now poisoned, but he is also shooting his bow while doing so. Okay so I'd need four base states to handle both of those -> idle, shooting, idle_poisoned, and shooting_poisoned. Worse yet, lets say I'm fighting both a goblin who shot me with a poisoned arrow and another goblin mage who casted a blind spell on me. My character is now poisoned, blinded, and is shooting his bow. To handle all those scenarios, I'd have to write idle, shooting, idle_poisoned, shooting_poisoned, idle_blind, shooting_blind, idle_poisoned_blind, shooting_poisoned_blind. Every new combined state the character could have would require big O notation of classes in order to solve this problem. What if I wanted to incorporate more things such as stunned, slept, or confused statuses? It gets even worse with those added on because lets say you cant be poisoned while slept, but you could be stunned while poisoned, and you cant be confused while slept, but you could be poisoned while confused, and you cant swing your sword or shoot your bow while slept or stunned, but you could do either when you are confused. How would you tackle this problem instead I'm having? This gets really difficult and results in spaghetti code for me everytime and I've looked everywhere for help on this.

[@Frankslaboratory]

Hi, what you are describing can be broken into two different things. Separate each state into a different class only for things that have a separate unique animation (or potentially different velocity etc). All the random modifiers like poisoned or chilled could be just simple flags on your character. Look how other games are made and check what changes the actual animation and what is just a stat changer. Yes if you have a separate animation for frozen, poisoned etc, then you need a separate state for each but thats still linear not exponential. Some games solve it by just having a separate object that shows a poison cloud around a player while the player still cycles between the standard idle, running, walking states etc. There are many ways to approach this, you will get a better idea when you actually start building things out. Have fun :)

[@worldbest3097]

more and more advanced and excited!

[@Frankslaboratory]

I tried to simplify this as much as possible, even a simple implementation is very powerful

[@michaelburns8073]

Hm, this seems to me a bit strange doing it this way. One thing is extending states from the Alien class Aliens themselves don't change because their states change, just their behavior and attributes. So, I think I would setup a class called AlienStates, and then extend states from that class, which would be assigned to a class variable in a class of Alien. This seems to make more sense to me OOP wise.

[@Frankslaboratory]

Yea I will try that for the next video. It will allow the set state method to sit on Alien class rather than on the game class. Thanks for your feedback.

[@lhcen197]

Good luck bro 🍀🍀🍀🍀

[@forgottenaquarium2879]

I was scratching my head around the state design pattern for a long time. This gave me some understanding to do it easily. Thank you so much for the tutorial. As always you are the best 🥰. For me I give 5 for the difficulty

[@Frankslaboratory]

I think it's very useful to know this technique, I will try to include it in the future game tutorials more often, so we can explore different ways of how to implement it.

[@forgottenaquarium2879]

@@Frankslaboratory this gave me an idea to fix the check I do when making snake game, to prevent the player to move to left while moving to right. With a state design pattern, it will be very easy right. I am looking forward to seeing the new videos soon.

[@Frankslaboratory]

@@forgottenaquarium2879 Yes, you can also achieve the same thing with a complex if else statement. The advantage of state pattern is that you separate the logic into individual code blocks, so it's easier to navigate in the code and easier to debug if something goes wrong. At some point the if else statement would become too convoluted. With state pattern we can just add more of these independent blocks, it scales well if your game gets bigger

[@starstuff606]

thanks for for these videos, im having a fun time learning OOP

[@Frankslaboratory]

Hi. Glad you found some value! :)

[@granumuse7847]

Great video once more, Frank. For intermediate and advanced, you could try to show us how to declare getters for Game::width and Game::height and all the related properties, also. By doing this, we can save 50% of coding and time for each project, and of course we can get dynamically the value of each property.

[@Frankslaboratory]

Hi, yes that's a good idea. I will try to use more getters and setters in the future projects. I appreciate comments on how to improve my code thank you

[@M4rt1nX]

Wee, thanks a lot. I purchased the Udemy course and I was missing this part.

[@Frankslaboratory]

Hi Luz. I'm adding bonus lessons to that course still. It will be a bit bigger in the end. With this episode I'm adding this new charging enemy type to Space Invaders and to Planet defense game. Will release it soon. The last game in this series will use the stare pattern to split the game into phases

[@pystig]

Enjoying your tutorials a lot. Yes I would like to see levels as well by you. As a note. I am thinking that storing alienStates as Map would be more elegant instead of an Array.

[@Frankslaboratory]

Yes. Thank you for commenting. I like your ideas

[@karlkoch3345]

Another great tutorial!

[@Frankslaboratory]

Thanks Karl!

[@ЛеонідПрокопенко-л8м]

I love it! Your tutorials are best.

[@Frankslaboratory]

Thank you for letting me know

[@Mohan-w3i]

this tutorial helped me a lot in my pokemon fan game sir can you make a video on data handling like tilesets,tilemaps tiles and tile layers please.

[@Isaac-zak]

Can you recommend me a guide to prepare sprites heels using dragonbones?

[@KG-lr2qw]

If you use subclasses for the different states, what if the alien object needs to have shared properties, such as x and y or health? how do you maintain them between the subclass objects?

[@pystig]

There is a thing which interests me. I watched several of your videos. You create a Game class. Within a Game class you have a canvas variable. Each object you use in your game gets game object as a parameter when it is created. Then when you call its draw method from within the Game class you out context as a parameter. Why not just set a context as a variable in Game class? That way each object in game would have access to it via game object received when it was instantiated.... What's the reason not to do that?

[@Frankslaboratory]

Hi. Good observation. It can be done. I've done it a few times, for example in my ASCII art video I think. I dont think one approach is better than other, its a matter of preference.

[@pystig]

@@Frankslaboratory I was thinking that may be there is a reason not to provide context through game object which I was not able to spot. But if there is not a specific reason for that maybe it is more convenient to just have it always available in the game object for every other object which may need it....

[@king_lel_HD]

I love your videos!!!

[@Frankslaboratory]

Hi. Thank you for letting me know. Happy to hear

[@markuszeller_official]

Tipp: Create a const for each state index for better readabilty. Just numbers are "magic" and don't tell what is going on.

[@Frankslaboratory]

Hi Markus. How are you? It's been a while. Thank you for the tip. Yes it will make the code more readable. Will do it for the next project

[@markuszeller_official]

@@Frankslaboratory Thanks, I am good. YT killed my over 13 yrs old channel :'(

[@Frankslaboratory]

I didn't know they could do that. Did they give you a reason?

[@markuszeller_official]

@@Frankslaboratory Yep, and they did not even send a warning or just did a takedown. The channel was deleted, because of hate speech of a comedy audio drama with a few episodes. Any request will be declined automatically. Censorship sucks.

[@Frankslaboratory]

@markuszeller_official KZbin support is very bad from my experience. When I needed help they just shift the ticket between people, all of them sending the same copy and paste response. I felt like noone even took the time to fully read what my issue was about. Very frustrating. Are you going to start a new channel?

[@JamesRyanOrbitaTripoli]

Love it!

[@Frankslaboratory]

Glad you found some value!

[@Uncaught_in_promise]

Actually you (re)invent your own JS framework like React or Vue js. Am I correct?

[@Frankslaboratory]

Yes those frameworks have a complex built in state management. For this project I created what I think is the simplest implementation of state pattern, to be used for building games. I wanted to strip it down as much as possible so that we can fully understand what each line of code is doing. Even a simple code structure like this is very powerful, I will showcase what it can do in the next game tutorial I'm making right now.

[@alvarobyrne]

how do you sprite? plese tell us!

[@Frankslaboratory]

Hi. I use a software called Dragonbones. It's free. I draw characters as separate body parts and then use Dragonbones to create animations and export them as sprite sheets

[@alvarobyrne]

@@Frankslaboratory why not tutorial - ING it? Maybe a 5 min not SO elaborate ONE. Just saying. Great channel by the way

[@Frankslaboratory]

@alvarobyrne it would take much longer than 5 min tutorial to explan rigging and mesh. There already is a pretty good series of videos from someone on KZbin covering this. Try that and see if it helps

[@alvarobyrne]

@@Frankslaboratory Ah! Ok! It's just that you are such a good explainer, that meybe just, you know, just shows a bit of how you do it, but i get it... it's a huge commitment. I had to try. ha, ha. Thanks any way. I'll look into it. Have a nice one, bye

[@myzspivey2839]

That's great! 🤪👑😘

[@Frankslaboratory]

Thanks! :)

[@AlexanderShelestov]

Nice examples! Isn't it more practical to use additional class for states? For example: // State interface class AlienState { handleInput(alien, input) { throw new Error("This method must be overridden"); } update(alien) { throw new Error("This method must be overridden"); } } // Concrete states class IdleState extends AlienState { handleInput(alien, input) { if (input === '2') { alien.setState(alien.chargeState); } } update(alien) { // Handle idle state logic } } class ChargeState extends AlienState { handleInput(alien, input) { // No input handling while charging } update(alien) { // Handle charging logic if (alien.isChargeComplete()) { alien.setState(alien.swarmState); } } } class SwarmState extends AlienState { handleInput(alien, input) { // Possible handling of user input in swarm state } update(alien) { // Handle swarm state logic alien.setState(alien.idleState); } } Etc. class Alien { constructor() { this.idleState = new IdleState(); this.chargeState = new ChargeState(); this.swarmState = new SwarmState(); // Start in idle state this.currentState = this.idleState; } setState(newState) { this.currentState = newState; } input(input) { this.currentState.handleInput(this, input); } update() { this.currentState.update(this); } isChargeComplete() { // Logic to determine if charging is complete return true; } } const alien = new Alien(); // Start in idle state alien.update(); // Update in idle state // User inputs a charge alien.input('2'); // Alien is now charging alien.update(); // Update in charging state // After charging, alien automatically transitions to swarm state alien.update(); // Update in swarm state // After swarm, it goes back to idle alien.update(); // Update in idle state again

[@swedishpsychopath8795]

I'm sorry: That won't work. Believe me.

[@MrBrady95]

Thanks, I enjoy these videos! However, in my opinion, this starts to get extremely confusing at about 15 minutes in. I can no longer tell "what is referencing what" and following the logic becomes almost impossible. Maybe it would be helpful to have some diagrams to relate to at this point? That said, I guess I can also do my own diagrams and I usually get something out of your videos. I still enjoy watching, thanks!

[@Frankslaboratory]

Hi. I will remember this and the next video will have a diagram on screen when dealing with states. Thank you for the useful feedback.

[@suelingsusu1339]

👌👌👌👌👏👏👏👏🙏🙏🙏🙏🖖🖖🖖🖖🖖🖖

[@Frankslaboratory]

🖖🖖🖖