Code Super Mario in JS (Ep 5) - Tile Collision

Подписаться 22 тыс.

Просмотров 47 тыс.

50% 1

In this episode we start by making some clean ups and will then deep dive into tile collision.
Some key concepts we will introduce are
* Basic mouse interaction.
* Adding a debug layer for drawing collision representation.
* Creating a Function Spy.
Music used in this episode is by Demoscene Time Machine:
open.spotify.com/artist/4ikPJ...
Intro: Jetpack
open.spotify.com/track/0dvzMN...
Preamble and Outro: Ski Jump open.spotify.com/track/5hxDTi...
This episode was the most difficult I ever did. Firstly, I was not fluent in doing collision, and if I wanted to create an episode explaining it I really need to understand why some of the side effects I saw happened. I also had to spend a lot of time structuring the episode so that the code written made sense at every step. I try to explain what problems we are solving before we write the code so that my viewers don't feel like they are walking away with a black box that solves a problem.
Since we are writing modern JS this code might not run on all browsers yet. I was running Chrome 61 when I wrote this and if you wish to follow I recommend you do too.
Twitter:
/ pomle
Source code for AABB collision test:
github.com/pomle/aabb-collision
Source code with step-by-step commits:
github.com/meth-meth-method/s...
Music:
Demoscene Time Machine
demoscenetimemachine.com

Опубликовано:

3 окт 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 119

@akwright 6 лет назад

I'm continually learning an incredible amount from you in this series. Thank you so much for doing these!

@mrclaytron 6 лет назад

This series is amazing! My favourite channel right now... Keep up the good work!

@pirgosth 6 лет назад

What I love you guy ! I've searched for a solution 5 consecutive days and you finally came to me ! Thanks a lot, and keep going you're awesome :)

@djxfade90 6 лет назад

Wow, your refactoring skills are really impressive. Nice work, my new favorite channel

@RogRamming 6 лет назад

Nice done. I admire your clean style.

@mrmagicrapattack 6 лет назад

I can't tell you how great this series is! But it's great!

@NearLife4life 7 месяцев назад

What I dig the most is that you create your own debugging tools and automate pretty much everything. It's quite efficient code; not to mention, your sense of organization is not only impressive but also inspiring!

@AndorSalga 6 лет назад

Great explanations as always!! :) Thanks so much!

@markbohannon6072 6 лет назад

Thank you for the excellent video series.

@StephandeVries 6 лет назад

Can't wait for the next episode, love the series!

@bennis9283 6 лет назад

I learned so much in this episode thanks! Keep it up ^^

@AndorSalga 6 лет назад

I love the spy pattern. It's really helpful.

@untildawn5714 3 года назад

8 people refuse to learn OOP. Thanks for the series, I learned a lot!

@qiliu5169 4 года назад

Thanks for the excellent series video!

@jordantan888 2 года назад

you are awesome, learning so much from you

@zeuzrad 6 лет назад

Thank you for sharing this great work

@leoniduvarov6565 6 лет назад

Thank you so much for these videos, I hope you finish the tutorial!

@XQzmeeMusic 3 года назад

one of the few code videos I need to slow down. Very informative. If the Javascript techniques were more explained, this would be a good Intermediate JS course. Great job!

@arabakulturu7919 2 года назад

Dude, you are awesome, go mario go

@QuentinDechery 6 лет назад

At about 48:50 the tutorial shows how to make the createCollisionLayer function. While it seems that function is working for me, as I am able to log out x and y, when I add the drawCollision sub function it doesn't seem to be called even though it is being directly returned. I tested this by adding debug and console statements inside drawCollision and doesn't seem to be called. I see no errors in console and Mario sprite is able to jump and move around properly by mouseclick and mousedrag. Does anyone have any suggestions how to debug this?

@QuentinDechery 6 лет назад

I also am able to console.log(resolvedTiles) array and it shows up properly. But once I put same console.log in drawCollision function, it doesn't show in console.

@meth-method 6 лет назад

