Giving velocity to an object based on rotation

Cocos Creator
#1

Currently there is no physics implemented so I kinda want to create my own. Here I try to move an object based on its rotation:

    properties: {

       speed: 2,
},

update: function (dt) {
    this.node.x += Math.cos(this.node.rotation) * this.speed;
    this.node.y += Math.sin(this.node.rotation) * this.speed;
},

But the problem is that the object is not behaving as intended to, it’s moving in random directions.

Update:
The code now is:

update: function (dt) {
        var vX = Math.cos(this.node.rotation * Math.PI / 180) * this.speed;
        var vY = Math.sin(this.node.rotation * Math.PI / 180) * this.speed;
        this.node.x += vX * dt;
        this.node.y += vY * dt;
    },

But the object is not moving at all.

#2

Hey,

At first glance i see at least one wrong thing - you should update x&y based on dt.
So the code to update x would be:

// Projection of velocity vector on Ox
const vx = this.speed * Math.cos(this.node.rotation * Math.PI / 180);
// Update x position based on time passed
this.node.x += vx * dt;

This code will move your object in the directon based on node rotation and the speed.

p.s.: Math.cos accepts angle in radians, so make sure the node.rotation is in radian

UPDATED: thx @Boby

#3

Node.rotation is in degrees, so you should transform the value returned in radians; multiply it by π/180.

#4

Thank you very much for the help, The code now is:

update: function (dt) {
        var vX = Math.cos(this.node.rotation * Math.PI / 180) * this.speed;
        var vY = Math.sin(this.node.rotation * Math.PI / 180) * this.speed;
        this.node.x += vX * dt;
        this.node.y += vY * dt;
    },

But the object is not moving at all. (I’m guessing something to do with deltaTime)

#5

@Abdou23

  1. did you try to set big value for speed? Say, 50.
  2. set the speed through Cocos Creator property window, not in code (property window values override values in component properties field). Alternatively you can set speed of the component in onLoad method.
  3. If nothing works, you can put here the full code of the component (or provide a link to the source code). So one can see the whole picture.
#6

@garek

Increasing the speed made it move, but still not in the direction intended.
The code above is the entire class. I have an object that spawns this object according to its rotation:

properties: {
        bullet: {
            default: null,
            type: cc.Prefab,
        },
    },

   update: function (dt) {
        this.node.on('touchstart', function (event) {
            this.spawnBullet();
        }, this);
    },

    
    spawnBullet: function () {
        var scene = cc.director.getScene();
        var node = cc.instantiate(this.bullet);
        node.parent = scene;
        node.position = this.node.position;
        node.rotation = this.node.rotation;
    }
#7

first of all, subscribing event in update method is a bad idea, because it can be called 60 times per second. Use onLoad instead. This may fix your issue.

#8

@garek
The spawn itself works fine, and only one node gets spawned at a touch, I moved it anyways to the onLoad function, but the movement still has a problem.

#9

@Abdou23

change y increment sign like this:

this.node.y += -1 * vY * dt;
#10

Have you tried to test my code ? Maybe create a simple object give it different rotations and see if it works? Because at this point I can’t figure out whether it’s the code or something with the Engine itself.

#11

I cant test your code, because you put just a part of it here. I could write it for you, but it is tedious and pointless in terms of learning. So best what i can do is an advice.
Try to debug things with console.log in the browser and see what is wrong.

#12

@garek
I did state before that it was the entire code I have. But I appreciate that you tried to help.
Thank you.

Maybe someone in the team could offer something.

#13

Are your bullets flying in the same direction no mater what the rotation of the spawning object is? In the bullet’s update function, log the bullet’s rotation to see if the value is correct.

I haven’t tried creator too much and I don’t know what exactly cc.instantiate returns, but I see you change the rotation of returned object node.rotation = ... and in the bullet update you get the rotation from bullet’s node this.node.rotation.
So, maybe, when you set the rotation in the spawnner, you should write something like node.node.rotation = .... I also recommend changing that var node variable name to newBullet or something else, since your name is very confusing.

#14

@Boby
Instantiate creates the Prefab: (bullet) .
The initial rotation of the bullet is correct, the problem is with the movement direction, if the rotation is in the positive for example ( 0 ~ 180) it moves up and right, if it’s in the negative it moves down.

#15

vector(cos(a), sin(a)) is anticlockwise
getRotation() is clockwise

Try this instead:

update: function (dt) {
    var rotationRadians = this.node.rotation * (Math.PI / 180)
    var vX = Math.cos(-rotationRadians) * this.speed;
    var vY = Math.sin(-rotationRadians) * this.speed;
    this.node.x += vX * dt;
    this.node.y += vY * dt;
}
#16

@Abdou23 hey, i build a game in the Cocos Creator and made it as tutorial. The game uses builtin physics. So you may find some answers there. Tutorial contains source code, explanation and a playable game.

Here is the topic about the game