State Management in Games
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- It's really fun designing special abilities and controls for animated video game characters. When you start building bigger, more exciting games full of special features, you will be faced witch challenges game developers have been dealing with since the 80's. How to keep code organised and easy to debug? How to keep it clean. Over time people came up with general reusable solutions to commonly occurring problems, these well tested and widely used code structures are called design patterns. Design patterns are a toolkit of tried and tested solutions to common problems in software design. So let's use state design pattern today to apply state management to a player character in a 2D side-scroller game. Have fun! :)
❤ Related Links ❤
Art by bevouliin.com/ check out their website for more game art assets :)
Download project sprite sheet:
🐕 frankslaboratory.co.uk/downloa...
Backup link: ibb.co/dpCW91M
⭐️Tutorial Contents ⭐️
00:00 What are design patterns and why use them
03:19 HTML and CSS setup
04:21 Native JavaScript modules
05:01 How to use Live server VS code extension
07:38 JavaScript setup
08:47 Player class
11:13 How to export and import JavaScript modules
13:20 Drawing player
16:39 Keyboard inputs with input handler class
22:33 Utility functions
24:26 Applying state design pattern to player
45:33 Sitting
49:42 Running
53:55 Jumping
01:00:25 Falling
01:04:03 Sprite animation
01:05:47 Control FPS with timestamps and delta time
You could split design patterns into 3 main categories:
CREATIONAL patterns provide us with different object creation mechanisms
STRUCTURAL patterns help us to assemble objects into flexible and efficient code structures
BEHAVIOURAL patterns that deal with communication and assigning responsibilities between objects
In this class we will use state design pattern to control player character in a game. It's a behavioural design patter that lets an object alter it's behaviour when it's internal state changes.
🔥 I really like these GAMEDEV and GAME ART courses on Udemy 🔥
☕ How to Program Games: Tile Classics in JS for HTML5 Canvas bit.ly/2ZUfKuG
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation • Sprite Animation in Ja...
🐶 Project 2: Parallax backgrounds • Parallax in JavaScript...
🐶 Project 3: NPC movement • How To Code Flying Cre...
🐶 Project 4: Rectangle collision • Collision Detection Be...
🐶 Project 5: Circle collision • Collision Detection Be...
🐶 Project 6: Triggered event based animations • Audio Visual Effects i...
🐶 Project 7: Raven game • JavaScript Shooter Gam...
🐶 Project 8: Enemy types • How To Code Creatures ...
🐶 Project 9: State Management ** this video **
🐶 Project 10: Easy Side-Scroller Game • JavaScript Side Scroll...
🎮 More HTML5 canvas and JavaScript game tutorials:
• Game Development with ...
BEGINNER creative coding playlist with HTML, CSS & JavaScript:
• Front End Web Developm...
ADVANCED creative coding project tutorials with vanilla JavaScript & HTML5 canvas:
• Creative Coding with V...
Let's be friends
👍 You can message me on TWITTER / code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (TH-cam audio library) Vacay In Fiji Riddim - Konrad OldMoney
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
![หมานแต่ผัวเขา - แสตมป์ โตเกียวมิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/m0g1TSBJPgo/mqdefault.jpg)
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
Happy 2022 everyone 💪❤ What project will you build next year?
Next year, is gonna be awesome, planning on taking my game development skills to the next level by adding backend features like PHP,SQL
i gona try, to not cry to much when i code
@@adedoyinemmanuel7802 Great to hear Ade, I also want to do some backend this year
@@perromacana Why do you cry when you code :D
@@Frankslaboratory that's gonna be awesome, I also wish to learn how to use tilemaps, in game dev, I have been trying to wrap my head around it for the past days now
Finally, an explanation of modules that actually made sense. I feel like a lot of people teaching online forget they are talking to beginners and explain things in ways that leave me more questions, and sometimes the concept can be extremely simple like this but they just can't really convey that. Thanks so much for actually taking the time to really break down some of the simple concepts other educators often take for granted. I leave your videos feeling I have a better understanding, whereas so many others honestly just leave me with more questions than I went in with.
Going to start game dev this year... and it's because of you... Thanks Frank
Can' wait to follow this when I have the time for it. Really like the advanced tutorials with cleaner code structures
I’m just starting getting into js game programing and this video is a godsend. Thank you Frank!
Happy new year 2022 ❤❤!! Again an amazing video . I learned module, export/import and the way you handled the player states is awesome!
Happy new year Tshitolo, and thank you for giving me such a nice feedback
Very, very cool video, Frank...I appreciate this. Thank you for the clear descriptions!
Great video, you deserve much more views, considering how much effort u put in you video, all this animations to keep viewers understand with examples...
Happy new year Frank!! glad to see an explanation about modules and arrow functions
Hi Eternam, happy new year! I'm trying to slowly include more ES6 syntax :D
Happy New Year Frank, I hope 2022 brings you great joy, happiness and a lot more coding fun. Thanks for this great tutorial to start off the year of the tiger with.
Hi Pierson, good to see you here again, I wish you a lot of success in 2022 💪❤
I was waiting for this , thanks a lot you are the best keep up the good work
I'm here to help, happy new year :)
Wow, what an excellent presentation. I don’t use JavaScript (by choice) and found this by accident, but the quality narration kept me hanging on. Thanks for explaining what you are doing, and why in a way most videos don’t. 😊
This is what I like frank, keep up the good work buddy 🔥
Thanks Mohamud
I am in love with your game devlopment playlist.
Glad you found some value! :)
Happy new year frank and to all fellow viewers!! 🥰 by the way hey frank... I have felt that this was very informative session for me because before this video was out I was using that so called "spaghetti code" But now that you have showed such a good way for switching animation states I will use that and also I am very thankful to you..... Because you have shared such a good knowledge.
Hi Henil, happy new year :D Sometimes spaghetti code version is ok, for example if you have only 2 or 3 player states, it might be the better solution, but when you are building a bigger projects, state management becomes necessary
Nice video! I learned a lot after watching 👌👌
Thank you!
I'm beginning to study js because my class project doing game with js. This clip good explain and teach me a lot. thanks you so much
Every time I watch an old video I learn something new.
This is probably the most complicated video on my channel. I woul use similar logic to give a game multiple levels
You make excellent relevant tutorials, I love it
thank you 🎆🎇
Very detail, very useful, very clear
This is my favourite feedback, thank you
Amazing!!! 😊 keep up the great work!
Thank you for your support
Great stuff! Finally using modules too hehe!
Yea, I was avoiding them because I have to explain how to install live server every time I use modules :D
Amazing tutorial as you always do
Thanks Alex!
Great video! Happy new year!
Happy new year Jakub
Happy new year! thank you
Happy new year Aldwin 🐳
It’s so awesome!
Great one frank, I love you videos ✌
Hi Ade, thank you :)
Thank your for your job! It is a great video tutorial!
Hi Roman, thank you for this feedback, much appreciated
Awesome stuff!
Thank you ! :)
Hello Frank you can use the word DEFER inside the javascript tag. It will wait for the DOM to complete loading before executing the script.
the list of tutorials was very usefull
glad to hear that :)
Happy new year Frank 🎉🥳🎊
May God help you achieve all you want in life 🙂🙂
Happy new year, thank you :)
thanks
i don't understand yet but i can get the concepts this help a lot
Hi Derick, design patterns are an advanced topic, it takes time you will get there eventually
Great video, when will you record the bonus episode what you mentioned about using multiple keys simultaneously, thanks.
Hi Jakub. I will do multiple keys technique in the video that comes out next. Its simple
Wow. this helped alot!! keep it coming frank. Loved the way you are going to teach design pattern using games. quality content bro!!!!
Hi, thank you for your feedback, nice to hear someone found my tutorial useful :)
State Machines are a complex concept and pattern, Frank your implementation of state management in the game example really helped me understand State Machines a little bit more, thanks.
Glad you found it useful, state design pattern implemented in this way looks complex at first, but when you use it for a couple of projects it will become much easier and you should be able to write a custom one for other projects as well. I will use it again for a different game soon managing menus and play/pause/restart
Hello , can anyone show , how to use the bind function in-place of arrow function at 21.00 thank you.
I really like your tutorial, keep it up. Please can you do a tutorial on a 3d car racing video game with javascript?
I want to look into racing games, thanks for the tip Bill
Implementing the concept of a StateMachine was very interesting to watch. But codewise it wasn't easily readable and thus confusing (like the overuse of the word state in many versions). I had to rename it all to my understanding.
Hi, this is an advanced concept and it is a good idea to write it in your own way. I need to get better with choosing my variable names, noted
Great work thank you !! is there a place where i can find the source code ?
Hi Frank, Happy 2022. Any plans for BFS algorithm? It would be awesome to look your approach to it.
Hi Alex, I would probably use breadth-first search algorithm for a project, rather than to make a special video about it. I will put it on my list and will try to include it in something
Hey. Thank you for this great work.
I am getting an error while implementing the state.js and I don't know if I made a mistake. So can your share the code with us please in github or somewhere?
Can you do a Kaliedoscope effect tutorial
Happy new year 💕 in advance 🎉 sir 😊
Happy new year Nilesh
im having a blast with that channel, do u have any discord or community to learn with ? im new to code and any help and source its valuable ^^ thanks
Hi, glad you found so value, no discord so far, might do it eventually
Superb tutorial, many thanks!
I love that guy 😍
😊🙏
why on the super you did put standing left, but in the input you check for press right!!? and also the class is standing left, why you check for right!
Hi, can you give me a timestamp for this? I will check. I just released an updated version for this technique. Will use the state pattern again for a new game tutorial I'm working on right now.
Do you have a link where I can support you with a donation?
You are unique!
Thank you Rahul :)
@@Frankslaboratory Actually I have watched almost all your content and they all are unique and inspiring Artworks! Canvas seems to be a great tool!
Wow. That's a lot of videos Rahul. You are dedicated to learning. Great job. Thank you for your kind feedback ❤
42:30 let's not over complicat things.....indeed!
Hi Aidan, not sure if you are agreeing with me of being sarcastic, this code can be challenging for beginners :)
@@Frankslaboratory Yes, it seems like an understatement! The code is complicated, but doable with a bit of practice!
@@aidanbenbow6682 It's a design pattern, I know it's hard to follow how the values travel around, but it does have a solid logic and once you create a mental image it becomes simple. I would like to use this pattern more often but I think it's too complex for beginner coders
Hi Frank, can u just show me the source code of this video? I just can't found it on your codepen. Thank u!
when I click right or left quickly, the animate will block for a while and I don't know why.
What is the name of the game
can you make a platformer game
Yes I will make a platformer
game effects，this is what i expected，but not included in this video
You mean the fireball and dust trails? I will use those when I show how to build a full game, this video was focused on state management
Data structures visualization
Yup :D
Awesome as always Frank, but the music in the first few minutes is killing my focus.
Hi Viktor. Thank you for letting me know. I will keep the music down next time I'm explaining something that requires focus
@@Frankslaboratory Thank you! Your editing style seems to have changed and I overall like it because I think it might help your channel grow. So with adjusted volume it'll be great.
imagine someone new to html5 trying to debug their images not showing because of img{ display: none; }
I take your point, I should have given that image id not apply it to generic img tag
@@Frankslaboratory Class, not ID. In case you'll need to add more sprites.
Github?
Why do you do this strange thing with export-import when you can just load all needed js using tag? What's the point?
Also now I understand why people started shitting on over-OOP and praising functional programming last years. It's ridiculously complicated for no reason.
The point was to get used to more modern syntax. You can't use a script tag with React in the same way. Also modular code is easier to navigate in. There is no right and wrong approach here. Up to everyone's preference. You can't always replace functional and object oriented programming to make the code cleaner. If you refactor this code into functional codebase you will find out why. Be more specific about the details if you want to discuss things like this.
Also this is probably the most complicated codebase on my channel so don't worry if you struggle to follow. I should have made it more clear in the beginning that this is advanced.
@@Frankslaboratory I'm not an OOP hater, don't get me wrong. I just think in this particular case it's possible to reduce amount of classes and it would make code more clear.
And thanks for replying, didn't know about React (I don't use frameworks).
I need to do this kind of stuff without server, don't always have internet, So I can't use server relient bs, why is every tutorial on the internet all based around stuff you will need internet for, you telling me, everyone always uses internet, even before internet to make games? bro this is bs how tutorial videos always got some side details that are very preventativie if you dont have everything that is in the video. I just want to make characters and sprite sheet, then make the characters do the things I want them to do, and put them in a world I build, not all this server mumbo jumbo, and all this roblox bs, and this stupid unity code spiderweb crap
Then just don't use key words "export" and "import", instead load all js files using tag in HTML file.
@@1kvolt1978 Thanks, thats a lil helpful. I am still trying to learn coding. All I really know how to do is style, and put together webpages. It is hard for me to understand concepts without them being explained in a way they can actually be used.
Right now, everything I learn code from, shows me how to code something like:
Log both apples, and trees.
const apples = 3
const trees = 1
Then your supposed to put console.log() 2 times after they never even asked you to do something like that before. This is a lot more than I knew when I originally left my comment. But holy fkn sht this is a load of useless horse shit in my mind. I need to look at information that actually does things
Once you have downloaded the plugin, "Live Server" the add on does not require an internet connection. It "Acts" as a server would, so that you can test and develop on your localhost:. "Local host" as in your 'local' machine, no internet required.
Happy new year 2022 ❤❤!! Again an amazing video . I learned module, export/import and the way you handled the player states is awesome!