Very refreshing in the midst of game engine search "fatigue" it's nice to be reminded again that we can just code a game from the ground up with the basics.
If you've been following the code for 15 minutes or so of this video and still can't get the csss and resource images, please try running 'npm run dev' on the terminal. I'm new to Vite just for the purpose of following this tutorial, and I'm not used to dealing with npm. So for almost an hour I've been puzzled by why my code isn't working. Hope this helped!
I think you should add a note the when you define mainLoop you should state that you are using an ES 6 arrow function. it avoids some stupid error you get about this.isRunning being undefined after the game loop starts. it has to do with the context of this within mainLoop.
This series is brutal! I have been coding it already along for a couple of days already since I am on his platform and the support works pretty well! Thanks Drew for everything you do! P.S. Would love to see how you handle responsiveness! :)
Excellent. Very clever. I recommend when you get to the end of a section, watch back again all the things done in that section and they now make sense. Pro tip! Either that or I've got amnesia.
He is using vscode as the code editor, which is very powerful and easy to use. Phaser is a javascript framework for making games easier and provides its own game engine - on this video, he doesn't use any framework, we are creating the "engine" ourself, i.e., if you use phaser they would already had made the classes and functions for gameloop, sprites, etc, you would just have to learn their documentation. This is plain javascript.
Looking forward to this! Please please continue till the end. There are so many JS game tutorials but they only show the simplest things only. Talk about performance, optimization and refactoring. Show more detailed stuff. Having the same fps on different OSs or browsers are very difficult for example. There are so many tutorials that teach how to make but it's like making a to-do app. They don't teach the other needed parts. Mention about best practices and community standards. Tell us about tips and tricks. Teach us how to integrate inside a frontend framework because most of us use Vue or Svelte or React. Thanks a lot. Keep up!
Great content as always Drew! I'll start asap the course. For whoever like this kind of videos, I strongly recommend to buy Drew's courses, you'll see how great games can be done without Unity. I wish you to add content about quests, that kind of patterns are my nemesis...
if i want to incorporate this into a simple react project, instead of a vanilla js one, does any of this code need to be altered? I'm just getting into react and want to incorporate some of this.
This particular series only uses 1 canvas tag in the DOM, so there is not much for React to take over here. (But you could just keep this and draw React powered UI on top of it)
Hiii! I was super exciting to start this proyect but :( I already get this Error main.js:12 Uncaught TypeError: Cannot read properties of null (reading 'drawImage') 😢 I'm crying
Do you know how to make all the parts of a game? I just want to make a game using my art. I want to make the little loading screen, and I want to make the menus, and ways to load the game, save the game, options etc. Then I want to make all the things for the game using pictures I make. The game specifically that I want to make has some character types you can choose, and I want to make mechanics like if you attack enemies, each attack goes into a counter, and when you have hit enemies a certain amount of times, your melee level goes up. And when it goes up, your attack amount increases by 0.1. Then the entire melee amount maxes out at 50 damage, and when you max out the level at 50, you can restart it's level keeping the amount of attack damage you gained from the first time you maxed it out at level 50. And also increase the number that your damage will go up from 0.1 to 0.2, while also increasing the amount of hits you need from lets say 10, to 20 for your level 3 level up criteria. Then once you have your max melee damage to 50, all the extra attack damage you gain goes to your charged attack, attack damage. So basically, once you max out the scaling, you infinitely scale each stat in the game. Another example is the hp system I want to design. So you use health potions to put them in your armor, instead of drinking them. And this raises your amount of hp in that armor, and when you combine armor, the health does not change, but the defense amounts do, and what you do to regain health is transforming, if you take damage, using your transformation will automatically heal you for 1 hp a second which will scale with how much you use your transformations independently by the amount of time you stay in it. so a minute will get your first transformation to level2, 2 minutes 3, 4 minutes 4, 8 minutes 5. And this system will depend on your amounts of mana for how long it can last since it will burn through it all every second. So your health bar has it's own max just like the melee system, but you need to eat food to gain more, until it is at it's max for your character type's base form, then in each transformation the character type has, the max amount raises, until you are in your god form. Then the heal potions you put in your armor that make your health exceed the final form's amount will make your health exceed the cap and continually scale as you add more and more health potions to your armor. So I was wondering if you understand how to design things like this, and if you could maybe explain what concepts I would need to understand in JavaScript, CSS and html to design these kinds of mechanics. I do not have money to pay you but I have time, and I want to learn how to design these sorts of systems. I also want to make things like stances you can alter from pressing 1 of 4 different buttons, juggling, different jumping inputs, so lets say you press the button you jump with, and it gives a normal jump, then you jump twice for a double jump. But if you go to your mobility stance, you can now fly depending on the character class type, you can use super speed, or teleport. But you need to be in your mobility stance so that your special button will activate mobility skills. but for flight specifically, you can just hold down the jump button. or for teleporting, you can hold down the jump button to teleport directly above you. then you can press and hold the jump button, and press a direction to do cartwheels, but only on your first and second jump, not third or more jumps, and also while you are descending, after running out of jumps. so the game can have an acrobatic feel, even a barrel roll type of feel for characters that fly without wings, and its just powers. But these are systems I want to design for my 2d game. And I do not really understand what I need to know to build these kinds of things specifically. It would be really helpful if you could maybe explain some of the concepts I would need to know to learn these things? Because using your acrobatics to dodge abilities, flying more often, etc, these are all things that could rank up these stances. It would be really cool if players realize it works this way, and they just start getting in fights with enemies so they can dodge attaks for fun, and free roam run through combat areas dodging, just to max out their mobility skills, tons of different stuff that I want to learn how to make.
Great video! Say, I came across this framework, ImpactJS. And it has an enhanced version, Impact++ (impactplusplus). Do you think this is worth using or vanilla js will do?
I have a question - is ther a way to create additional animation frames between those from sprite or do I have to draw every frame for animation? For example can I use somehow jQuerry to produce additional frames in walking animation to make smooth transition between every step etc.
on 41:27 "run the drawing function as fast as the browser wants to"... what is the benefit of this, rather than drawing only after updating? If there has been no update, wouldn't the browser just be unnecessarily drawing the exact same scene again?
I think you're correct in a way, but it's not like the redrawing of the same scene state is a performance issue or whatever. Although, I must admit that when I switched to `first update, then draw` approach things have become a tiny bit smoother, so idk. Also, the loop fn is called depending on your monitor mhz. For me it's 1000/60 because my monitor is 60mhz, for yours it might be different.
Says vite setup is optional, but I keep getting MIME error if I dont use it. Would like to host it without using vite, any ideas what i might be doing incorrect?
That's a cool idea! This is all about learning to a use a Canvas tag (as a potential implementation option) so React doesn't have much to do here... BUT, you could totally layer React UI on top of this canvas implementation.
@@DrewConley yeah I’m thinking this too, just what I’m currently working with at work and trying to get as much practice as possible, it’s web dev but I also like making little games haha. Also I used a bunch of switch statements for input but I know it’s not exactly explicit when teaching people
Sometime, maybe! I actually started this one as TypeScript but ended up simplifying it. It's hit or miss with me on solo projects, but I love it for big teams. I could maybe convert this one to TypeScript sometime
Hi,@@DrewConley, I have been trying to make it TypeScript all along. Hope will help you both or anybody: drive.google.com/file/d/1zhgVyvUSWC1rIgyESz1jPa_D1Wt9fIPq/view?usp=sharing
I was thinking about how I would adapt this to handle mouse clicks. I can't really see a way of handling this other than creating a "clickable" set of objects and interesting over the set with a second input based on the mouse.
Hi, great work, I'm a subscriber to your course website, you did a good job, I would like to see some Roguelike game tutorials, learn about fog effects, movement and shooting and any direction!
![[Live] ศึกมหึมันส์มวยไทยสังเวียนเดือด เวทีมวยชั่วคราวสวนสยาม | จันทร์ 30 กันยายน 2567](http://i.ytimg.com/vi/pM1k6f7JXUc/mqdefault.jpg)
Very refreshing in the midst of game engine search "fatigue" it's nice to be reminded again that we can just code a game from the ground up with the basics.
As a quick tip, try to think of your own solution to a given problem, before proceeding and watching the tutorial section.
If you've been following the code for 15 minutes or so of this video and still can't get the csss and resource images, please try running 'npm run dev' on the terminal. I'm new to Vite just for the purpose of following this tutorial, and I'm not used to dealing with npm. So for almost an hour I've been puzzled by why my code isn't working. Hope this helped!
Drew, used this video to inspire, many thanks
I see Drew upload a new “how to make a game engine from scratch using web code” video, I like it by default.
I just downloaded the demo and visiting index.html gives a bunch of 404s not found in the console.
How to run the demo?
Having literally only a background on web dev and not much on game dev (despite wanting to be a game dev. Life ain't fair) this helps me a lot
Had an issue with the animation patterns not being show filled into the Hero animations. Was pulling my hair out a bit.
🤣 Me too!!!
I think you should add a note the when you define mainLoop you should state that you are using an ES 6 arrow function. it avoids some stupid error you get about this.isRunning being undefined after the game loop starts. it has to do with the context of this within mainLoop.
This series is brutal! I have been coding it already along for a couple of days already since I am on his platform and the support works pretty well! Thanks Drew for everything you do!
P.S. Would love to see how you handle responsiveness! :)
Excellent. Very clever. I recommend when you get to the end of a section, watch back again all the things done in that section and they now make sense. Pro tip! Either that or I've got amnesia.
What program/system did you use? I know you used js but was it vs code, phaser or...
He is using vscode as the code editor, which is very powerful and easy to use. Phaser is a javascript framework for making games easier and provides its own game engine - on this video, he doesn't use any framework, we are creating the "engine" ourself, i.e., if you use phaser they would already had made the classes and functions for gameloop, sprites, etc, you would just have to learn their documentation. This is plain javascript.
already stuck on the 5 minute mark, the background wont turn blue and I've used the starting code and copied everything you did
I really wanted to continue this series, but sign ups for website are offline and I can't even join the waitlist. 😞
You can't do it without Vite, you will get cors errors because you are trying to import a module yadda yadda.
Looking forward to this!
Please please continue till the end. There are so many JS game tutorials but they only show the simplest things only.
Talk about performance, optimization and refactoring. Show more detailed stuff.
Having the same fps on different OSs or browsers are very difficult for example.
There are so many tutorials that teach how to make but it's like making a to-do app. They don't teach the other needed parts.
Mention about best practices and community standards. Tell us about tips and tricks. Teach us how to integrate inside a frontend framework because most of us use Vue or Svelte or React.
Thanks a lot. Keep up!
For your game loop, it would have been so much easier to use an rxjs timer, no?
Great content as always Drew! I'll start asap the course. For whoever like this kind of videos, I strongly recommend to buy Drew's courses, you'll see how great games can be done without Unity. I wish you to add content about quests, that kind of patterns are my nemesis...
Can't wait to work my way through this, thanks for your work Drew
if i want to incorporate this into a simple react project, instead of a vanilla js one, does any of this code need to be altered? I'm just getting into react and want to incorporate some of this.
This particular series only uses 1 canvas tag in the DOM, so there is not much for React to take over here. (But you could just keep this and draw React powered UI on top of it)
Hiii! I was super exciting to start this proyect but :( I already get this Error main.js:12 Uncaught TypeError: Cannot read properties of null (reading 'drawImage') 😢 I'm crying
Do you know how to make all the parts of a game?
I just want to make a game using my art. I want to make the little loading screen, and I want to make the menus, and ways to load the game, save the game, options etc. Then I want to make all the things for the game using pictures I make. The game specifically that I want to make has some character types you can choose, and I want to make mechanics like if you attack enemies, each attack goes into a counter, and when you have hit enemies a certain amount of times, your melee level goes up. And when it goes up, your attack amount increases by 0.1. Then the entire melee amount maxes out at 50 damage, and when you max out the level at 50, you can restart it's level keeping the amount of attack damage you gained from the first time you maxed it out at level 50. And also increase the number that your damage will go up from 0.1 to 0.2, while also increasing the amount of hits you need from lets say 10, to 20 for your level 3 level up criteria. Then once you have your max melee damage to 50, all the extra attack damage you gain goes to your charged attack, attack damage. So basically, once you max out the scaling, you infinitely scale each stat in the game. Another example is the hp system I want to design. So you use health potions to put them in your armor, instead of drinking them. And this raises your amount of hp in that armor, and when you combine armor, the health does not change, but the defense amounts do, and what you do to regain health is transforming, if you take damage, using your transformation will automatically heal you for 1 hp a second which will scale with how much you use your transformations independently by the amount of time you stay in it. so a minute will get your first transformation to level2, 2 minutes 3, 4 minutes 4, 8 minutes 5. And this system will depend on your amounts of mana for how long it can last since it will burn through it all every second. So your health bar has it's own max just like the melee system, but you need to eat food to gain more, until it is at it's max for your character type's base form, then in each transformation the character type has, the max amount raises, until you are in your god form. Then the heal potions you put in your armor that make your health exceed the final form's amount will make your health exceed the cap and continually scale as you add more and more health potions to your armor.
So I was wondering if you understand how to design things like this, and if you could maybe explain what concepts I would need to understand in JavaScript, CSS and html to design these kinds of mechanics. I do not have money to pay you but I have time, and I want to learn how to design these sorts of systems.
I also want to make things like stances you can alter from pressing 1 of 4 different buttons, juggling, different jumping inputs, so lets say you press the button you jump with, and it gives a normal jump, then you jump twice for a double jump. But if you go to your mobility stance, you can now fly depending on the character class type, you can use super speed, or teleport. But you need to be in your mobility stance so that your special button will activate mobility skills. but for flight specifically, you can just hold down the jump button. or for teleporting, you can hold down the jump button to teleport directly above you. then you can press and hold the jump button, and press a direction to do cartwheels, but only on your first and second jump, not third or more jumps, and also while you are descending, after running out of jumps. so the game can have an acrobatic feel, even a barrel roll type of feel for characters that fly without wings, and its just powers. But these are systems I want to design for my 2d game. And I do not really understand what I need to know to build these kinds of things specifically. It would be really helpful if you could maybe explain some of the concepts I would need to know to learn these things? Because using your acrobatics to dodge abilities, flying more often, etc, these are all things that could rank up these stances. It would be really cool if players realize it works this way, and they just start getting in fights with enemies so they can dodge attaks for fun, and free roam run through combat areas dodging, just to max out their mobility skills, tons of different stuff that I want to learn how to make.
Great video! Say, I came across this framework, ImpactJS. And it has an enhanced version, Impact++ (impactplusplus). Do you think this is worth using or vanilla js will do?
This is very cool. Looking forward to getting stuck into it!
Eu queria fazer um jogo desses. Porém, gostaria de fazer para celular, mas html não serve para tal. O que eu poderia fazer??
C# e Unity
Please teach canvas with a webgl fallback too. It's very important these days. Also maybe webgpu too?
I have a question - is ther a way to create additional animation frames between those from sprite or do I have to draw every frame for animation? For example can I use somehow jQuerry to produce additional frames in walking animation to make smooth transition between every step etc.
Fantastic course, thank you very much!
I wonder how would be the best way to create scenes, a way to change the scenario.
Is there a book or a resource to learn more about Excalibur JS? Maybe a discord server? I would love to learn more!
Thanks for the content drew. Do you have any video that shows how to embed a html game into a react project?
Can you do a video on making the direction diagonal? Like movement in 8 directions?
Hi, i wanted to ask if its possible to implement wave function collapse for random world generation
great stuff... i just click through it fast... but i will find time to see full video
why doesn't work on my pc? especially sky and i still have kept only blue background.
same :(
check if your script tag in html have the correct path in the src
I had the same problem and it took a lot for me to find
Hi 👋 Where I can found more spritesheets ??
Now integrate Chatgpt with function calls to operate the npcs
I can vividly see that you are a good programmer
This is a great tutorial, vanilla js can be best js! I'm watching the whole thing right now!
Please do a video with this game and add multiplayer too!
where do get the design? can how some link?
on 41:27 "run the drawing function as fast as the browser wants to"... what is the benefit of this, rather than drawing only after updating? If there has been no update, wouldn't the browser just be unnecessarily drawing the exact same scene again?
I think you're correct in a way, but it's not like the redrawing of the same scene state is a performance issue or whatever. Although, I must admit that when I switched to `first update, then draw` approach things have become a tiny bit smoother, so idk.
Also, the loop fn is called depending on your monitor mhz. For me it's 1000/60 because my monitor is 60mhz, for yours it might be different.
great video!!! thank you very much!!!
mime is my enemy
ya, i watched yesterday right before uploaded in youtube! damn its really practical and great. i just wondered why you didnt say anyting! thx!!!
Glad you enjoyed it! The extended version is available to you on the site, and more videos are being added every couple of days. (only on the site)
Says vite setup is optional, but I keep getting MIME error if I dont use it. Would like to host it without using vite, any ideas what i might be doing incorrect?
same even I got this problem. Did you get any fix yet?
Anybody found out how to do it?
is this possible to follow in dart?
gonna build this for fun, but wish this was in react/typescript and then maybe some nodejs back end for multiplayer, would love that
That's a cool idea! This is all about learning to a use a Canvas tag (as a potential implementation option) so React doesn't have much to do here... BUT, you could totally layer React UI on top of this canvas implementation.
@@DrewConley yeah I’m thinking this too, just what I’m currently working with at work and trying to get as much practice as possible, it’s web dev but I also like making little games haha. Also I used a bunch of switch statements for input but I know it’s not exactly explicit when teaching people
Your content is always excellent! Thank you so much!
lovely video clean and neat
Thanks for the tut!
It seems you forgot to put the sprites asset in the video description.
They are in the Starting Code download. I’ll update to be more clear!
@@DrewConley Thanks a lot :)
are you planning to make a typescript game tutorial? I've looked far and wide but those are really hard to find 😅
Sometime, maybe! I actually started this one as TypeScript but ended up simplifying it. It's hit or miss with me on solo projects, but I love it for big teams. I could maybe convert this one to TypeScript sometime
Hi,@@DrewConley, I have been trying to make it TypeScript all along. Hope will help you both or anybody: drive.google.com/file/d/1zhgVyvUSWC1rIgyESz1jPa_D1Wt9fIPq/view?usp=sharing
What about new levels
its multiplayer ?
Subs❤
Unreal content as always
top
the value you give is surreal
hey, make a turn based game and use "mouse/click", and crafting weapon
I was thinking about how I would adapt this to handle mouse clicks. I can't really see a way of handling this other than creating a "clickable" set of objects and interesting over the set with a second input based on the mouse.
Great stuff man!
what do you need vite for ?
It's optional, technically. I really enjoy how fast and easy it makes the development process.
Hi, great work, I'm a subscriber to your course website, you did a good job, I would like to see some Roguelike game tutorials, learn about fog effects, movement and shooting and any direction!
Added to the list!
so much fun tut!, Thank you for your hard work!!