Move the object in the direction of its frame using the 2d html5Canvas and ctx.rotate functions

Question

The type name says it all, I'm trying to move the object forward depending on the angle it is at.

Here is my 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 does not move according to var angle .

EDIT

I could not understand why my code did not work, so I used a sprite sheet containing 36 different angles. This works, but the rotation is too fast. If someone could tell me why the above does not work properly, or how I would like to make the following function slower:

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

By slower, I mean when the left key is held down, angle+10; currentFrame++; angle+10; currentFrame++; rises to speed, and adding more frames may take too long.

EDIT

Added Jfiddle for my original question, the angle variable moves with rotation, for example, if the object is facing right, the angle will be 90, but the object still does not look like moving it to the right, although the camera does.

Answer 1

Try changing 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 as little as possible, as well as provide more sprites. More sprites will not be slower, but will use more memory and increase the initial tad load time.

UPDATE

Well, there is something you need to fix (the above one is one and they are fixed in the fiddle).

Modified violin

Other things:

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); } 

Since the angle will determine a negative or positive value, which you just need to add or subtract depending on the intention, so to increase, add both values ​​so that down subtracts both values. The corner will assume that the triangle is correctly signed.

There are several things in your draw function:

 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 that everything is working.

Images should always be drawn correctly. This is because it is always an angle of 0 degrees. This will save you some problems. I compensated for this, it is a pull function, adding 90 degrees to the corner, but it should rather be adjusted in the sprite itself.

In addition, I changed my key handler (see the demo for details).