It looks like there is a mistake in the tutorial. The function returned by `createCollisionLayer` needs to be added to the compositor. See here: github.com/meth-meth-method/super-mario/commit/0af22f4a6407db5365bfc0f6cbd4f2d9f7978753#diff-f485b1889bd3c96211c9236b0cf5daecR23 And it looks like the video actually skips over this step. Sorry for the inconvenience.

@QuentinDechery 6 лет назад

Awesome thank you so much for the speedy reply and for unblocking me. Appreciate the help.

@wingsoftragedy 6 лет назад

I'm having the exact same problem!. Could you fix it ? cheers

@wingsoftragedy 6 лет назад

Oops! I didn't read the comments. Sorry to bother !

@TropicalMelonMan 6 лет назад

Fantastic work! :)

@jonmayer 6 лет назад

This series is incredible. If it wasn't already taken, the series should be called Mario Maker 😂

@kamoroso94 6 лет назад

Nice, Hydraulic Press Channel cameo xD

@Niklas_J_L 6 лет назад

Thanks for this series, it's a joy to follow. Something that caught my eye was, when you invoke the original function in your "spy function", you use `Function.prototype.call`, when you could've instead used `.bind(thisContext)` when saving the reference. The end result is the same and I doubt there is any actual difference. I just thought it would've been neater to not have the call time binding on each invocation.

@fireystella 4 года назад

what a long episode but hehe finished :D

@iwanwilaga 4 года назад

now i should be building websites but i occasionally find myself watching this series instead. Becoming dangerous. Hahahaaa ;) Respect.

@charlescohen5035 6 лет назад

Love the tutorial. Learning so much. One question: I'm at about 49min right now and at the point where you put a box around the mario sprite, but for me while the box is over my cursor, mario is being drawn one tile to the right of my cursor, so they don't line up. I'm gonna try to shift the draw Mario input by x-1 for now.

@Roman-dn6iw 6 лет назад

I was using keyCode before and was wondering why my game has bugs in some browsers, that tutorial helped me to fix them)

@isaacdavis1363 5 лет назад

THANK YOU SO MUCH!!!!!!!!!!

@Bot-wz7tg 6 лет назад

for some reason, I cant move left and sometimes there are invisible objects of some sort.

@kalhpatata6456 4 года назад

I think i found something like a bug. If mario's y position is a very small negative number (for example -0.000000000000000001), then mario can pass through the walls! I think this happens because 32 - 0.000000000000000001 = 32 for the pc, so the range of tileresolver indexes becomes [-1,1,...] This is not something just theoretical, at my testing many times mario obtains a y position that allows this to happen (this is how i discover this bug). I am not sure what is the proper way to deal with this, of course you can just make it not possible for mario position to take negative values at all. p.s. Great video and series of course

@matejsnovak6238 6 лет назад

i cant export function loadBackgroundSprites, uncaught syntaxerror: the requested module does not provide an export named loadBackgroundSprites, any advice ?

@meth-method 4 года назад

Need help? Visit the Discord chat discord.gg/ZAP8wVr

@itsMapleLeaf 6 лет назад

Really love the series so far. Following along, I've decided to use TypeScript instead of normal JS, so that I can avoid those nasty syntax errors, undefined errors, and all that. Because TypeScript is love. Here's the repo for anyone interested: github.com/kingdaro/super-mario-typescript The goal is to have the same functionality, but with deviations wherever I see fit. Anything that can be made to look a little nicer, or to work with TypeScript better. Some key changes: - Using async/await instead of promises wherever possible - Using a Mario class which extends Entity, instead of making an Entity class and attaching properties to it - A different API for entity traits, since TS doesn't work well with arbitrary object indexes. Essentially, instead of "mario.jump", it's "mario.getTrait('jump')" which ends up being _a lot_ longer and uglier, and I'll probably figure out a way to make it look nicer. - Using named exports instead of default exports for classes. TypeScript allows project-wide renames, which work a lot better with named exports than defaults. I imagine you're barring linters and such for the sake of keeping things simple, and I respect that, so keep doing what you're doing! I'll just silently sit over here with my strict types and stuff c:

@meth-method 6 лет назад

Thanks for sharing, it's very interesting to see. Just to clarify, those syntax errors I get has nothing to do with not using TypeScript, it is most likely a bug in Chrome when using modules.

