HTML5에서 달리기 애니메이션 (Walking Sprite Animation)
사용된 이미지는 하단에 첨부함 (한개의 Sprite Sheet 를 뒤집어서 반대방향 애니메이션을 구현함)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Sprite Animation(Walking) Example</title>
<style type="text/css">
canvas { border:5px solid black;}
</style>
<script type="text/javascript">
var sx = 0; //읽어올 프레임의 x좌표
var sy = 0; //읽어올 프레임의 y좌표
var w = 125; //한 프레임의 폭
var h = 125; //한 프레임의 높이
var dx = 200;
var dy = 0;
var frame_cnt = 16; //총 프레임 수
var column_cnt = 4;
var idx = 1; //현재 사용된 프레임의 인덱스
var intval; //타이머
var STATUS = "TO_LEFT";
var sprite_sheet1 = new Image();
var sprite_sheet2 = new Image();
var img = new Image();
var canvas;
var ctx;
function startAnim() {
sprite_sheet1 = document.getElementById("sprite");
sprite_sheet2 = document.getElementById("sprite2");
img = sprite_sheet1;
STATUS = "TO_LEFT";
clearInterval(intval);
sx = 0;
sy = 0;
idx = 1;
canvas = document.getElementById("canvas1");
if(!canvas.getContext) {
alert('Canvas그리기를 지원하는 웹브라우저가 아닙니다');
return;
}
ctx = canvas.getContext("2d");
intval = setInterval(function(){drawFrame();},50);
}
function drawFrame() {
//console.log("1. idx="+idx+", sx:"+sx+", sy:"+sy+", dx:"+dx+", dy:"+dy);
ctx.clearRect(0,0,canvas.width,canvas.height);
if(STATUS=="TO_LEFT") {
ctx.drawImage(img,sx,sy,w,h, dx,dy,w,h);
sx += w;
dx -= 5;
if(idx!=0 && idx % column_cnt==0) {
sx = 0;
sy += h;
}
}else if(STATUS=="TO_RIGHT") {
ctx.drawImage(img,sx,sy,w,h, dx,dy,w,h);
sx -= w;
dx += 5;
if(idx!=0 && idx % column_cnt==0) {
sx = img.clientWidth-w;;
sy += h;
}
}
//console.log("2.idx="+idx+", sx:"+sx+", sy:"+sy+", dx:"+dx+", dy:"+dy);
idx++;
//마지막 프레임이라면 다시 처음 프레임으로 되돌아 간다
if(idx>frame_cnt) {
idx = 1;
if(STATUS=="TO_LEFT") {
sx = 0;
}else if(STATUS=="TO_RIGHT") {
sx = img.clientWidth-w;
}
sy = 0;
}
if(dx<=0 && STATUS=="TO_LEFT") {
idx = 1;
sx = img.clientWidth-w;
sy = 0;
STATUS = "TO_RIGHT";
img = sprite_sheet2;
}else if(dx>=canvas.width-w && STATUS=="TO_RIGHT") {
idx = 1;
sx = 0;
sy = 0;
STATUS = "TO_LEFT";
img = sprite_sheet1;
}
//if(idx>frame_cnt) clearInterval(intval);
}
function stopAnim() {
clearInterval(intval);
}
</script>
</head>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<p>
<input type="button" value="Start Animation" onclick="startAnim();">
<input type="button" value="Stop Animation" onclick="stopAnim();">
<div style="visibility: hidden;">
<img id="sprite" src="walking_sprite_sheet.png">
<img id="sprite2" src="walking_sprite_sheet2.png">
</div>
</body>
</html>
사용된 Sprite Sheet
아래의 이미지는 왼쪽을 향해 달리는 프레임을 가진 스프라이트 시트(Sprite Sheet)이다. 위의 예제에서는 오른쪽으로 달리는 애니메이션을 구현할 때 아래의 이미지를 뒤집어서 새로 저장한 walking_sprite_sheet2.png 파일을 사용하였다.
