Workaround for Rotation on Arcade Physics

Phaser 3
1

Hello,
I am aking a dungeon crawler. I’m trying to create a sword which rotates to face the mouse cursor. However, since rotation doesn’t work on arcade physics, it doesn’t work. Does anybody have any ideas?
This is for a game jam, so I only want to use matter if I really have to.
Thanks.

2

Hi,
The arcade body doesn’t rotate but the sprite can. But you’ll need to find a way to handle collisions.

3

Colliders can take a processCallback which can be used to perform additional processing on the collision. In this callback, you can use any collision algorithm or a library like SAT.js to check for collision between arbitrary polygons. In order to ensure that the collision works properly, you might also have to adjust the body’s size to match the bounds of the rotated rectangle.

If you’ve only got a few instances where rotated objects are necessary, you don’t even need to go through the physics engine. You can perform the overlap test (either with a custom algorithm or a dedicated library) yourself.

For more complicated setups, it will likely be easier to use a more advanced physics engine.

4

I’m not sure what you mean by this, sorry. (I am pretty new to phaser) I thought process callback only invoked when the two objects were touching?
To be more clear, I’ll attach an image of what it looks like. Can you provide some psudocode?

Screen Shot 2020-04-04 at 8.20.57 AM
Screen Shot 2020-04-04 at 8.20.57 AM414×828 42.7 KB

5

@UltimateProGrammer I have used rotation for a game that I worked on, it worked well for me.

There are a couple of options:

  1. angle
    You can set it using either gameObject.setAngle(angle) or just gameObject.angle = angle

  2. rotation
    Rotation does the same thing as angle but the values must be in radian. Rotation can be set the same way as angle. gameObject.setRotation(radian) or just gameObject.rotation = radian.

  3. angluarVelocity
    If you want your object to keep on rotating you can try this.

Now the approach that I took was:

  1. Create a image object
    let image = scene.add.image();
  2. Init physics
    scene.physics.world.enable(image)
    image.body.setAllowGravity(false) // so that your image is not affected by gravity
  3. rotate it using one of the above methods.
    image.setAngle(30);

This rotated both the image and arcade physics body as well. Try using this method and tell me if you face any problems.

6

That doesn’t work for me. Here is the code I tried:

let image = this.add.image();
this.physics.world.enable(image);
image.setAngle(30);

All it shows is a non rotated square. I feel like your right and I’m just doing something wrong haha.

7

@UltimateProGrammer one trick I’ve used for homing missiles is to use a Container and a circle physics body at the tip.

The Container is never actually rotated, the image inside the container is rotated, and then the circle physics body is part of the Container.

I have an example of that here: https://blog.ourcade.co/posts/2020/make-homing-missile-seek-target-arcade-physics-phaser-3/

I think you can apply a similar strategy for your sword and if you need more collision coverage along the blade you could create invisible gameobjects with a circle collider and rotate them within the Container relative to the Container’s origin.

I might actually try this out myself :joy:

3 Likes
8

@UltimateProGrammer You are not doing anything wrong, I was wrong. I just checked my game as well. The physics boundaries of my game objects have not rotated either. Sorry for the misleading info.

I checked the docs and found that only game objects rotate and not their Physics boundaries.

rotation :number

This body’s rotation, in degrees, based on its angular acceleration and angular velocity. The Body’s rotation controls the angle of its Game Object. It doesn’t rotate the Body’s boundary, which is always an axis-aligned rectangle or a circle.

https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#rotation__anchor

9

4 Likes
10

I gave my idea a try and it can work. @samme example is good too

Here’s a video of me figuring it out: https://youtu.be/akgFNu60Kv4

I put the source on Github as well: https://github.com/ourcade/phaser3-sword-rotation-arcade-physics

And this is the working demo: https://ourcade.github.io/phaser3-sword-rotation-arcade-physics/

3 Likes
11

The jam was do today and I ended up just using a bow and arrow, but I am marking this as solved because that is exactly what I asked the question for. I’m really looking forward to implementing this solution in the other (actual) game I’m working on!

2 Likes