[JavaScript] スプライトシートアニメーション入門：JavaScriptでキャラクターアニメーションを実装

はじめに

現在、制作しているブロック崩しゲームを開発する中で、スプライトシートを使ったアニメーション処理が出来るようになったので、備忘録メモを含めて記事にしておきます。

スプライトシートは、複数の画像（フレーム）を1つの画像ファイルにまとめたもので、これを使ってキャラクターが動いているように見せることができます。

この入門記事では、JavaScriptを使ってスプライトシートアニメーションを実装する方法を学びます。

スプライトシートとは？

スプライトシートは、複数の画像（フレーム）を1つの大きな画像にまとめたものです。

たとえば、キャラクターが歩くアニメーションを作るとき、歩きの各フレームを横に並べて1つの画像ファイルにします。

この方法は、画像の数が多い場合でも、Webページの読み込み速度を向上させるために非常に有効です。

以下の画像は、Stable Diffusion checkpointで作成しています。

[画像生成AI] Stable Diffusion Checkpoint 導入ガイド

/posts/generative-ai_stable-diffusion-checkpoint-install/

スプライトシートの例

例えば、キャラクターが歩くアニメーションを作成する場合、次のようなスプライトシートが考えられます：

[歩き1] [歩き2] [歩き3] [歩き4]

それぞれの「歩き1」から「歩き4」はキャラクターの歩行のフレームを表しています。

アニメーションの基本的な仕組み

アニメーションの基本は、スプライトシート内のフレームを時間ごとに順番に表示することです。

たとえば、歩行のアニメーションでは、フレーム1 → フレーム2 → フレーム3 → フレーム4と順番に表示されます。

JavaScriptでアニメーションを作るためには、以下のステップが必要です：

スプライトシートをキャンバスに描画。

フレームを順番に切り替えて表示。

フレーム間の時間を制御し、スムーズにアニメーションさせる。

JavaScriptでの実装

ここから、スプライトシートを使ったアニメーションを実装する方法を見ていきましょう。

必要な準備

スプライトシートの画像ファイル（PNGやJPEGなど）。
HTML5の <canvas> 要素。
JavaScript でアニメーションのフレームを切り替え、描画するコード。

スプライトシートの読み込み

まず、スプライトシート画像をJavaScriptで読み込みます。ここでは new Image() を使って画像を読み込んでいます。

const spriteSheet = new Image();
spriteSheet.src = 'sprite_sheet.png'; // スプライトシート画像のパス

実装例：キャラクターが歩くアニメーション

実際にキャラクターが歩くアニメーションを作成してみましょう。ここでは、スプライトシートの横方向に並べられた4つの歩行フレームを順番に表示するアニメーションを作ります。

HTML と JavaScript のコード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>スプライトシートアニメーション</title>
    <style>
      body {
        text-align: center;
      }
      canvas {
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

      const spriteSheet = new Image();
      spriteSheet.src = "sprite_sheet.png"; // スプライトシート画像のパス

      const frameWidth = 32; // 各キャラの幅
      const frameHeight = 32; // 各キャラの高さ
      const totalFrames = 4; // アニメーションフレーム数

      let currentFrame = 0;
      let x = 100, y = 100; // キャラクターの位置

      // アニメーションのフレーム更新間隔（100msごとにフレームを更新）
      const frameInterval = 100;

      function updatePaddleAnimation() {
        currentFrame = (currentFrame + 1) % totalFrames; // アニメーションフレームを進行
      }

      // アニメーションループ
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 画面のクリア

        // スプライトシートから現在のフレームを切り取って描画
        ctx.drawImage(
          spriteSheet,
          currentFrame * frameWidth, 0, frameWidth, frameHeight, // スプライトシート内で表示する部分
          x, y, frameWidth, frameHeight // キャンバスに描画する位置
        );

        updatePaddleAnimation(); // アニメーションフレームを更新

        setTimeout(draw, frameInterval); // 指定した間隔で繰り返し呼び出し
      }

      spriteSheet.onload = function () {
        draw(); // アニメーション開始
      };
    </script>
  </body>
</html>

説明：

frameWidth と frameHeight：スプライトシート内で各フレームのサイズを指定します。
currentFrame：現在のフレームを保持し、順番に更新します。
updatePaddleAnimation：アニメーションのフレームを進行させる関数です。
setTimeout(draw, frameInterval)：アニメーション更新間隔を調整しています。これにより、指定したフレーム間隔でアニメーションが進行します。

アニメーションをより効果的にする方法

フレーム間隔の調整 frameInterval の値を変更することで、アニメーションの速度を調整できます。値が小さければアニメーションが速くなり、大きければ遅くなります。
ループの制御 アニメーションをループさせるか、特定のフレームで停止させるかを選ぶことができます。例えば、歩きのアニメーションが終了した後、停止させることができます。
複数のアニメーションの組み合わせ キャラクターに複数のアニメーション（歩く、ジャンプする、攻撃するなど）を組み合わせて、状況に応じて切り替えることができます。これは、currentFrame を異なるアニメーションに切り替えることで実現できます。

まとめ

スプライトシートを使ったアニメーションは、ゲームやインタラクティブなウェブアプリケーションで広く使用されており、効率的で視覚的に魅力的なキャラクターやオブジェクトの動きを実現できます。

JavaScriptでは、canvas を使ってこれらのアニメーションを簡単に描画することができます。

この入門記事では、基本的なスプライトシートの使い方からアニメーションの実装方法までを紹介しました。

アニメーションの速度やフレーム間隔を調整することで、キャラクターの動きを細かく制御できます。
さらに、複数のアニメーションを組み合わせて、よりリッチな表現が可能です。

スプライトシートアニメーションを活用して、楽しいインタラクティブな体験を作成してみてください！

はじめに#

スプライトシートとは？#

[画像生成AI] Stable Diffusion Checkpoint 導入ガイド

スプライトシートの例#

アニメーションの基本的な仕組み#

JavaScriptでの実装#

必要な準備#

スプライトシートの読み込み#

実装例：キャラクターが歩くアニメーション#

HTML と JavaScript のコード例#

説明：#

アニメーションをより効果的にする方法#

まとめ#

💬 コメント