@diogojuniordesouza5035 6 лет назад

Nice to see someone else is making it with Typescript. I will use your async/await tip (I'm actually not familiar with async neither Promises so I've been using it kind of blindly). Regarding the Traits, I'm just using "mario['Jump']" instead of "mario.jump" and TS doesn't complain about it. I was not confortable with throwing away Velocity trait and to update entities' position inside the Level class. It seems confusing to mix Level code with entities Velocity. However I couldn't figure some better way to do it. Do you have any ideas about it?

@wposzukiwaniuprzygody396 6 лет назад

Awesome

@atmark666 6 лет назад

do anyone know good tutorial for refactoring javascript code?

@ijstanley 6 лет назад

I'm loving this series, excellent work Pom! I couldn't stop myself thinking that there's a potential issue with detect collisions only on the outer tiles though. If you're falling from the top of the screen, could gravity not cause more than 16px of movement in one frame by the time Mario reaches the floor? Particularly on slower machines where there framerate may not be so fast.

@meth-method 6 лет назад

ijstanley yes, the character can move past a tile if velocity is high enough. However frame rate does not affect it because we are using a fixed timestep. What you can do is have a maximum speed of objects but in our case it is mitigated by the game sandbox having restrictions. Many speed run tricks utilize imperfections like these to cheat.

@ezics8439 5 лет назад

For some reason, this runs in firefox, but not chrome for me. Something about one of the files not updating after I save....

@AndorSalga 6 лет назад

Silly question but why are TileCollider and TileResolver two separate classes? Why not have the Collider also have the Resolvers methods?

@remmoze 6 лет назад

Can you show later how to add tiles to the world? (at playing stage) I can add it with Level.tiles.set(x, y, {name:'ground'}), but it won't show up. and creating bglayer on every block placement is extremely inefficient

@diogojuniordesouza5035 6 лет назад

This tutorial series and all your videos are awesome! You're doing a great job. I just have one doubt so far.. I was not confortable with throwing away Velocity trait and to update entities' position inside the Level class. It seems confusing to mix Level code with entities Velocity. However I couldn't figure some better way to do it. Do you have any ideas about it?

@meth-method 6 лет назад

That's great! Share your alternate solution. I never code anything as if it is the ultimate solution, I always try to put things where they make sense at the time and evolve as needed. Thanks for following a long and taking time to give feedback. It's super appreciated! :)

@takashikisaku605 2 года назад

--- TOC --- 0:00 OP 0:10 What this video develp? 2:52 Start to write code --- My memo ---

@RomanSteiner_xD 6 лет назад

As a kid I once gave up on game development, 16 years ago, because I didn't understand the importance of the order of operations in AABB. RU-vid is a great resource. Just saying...

@meth-method 6 лет назад

It seriously took me 3 days to get it properly and that was three days after actually implementing it. Our brain is bad at soaking up non-intuitive information fast. I don't know how many times I've struggled to get something only to have the coin drop days later out of nowhere.

@thatchipmunksings 4 года назад

Where did you get your masters degree in refactoring from?

@neuemage 6 лет назад

Loud ass keyboard + air conditioning = win

@angladephil 6 лет назад

Popped randomly in this video. Nice ! There must be a lot of preparation time for you to give the feeling that you just code this "on the fly" ... with so few mistakes ...

@JuanPabloMolinaMatute 6 лет назад

great tutorial!! quick question, isn't the Y coordinate upside down? so y= 0 be at ground level????

@A.D.G 6 лет назад

I'm late to this, but just for reference the canvas element actually uses the Cartesian Coordinate System, so 0,0 is the top left of the canvas.

@Bozeman42 6 лет назад

the first frames of the animations are always cut off for me i.e. by the time it starts drawing frames mario has already fallen off the screen. if I remove the background the residual mario images are present for the frames that don't get drawn in real time. Do you have any hints as to what might be causing that?

@Bozeman42 6 лет назад

This matters a lot less once the collision is working and mario isn't just immediately gone.

@meth-method 6 лет назад

