HTML5에서 스프라이트 애니메이션 (Sprite Animation) 구현 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Sprite Animation Example</title>
<style type="text/css">
canvas { border:5px solid black;}
</style>
<script type="text/javascript">
var x = 0; //읽어올 프레임의 x좌표
var y = 0; //읽어올 프레임의 y좌표
var w = 64; //한 프레임의 폭
var h = 64; //한 프레임의 높이
var frame_cnt = 25; //총 프레임 수
var idx = 0; //현재 사용된 프레임의 인덱스
var intval; //타이머
function startAnim() {
clearInterval(intval);
x = 0;
y = 0;
idx = 0;
intval = setInterval(function(){drawFrame();},50);
}
function drawFrame() {
var c = document.getElementById("canvas1");
if(!c.getContext) {
alert('Canvas그리기를 지원하는 웹브라우저가 아닙니다');
return;
}
var ctx = c.getContext("2d");
ctx.clearRect(0,0,w,h);
var img = document.getElementById("sprite");
ctx.drawImage(img,x,y,w,h, 0,0,w,h);
x += w;
idx++;
if(idx % 5==0) {
x = 0;
y += h;
}
if(idx>frame_cnt) clearInterval(intval);
}
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<p>
<input type="button" value="Start Animation" onclick="startAnim();">
<div style="visibility: hidden;">
<img id="sprite" src="explosion-sprite-sheet.png">
</div>
</body>
</html>
위에서 사용된 Sprite Sheet
