Move an object in the direction its facing using 2d html5Canvas and ctx.rotate function

Question

The title kind of says it all, I am trying to move an object forward depending on the angle it is at.

Here is my relevant code:

xView =  this.x-this.width/2;
yView =  this.y-this.height/2; 
playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, xView, yView, this.width, this.height); 
      playerCtx.save();     
      playerCtx.clearRect(0, 0, game.width, game.height);
      playerCtx.translate(xView, yView);
      playerCtx.rotate(angle *Math.PI/180);
      playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, -xView, -yView, this.width, this.height); 
      playerCtx.restore();
    }
        if(Game.controls.left) {
    angle-=1; 
        if(Game.controls.up){
        this.x +=   this.speed * Math.cos(angle * Math.PI / 180);
        this.y -=   this.speed * Math.sin(angle * Math.PI / 180);
        }

The object doesn't move corresponding to the var angle.

EDIT

I couldn't figure out why my code wasn't working so I instead used a sprite sheet containing 36 different angles. This works, however the rotation is too fast. If anyone could tell me why the above isn't working properly, or how I would go about making the following function go slower:

if(Game.controls.right) {
    currentFrame++;
    angle+=10;
 }

By slower I mean when the left key is held down, angle+10; currentFrame++; are raising to fast, and adding more Frames may take too long.

EDIT

Added a Jfiddle for my original question, the angle variable moves with the rotation, for an example if the object is facing Right, angle will equal 90, but the object still doesn't look like its moving to the right, although the camera does.

score 15 · Accepted Answer · 2016-04-23T13:25:59.897

Try to change cos and sin around as well as the sign:

this.x += this.speed * Math.cos(angle * Math.PI / 180);
this.y += this.speed * Math.sin(angle * Math.PI / 180);

To make your rotation (in the edited part of the question) you need to reduce the steps basically as well as provide more sprites. More sprites won't be slower but will use more memory and increase initial load time a tad.

UPDATE

Ok, there are a few things you need to correct (the above is one of them and they are corrected in the fiddle).

Modified fiddle

The other things are in:

In your update() method:

// Add both here as angle with correctly use neg/pos
if (Game.controls.up) {
    this.x += this.speed * Math.cos(angle * Math.PI / 180);
    this.y += this.speed * Math.sin(angle * Math.PI / 180);
}

/// Sub both here as angle with correctly use neg/pos
if (Game.controls.down) {
    this.x -= this.speed * Math.cos(angle * Math.PI / 180);
    this.y -= this.speed * Math.sin(angle * Math.PI / 180);
}

As the angle will determine the negative or positive value you just need to add or subtract depending on the intention, so for up add both values, for down subtract both value. The angle will make sure the delta is correctly signed.

In your draw function there are a few things:

Player.prototype.draw = function (context, xView, yView) {

    // Add the half width instead of subtract it
    xView = this.x + this.width / 2;
    yView = this.y + this.height / 2;

    // not needed as you clear the canvas in the next step
    //playerCtx.drawImage(imgSprite, 0, 0, ....
    playerCtx.save();
    playerCtx.clearRect(0, 0, game.width, game.height);

    // make sure pivot is moved to center before rotation
    playerCtx.translate(xView, yView);

    // rotate, you should make new sprite where direction
    // points to the right. I'm add 90 here to compensate
    playerCtx.rotate((angle + 90) * Math.PI / 180);

    // translate back before drawing the sprite as we draw
    // from the corner and not the center of the image
    playerCtx.translate(-xView, -yView);

    playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);

    playerCtx.restore();
}

Now you will see the things works.

You images should always be drawn pointing right. This is because that is always angle at 0 degrees. This will save you some trouble. I compensated for this is the draw function by adding 90 degrees to the angle but this should rather be adjusted in the sprite itself.

In addition I modified your key handler (see demo for details).

I'v switched them around, I'm still getting the same problem, and Is there any other way to slow down `if(Game.controls.right)`? Adding more to the sprite sheet would take a while. Thanks for your quick response btw. — user2582299, Oct 14 '13 at 07:17
@user2582299 could you setup a fiddle to test with please. Much easier to pinpoint errors that way. — , Oct 14 '13 at 07:27
@user2582299 thanks, the fiddle helps. Please see updated answer and that your player moves correctly now. — , Oct 16 '13 at 06:06
Thanks for your help! The canvas wasn't following the player in your Fiddle but I figured it all out now. Great stuff thanks a lot! — user2582299, Oct 16 '13 at 22:05

Move an object in the direction its facing using 2d html5Canvas and ctx.rotate function

1 Answers1