スプライトシートの使い方

1.スプライトシートとは

スプライトシートとは複数のグラフィックをグリッド状に並べた1枚の画像のことです。
今回はオダギリ君のスプライトシート(character_odagiri_walk.png)を見本に、
ブラウザでアニメさせる利用方法を解説します。

画像を表示させるためには読み込みが必要です。上のオダギリ君の画像を全匹バラして保存していると16回も読み込まなければいけませんが、スプライトシートを使えば読み込みは1回で済みます。
沢山読み込むものがあるとパフォーマンスが下がるので読み込み効率を上げることは重要です。

2.スプライトシートの使い方

準備するものは、以下の4つです。
①HTML5ファイル
②JS(ジャバスクリプト)ファイル
③CSS(スタイルシート)
④画像フォルダ
 (スプライトシートはこの画像フォルダの中に入れる)

準備が整ったら記述を始めます。
最初にHTML5ファイルです。
JSファイルとCSSを読み込ませ、canvas要素を書き込み、画像を表示させます。

canvasというのはジャバスクリプトでコントロールできる描画領域のことです。

canvas要素にはid名を付けます。
canvas要素の外側をdivでくくって、こちらにもid名をつけます。

index.htmlの中身

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スプライトシートの使い方</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="game.js"></script>
</head>

<body>

<div id="dogbox"><canvas width="320" height="320" id="cvs_dog"></canvas></div>
<img id="dogwalk" src="img/character_odagiri_walk.png" width="128" height="128" alt="オダギリ君" />

</body>
</html>

上記htmlをブラウザで表示すると、下記の様な表示になります。
まだcanvas部分には何もありません。

 

次にCSSを記述します。
canvas領域を分かりやすくするために枠線を表示し、オダギリ君の画像を隠します。
※このCSSがなくてもJSは動きますが、読み込んだ画像をそのまま表示しておくと邪魔なので隠します。

style.cssの中身

@charset "utf-8";
#cvs_dog{
	border: 1px solid #F69;
	}
#dogwalk{
	display:none;
	}
    

id名dogwalkはHTMLでimg要素に付加してください。


枠線を表示させ、オダギリ君を消せました。

 

最後にJSを記述していきます。

game.jsの中身

// JavaScript Document
var g_canvas;
var g_dogimg;
var g_timerID;
var g_timerCount =0;
window.addEventListener('load',initGame,false);

function initGame(){
	g_canvas = document.querySelector('#cvs_dog');
g_dogimg = document.querySelector('#dogwalk');
g_timerID =setInterval(timerDraw, 200);
	}
	
	function timerDraw(){
		var context = g_canvas.getContext('2d');
		drawDog(context,0,0);
		g_timerCount ++ ;
		}
		
	function drawDog(context, x, y){
		context.clearRect(0,0,320,320);
		var anime = g_timerCount % 4 * 32;
		var animewalk = g_timerCount % 32 * 10;
		context.drawImage(g_dogimg,0,anime,32,32,animewalk,y,32,32);
		}
    

以上をJSファイルに書き込めば動くようになる筈ですが、これを順番に説明します。

最初にこの部分。

// JavaScript Document
var g_canvas;
var g_dogimg;
var g_timerID;
var g_timerCount =0;
window.addEventListener('load',initGame,false);

変数を準備します。
変数の名前がg_canvas、
変数の名前がg_dogimg、
変数の名前がg_timerID、と行番号4までは書いてあります。

(変数というのは値を入れる箱のようなものです)

行番号5は変数g_timerCountの値を0としました。

行番号6が、ブラウザ上でプログラムを実行するための命令です。

function initGame(){
	g_canvas = document.querySelector('#cvs_dog');
g_dogimg = document.querySelector('#dogwalk');
g_timerID =setInterval(timerDraw, 200);
	}
    

この部分では主に先ほど名前をつけた変数の中身について書いています。
変数g_canvasの中身は#cvs_dog(canvasにつけたid名です)。
変数g_dogimgの中身は#dogwalk(スプライトシートにつけたid名です)。

行数11の(timerDraw, 200)は1秒間に何枚の絵を使って動くかという意味です。
1000÷nで表すことができ、今回は数値を200にしたので1000÷200=5/枚秒となります。

これで行数9から12までがinitGameで実行されます。

    	function timerDraw(){
		var context = g_canvas.getContext('2d');
		drawDog(context,0,0);
		g_timerCount ++ ;
		}
		
	function drawDog(context, x, y){
		context.clearRect(0,0,320,320);
		var anime = g_timerCount % 4 * 32;
		var animewalk = g_timerCount % 32 * 10;
		context.drawImage(g_dogimg,0,anime,32,32,animewalk,y,32,32);
		}
    

行数15はcanvas内に描画するために必要なプログラムです。2dを指定しておきます。

行数16の(context,0,0)は行数20でdrawDogを実行するときに代入する値。
行数17は元の数に毎回+1していくという意味です。

cleaRect(0,0,320,320)でcanvas(320×320)内に描画されたオダギリ君を毎回消去します。
消去しないと描画されたオダギリ君が重複して表示されてしまいます。
cleaRectの()内の意味:(基準点のx座標,基準点のy座標,幅,高さ)

行数22の変数animeは
g_timerCount÷4の余りに32を掛けることを意味します。

0×32=0
1×32=32
2×32=64
3×32=96
0×32=0
1×32=32
2×32=64
3×32=96

これが繰り返されていきます。

オダギリ君のスプライトシートは1コマ32px×32px、全16コマでできています。
画像は5/枚秒で更新されるので更新されるごとに、
①→②→③→④と32pxずつ画像が縦方向にずれてアニメします。

変数animewalkはオダギリ君が歩いて行く横方向の範囲を表しています。
canvasの横幅が320pxなので端まで行く、ということです。

最後にcontext.drawImage(g_dogimg,0,anime,32,32,animewalk,y,32,32)ですが、
これは(img要素 , コピー元x座標 , コピー元y座標 , コピー元の幅 , コピー元の高さ , 描画先x座標 , 描画先y座標 , 描画先の幅 , 描画先の高さ)を表します。

デモページ

オダギリ君が歩く。

サンプルデータ

ここで説明したデータです。

サンプルデータ
(ダウンロード後にzipを解凍して、index.htmlをブラウザで開いてください。オダギリ君が歩きます。)