HTML5 canvasを使用してみる～少し複雑ななアニメーション

少し複雑なアニメーションの作成

複雑なアニメーションを作成するには複数行、複数列のタイルシートを作成する方法があります。

複雑になったタイルシートを指定する方法

たとえば、128Ｘ128の画像をタイルシートに複数行、複数列並べます。

プログラム上ではタイルシートに並んだ画像に順番に番号を付けて管理します。

画像に付けた番号をどのように指定して画像表示を切り替えていくのかがポイントになります。

18枚の画像が2行9列に並んだタイルシートを仮定します。

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

setInterval(drawScreen,100)

setInterval()メソッドが動くと変数frameIndexに１づつ加算される仕組みを考えます。
最初にカウントの役割をする変数frameIndexを宣言して初期値を０とします。
カウントの最大値maxIndexを設定しておきます。
var frameIndex = 0;
var maxIndex=18;

表示したいタイルの座標を決める

x座標の求め方
var sourceX = (frameIndex % 9) * 128;
y座標の求め方
var sourceY = Math.floor(frameIndex / 9) * 128;

これらの座標の求め方ですが、何をしているのか実際に数値をあてはめてみましょう。setInterval()メソッドが動くと100ミリ秒ごとにframeIndexの値が１ずつ加算されていきます。
sourceXの値は次のように計算されていきます。%9とは9で割った余りということです。0/9=0で余り0、1/9=割り切れないので余り1、2/9=割り切れないので余り2、3/9=割り切れないので余り3・・・、9/9=1で余り0になります。出てきた余りの数に32pxを乗算するとそれぞれのイメージ画像のｘ座標が求まります。
128×0=0,128×1=128,128×2=256,128×3=384,・・・・そして余り0が出た時点で座標は0に戻るわけです。

ある特定の数値まで加算を行い、その特定の数値で最初に戻る繰り返しは特定の値に設定した数値で剰余を繰り返すことで実現することができます。この繰り返しはプログラムでよく使用される手法ですのでマスターしておきましょう。

y軸のほうは（frameIndex / 9）の値を小数点切捨てにすることで9の倍数ごとに128pxずつ座標が下がる事になります。
y軸の値 128x (0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,2,2,2….)

ループの仕掛けは以下のとおりで、maxIndexの数値になるまでsetInterval()メソッドが動くとframeIndexに1を加算していきます。

frameIndex++;
if (frameIndex == maxIndex) {
frameIndex=0;
}

これらの仕組みを利用したサンプル

HTMLソース

<div>
	<canvas id="canvas" width="200" height="200">
	Your browser does not support the HTML 5 Canvas. 
	</canvas>
</div>

JavaScriptソース

window.addEventListener('load', eventWindowLoaded, false);	
function eventWindowLoaded() {

	canvasApp();

}


function canvasApp(){

	if (!canvas || !canvas.getContext) {
		return;
	}else{
		var theCanvas = document.getElementById('canvas');
		var context = theCanvas.getContext('2d');
	}

	var myFlowers=new Image();
	myFlowers.addEventListener('load', eventFlower, false);
	myFlowers.src="flower3.png";
	var frameIndex=0;
	var maxIndex=18;
	function eventFlower() {
		startUp();
	}

	function drawScreen() {

		//draw a background so we can wee the Canvas edges
		context.fillStyle="#00ffff";
		context.fillRect(0, 0, 500, 500);
		var sourceX = (frameIndex % 9) *128;
		var sourceY = Math.floor(frameIndex / 9) *128;

		context.drawImage(myFlowers, sourceX, sourceY, 128, 128, 30, 30, 128, 128);

		frameIndex++;
		if (frameIndex == maxIndex) {
			frameIndex=0;
		}
	}

	function startUp(){

		setInterval(drawScreen, 800 );
	}
}