解 説

イメージをタイルシートにするとパラパラ漫画風のアニメーションを作成できます。
flower4

簡単な例で試してみましょう。上のタイルシートの中の2つのイメージとdrawImage()メソッドを使用してアニメーションを作成します。

2枚のイメージ画像を交互に表示するとgifアニメのような効果が得られます。
その方法として、2枚のイメージ画像に番号を付けます。1枚目は0、2枚目は1とします。0と1を一定時間で入れ替えるようにすればよいのです。

この仕組みをプログラム的に書くと以下のようになります。

var count = 0;
counter++;
if(counter > 1){
counter = 0;
}

次にタイルシートのそれぞれの画像の表示したい部分をx座標、y座標で指定します。1行だけのタイルシートならx座標の指定だけでOKです。たとえば32pxの画像が横に並んでいる場合だと最初の画像はx座標0pxで2枚目の画像はx座標32pxとなります。これをプログラム的に書くと先ほどの counterの値「1」か「0」に32pxを掛けてやります。

32*counter;

一定時間で動作を繰り返すにはsetInterval()メソッドを使います。

setInterval(drawScreen,100)

drawScreenは自分で作成した関数になります。100ミリ秒ごとにdrawScreen()に設定した内容を実行します。

以下は実際の例です。色の違う花を交互に表示するものです。

サンプルページはこちら

HTMLのソースです。

JavaScriptのソースです。