Best way to go about a screen shake?

Help & Support
1

Project

Hi, so when I die on my game (Flappy Bird) I want to make the screen shake. What is the best way to go about this? I’m not really sure on where to start.

1 Like
2

Hi @ThePastaNebula,

You can achieve this effect by animating the camera using the Tween library:

https://developer.playcanvas.com/en/tutorials/tweening/

Check the tween yoyo property :wink:

2 Likes
3

Hello @Leonidas!

I am having issues doing this, since in my project, tween.js is different, and I’m unsure on how to use it.

There is a tween function going on in scoreboard.js but I can’t figure out how to replicate it, since it’s a completely different structure than on the documentation.

4

I think your project is using an older version of the tween.js library, not the Playcanvas branded one.

You can either check how that library is used to learn how to work with it, or update to the Playcanvas tween library.

5

Would it work if I used two different tween scripts? I don’t want to do anything that could mess up the scoreboard

6

Not sure, but it may, give it a try. You can use checkpoints to save your current progress in the project, in case you break something.

7

Alright, thanks, I’ll try that!

1 Like
8

@Leonidas - Instead of shaking the camera when you die, I want to use tweening to fade the get ready and tap signs, in. How do you tween the opacity of sprites?

9

Here is an example of a fade in, using tween custom values:

var data = {
    value: 0
};

this.entity.sprite.opacity = data.value;

this.app
   .tween(data)
   .to({value: 1}, 1.0, pc.BackOut)
   .on('update', function(){

      this.entity.sprite.opacity = data.value;

   }.bind(this))
   .start();
11

Hi @Leonidas - On trying this code, it worked – but for some reason it gives me an error:

image
image1101×169 46.6 KB

The code that has stopped working now:

    app.on('game:audio', function (slot) {
        this.entity.sound.play(slot);
    }, this);

Why has this happened?

12

Hay @ThePastaNebula!

Are you sure it shouldn’t be:

this.app.on('game:audio', function (slot) {
    this.entity.sound.play(slot);
}, this);
13

Hello @Albertos,

Normally, yes, you would be correct. However, I have a variable:

var app = this.app;

so it doesn’t affect it. Thank you for replying though :smiley:

14

Aha, it is often forgotten (also by myself) so I always give the suggestion when I see something like this. :yum:

1 Like
15

Actually, I figured out how to do this now. Using tween was very inefficient, :smiley:

16

Are you also sure that the entity has a sound component? It looks like that component is undefined.

17

Ah oké, great! :ok_hand: