# Increase object speed \*after\* collision

**URL:** <https://phaser.discourse.group/t/increase-object-speed-after-collision/2708>\
**Category:** Phaser 3\
**Created:** [June 9, 2019, 1:14pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708 "2019-06-09T13:14:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 9, 2019, 1:14pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/1 "2019-06-09T13:14:04Z")

</div>

I am working on a breakout clone which has destructible blocks that can speed up your ball. Afaik, the only way to change the speed of an object is this (I am using arcade physics):

```
const velX = Math.cos(angle) * newSpeed
const velY = Math.sin(angle) * newSpeed
this.body.setVelocity(velX, velY)

```

Now here is the problem. I have to execute this code in the collision callback between the ball and the block. This callback fires **before** the ball has changed direction due to the collision. If I query the current angle of the body’s velocity vector like this:

```
const angle = this.body.angle

```

It will give me the angle before the collision, meaning my call to _setVelocity_ will cause the ball to maintain the direction it had before the collision. The ball will effectively speed right through the block it destroys instead of bouncing off.

Is there any way to change the speed of an object without specifying a direction?  
OR is there any way to query the object’s angle **after** the collision, so I can use _setVelocity_?  
OR is there any other way to achieve this behavior?

Any help is much appreciated!

---

<div class="post-metadata">

**Author:** ![retroVX](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/retrovx/32/1491_2.png) [@retroVX](https://phaser.discourse.group/u/retroVX)\
**Post date:** [June 9, 2019, 2:29pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/2 "2019-06-09T14:29:57Z")

</div>

Hi SunOfABeach,

I don’t know if you’ve seen it but maybe this example could help? 🙂

[https://labs.phaser.io/edit.html?src=src\games\breakout\breakout.js](https://labs.phaser.io/edit.html?src=src%5Cgames%5Cbreakout%5Cbreakout.js)

---

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 9, 2019, 9:30pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/3 "2019-06-09T21:30:18Z")

</div>

Hi retroVX,

thanks for the suggestion! Unfortunately, it doesn’t implement changing the speed of the ball while maintaining its direction after the collision.

---

<div class="post-metadata">

**Author:** ![Cannabijoy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cannabijoy/32/1511_2.png) [@Cannabijoy](https://phaser.discourse.group/u/Cannabijoy)\
**Post date:** [June 9, 2019, 11:00pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/4 "2019-06-09T23:00:18Z")

</div>

If you use Matter.js physics, there is a plug-in that allows for an addOnCollideEnd function. I’m wondering if you could use a time delay inside of your collision function. Something like:

```
this.time.addEvent({
delay: 100,
callback: speedUp,
context: this

});

function speedUp(){

this.body.setVelocity(velX, velY)

 }

```

You may have to mess with the delay number to find something suitable, but it seems like it should work.

---

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 10, 2019, 9:37am UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/5 "2019-06-10T09:37:02Z")

</div>

Hey Cannabijoy,

I was experimenting around with the time delay and while that would work, I found a different solution. When I call [this method](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.World.html#step__anchor)

```
this.scene.physics.world.step(0)

```

before calling _setVelocity_, I get the angle after the collision. I am not sure why that works, because I pass 0 as the argument, which means that it should advance the world simulation by 0 seconds. It’s pretty hacky, but I prefer it to a time delay, because you can never be sure what the right delay needs to be.

I still wish there was a cleaner solution.

Thanks though!

---

<div class="post-metadata">

**Author:** ![Cannabijoy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cannabijoy/32/1511_2.png) [@Cannabijoy](https://phaser.discourse.group/u/Cannabijoy)\
**Post date:** [June 10, 2019, 10:20am UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/6 "2019-06-10T10:20:07Z")

</div>

I’m glad you found a solution. I really think you should give matter physics a try. I have a mobile game that features a slingshot, and then it counts every time the sprite bounces off a wall. The addOnCollideEnd function is perfect because it does exactly what I need immediately, and the bounce is very realistic without the need for complex math functions. Just a suggestion, but your game sounds fun and hopefully I’ll be able to play the soon!

---

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 10, 2019, 12:55pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/7 "2019-06-10T12:55:00Z")

</div>

Yes, I’ll consider using matter physics next time. I’m starting to see the limitations of arcade physics. If you want to check out my game, go here:

> **[Sun0fABeach/breakout](https://github.com/Sun0fABeach/breakout)**
>
> Classic breakout done in Vue + Phaser 3. Contribute to Sun0fABeach/breakout development by creating an account on GitHub.

Cheers

---

<div class="post-metadata">

**Author:** ![Cannabijoy](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cannabijoy/32/1511_2.png) [@Cannabijoy](https://phaser.discourse.group/u/Cannabijoy)\
**Post date:** [June 10, 2019, 1:59pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/8 "2019-06-10T13:59:12Z")

</div>

Thanks! I can’t figure out how to open it on my phone, and I use my phone for everything lol. I’ll definitely pull out the laptop and try it when I get a chance though. I love breakout games, and used to be obsessed with Arkanoid.

---

<div class="post-metadata">

**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:** [June 10, 2019, 8:19pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/9 "2019-06-10T20:19:04Z")

</div>

I believe the callback happens immediately after the collision, but `body.angle` is updated only once per step, so it’s not accurate. `body.velocity` is correct, though, so you can do

```
this.body.velocity.normalize().scale(newSpeed);
```

---

<div class="post-metadata">

**Author:** ![SunOfABeach](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sunofabeach/32/1514_2.png) [@SunOfABeach](https://phaser.discourse.group/u/SunOfABeach)\
**Post date:** [June 11, 2019, 5:58pm UTC](https://phaser.discourse.group/t/increase-object-speed-after-collision/2708/10 "2019-06-11T17:58:11Z")

</div>

Excellent, that’s what I need. Thanks!