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.
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.
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! :)
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...
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.
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!
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.
Год назад
great stuff... i just click through it fast... but i will find time to see full video
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.
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
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?
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)
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
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.
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
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?
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!
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.
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.
![Build a Game with JavaScript and HTML Canvas [RPG Kit series]](/img/logo.svg){kind=logo}
