Pokémon JavaScript Game Tutorial with HTML Canvas
1,335,359
2022-03-12に共有
Google Drive Assets - drive.google.com/drive/folders/1cbdyXiO7IlIDgSDul6…
Download Tiled - www.mapeditor.org/download.html
Tiles - cypor.itch.io/12x12-rpg-tileset
Monsters - pixel-boy.itch.io/ninja-adventure-asset-pack
Finished Demo - chriscoursespokemon.netlify.app/
Source Code - github.com/chriscourses/pokemon-style-game
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
コメント (21)
-
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.
-
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
-
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 :)
-
Everything in vanilla JS in such a low amount of time. that's mindblowing
-
Helping you to break YouTube algorithm
-
Amazing! This is the kind of game development tutorial I miss on YouTube! Please keep it up!
-
I miss seeing this kind of dedication. Always go above and beyond the call of duty in your work ethic, an admirable quality.
-
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!
-
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
-
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.
-
Finally, a tutorial that's step-by-step, guided, and uses plain vanilla javascript. Good job!
-
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
-
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!!!
-
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!
-
This is just gold! Thanks a lot! I'd love to see this done on a canvas library also.
-
Can't wait to do this course and learn a bunch! Thanks once again Chris!
-
Really impressive how you did this without massive JS frameworks, nice work!
-
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.
