Javascript Canvas Game - 移動するときに宇宙船を傾ける

Question

私はjavascriptで初心者です。小惑星を避けるために宇宙船を動かすjavascript宇宙ゲームを作ろうとしています。

ここにはプレビューリンクがあります。デスクトップや携帯でも動作します： http://dylanmadigan.net/_digital-work/game-2/5-tilt/index.html

移動するときに、船がわずかに左右に傾きます。 スプライトシートで船を傾けたり、実際にJavaScriptを回転させる方が良いですか？

現在、私はスプライトシートでこれを行っています。船のアニメーションは2つのフレームです（ブースターの炎が点滅します）。私は1つのスプライトシートに、それぞれの直線、左、右に専用の2つのフレームを持っています。 view player sprite sheet here これは、スプライトが左右に動いたときに点滅するように見えます。そして時々、それはただ消えていくだけです。なぜ私は分からない。

スプライトシートがプリロードされているため、ちらつきを防ぐことができると思いました。それは、私が傾斜した宇宙船のために4つのフレームを追加することになるまで、そうしました。

JavaScriptを使用してスプライトシートの代わりにグラフィックを回転させた方が良いでしょうか？私はちょうどスプライトシートが簡単だろうと思った。

Answer 1

船を回転させたり、スプライトを描いたり、キャンバス内を回転させる方法は関係ありません。それぞれの方法には長所と短所があります。

スケーリングされたスプライトをレンダリングするために、その中心

についてのスプライトを回転させると、その中心の周りを回転し、アルファフェードを持っている（理由は...？なぜ）

function drawSprite(ctx,img,x,y,scale,rot,alpha){ 
    ctx.setTransform(scale,0,0,scale,x,y); // Position and scale 
    ctx.rotate(rot); // rotate 
    ctx.globalAlpha = alpha; // set alpha 
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw sprite offset half its size 
} 

あなたはあなただけの1つの船のスプライトを持っており、エンジンを作ることができます変換し、アルファ

ctx.setTransform(1,0,0,1,0,0); // sets default transform 
ctx.globalAlpha = 1.0; // resets alpha 

リセットする必要がありますスプライトを描画行わ■別のスプライト（船を取り除き、同じサイズにしておくと簡単に位置を決めることができます）次に、アルファを使用してフェードイン/フェードアウトすることで、船舶とは独立してエンジングローを制御できます。 ctx.globalCompositeOperation = "lighter"または"screen"を設定して、より良いエンジングローを得ることもできます。通常のレンダリングでは、コンプモードを"source-over"にリセットします。

また、すべてのsetTimeoutsを使用するのではなく、​​と1つのゲームループを使用する必要があります。