State Management in 2D GAMES

Подписаться 82 тыс.

Просмотров 6 тыс.

50% 1

State design pattern is the most powerful technique a beginner can learn. It gives us complete control over our project. This is how I implement it with plain vanilla JavaScript and object oriented programming.
We can apply state pattern to an individual character to give it a set of abilities and special moves.
We can also apply it to the entire game, split it into levels and give each level different environment and other unique features.
State design pattern focuses on separating code for each state in it's own code block, that code block could be a special attack or individual game level for example.
In my implementation we will also include elements of finite state machine, which is more about the relationships between the individual states and how they transition into each other. We will restrict which states the alien is able to switch into and how it reacts to user inputs, depending on which state it is currently in.
👽 Download Project Art assets 👽
Alien: www.frankslaboratory.co.uk/do...
Background (optional): www.frankslaboratory.co.uk/do...
(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)
Playlist: • JavaScript Game Develo...
🌌 Tutorial Contents 🌌
00:00 Why we need state management
02:11 Project setup
06:21 Keyboard controls with JavaScript Sets
08:14 How to implement State design pattern
14:11 Switching states on keypress
16:12 Animation loop
21:54 Switching states on automated condition
24:14 Making each state unique
26:31 State dependent status text
32:43 State dependent animations
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪
www.udemy.com/course/learn-cr...
www.udemy.com/course/learn-ga...
www.udemy.com/course/creative...
www.udemy.com/course/build-an...
www.udemy.com/course/learn-ht...
www.udemy.com/course/remake-r...
www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month: ‍🎓
www.skillshare.com/en/r/profi...
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

Опубликовано:

22 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@Frankslaboratory 8 месяцев назад

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 8 месяцев назад

Yes please! Wonderful vid as usual!

@tarcisiooliveira8810 8 месяцев назад

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

@worldbest3097 7 месяцев назад

cant wait for multiple level damn great!

@JustSomeGirlWithRedHair 4 месяца назад

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 8 месяцев назад

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 22 дня назад

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

@braveitor 8 месяцев назад

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

@kerrykreiter445 8 месяцев назад

Frank, your tutorials are always inspiring! Thank you!

@Frankslaboratory 8 месяцев назад

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

@javifontalva7752 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

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

@Green68200 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

Hi. I'm here to help 😊

@Radu 8 месяцев назад

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 8 месяцев назад

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

@javifontalva7752 8 месяцев назад

That would be amazing.

@alvarobyrne 8 месяцев назад

@@Frankslaboratory agree

@worldbest3097 8 месяцев назад

more and more advanced and excited!

@Frankslaboratory 8 месяцев назад

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

@lhcen197 8 месяцев назад

Good luck bro 🍀🍀🍀🍀

@karlkoch3345 6 месяцев назад

Another great tutorial!

@Frankslaboratory 6 месяцев назад

Thanks Karl!

@user-rs1kp4uu4v 8 месяцев назад

I love it! Your tutorials are best.

@Frankslaboratory 8 месяцев назад

Thank you for letting me know

@starstuff606 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

Hi. Glad you found some value! :)

@king_lel_HD 8 месяцев назад

I love your videos!!!

@Frankslaboratory 8 месяцев назад

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

@user-go9dc3xw6n 8 месяцев назад

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.

@M4rt1nX 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

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

@forgottenaquarium2879 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

@@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 8 месяцев назад

@@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

@aylictal 2 месяца назад

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 2 месяца назад

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 :)

@granumuse7847 8 месяцев назад

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 8 месяцев назад

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

@user-mj9rz1pu1r 8 месяцев назад

Love it!

@Frankslaboratory 8 месяцев назад

Glad you found some value!

@pystig 7 месяцев назад

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 7 месяцев назад

Yes. Thank you for commenting. I like your ideas

@myzspivey2839 8 месяцев назад

That's great! 🤪👑😘

@Frankslaboratory 8 месяцев назад

Thanks! :)

@michaelburns8073 8 месяцев назад

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 8 месяцев назад

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.

@KG-lr2qw 6 месяцев назад

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?

@Isaac-zak 4 месяца назад

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

@markuszeller_official 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

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 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

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

@markuszeller_official 8 месяцев назад

@@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 8 месяцев назад

@markuszeller_official RU-vid 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?

@alvarobyrne 8 месяцев назад

how do you sprite? plese tell us!

@Frankslaboratory 8 месяцев назад

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 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

@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 RU-vid covering this. Try that and see if it helps

@alvarobyrne 8 месяцев назад

@@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

@pystig 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

@@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....

@BMikel 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

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.

@MrBrady95 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

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

@Frankslaboratory 8 месяцев назад

🖖🖖🖖

@AlexanderShelestov 7 месяцев назад

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