5

スプライトを使用したプレーヤークラスがあり、マウスポインタの方を向くようにします。

私はこれを使用して、スプライトの回転がどうあるべきかを理解しています。

this.rotation = -(Math.atan2(this.x - mouseState.x, this.y - mouseState.y) * 180 / Math.PI);

次に、Playerクラスの描画メソッドでこれを実行します。

Player.prototype.draw = function() {
    window.ctx.save();
    window.ctx.translate(this.x + this.sprite.width / 2, this.y + this.sprite/height / 2);
    window.ctx.rotate(this.rotation);
    window.ctx.drawImage(this.sprite, this.x, this.y);
    window.ctx.restore();
}

それは何かをしますが、私が望むことではありません。スプライトは、キャンバスの左上を中心に円を描くように激しく動いているようです（x:0, y:0）。

スプライトの中心点を原点として使用して、スプライトをマウスカーソルの方に向けるにはどうすればよいですか？

4

2 に答える 2

2

あなたは逆翻訳していません。以下に追加した追加の呼び出しに注意してくださいwindow.ctx.translate。また、x値とy値の両方に負の値を追加したことに注意してください。

Player.prototype.draw = function() {
    window.ctx.save();
    window.ctx.translate(this.x + this.sprite.width / 2, this.y + this.sprite/height / 2);
    window.ctx.rotate(this.rotation);
    window.ctx.translate(-this.x + this.sprite.width / 2, -this.y + this.sprite/height / 2);
    window.ctx.drawImage(this.sprite, this.x, this.y);
    window.ctx.restore();
}

基本的に、これが行っているのは、キャンバスコンテキストセンターをオブジェクトセンターに移動（移動）し、回転（回転）してから、中心点を元の位置から戻す必要があります。

于 2013-02-19T02:52:05.323 に答える
0

Math.atan2（y、x）

y引数が最初に来て、次に。が来ることに注意してくださいx。引数を切り替えます。

また、ラジアン単位の値を返します。これは、を呼び出してみた場合にわかりますMath.atan2(1,0)。度への変換を削除します。

これは、ラジアンで測定された時計回りの回転です。

つまり、ラジアン度の変換は必要ありません。

this.rotation = Math.atan2(this.y-mouseState.y, this.x-mouseState.x);

window.ctx.rotate(this.rotation);
于 2013-02-19T00:35:16.697 に答える