2. Sprite animation이란?
Canvas 기본 설정
이미지 가져오기
drawImage 알아보기
좀 더 smooth하게 !
QnA
content
Html5 canvas sprite animation
Spilte animation 실행
3. Sprite animation이란?
Sprite sheet and Texture
스프라이트 시트와 텍스처
텍스처가 프레임마다 물리적으로 다른 비트맵 파일이면 프레임을 진행할 때마다 텍스처 전환이 발생한다.
텍스처 전환 처리에는 당연히 시간이 걸린다. 또한 텍스처의 GPU에 업로드가 필요할 때 추가 오버헤드가 증가한다.
일반적으로 이 문제를 해결하기 위해 각 프레임의 텍스처를 하나의 파일에 정의한다.
이것을 스프라이트 시트라고한다.
스프라이트 화면 표시에서 이용되는 도형의 무늬를 등록하고, 그 무늬에 다른 그림을 겹쳐서 합성시킬
수 있다. 고속 표시가 가능하면 연속되는 그림을 매끄럽게 움직일 수 있다.
무엇을 할 수 있을까?
4. 4
4가지 걸어가는 형태의 각각의 텍스쳐들을 하나의 파일(Sprite.png)로 정의된 것을 이용하여
오른쪽 키(->)를 누르면 옆으로 걸어가는 간단한 애니메이션
5. Canvas 기본 설정
Canvas 사용을 위한 기본 설정01
Canvas 기본 설정
<!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
6. 이미지 가져 오기
객체 선언과 이미지 불러오기02
Canvas 기본 설정
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<style>
body{
margin: 0px;
overflow: hidden;
}
</style>
<script>
window.addEventListener("load",draw);
var Image = new Image()
Image.src = "Sprite.png";
function draw(){
var canvas = document.getElementById('canvas');
var content = canvas.getContext("2d");
//drawImage를 통해서 그린다.
content.drawImage(Image,0,0);
}
</script>
</head>
<body>
<canvas id = "canvas" width = "800" height ="600">
</canvas>
</body>
</html>
이미지 가져오기
Keydown 실행
Sprite animation
7. Keydown 실행
Keydown을 통해 실행하기03
Canvas 기본 설정
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<style>
body{margin: 0px;overflow: hidden;}
</style>
<script>
window.addEventListener("load",draw);
window.addEventListener("keydown",move);
var Image = new Image()
Image.src = "Sprite.png";
var Image_x = 0;
function draw(){
var canvas = document.getElementById('canvas');
var content = canvas.getContext("2d");
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의 키코드 식별) – 맞는지 확인