Pokémon JavaScript Game Tutorial with HTML Canvas

  Рет қаралды 1,348,845

Chris Courses

Chris Courses

Күн бұрын

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

Пікірлер: 552
@ChrisCourses
@ChrisCourses 2 жыл бұрын
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.
@ChrisCourses
@ChrisCourses 2 жыл бұрын
Might be after the fighting game I'm about to do. If not, then will def be the one after the next.
@meganoodles3377
@meganoodles3377 2 жыл бұрын
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?
@ChrisCourses
@ChrisCourses 2 жыл бұрын
@@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 😅
@DopEZTam
@DopEZTam 2 жыл бұрын
Hi Chris, could you make a video where you make a mobile game with Canvas, it would be really appreciated.
@srinivasan000
@srinivasan000 2 жыл бұрын
Bro mobile game course
@FreePhoenix888
@FreePhoenix888 2 жыл бұрын
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
@user-hj8rh2vi6x
@user-hj8rh2vi6x 3 ай бұрын
money its a good motivation
@real_synkas
@real_synkas 2 жыл бұрын
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 :)
@yuzan3607
@yuzan3607 2 жыл бұрын
Thank you!!
@kennethazor
@kennethazor 2 жыл бұрын
gold!
@robertapostoiu2272
@robertapostoiu2272 2 жыл бұрын
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 .
@LuLeBe
@LuLeBe Жыл бұрын
@@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.
@AaronMOliver
@AaronMOliver Жыл бұрын
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!
@desislavivanov2968
@desislavivanov2968 2 жыл бұрын
Everything in vanilla JS in such a low amount of time. that's mindblowing
@joaocesarlima7339
@joaocesarlima7339 2 жыл бұрын
Amazing! This is the kind of game development tutorial I miss on KZfaq! Please keep it up!
@addy8641
@addy8641 Жыл бұрын
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
@cesyrub
@cesyrub 2 жыл бұрын
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!
@bubbleto7277
@bubbleto7277 2 жыл бұрын
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!
@Retrofire-47
@Retrofire-47 Жыл бұрын
I miss seeing this kind of dedication. Always go above and beyond the call of duty in your work ethic, an admirable quality.
@smortemm2438
@smortemm2438 2 жыл бұрын
Finally, a tutorial that's step-by-step, guided, and uses plain vanilla javascript. Good job!
@AdeelKhan-ox1bs
@AdeelKhan-ox1bs 2 жыл бұрын
This is exactly what i've been waiting for Chris! you're a legend! Thank you sooo much
@the_kid777
@the_kid777 2 ай бұрын
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!!!
@lucaslima7759
@lucaslima7759 2 жыл бұрын
Just stop blowing my mind bro 🤯. What an impressive project you're delivered to us. Thank you!
@daveking1528
@daveking1528 2 жыл бұрын
chill man...
@seigisnd3941
@seigisnd3941 2 жыл бұрын
@@daveking1528 ?
@yuyah7413
@yuyah7413 2 жыл бұрын
@@daveking1528 ?
@NathanHedglin
@NathanHedglin Жыл бұрын
​@@daveking1528 ?
@danielwilded-mix8831
@danielwilded-mix8831 2 жыл бұрын
Thank you for putting my comment into action. The questions I had about these topics have now been finally clarified. Good work chris!
@pickyou223
@pickyou223 Жыл бұрын
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.
@GameDevExperiments
@GameDevExperiments 2 жыл бұрын
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.
@stephenhenderson7546
@stephenhenderson7546 2 жыл бұрын
Athul, I really love your pokemon series you are the best Unity Developer on youtube!!!!
@GameDevExperiments
@GameDevExperiments 2 жыл бұрын
@@stephenhenderson7546 Thanks a lot for the kind words Stephen :)
@dalelandry8787
@dalelandry8787 5 ай бұрын
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!
@benstheweatherdog
@benstheweatherdog 2 жыл бұрын
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!
@PhilArmstead
@PhilArmstead Жыл бұрын
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.
@calvinwithun6512
@calvinwithun6512 3 ай бұрын
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!
@akrit.ghimire
@akrit.ghimire 11 ай бұрын
This was such a good video, amazing quality, learnt way more than I thought and the end result was astounding. Thank you so much!!!
@BloodyScythe666
@BloodyScythe666 2 жыл бұрын
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
@nacs
@nacs 2 жыл бұрын
Really impressive how you did this without massive JS frameworks, nice work!
@traversal6881
@traversal6881 6 ай бұрын
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...
@universecode1101
@universecode1101 2 жыл бұрын
Impressive 🤯 thanks for sharing this man 👏🏻✌🏻
@joshuahovis3189
@joshuahovis3189 Жыл бұрын
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!
@ChrisCourses
@ChrisCourses Жыл бұрын
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 🙌
@loganw7423
@loganw7423 2 жыл бұрын
Some friends and I were talking about this just a few weeks ago! Definitely glad the algorithm blessed me with this amazing support!
@oliverren3172
@oliverren3172 2 жыл бұрын
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!
@freshairkaboom8171
@freshairkaboom8171 Жыл бұрын
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.
@namaefumei
@namaefumei Жыл бұрын
This is just gold! Thanks a lot! I'd love to see this done on a canvas library also.
@brandonread4638
@brandonread4638 4 ай бұрын
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!
@alexandrenabarrete8849
@alexandrenabarrete8849 Жыл бұрын
Nice tutorial, I work with JS about 6 years and never had worked with Canvas, this tutorial encouraged me to create a game
@omaryahia
@omaryahia Жыл бұрын
absolutely outstanding tutorial !! thank you Chris so much ❤
@nonequivalence1864
@nonequivalence1864 2 жыл бұрын
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.
@equious8413
@equious8413 Жыл бұрын
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.
@boloow
@boloow 2 жыл бұрын
Can't wait to do this course and learn a bunch! Thanks once again Chris!
@deckmasterbr
@deckmasterbr 7 ай бұрын
May you get many subscribers and continue with this incredible professionalism.Congratulation.
@DrewNorman
@DrewNorman 5 ай бұрын
Best training ever. Covering all the details. Well done sir.
@spoiledpickle4820
@spoiledpickle4820 2 ай бұрын
Man, you are owning it! Really Inspiring!
@kalahari8295
@kalahari8295 2 жыл бұрын
Massive insights in game development (for a beginner) Thank you ❤️🔥🙃
@charlesesmer9528
@charlesesmer9528 2 жыл бұрын
The explanations are so detailed thanks for the video
@kidbrave_7673
@kidbrave_7673 2 жыл бұрын
OMG!! I'm 8 minutes into this video and I'm already calling you my FAVORITE! KZfaqr! 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!! 😁🙌🏽
@kidbrave_7673
@kidbrave_7673 Жыл бұрын
@@robbertnelissen3365 Oh cool what is it?
@jsbritinho
@jsbritinho 6 ай бұрын
Fully dedication. Congrats, you deserve all success of the world
@ashish_prajapati_tr
@ashish_prajapati_tr 2 жыл бұрын
Helping you to break KZfaq algorithm
@ChrisCourses
@ChrisCourses 2 жыл бұрын
༼ つ ◕_◕ ༽つ take my energy YT algo
@heraeth741
@heraeth741 Жыл бұрын
It recommended me and i will try to do it myself algorith got your energy and brought me to what im exactly looking for :)
@HyperHrishiHD
@HyperHrishiHD Жыл бұрын
Worked for me
@Nixthelf
@Nixthelf Жыл бұрын
It still works.
@Anti-HyperLink
@Anti-HyperLink Жыл бұрын
Don't let the video get too recognized or Nintendo will send their assassins.
@muscularman5985
@muscularman5985 Жыл бұрын
Absolute legend for making this video mate, thumbs up and subbed
@MeinDeutschkurs
@MeinDeutschkurs 23 күн бұрын
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.
@user-of4rl8qi9g
@user-of4rl8qi9g 3 ай бұрын
Bro you are awesome, keep doing these tutorials
@yayin5929
@yayin5929 Жыл бұрын
Thanks Chris! Very Beginner Friendly Tutorial!!! 💖💖💖💖
@kenziemorris5230
@kenziemorris5230 Ай бұрын
Im gonna use this to help me with my learning process, thank you :)
@vintagetech551
@vintagetech551 2 жыл бұрын
this channel is awesome, he is great at teaching and it makes sense.
@JasonRobards2
@JasonRobards2 Жыл бұрын
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!)
@timobrien4190
@timobrien4190 2 жыл бұрын
Wow you are amazing! Thanks for the educational content!
@guitar556100
@guitar556100 7 ай бұрын
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.
@jonlima9897
@jonlima9897 Ай бұрын
You finish your game already?
@renancrema1074
@renancrema1074 Жыл бұрын
Thats is, really ! The best tutorial I ever saw on KZfaq... Complete amazing and helpfull... Good Job !!! Awesome
@echy3367
@echy3367 Жыл бұрын
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 😄
@Flarkit
@Flarkit 11 ай бұрын
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
@Nardaddi
@Nardaddi 11 ай бұрын
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!
@chechumarmol6783
@chechumarmol6783 Жыл бұрын
Just ended, thanks for this video, I learned a lot and think its the funniest think that i made while learning coding!
@mrmiagi6052
@mrmiagi6052 2 жыл бұрын
This is so sick. Hope to be able to create this one day
@coderxchris5099
@coderxchris5099 Жыл бұрын
Just discovered your channel. Man, awesome vids bro. I’m definitely checking out your site.
@brandonjacksoon
@brandonjacksoon Жыл бұрын
Thanks Chris! Liked and subscribed!
@voidbyte
@voidbyte Жыл бұрын
This was really helpful! Instant subscribe!
@codebuenozy
@codebuenozy Жыл бұрын
Wow that's amazing, perfect, thank you so much for the class.
@joaosaraiva9495
@joaosaraiva9495 2 жыл бұрын
This is a masterpiece. You are a genius, keep up the good work!
@trashinGame
@trashinGame Жыл бұрын
a 7 hour video? the absolute madman!
@dinhtrungdang3659
@dinhtrungdang3659 2 жыл бұрын
goosebumps !! very thanks for sharing
@richardrichardson3506
@richardrichardson3506 Жыл бұрын
Awesome! Thanks for this really interesting tutorial)
@JomaroTV
@JomaroTV 2 жыл бұрын
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
@Iswhars
@Iswhars 2 жыл бұрын
Holy shit this is such a sick project. Love the content
@crystals4ever
@crystals4ever 9 ай бұрын
You explain it so well. Thank you
@gektorix
@gektorix 2 жыл бұрын
7 hours! Chris, are you kidding me? You are Legend!
@richardrichardson3506
@richardrichardson3506 Жыл бұрын
Liked and subscribed! Thanks Chris!
@kaitorobert
@kaitorobert 2 жыл бұрын
omg! awesome, im learning java script and this... is unbelievable
@taylorgib
@taylorgib 2 жыл бұрын
This video is amazing! Thank you so much!
@cultistsash
@cultistsash 2 жыл бұрын
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
@Philson
@Philson 2 жыл бұрын
HOLY 7 hours video man!
@sanzespoir
@sanzespoir Жыл бұрын
Thanks! I will try to make it with a friend. Thank u again for your impressive work, it seems rlly amazing! saludos desde Argentina
@acrj-alfasaus4825
@acrj-alfasaus4825 2 жыл бұрын
i always wanted to make my own ‘monverse , u are an inspiration!
@terran-crypt
@terran-crypt 6 ай бұрын
Thank you for this great video! I learned so much! 😘
@ryanshaw9301
@ryanshaw9301 2 жыл бұрын
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.
@chetan9533
@chetan9533 Жыл бұрын
people like you who share such insights and findings are 💎s
@AV-bm2kq
@AV-bm2kq Жыл бұрын
💙💫
@IForgetWhatISay
@IForgetWhatISay Жыл бұрын
This is the type of person that deserves to have kids. Sharing knowledge should feel good.
@josephcieplak8920
@josephcieplak8920 2 жыл бұрын
Super awesome, thank you soo much!
@LaSandWitch
@LaSandWitch Жыл бұрын
Dude, this is incredible!!
@95datanorden95
@95datanorden95 5 ай бұрын
i would love to see a video of you working in unreal engin, you are so structured. fantasic work man
@000glowinthedark000
@000glowinthedark000 Жыл бұрын
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.
@elizeusantos864
@elizeusantos864 2 жыл бұрын
Incredible Chris 👨‍💻
@angelcoronado3538
@angelcoronado3538 Жыл бұрын
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.
@MrErererererr
@MrErererererr Жыл бұрын
Most awesome game tutorial, that i see
@gabriel_luzz
@gabriel_luzz 2 жыл бұрын
I'm just here to tell you this: you're an inspiration for us.
@WyzrdCat
@WyzrdCat 2 жыл бұрын
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.
@NawtyP0T4T0
@NawtyP0T4T0 Жыл бұрын
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)
@equious8413
@equious8413 Жыл бұрын
@@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
@Aganoify
@Aganoify Жыл бұрын
Amazing stuff, thank you!
@543769bobo
@543769bobo 2 жыл бұрын
really high quality content
@ua8142
@ua8142 Жыл бұрын
I'm very happy if you make this kind of courses in react.js!!
@syropian
@syropian 2 жыл бұрын
Hey Chris, this was an incredibly well done tutorial, congrats! Slightly off-topic but what do you use to manage your todos? Is it an editor plugin, or a totally separate application? Thank you!
@hsuanchen864
@hsuanchen864 2 жыл бұрын
I want to know todo tools, too! thanks!
@m1gonam
@m1gonam 2 жыл бұрын
sublime text plugin PlainTasks
@hadeblandoss519
@hadeblandoss519 7 ай бұрын
UAU!!!!!!Exciting !! I'm going to put it into practicce....
@amlslmn4573
@amlslmn4573 2 жыл бұрын
Thanks for that video Chris :) How did you draw on the screen ? Is it something natively included on MacOS ?
@Kaewhy13
@Kaewhy13 2 жыл бұрын
Thank you so much really helps a lot
@tyekillough2263
@tyekillough2263 2 жыл бұрын
Just saying, visited your website and am excited to see that JS course eventually coming! also, is there a discord for your community? much love keep on going strong!
@ChrisCourses
@ChrisCourses 2 жыл бұрын
I don't, but I'd like to start one. Maybe I'll make one today.
@ChrisCourses
@ChrisCourses 2 жыл бұрын
Just started one, you're more than welcome to be the first member at discord.gg/x2pRWpuW 🙌
@aaronmark3930
@aaronmark3930 2 жыл бұрын
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!
@techjunky9863
@techjunky9863 Жыл бұрын
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.
@aaronmark3930
@aaronmark3930 Жыл бұрын
@@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.
@SamSarwat90
@SamSarwat90 Жыл бұрын
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.
@laminatedjello
@laminatedjello 2 жыл бұрын
This. Is. Insane. Thank you for sharing. 😦
@VorticyHP
@VorticyHP Жыл бұрын
man i've been thinking about getting into coding again for so long!!
@hackerprincess8810
@hackerprincess8810 2 жыл бұрын
What the freak is this real?? I really love that you put this out thank you 🙏🏽
@domieSinday
@domieSinday 2 жыл бұрын
What the!? Chris, You're too awesome!
JavaScript Fighting Game Tutorial with HTML Canvas
3:56:20
Chris Courses
Рет қаралды 6 МЛН
Technique for Creating Beautiful Level Design
11:48
Pixel Architect
Рет қаралды 806 М.
КАРМАНЧИК 2 СЕЗОН 6 СЕРИЯ
21:57
Inter Production
Рет қаралды 442 М.
The Worlds Most Powerfull Batteries !
00:48
Woody & Kleiny
Рет қаралды 18 МЛН
1❤️
00:20
すしらーめん《りく》
Рет қаралды 33 МЛН
Dear Apple - The iPad needs help.
11:47
Mrwhosetheboss
Рет қаралды 1,5 МЛН
3 Months of Learning Game Development
10:48
Byte of Michael
Рет қаралды 924 М.
An Aseprite Crash Course In 30 Minutes
31:47
AdamCYounis
Рет қаралды 1 МЛН
Suddenly a chill live stream appears!
Madrigal
Рет қаралды 3
6 Months of Learning JavaScript Game Dev in 6 Minutes
6:35
Suboptimal Engineer
Рет қаралды 112 М.
The Beauty of Code: Flow Fields
7:17
Chris Courses
Рет қаралды 141 М.
Every Programming Language Ever Explained in 15 Minutes
15:29
Flash Bytes
Рет қаралды 247 М.
Infiltrating Roblox’s Fake Middleman Scam
18:57
No Text To Speech
Рет қаралды 325 М.
4 Godot 4 Devs Make 4 Games in 44 Hours
25:19
DevLogLogan
Рет қаралды 448 М.