Html5 canvas sprite animation

Sprite Animation
Codin9 café third html5 canvas
HTML5Canvas
leesanghun

Sprite animation이란?
Canvas 기본 설정
이미지 가져오기
drawImage 알아보기
좀 더 smooth하게 !
QnA
content
Html5 canvas sprite animation
Spilte animation 실행

Sprite animation이란?
Sprite sheet and Texture
스프라이트 시트와 텍스처
텍스처가 프레임마다 물리적으로 다른 비트맵 파일이면 프레임을 진행할 때마다 텍스처 전환이 발생한다.
텍스처 전환 처리에는 당연히 시간이 걸린다. 또한 텍스처의 GPU에 업로드가 필요할 때 추가 오버헤드가 증가한다.
일반적으로 이 문제를 해결하기 위해 각 프레임의 텍스처를 하나의 파일에 정의한다.
이것을 스프라이트 시트라고한다.
스프라이트 화면 표시에서 이용되는 도형의 무늬를 등록하고, 그 무늬에 다른 그림을 겹쳐서 합성시킬
수 있다. 고속 표시가 가능하면 연속되는 그림을 매끄럽게 움직일 수 있다.
무엇을 할 수 있을까?

4
4가지 걸어가는 형태의 각각의 텍스쳐들을 하나의 파일(Sprite.png)로 정의된 것을 이용하여
오른쪽 키(->)를 누르면 옆으로 걸어가는 간단한 애니메이션

Canvas 사용을 위한 기본 설정01
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<style>
body{
margin: 0px;
overflow: hidden;
}
</style>
<script>
window.addEventListener("load",draw,false);
function draw(){
var canvas = document.getElementById('canvas');
var content = canvas.getContext("2d");
}
</script>
</head>
<body>
<canvas id = "canvas" width = "800" height ="600"></canvas>
</body>
</html>
Keydown 실행
Sprite animation

이미지 가져 오기
객체 선언과 이미지 불러오기02
<!doctype html>
<html>
<head>
<style>
body{
margin: 0px;
overflow: hidden;
}
</style>
<script>
window.addEventListener("load",draw);
var Image = new Image()
Image.src = "Sprite.png";
function draw(){
//drawImage를 통해서 그린다.
content.drawImage(Image,0,0);
}
</script>
</head>
<body>
<canvas id = "canvas" width = "800" height ="600">
</canvas>
</body>
</html>
Keydown 실행
Sprite animation

Keydown 실행
Keydown을 통해 실행하기03
<!doctype html>
<html>
<head>
<style>
body{margin: 0px;overflow: hidden;}
</style>
<script>
window.addEventListener("keydown",move);
var Image_x = 0;
function draw(){
content.drawImage(background,0,0);
content.drawImage(Image, Image_x,0)
function move(e){
switch(e.keyCode){
case 39 : Image_x +=30;
}break;
}draw();
}
</script>
</head>
<body>
<canvas id = "canvas" width = "800" height ="600">
</canvas>
</body>
</html>
Keydown 실행
Sprite animation
Keydown – e(인자값 전달) – e.keyCode(e의 키코드 식별) – 맞는지 확인

drawImage
step1 이미지 처리 기본

drawImage
step2 이미지 확대 / 기본

drawImage
step3 이미지 자르기

Sprite animation
Sprite animation04
<!doctype html>
<html>
<head>
<style>
body{margin: 0px;overflow: hidden;}
</style>
<script>
window.addEventListener("keydown",move);
var background = new Image();
background.src = "codingcafe.png";
var Image_x = 0;var Image_y = 0;
var Image_X = 0;var Image_Y = 0;
function draw(){
//drawImage를 통해서 그린다.
content.drawImage(background,0,0);
content.drawImage(Image, Image_X, Image_Y, 100, 200,
Image_x, Image_y , 100, 200);
}
function move(e){
switch(e.keyCode){
case 39 : Image_x +=30;
Image_X +=78;
if(Image_X == (78*3))
Image_X = 0;
if(Image_x>800)
Image_x = 0;
break;
}
draw();}
Keydown 실행
Sprite animation

좀 더 smooth하게 !
canvas에서이미지뿌리기와타이머를이용한스프라이트출력

Made by lee sang hun in Coding café
감사합니다
HTML5 Canvas Sprite animation

Html5 canvas sprite animation

More Related Content

Similar to Html5 canvas sprite animation

More from SangHun Lee

Html5 canvas sprite animation