Yes, its slow start time of your browser. When the first frame is drawn more time have been stimulated. Its a bug that in hindsight I should have accounted for but it wouldnt matter in the end. If you want to fix it you need to calculate the time diff only if there has been a previous call to requestAnimationFrame

@mukeshjagani6553 8 месяцев назад

I watched this series first time few years back, when I was just started learning programming. Since, then I keep coming back every few months hopping I could follow along but I can't. It's been 5+ years and my JS skills continually improvising but still unable to follow along. I am very disappointing in myself. 😥 I won't give up thogh 🤗

@BruceOnder 4 года назад

INSPECTOR GADGET SONG WHISTLING AT 42:15 :D

@Fabian-_- 5 лет назад

Could you maybe sometime make a tutorial for a 2.5d game? (like f. Ex. Stardew Valley and many RPGs). The collisions would be difficult and interaction would be introduced, would be really interesting.

@kewtomrao 3 года назад

CN you please tell the intro music?

@meth-method 3 года назад

Check description!

@edwinlemeilleur 6 лет назад

If you have a ton of files are you over modularizing?

@meth-method 6 лет назад

No. Overmodularizing is when you modularize things without a plan.

@ouhare 6 лет назад

at 47:00 why you don't add the collisionLayer to the Compositor in loaders.js like the others layers ?

@meth-method 6 лет назад

ouhare because it's temporary for debugging. The main file it's kind of where all random dirt go before we've decide where it belongs.

@ouhare 6 лет назад

at 1:17:50 ok the layer is now push in compositor ;) calling createCollisionLayer alone don't do anything ! Thanks for your videos ! nice approach, good explanation, clear code, DRY method, refactoring, let's gooo !

@meth-method 6 лет назад

Glad to have you onboard!

@fablouping5292 6 лет назад

Hi, nice video, it's cool you say what you will do, but can you explain also why you do it (as short as possible), like I move this to a new file to separate code to not mess up with big file or i make this like this, it's call xxx pattern

@meth-method 6 лет назад

Thanks, I will try to get better at this! Sometimes I don't even know what the patterns are called though, because I learnt to program in the streets. :P

@fablouping5292 6 лет назад

Ahah, no pb, i don't know neither pattern it's why i would like more information. But seriously thank for your job because it's huge stater for people. And you make everything and think about everything it's very good to see real project, not quick todo app like usually. And see the refactoring step by step it's god. Thanks you man.

@cooper2623 6 лет назад

Can you say music at the end of the video?

@lionpersia 6 лет назад

demoscene

@yangyangcui9150 4 года назад

I use mac computer to program, 38:08 ['mousedown', 'mousemove'].forEach(enventName... didn't work for me on Chrome. I don't know why? I can't drag Mario around. I only can click somewhere, then Mario fall down.

@yangyangcui9150 4 года назад

'mousemove' can't work on Chrome, but it works on FireFox

@learnbasicsmore6638 4 года назад

For some reason, I cannot drag Mario. It just gives an error: (Main.js:32 Uncaught (in promise) TypeError: Cannot read property 'mousemove' of undefined at Main.js:32) Here is my code for that: ['mousedown', 'mousemove'].forEach(eventName => { canvas.addEventListener(eventName, event => { if(event.buttons === 1) { mario.vel.set(0, 0) mario.pos.set(event.offsetX, event.offsetY) } }) }) please help as soon as possible but apart from that, the tut is good!

@user-ix3us3ld2m 6 лет назад

Why you did not just add in test(), this.checkX() function? Like that: test(entity) { this.checkY(entity); this.checkX(entity) } But moved it in update function directly?

@user-ix3us3ld2m 6 лет назад

Because it has to go sequentially? Like after adding X we have to check it, and only after checking X we can add Y and also check it. Right?

@meth-method 6 лет назад

You got it. With this method the stability of the collision detection depends on checking the axii indepebdently

@remmoze 6 лет назад

48:50 for some reason "drawCollision" doesn't get called for me

@meth-method 6 лет назад

Debug it and share your results? :) Did you add the layer to the compositor in main.js?

@remmoze 6 лет назад

yea, i didn't. Thank you!

