Pokémon JavaScript Game Tutorial with HTML Canvas
Vložit
- čas přidán 27. 05. 2024
- Get 65 more hours of content from 200 additional lessons only at chriscourses.com/courses
Google Drive Assets - drive.google.com/drive/folder...
Download Tiled - www.mapeditor.org/download.html
Tiles - cypor.itch.io/12x12-rpg-tileset
Monsters - pixel-boy.itch.io/ninja-adven...
Finished Demo - chriscoursespokemon.netlify.app/
Source Code - github.com/chriscourses/pokem...
0:00 Introduction
2:45 Game Map Theory
5:36 Where to Find Free Game Assets
10:12 Download Tiled and Import a Tileset
16:07 Tile Brush, Paint Bucket, and Randomization
21:07 Landmass Formations
31:14 Tile Layering for a Plateau
35:20 Layering and Placement of Trees
38:56 Paths and Landscape Details
52:04 Collisions and Map Boundaries
1:00:33 Foreground Layers
1:04:24 Exporting Layers for Project Import
1:08:12 Programming - Project Setup
1:18:41 Import and Render Map
1:28:52 Player Creation
1:44:27 Move Player Through Map on Keydown
2:10:37 Player-to-Map-Boundary Collisions
3:04:58 Foreground Object Programming
3:10:45 Player Movement Animation
3:25:41 Battle Activation
3:53:23 Transition from Map to Battle Sequence
4:15:04 Draw Battle Background
4:19:28 Add Battle Sprites
4:32:00 Add Attack Bar Interface
4:54:42 Add Health Bar Interface
5:04:29 Attacks - Tackle
5:29:34 Attacks - Fireball
5:56:05 Queueing Dialogue
6:11:51 Populate Attacks Based on Chosen Monster
6:25:36 Randomizing Attacks
6:28:34 Display Attack Type
6:33:13 End Battle
6:39:55 Transition Back to Map
6:58:02 Audio and Sound Effects
Please let me know if any assets are missing from the description, it's hard to QA seven hours worth of video so I definitely could have missed something.
Might be after the fighting game I'm about to do. If not, then will def be the one after the next.
Hi Chris, thank you for offering this, it's an amazing tutorial!
In the Sprite constructor, you've initialized velocity but I don't think it's ever called? Was there a purpose to it?
@@meganoodles3377 Woops! You probably don't need it since it's typically used in games in which objects need to continue moving even after you keyup. In this game you and other objects aren't going to be moving around on their in random directions, so yeah, think I just put it there out of habit 😅
Hi Chris, could you make a video where you make a mobile game with Canvas, it would be really appreciated.
Bro mobile game course
You are the legend. Not every programmer can share their 7 hours to teach other how to create an HTML Canvas+JS game from scratch. Thank you for your efforts
money its a good motivation
Since this is pixel art, you can save a lot of space by instead of scaling up the source image to 400% like shown at 1:25:30, you import the image at the native size of the assets you are using (typically 16x16, 32x32 or 64x64px per tile), and scale it up in code instead. You can use the css function scale(4) (would be 400% like he does in the tutorial), together with the css property image-rendering: "pixelated". This will scale up all pixels without adding any smoothing or anti aliasing. The end result will be the exact same, but with a fraction of the file size, which means way faster loading times for the user :)
Good tutorial! Thanks :)
Thank you!!
gold!
given the context in which he adds the images and that it draws on the canvas, i have no idea how are you scaling up like that. I tried both using css and js .
@@robertapostoiu2272 you could either scale up the whole canvas, or if there are things that you need more precision for, you could just implement a quick upscaling method in JS. Since we want it to be pixelated, there's not need for fancy smoothing algorithms. Instead, just copy the pixel values over. You could even do that in wasm although I think JS should be faster if done right.
Hey I'm trying to implement this but struggling. How do you set the css image-rendering style to pixelated? Do you do that in the style section of the html?
Thanks!
Everything in vanilla JS in such a low amount of time. that's mindblowing
Recently i did some basic game with JS and canvas, this tutorial showed me some good practices that i missed in my game as well as another features that i didnt know how to implement. This is some next level FREE content, im taking your premium content as well as soon as i can, you deserve it. Thanks a lot, new sub here of course!
Amazing! This is the kind of game development tutorial I miss on CZcams! Please keep it up!
Helping you to break CZcams algorithm
༼ つ ◕_◕ ༽つ take my energy YT algo
It recommended me and i will try to do it myself algorith got your energy and brought me to what im exactly looking for :)
Worked for me
It still works.
Don't let the video get too recognized or Nintendo will send their assassins.
I miss seeing this kind of dedication. Always go above and beyond the call of duty in your work ethic, an admirable quality.
Wow this is awesome! As someone who has spent the last 2 years making tutorials for a pokemon game, I'm really impressed by how much you managed to cover in 7 hours.
Athul, I really love your pokemon series you are the best Unity Developer on youtube!!!!
@@stephenhenderson7546 Thanks a lot for the kind words Stephen :)
holy cow! i’m currently going through clear code’s pygame tutorials, but i’d love to follow this one afterwards. videos like this makes me excited to learn new things
Finally, a tutorial that's step-by-step, guided, and uses plain vanilla javascript. Good job!
Hey Chris your channel is like the tool box for my work. Even now after having about a year of experience in javascript programming, whenever I get stuck, I keep on visiting and revisiting your channel in order to get back to the basics and find out what the core problem is. Every video of yours always holds a huge hint leading to the solution of every problem that I encounter. Thank you!!!
A gold mine I found recommended to me! Very formative and helped with a problem I had with tilemaps; it was hard to understand them. I even enjoyed the idea that you're using Javascript and HTML, two code languages I am currently learning. Great video, will watch again!
Thank you for putting my comment into action. The questions I had about these topics have now been finally clarified. Good work chris!
This is exactly what i've been waiting for Chris! you're a legend! Thank you sooo much
Chris I can not begin to tell you much I appreciate your efforts in the many tutorials I have followed by you. For canvas coded game development using javascript you have proven to be one of the best and easiest to follow in your courses on all of the online courses I have seen! Well done!
Just stop blowing my mind bro 🤯. What an impressive project you're delivered to us. Thank you!
chill man...
@@daveking1528 ?
@@daveking1528 ?
@@daveking1528 ?
I have finally completed the whole tutorial. This is an amazing tutorial in general for just learning the whole language. You quite literally have examples of everything my class tried to teach me this semester.
Extra: I cant pay for the premium but because of how well this tutorial was i haved created a brand new map, and can transition to new maps, essentialy all of the code for the new maps is automatic.
Man I need to start talking out loud like you when I program, seems like it would help keep everything organized and me focused. Great video!
Really impressive how you did this without massive JS frameworks, nice work!
I find it easier without JS frameworks. There's no real need to use one when you can do it native - there's not really any need for shortcuts or combined functions when everything is good to go in JS already. :) Now, doing something like gravity and having a smooth movement of something falling, that'd be intensive and probably need a framework, haha. Hmm... something to try...
Some friends and I were talking about this just a few weeks ago! Definitely glad the algorithm blessed me with this amazing support!
This was such a good video, amazing quality, learnt way more than I thought and the end result was astounding. Thank you so much!!!
Thank you for this, it has inspired me to try my own project. I've just become mired in the problem of refactoring an entity component system but it's going well so far.
I am only around a third of the way through but this has been immensely helpful so far! I am following along with a Java parallel of what you are doing, and it is going great. I am working on a D&D-style RPG game, and I think this tutorial will provide a fantastic launching-off point. Thank you!
This is just gold! Thanks a lot!
I'd love to see this done on a canvas library also.
Just finished this video and it was so awesome. I work professionally using JavaScript and TypeScript but this video taught me many new things! Never thought something like this would be doable within vanilla JS. But now I intend to certainly buy your premium course and build this out to a much bigger application now that I have the building blocks. Thanks for this!
Thanks Joshua, appreciate that. Been working hard on getting more premium content out for the Pokemon course, should have at least two new lessons out this week 🙌
OMG!! I'm 8 minutes into this video and I'm already calling you my FAVORITE! CZcamsr! I been trying to find someone that builds javascript games from scratch that can exactly teach and show from beginning such as finding assets and breakdown the logic of a game!!! I am beyond geeked for this tutorial!!! Thank you sooo much for creating your youtube channel and giving back!! I'm going to learn so much and it'll be from an amazing instructor!! 😁🙌🏽
@@robbertnelissen3365 Oh cool what is it?
Nice tutorial, I work with JS about 6 years and never had worked with Canvas, this tutorial encouraged me to create a game
this tutorial is insane!
so glad you found the bug where you subtracted your own health on attack. it was bugging me for hours :D
what I'd be really happy to see is some refactoring using modules with imports instead of loading each script into the site individually. also the battle start animation and the battle dialog box to be elements inside of the canvas instead of html elements. also, you mentioned the DRY principle but have a lot of duplicate code. that'd be also really cool, if you could make this as clean as possible. I'm sure it will help a lot of people that have copy-pasta code and need/want to refactor but don't know how or where to start
Can't wait to do this course and learn a bunch! Thanks once again Chris!
This is an amazing tutorial on building a game using just HTML, CSS and JS! I've expanded on it quite a bit in order to add it to my portfolio and through that process have learned about scope creep 😅
Thanks dude!
I would never be able to make this by myself, but you make it seem so easy! I am so far 6 hours in, the tutorial is very easy to follow, new subscriber here!
Never say never. Coding is something everyone can do. It just takes time to learn. Luckily today we have so many tools that tell us when we mess things up. The moment you start scaling up any of your projects though, I highly recommend leaving pure Javascript behind and going to write in a framework like VueJS, AngularJS or using Typescript.
Impressive 🤯 thanks for sharing this man 👏🏻✌🏻
I'm a backend PHP Laravel developer but god damn this is very impressive. Using straight up vanilla JS to complete this is honestly incredible. This is real development right here. Props to you.
Love what I see of the content so far. I wish there was more than character dialogue in your premium section! I really need to learn how to save game states .. and leveling up etc would be very nice.
absolutely outstanding tutorial !! thank you Chris so much ❤
Massive insights in game development (for a beginner) Thank you ❤️🔥🙃
May you get many subscribers and continue with this incredible professionalism.Congratulation.
wow you covering game editing in the first 10 minutes is so cool!
I'm 45 minutes in and already so much has happened. My son asked me how to make video games so we've started with scratch Jr and I've been looking for other ways. I started learning code and then this came up. Such a cool video. I can't wait to see what all else happens in another measley 45 minutes.
You finish your game already?
Best training ever. Covering all the details. Well done sir.
Fully dedication. Congrats, you deserve all success of the world
Im gonna use this to help me with my learning process, thank you :)
The explanations are so detailed thanks for the video
All in all a fantastic video. It’s a great resource to understand classes. 😀 - I‘d use the listener for the keyboard keys to start the map music and I’d add the arrow keys. I‘m so inspired. Thx for mich for this video marathon.
Absolute legend for making this video mate, thumbs up and subbed
Man, you are owning it! Really Inspiring!
Bro you are awesome, keep doing these tutorials
Thanks Chris! Very Beginner Friendly Tutorial!!! 💖💖💖💖
This is so sick. Hope to be able to create this one day
Just ended, thanks for this video, I learned a lot and think its the funniest think that i made while learning coding!
Wow you are amazing! Thanks for the educational content!
Dude, you dont know how u gonna help me with this!! I'll try to do my own game based in pokemon as a project to my porfolio 😄
Just discovered your channel. Man, awesome vids bro. I’m definitely checking out your site.
this channel is awesome, he is great at teaching and it makes sense.
I just started learning Java about a month ago and I obviously can’t make this yet ( I hope I can one day ) but it’s so impressive what you’re doing I immediately subscribed
I'm following the tutorial and sometimes I pause and play around with it or try something different from you. Currently I'm at 2:10:00 where you're describing how holding down two keys at once won't register both buttons. I noticed mine does register both buttons, and it's because I accidently wrote "if" instead of "else if" for the key.pressed statements. This also allows diagonal movement, so maybe this is a design alternative some people might like to implement.
people like you who share such insights and findings are 💎s
💙💫
This is the type of person that deserves to have kids. Sharing knowledge should feel good.
a 7 hour video? the absolute madman!
Thanks Chris! Liked and subscribed!
Thats is, really ! The best tutorial I ever saw on CZcams... Complete amazing and helpfull... Good Job !!! Awesome
While I'm not trying to make this specifically, your courses on the platforming game, the fighting game, and this game are helping me to design something of my own as I learn JavaScript. Amazing explanations for how conditionals relate to each other make it very easy to understand. 10/10
Wow that's amazing, perfect, thank you so much for the class.
Just in case this stupid mistake happens to anyone else - if you are at 2:33:35 and you are wondering how the log reads out 185 Boundaries and not 26 - when you copy your Collisions from the JSON file into your collisions.js, you need to copy the data ABOVE the little property text, not the data below it. A few seconds of inattentiveness - an hour of going mad trying to find my error.
Chris!!! I finally finished! Thanks so much for getting me back into coding! This was a great way for me to get back into it. I can't wait to start the follow up video to add more feature to the game!
You're the man!
Spectacular tutorial that is both useful for people on an introductory skill level and for programmers those on a more experienced skill level who are first time looking into this kind of projects. Although the frequent refactoring slowed me down and held me from straying too far from coding exactly like in the video, I think this method added a lot of insight for people who are new to coding.
One thing that pained me was the copy pasting of code when refactoring in separate functions would have made the code a lot cleaner and easier to scale (eg, 3:37:52. This really isn't best practice!)
Awesome! Thanks for this really interesting tutorial)
7 hours! Chris, are you kidding me? You are Legend!
goosebumps !! very thanks for sharing
i love you so much, your the best person ever.
I feel so happy to be allowed to watch these video and learn this thing for free
This was really helpful! Instant subscribe!
i always wanted to make my own ‘monverse , u are an inspiration!
HOLY 7 hours video man!
This is a masterpiece. You are a genius, keep up the good work!
Liked and subscribed! Thanks Chris!
Holy shit this is such a sick project. Love the content
You explain it so well. Thank you
This video is amazing! Thank you so much!
Super awesome, thank you soo much!
omg! awesome, im learning java script and this... is unbelievable
i would love to see a video of you working in unreal engin, you are so structured. fantasic work man
Thank you for this great video! I learned so much! 😘
Most awesome game tutorial, that i see
Dude, this is incredible!!
Holy crap! I had no idea there was a mistake in the asset pack. went ahead and fixed it, the corrected version should be up on itch.io, hope you don't mind :P
No problem at all, your artwork is incredible, thanks so much for letting me and others use it, hope I can get you some donations along the way.
Thanks for the great artwork.
Thanks! I will try to make it with a friend. Thank u again for your impressive work, it seems rlly amazing! saludos desde Argentina
I'm just here to tell you this: you're an inspiration for us.
Amazing stuff, thank you!
Incredible Chris 👨💻
Man, i have this idea 2 months ago.
I am Js developer, but i don't believe so much in js to make videogames so i was planning to learn C# and make my videogame on Unity.
But with your tutorial, it looks so amazing.
This was absolutely amazing content. Thank you!
I imagine if you wanted to build this into a full game, you would not continue to build everything in one file. It would be really interesting to see how you would scale this to something that is much bigger than what you could have loaded all at once. What the back end of such a system might look like.
I'd imagine that the movement and boundary detection would be the main file running.
And as you change cities or routes the images, boundaries, and battle zone data set in the file changes. (maybe the rates for which pokemon appears too)
@@NawtyP0T4T0 if it works anything like my experience in Unity, you'd have your primary "Game" script running, which would import the player class, movement, denote update rates etc. You'd have the script import classes and objects as necessary.
So.. for example, instead of drawing your map, you'd have "zone" as a parameter of your game class which updates while the player travels and and adjusts zone specific properties, like.. tile set, encounter rate etc
UAU!!!!!!Exciting !! I'm going to put it into practicce....
I think its better to move the player around the world and translate the canvas based on where the player is. Then you don't have to worry about moving seperate collision bounds and map bounds. But overall what you've done is amazing! Im glad to see a top down game tutorial!
Second this. Also with tile based movement collision would be much simpler to implement and better performance as you would just have to check if the cell you want to move onto has a collider or not instead of checking every collider from every side.
I think even with free movement you would be able to reduce the amount of colliders to check to 4 - 8 by calculating the position of the tile your character stands on in the grid based on the player position on the map and then only check the if the tiles around the players have colliders and then only check those instead of every collider on the map.
@@techjunky9863 Moving every singly object around the player would be way more work just by itself. It also depends on scalability - ive created high performant 2d multiplayer games and studied how other games are made (such as in the io game category), and this is how they all do it.
Tbh I was about to stop watching the video when I realized that he is actually gonna take that root. Gave me too many "noob" vibes.
I'm very happy if you make this kind of courses in react.js！！
This. Is. Insane. Thank you for sharing. 😦
really high quality content
man i've been thinking about getting into coding again for so long!!
Finally something interesting in the recommendations
Thank you so much really helps a lot
What the!? Chris, You're too awesome!
Amazing work 👍🏽