# Collisions **URL:** \ **Category:** Phaser 3\ **Created:** [April 10, 2019, 1:56pm UTC](https://phaser.discourse.group/t/collisions/2065 "2019-04-10T13:56:36Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![amserra](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@amserra](https://phaser.discourse.group/u/amserra)\ **Post date:** [April 10, 2019, 1:56pm UTC](https://phaser.discourse.group/t/collisions/2065/1 "2019-04-10T13:56:36Z")
Hello. I am currently building a game in which my main sprite is no other than… captain america! 😄 To make him swing the enemies and walk to reck thanos(does he really?) I used a sprite sheet. So far so good, however now I want him to actually hit enemies. I was wondering how I can manage to detect the collision exactly. I can detect the bounding boxes collision with arcade physics, however I wanted to detect only when his fist hits the enemy. With pure JS I used a function to detect this pixel perfect collision, using the alpha value of each pixel. I was wondering if there was any way to do that in phaser. ![30](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c5751594e5d204c6cb655114dc0a5aaaff746ee0.png) (not colliding) ![08](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/302bbea13e9f587a3d94d170e0557ef00d96a591.png) (colliding) Thank you for your time!! ---
**Author:** ![fernandomondo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/fernandomondo/32/1453_2.png) [@fernandomondo](https://phaser.discourse.group/u/fernandomondo)\ **Post date:** [April 10, 2019, 3:17pm UTC](https://phaser.discourse.group/t/collisions/2065/2 "2019-04-10T15:17:42Z")
Usually, in game of this type, you must create a new hitbox (or a new Phaser Sprite) when the player execute a attack. > **[Hitbox](https://mcleodgaming.fandom.com/wiki/Hitbox)** > > Hitboxes are the areas in which an attack can hit an opponent. For example, when a character uses a slashing attack, the hitbox is focused around the area where the weapon slashes. Attacks with longer range have a hitbox that extends farther.... > **[Hitboxes and Hurtboxes in Unity](https://gamasutra.com/blogs/NahuelGladstein/20180514/318031/Hitboxes_and_Hurtboxes_in_Unity.php)** > > What are Hitboxes and Hurtboxes? aren't they the same? and how do we implement them in Unity? ---
**Author:** ![amserra](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@amserra](https://phaser.discourse.group/u/amserra)\ **Post date:** [April 10, 2019, 3:50pm UTC](https://phaser.discourse.group/t/collisions/2065/3 "2019-04-10T15:50:13Z")
How can I perform that? ---
**Author:** ![DaSoup](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dasoup/32/1059_2.png) [@DaSoup](https://phaser.discourse.group/u/DaSoup)\ **Post date:** [April 19, 2019, 1:35am UTC](https://phaser.discourse.group/t/collisions/2065/4 "2019-04-19T01:35:53Z")
Looks pretty cool. Have you looked at Physics Editor ([https://www.codeandweb.com/physicseditor](https://www.codeandweb.com/physicseditor)) I think that along with matter.js can be what you need. There’s a cool example at: [https://labs.phaser.io/view.html?src=src\physics\matterjs\advanced%20shape%20creation.js](https://labs.phaser.io/view.html?src=src%5Cphysics%5Cmatterjs%5Cadvanced%20shape%20creation.js) I haven’t tried it yet, but might help you. Take care, DaSoup ---
**Author:** ![amserra](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@amserra](https://phaser.discourse.group/u/amserra)\ **Post date:** [April 19, 2019, 10:55pm UTC](https://phaser.discourse.group/t/collisions/2065/5 "2019-04-19T22:55:50Z")
Hello man. Thank you for your answer. I actually have tried it out. It’s a nice feature, however I found myself having to change body physics all the time. I managed to do that(despite the lack of documentation and information about that), by using the `setBody()` function, passing as parameter the physics texture, the x and y(yea, you have to specify it too). This worked fine for texture changing, however not so great for my sprite position and gravity. Because it’s constantly modifying the x and y, the physics don’t have time to ‘act’ properly, so when I jumped with my sprite it looked a bit awkward. Moving left and right seemed to work just fine. After that I found that I needed to also rotate my sprite body physics, because my sprite sheet only has one direction of the sprite, and when I want to rotate it on animation I just do a `.setFlipX(true)` and works like a charm. I was hoping there was a function like that for physics, but no, nothing. So I had to add body physics on every moving direction. More trouble… There’s when I decided to stop trying because I have a deadline for this project and if I keep messing around with this I think I will always have a stone in my shoe. What I hope phaser creators do is to document and give more examples about this framework, because I felt like it wasn’t yet at the level of Arcade Physics and it has much more potencial. Oh and also I hope that someone starts an opensource project like Physics Editor, because it is payed ^^ Any ideas, thoughts about this problem and experiencies with this framework are welcome to the discussion! Cheers ---
**Author:** ![jaredyork](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jaredyork/32/699_2.png) [@jaredyork](https://phaser.discourse.group/u/jaredyork)\ **Post date:** [April 20, 2019, 5:57pm UTC](https://phaser.discourse.group/t/collisions/2065/6 "2019-04-20T17:57:31Z")
Hi amserra, You say you wish for an open source editor like Physics Editor. I actually started an open source physics body editor called Physics Shaper. You can find it on GitHub here ([https://github.com/jaredyork/physics-shaper](https://github.com/jaredyork/physics-shaper)), but you’re not able to export JSON properly yet. Right now I’m trying to figure out the format for Physics Editor, but also exploring programming my own parser. I started this project with the same frustrations for the lack of an open source 2D physics body editor. Hopefully you and others may be able to find value in the project once it’s up and going. 🙂 If anyone sees this thread and would like to contribute to the open source project, please feel free. ---
**Author:** ![amserra](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@amserra](https://phaser.discourse.group/u/amserra)\ **Post date:** [April 20, 2019, 9:30pm UTC](https://phaser.discourse.group/t/collisions/2065/7 "2019-04-20T21:30:45Z")
@jaredyork such good news! That’s amazing. Definitely a project to keep an eye on. Best of luck! ---
**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\ **Post date:** [April 6, 2020, 10:58pm UTC](https://phaser.discourse.group/t/collisions/2065/8 "2020-04-06T22:58:43Z")
Hello! @amserra did you ever find a simple solution to what you are trying to do? I too would like “pixel-perfect” collision detection for my sprites and am baffled as to why the physics body is built from the bounding box around the image rather than only the non-transparent pixels of the image/animation… I have opened a [GitHub issue here](https://github.com/photonstorm/phaser/issues/5081) about this to see if we could maybe add this functionality to the framework as I’m sure anyone trying to handle collisions between non-rectangular sprites would benefit greatly from this! Hopefully Rich or someone else who knows the framework well can give us some clarification on this! 🙏 Btw your artwork / animations are awesome! 😁 ---
**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\ **Post date:** [April 7, 2020, 1:52pm UTC](https://phaser.discourse.group/t/collisions/2065/9 "2020-04-07T13:52:32Z")
> [@amserra](#): > > With pure JS I used a function to detect this pixel perfect collision, using the alpha value of each pixel. I was wondering if there was any way to do that in phaser. You can adapt your js function to work on the processCallback: [https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Collider.html](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Collider.html) If your function detect a pixel perfect collision return true else return false, If true the collideCallback is called and you can handle the collision. For detecting if the captain america has hit an enemy you can check for the current animation frame: ```javascript captainAmerica.anims.currentFrame.textureFrame ``` ---
**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\ **Post date:** [April 7, 2020, 8:18pm UTC](https://phaser.discourse.group/t/collisions/2065/10 "2020-04-07T20:18:35Z")
Thanks @BlunT76! Are there any examples of how to use this processCallback function to check for the pixel-perfect collision? I’m still confused about what is really the difference between these two callbacks. ---
**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\ **Post date:** [April 7, 2020, 9:31pm UTC](https://phaser.discourse.group/t/collisions/2065/11 "2020-04-07T21:31:08Z")
I never see any example with pixel perfect collisions with arcade physics… it is generally not needed, you can do a lot with square and circle bodies. All the old platformers (8bit and 16bit era) use square boxes with the AABB collision detection, like arcade physics do. You must think your game with: - whate you see - and what happens behind ---
**Author:** ![fernandomondo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/fernandomondo/32/1453_2.png) [@fernandomondo](https://phaser.discourse.group/u/fernandomondo)\ **Post date:** [April 7, 2020, 10:15pm UTC](https://phaser.discourse.group/t/collisions/2065/12 "2020-04-07T22:15:37Z")
Perfect pixel collision is extremely heavy, and no real game uses it primarily. I advise you to create an arcade body big enough to get the whole sprite. After the collision occurs, you can apply a mixture of zones and pixel verification to make sure the collision is the way you would like. Another way to do it, compromising performance a little more, is to create a container with your main sprite and several zones. [https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Particles.Zones.html](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Particles.Zones.html) It depends a lot on the type of game or need. Even in 3d games multiple colliders are used ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/70284b60a3e7a669c7aa4398e29cac7ac40f4281.jpeg) [https://forum.unity.com/threads/creating-gameobjects-with-multiple-colliders-image-heavy.123811/](https://forum.unity.com/threads/creating-gameobjects-with-multiple-colliders-image-heavy.123811/) ---
**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\ **Post date:** [April 15, 2020, 12:20am UTC](https://phaser.discourse.group/t/collisions/2065/13 "2020-04-15T00:20:04Z")
https://codepen.io/samme/embed/preview/JjYYqaZ?height=300&slug-hash=JjYYqaZ&default-tabs=js,result&host=https://codepen.io ---
**Author:** ![Ross\_Evan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ross_evan/32/1142_2.png) [@Ross\_Evan](https://phaser.discourse.group/u/Ross_Evan)\ **Post date:** [June 15, 2020, 6:25pm UTC](https://phaser.discourse.group/t/collisions/2065/14 "2020-06-15T18:25:54Z")
For some reason this won’t work at all for me. I don’t get it. All I get is a rectangular bounding box, no custom shapes.