@glennmorrow2755 6 лет назад

And see comments under "Quentin Dechery"below for more details if this is clear enough (adding this for others who may read this, not for "Remmoze" for whom it is obviously already resolved)

@remmoze 2 года назад

@@meth-method ah man. Thank you a lot! My javascript skills (and real programming in general) started with you. Now this problem looks like a joke to me, i am very great at js. Thanks!

@arthurkids237 3 года назад

hi congratulations on the videos, you are a very experienced and kind person, you could add subtitles to the video, I saw here from the playlist most of the videos are without subtitles, I don't know your language and I watch by legenga. thank you.

@Mert.Yildiz 6 лет назад

wow

@timoman6 6 лет назад

I've been working off this for a bit, cloned the repo under the branch episodeX-tile-collisions after episode 4. I added an Animate trait that changes the sprite based on its current direction and last direction, and crouching with the down arrow, however it's very buggy. I also added a function to create a set of sprites based upon a prefix, explained in the repo I submitted. Lastly, I added the ability to change the state of marios size, big or small. It's very buggy, but if any of it helps you, then I feel like it was worth something. Repo is here github.com/timoman7/super-mario

@AFE-GmdG 6 лет назад

At ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YLMP5jmtpYc.html you implement the searchByRange method. But there is a little issue in it: If for instance the tile is more than one tiles in with you calculate for every x all y's. But since the sprite is a rectangle you only have to get the y-range once: const yRange = this.toIndexRange(y1, y2); this.toIndexRange(x1, x2).forEach(indexX => { yRange.forEach(indexY => { const match = this.getByIndex(indexX, indexY); if (match) { matches.push(match); } }); });

@EFJB12 4 года назад

no entiendo nada, pero algo se me va a quedar

@uyohn 6 лет назад

How can I become as good programmer as you are?

@noname-ic3zq 6 лет назад

Matej practice

@uyohn 6 лет назад

@meth-method 6 лет назад

Continue watching, Like, Subscribe and Share! :D Also I should mention that my skills looks overexaggerated in these tutorials because I spend hours refining the code and reducing it down to the important parts so that there are as few red herrings as possible. And then I clean up the order of creation by rebasing in Git and finally I use that as a script when I record the tutorial. Before I publish one hour of video I've spent ~20 hours to write and prepare the code.

@ivantsybulin8328 6 лет назад

29:25 : ahah)

@ivantsybulin8328 6 лет назад

42:20)

@Nicoblabla 6 лет назад

omg 1:21:23 :D

@FreeRoamingHumans 6 лет назад

The problem with KeyboardEvent.code is that it's only supported by Firefox 32.0+ and Chrome 48+ at the moment. Source: developer.mozilla.org/de/docs/Web/API/KeyboardEvent/code#Browser_compatibility Oh! And your videos are awesome! Thanks :)

@meth-method 6 лет назад

Great to know! I guess I need to go back to keyCode then. :)

@Seedzification 6 лет назад

Well you're starting your tutorial by "You should use chrome 61 for the es6 modules" so I don't get why you should switch back to deprecated code

@Seedzification 6 лет назад

Love the tutorial btw

@rasmushansen2391 6 лет назад

Why use classes? Isn't that just sugar or do you have a reason? Love the tut though, nice walkthrough.

@rodrigovazquez420 6 лет назад

because OOP is love? (?

@rasmushansen2391 6 лет назад

I agree with you, however JS it not really OOP in that sense, more like a prototype based language - I don't mind people using classes, i'm just curious why

@meth-method 6 лет назад

Yes, classes are syntactic sugar. The entirety of a high level language is also just syntactic sugar for machine code. Syntactic sugar is what helps us to reason more easily about concepts and once syntactic sugar is well established enough, it becomes just syntax. :) I use class syntax to setup the prototypes, since doing that without it is rather verbose.

@rasmushansen2391 6 лет назад

Thanks for the reply :) keep up the good work

@pakast1n 6 лет назад

Yeah and the reason to use prototypes is performance and memory-efficiency. Also readability in many cases. There has been issues with ’this’ in the past, but luckily that’s fixed with arrow functions etc. now :)