💫 Canvas를 이용한 Sprite Animation

컴퓨터 그래픽스에서 스프라이트(영어: sprite)는 영상 속에 작은 2차원 비트맵이나 애니메이션을 합성하는 기술이다. 초기에는 2D 비디오 게임에서 비디오 영상과 분리된 별도의 그래픽스 객체를 의미했지만, 오늘날에는 다양한 층의 이미지, 텍스트 등을 각각의 우선순위를 두고 합성하는 기술을 통틀어 일컫는다.
From. 위키백과 - 스프라이트 (컴퓨터 그래픽스)

1.방법

1. canvas를 호출
2. canvas 크기 설정
3. Animation 동작을 설정하는 클래스 생성
4. 라디오 버튼에 이벤트 설정

2. 구현

1) canvas를 호출

const $canvas = document.querySelector('#canvas1');
const _ctx = $canvas.getContext('2d');

2) canvas 크기 설정

$canvas.width = 500;
$canvas.height = 500;

• <canvas>의 attr에 선언해도 된다.

3) Animation 동작을 설정하는 클래스 생성

1. constructor 선언
   • 삽입할 이미지
   • sprite 너비
   • sprite 높이
   • 가로 프레임
   • 세로 프레임
   • 크기비율
   • 캔버스 너비
   • 캔버스 높이
   • [sprite 시작 위치 x] = [가로 프레임] * [sprite 너비]
   • [sprite 시작 위치 y] = [세로 프레임] * [sprite 높이]
   • [출력 이미지 너비] = [sprite 너비] * [크기비율]
   • [출력 이미지 높이] = [sprite 높이] * [크기비율]
   • [출력 이미지 시작 위치 X] = [캔버스 너비] / 2 - ( [출력 이미지 너비] / 2 );
   • [출력 이미지 시작 위치 Y] = [캔버스 높이] / 2 - ( [출력 이미지 높이] / 2 );

/* drawImage 
    context.drawImage(
        [삽입할 이미지],
        [sprite 시작 위치 x],
        [sprite 시작 위치 y],
        [sprite 너비],
        [sprite 높이],
        [출력 이미지 시작 위치 X],
        [출력 이미지 시작 위치 Y],
        [출력 이미지 너비],
        [출력 이미지 높이],
    )
*/

2. 메소드

   • draw
     • 이미지 불러오기
   • update
     • 기본 애니메이션 설정
     • (최소 프레임 ~ 최대 프레임)를 반복하는 값 설정
     • this.frame으로 row/column 반복하는 값 도출
   • setAnimation
     • (프레임 시작)과 (프레임 끝 값)을 조절하도록 설정

3. 클래스 호출 및 기본 animate 설정

   • draw() > update() > requestAnimationFrame(animate) 순으로 호출
   • requestAnimationFrame(animate)는 canvas에 모든 애니메이션을 남긴다.
   • _ctx.clearRect로 캔버스를 지워줘야함

  const mandrake = new Animation($canvas.width, $canvas.height);

  function animate() {
    // _ctx.clearRect([캔버스 시작 위치 X], [캔버스 끝 위치 Y], [캔버스 너비], [캔버스 높이]);
    _ctx.clearRect(0, 0, $canvas.width, $canvas.height);
    mandrake.draw(_ctx);
    mandrake.update();
    requestAnimationFrame(animate);
  }

  animate();

4) 라디오 버튼에 이벤트 설정

콜백 함수에 mandrake.setAnimation([시작 프레임], [끝 프레임]) 선언

3. 변형

• radio를 button으로 변경
• button에 data-* 속성으로 [시작 프레임]과 [끝 프레임] 설정
  dataset으로 받아온 값의 데이터 형은 문자열이므로 숫자형으로 변경한다.

<!-- index.html -->
<button type="button" data-min="0" data-max="75">Grow</button>
<button type="button" data-min="76" data-max="112">Wink</button>
...

// page_sprite.js
const groupControl = document.querySelector('.group-control');
groupControl.addEventListener('click', function (e) {
    const $target = e.target;
    const _min = $target.dataset.min;
    const _max = $target.dataset.max;

	mandrake.setAnimation(Number(_min), Number(_max));
});

---

🐛 에러

1. .getContext('2d');

'2D'는 에러가 나고 '2d'는 정상으로 동작한다.

// 에러
const $canvas = document.querySelector('#sprite_canvas');
const _ctx = $canvas.getContext('2D');

// 정상
const $canvas = document.querySelector('#sprite_canvas');
const _ctx = $canvas.getContext('2d');

2. Canvas 크기설정

canvas 크기 값은 숫자형으로 설정한다.

// 에러
$canvas.width = '500px';
$canvas.height = '500px';

// 정상
$canvas.width = 500;
$canvas.height = 500;

---

출처
Franks Laboratory - JavaScript Sprite Animation
MDN - getContext