Entity Rotation when facing down


#1

Hi, I’ve forked @Will’s Flappy Bird and I am editing it. When you click, the bird entity rotates upwards by around 20°, then falls down, angling it to face straight down. One of the things I want to do is rotate the bird entity back up when it is facing this direction, but I don’t know how to go about this. Here is where (I think) the rotation starts when you click. (Sorry if it’s the wrong place):

    this.flapListener = this.flap.bind(this);
    window.addEventListener('mousedown', this.flapListener, { passive: false });
    window.addEventListener('touchstart', this.flapListener, { passive: false });

    this.on('enable', function () {
        window.addEventListener('mousedown', this.flapListener, { passive: false });
        window.addEventListener('touchstart', this.flapListener, { passive: false });
        this.state = 'getready';
        
        app.fire('sine:start');
        
    });
    this.on('disable', function () {
        window.removeEventListener('mousedown', this.flapListener, { passive: false });
        window.removeEventListener('touchstart', this.flapListener, { passive: false });
    });
    
    
};

Bird.prototype.reset = function () {
    var app = this.app;

    this.velocity = 0;
    this.state = 'getready';
    this.entity.setPosition(this.initialPos);
    this.entity.setRotation(this.initialRot);
    app.fire('bird:flapstart');
};

Bird.prototype.flap = function (event) {
    var app = this.app;

    if (event) {
        // Prevent the function from being called twice when a tap generates
        // both a mousedown and a touchstart event
        event.preventDefault();
    }

Thanks for any help, and please tell me if there’s any other code that needs to be shown :grinning:


#2

What do you mean by this?


#3

https://youtu.be/W3D8DZa-xCI sorry it’s not a gif, i’m on mobile at the minute. when the bird falls down (when it’s after no press for ~2 seconds, the bird goes back up again smoothly, not just instantly back to the angle)


#4

Still not sure what you are currently aiming to do? Do you want the rotation to be slower? Or to be instant? Not to look down at all?


#5

I want the rotation to be slower, not instant like it is in my game: (when you fall and jump again) https://playcanv.as/p/ITpR6n2t/


#6

Looking at the code for the game: https://playcanvas.com/editor/code/375389?tabs=4554270

The rotation is done on lines 150 - 153. You could change it so that you have a target z rotation to lerp towards over time rather than having it mapped directly to the Y velocity of the of player.


#7

@yaustar How would this be done?


#8

It has just come to my attention that pc.math.lerp exists. Is this significant?