Phaser 3 Fix Collision Bounding Box

I was having trouble getting my player to collide with the floor and walls correctly. Turns out the bounding box was too large. It was a little bit of a challenge to get it right, but simple once you know how to do it.
This continues our platformer game series.
phasergames.com/phaser-3-boun...
You can grab the utility template here
phasergames.com/downloads/uti...
Udemy Courses
Making Games with Phaser 3
www.udemy.com/making-html5-ga...
MAKING QUICK CASUAL GAMES WITH PHASER 3
www.udemy.com/make-quick-casu...
Build and Publish Games in 24 hours E-Book
www.amazon.com/Create-Publish...
All my latest stuff
phasergames.com/learn-more/
Thanks for watching!

[@ufdas-wu1cr]

Thank you again! I spent hours trying to figure this out

[@PabloMontenegro]

Thank you. Your tutorials are great help. Keep the good work.

[@WClarkson]

Hey! Thanks very much! I'm glad they are of help.

[@JasonKim1]

Thanks for this video. I had a similar issue with Graphics object. After I added physics to the Graphics object, I had to manually resize to the intended size like you did.

[@sheldonkerr]

Excellent.

[@JohnEdvardReiten]

This helped me understand why my bounding box were larger than the sprite. The reason why you need a timeout/delay is not because the physics is not initialized, but rather, your sprite has not defined its width and height before the actual texture is added to the sprite. If you try to set the sprite's width and height e.g. `this.ninja.setSize(32,32)` (use the texture's height, and width) then you don't need a delay, and can set the bounding box to the same size. Thanks for the video.

[@augmentchinedu]

This is great. Thanks boss

[@stabMyFaceOff]

setting time out liek this feels really dirty. is there no call back for when physics has been initilized?

[@everyusernametaken11]

I mean, his KZbin name is "Codemonkey", afterall- aka hacky solutions.

[@raven1552]

What to do when your stand and run sprite has different width? i'm going through wall, becasue my sprite body is different position when i stand and different when i run.

[@bogdandovzhuk8800]

Hey, could you explain how we can make a flexible game that will be working on portrait and landscape mode and automatically resizing when a user is rotating a phone. Thanks for any information

[@WClarkson]

It could be done, but you would have to really design the game based around the rescaling. For most games, it just is not practical.

[@bogdandovzhuk8800]

thanks, actually I do animated ads and some times I get a task for playable ads it similar to game and in most cases, it needs to do flexible to each display and support horizontal and portrait landscape. you can see an example here s3.amazonaws.com/pixelcraftplayable/3/index.html (it was done on PIXI.js)

[@battlingelk5548]

How did you get the grid numbers? Ive checked your other videos and you didn't say how you made them

[@WClarkson]

Check out these links. Let me know if you need more help. www.npmjs.com/package/phaser-utility github.com/williamclarkson/phaser_utility/tree/main

[@battlingelk5548]

​@@WClarkson Thankyou so much. Also great response time and especially on a vid from 4 years ago :)

[@BruceOnder]

Great find and fix! 💪 Did you report this to Rich?

[@WClarkson]

Thanks. I don't think it is an actual bug. There may be reasons to resize the box outside of the size of the image. For example just putting collisions on the feet.

[@BruceOnder]

@@WClarkson seems weird though that you have to solve it with a timed callback though - that part has a buggy feel to it.

[@WClarkson]

@@BruceOnder Oh, I see what you mean. A bit hacky. I might have been able to find another solution, but this seem the quickest. I spent a few hours banging my head before finding this. If there is a better solution, someone may post it here. I'm all for having elegant solutions but sometimes you just need the thing to work.

[@GaryStanton]

@@WClarkson While this works for your particular game, having to artificially add a delay to get the body sizing working doesn't seem like a great solution. More likely there's a problem earlier on in the code and you're working around a symptom of that problem! I've found in the past that if you're working with a sprite that needs to be scaled, you may want to size the body before scaling the sprite. That may be at play here.

[@ralph2340]

It says setSize isnt a command that exists

[@Jivvy102]

Are you the god of phaser?

[@WClarkson]

More like a jester.

[@everyusernametaken11]

*WARNING*: DO NOT DO THIS. Setting a timeout to solve an issue like this IS DIRTY. Relying on a timer to guess when an event will happen will produce unintended results and bugs, leading to tech debt. Do NOT use a timer to hot-fix things like this. *THE REAL SOLUTION*: the reason this is happening is most likely that he's adding the physics to the shape before the image frames are added. Add physics to the entity last in your constructor and the need to manually .setSize() and .setTimer() both go away. *QUICK RULE OF THUMB*: Before you assume that there's something wrong with the Phaser engine (or any system built by a solid team of software engineers), assume first that you're doing it wrong and go read the docs.

[@WClarkson]

If you have an event listener for this please let me know, otherwise, this is an acceptable workaround.

[@saritsotangkur2438]

@@WClarkson Don't assume the browser playing this game will be able to finish loading physics in 1 sec.

[@WClarkson]

This was 2 years and a bit ago. I have not checked to see if a callback has been added. I don't like the work around either but it was the only thing that worked at the time.