스프라이트 애니메이션 연습

예전, 거의 10년전의 canvas 조작 방식과 많이 달라졌다.

그땐 html5가 막 보편화되기 시작했고 브라우저마다 지원하는 함수가 달랐고 함수 이름도 모두 달랐다.

javascript에 class가 도입되기 이전이어서 object를 비슷한 느낌으로 overriding해서 사용했다.

 

무엇보다 가장 달라진 건 requestAnimationFrame()같은 render함수다.

이제 더 이상 setInterval()을 사용하지 않는것 같아 다행이다.

 

그러고 보니 svg 애니메이션은 몇개 만들어봤지만 이미지를 사용한 애니메이션을 만들어 본 적이 없었다.

구현이 간단할 거라 생각했는데 생각보다 간단하지 않았다.

 

1. 일단 canvas관련 코딩을 많이 잊어버렸고 - 더 이상 이런 일이 없도록 확실히 정리해놓자

2. 연습용 샘플 이미지들의 width가 모두 다르거나 가로x세로로 만들어진 스프라이트 이미지여서 처음 익숙해지는데 고생했다.

이제 타일 이미지로 배경을 채우고 requestAnimationFrame으로 애니에이션을 하고 컨트롤 하는 것까지 만들고 이걸 모듈화 해놓자.