Uploaded December 2021 | Updated September 2026, 1 week ago
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/downloads/dog_left_right_white.png
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 youtu.be/CY0HE277IBM
🐶 Project 2: Parallax backgrounds youtu.be/Mg7ibYWhjPI
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: Raven game youtu.be/gCa0z4B-CRo
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management *** this video ***
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA
🎮 More HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
BEGINNER creative coding playlist with HTML, CSS & JavaScript:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
ADVANCED creative coding project tutorials with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube 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
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/downloads/dog_left_right_white.png
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 youtu.be/CY0HE277IBM
🐶 Project 2: Parallax backgrounds youtu.be/Mg7ibYWhjPI
🐶 Project 3: NPC movement youtu.be/pyhb8Y9qKUI
🐶 Project 4: Rectangle collision youtu.be/r0sy-Cr6WHY
🐶 Project 5: Circle collision youtu.be/rtBCVe3j_24
🐶 Project 6: Triggered event based animations youtu.be/Eg_zUEy_lDE
🐶 Project 7: Raven game youtu.be/gCa0z4B-CRo
🐶 Project 8: Enemy types youtu.be/aEDADLtLEbk
🐶 Project 9: State Management *** this video ***
🐶 Project 10: Easy Side-Scroller Game youtu.be/7JtLHJbm0kA
🎮 More HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
BEGINNER creative coding playlist with HTML, CSS & JavaScript:
youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
ADVANCED creative coding project tutorials with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube 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
![CSS Filters - SVG Turbulence Filter Animation [ CSS3 Creative Menu Hover Effects ] Squigglevision](https://i.ytimg.com/vi/lisZT8JIeKk/mqdefault.jpg "CSS Filters - SVG Turbulence Filter Animation [ CSS3 Creative Menu Hover Effects ] Squigglevision
Lets take a look at CSS filters, specifically SVG turbulence animation (and displacement map) which apply perlin noise effect to any HTML element. It can also be applied to HTML canvas so you can try to combine it with any of the canvas effects we created in previous videos. Lets create really cool CSS3 creative menu hover effects also known as Squigglevision.
I have used CSS filters before to create sticky liquid effect. To achieve that we first blur the elements and then we apply strong contrast to make the famous flowing goo effect.
Today I will show you how to rapidly iterate between 5 distortion states using turbulence and displacement map inline SVG filters and how to tweak the effect to create your own variations
There is a patented cartoon animation technique called Squigglevision and we will recreate it with CSS. It was used for shows like Dr Katz and it is a computer animation style, that is supposed to remind viewer of hand drawn animation sketches. It is characteristic by shaking squiggly lines even when the characters are standing still.
Squigglevision cartoon technique is much faster to produce than hand drawn animation, because its made using computer. The shaking lines are done by looping 5 slighly different images over and over.
Relevant links:
https://css-tricks.com/squigglevision-in-css-and-svg/
https://en.wikipedia.org/wiki/Squigglevision
https://en.wikipedia.org/wiki/Perlin_noise
If you want source code to my tutorials I have made some of my videos available on live coding platform Eversparked. You can watch my videos with LIVE browser preview and live code that can be copied and adjusted at any stage. I really like the project idea, I wish I had a tool like that when learning hot to code. Let me know what you think https://bit.ly/2Yxp7ia
You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory
For more creative CSS animation tutorials for beginners as well as advanced HTML & CSS guides, hover animation and transition examples from scratch with pure vanilla CSS, new experimental animations on buttons, menus, forms and other web elements, CSS animation examples, creative ideas for web design, advanced CSS selectors and the best CSS tricks of 2019, check out my CSS3 & HTML5 playlist:
https://www.youtube.com/watch?v=TbI7TFjlDbU&list=PLYElE_rzEw_t2O2DvfopIoq-diTgefVzV
I also have pure vanilla JavaScript animation series, in each tutorial we create all different kinds of interactive animated effects from scratch. No plugins, no libraries, no frameworks. Every line of code is explained to give you hands on experience and teach you as much JavaScript as possible. If you want more creative JavaScript tutorials, HTML canvas animations, interactive animated effects, code alongs, video guides for beginners as well as advanced pure vanilla JavaScript, check out the playlist here:
https://www.youtube.com/watch?v=afdHgwn1XCY&list=PLYElE_rzEw_siuo-kkHh5h7Sk 6IPYNh
If you liked this advanced CSS3 tutorial Im sure you will enjoy other videos on my channel. You can find HTML Canvas Animation Tutorials, JavaScript tutorials, animated effects and step by step animation guides, each video shows many examples of the final effect. I will help you learn modern web development techniques by building real projects you can show off on your personal website or GitHub. Code along with me and gain skills to get your first job in the industry. If I could do it you can do it too. If you decide to code along and modify the effects, share your Codepen/JS Fiddle in the comments, I want to see what you came up with.
My name is Frank, Im a self-taught Front End Web Developer. I learned everything I know in my free time and I used the knowledge to get a great job in web development industry. The part I enjoy the most is building creative animations and interactive effects for the web using HTML, CSS and JavaScript. Thank you for watching my video.
For more creative vanilla JavaScript tutorials, CSS tricks, HTML canvas animations, front end web development and web design guides, subscribe to the channel and click the bell icon to get notified when I release a new animation tutorial.
#css3 #html5 #frankslaboratory
Music:
Business / Corporate by Mixaund | https://mixaund.bandcamp.com
Music promoted by https://www.free-stock-music.com
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, Ill receive a small commision 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!")
