Velocity.js: 스프라이트 이미지로 게임 만들기 :: 마이구미

이 글은 Velocity.js 을 통해 스프라이트 이미지를 조작해본다.

Velocity.js 는 애니메이션을 보다 쉽게 구현하고, 빠른 성능을 낼 수 있는 라이브러리다.

Velocity.js 의 기본적인 사용법을 알리기 위해 만든 예제이다.

Velocity.js 사용 예제 - https://codepen.io/mygumi/pen/baGVRW

Vue.js 버전 예제 - https://codesandbox.io/s/vj2ymr9p2y

공식 사이트 - http://velocityjs.org/

Velocity.js 는 무엇인가?

jQuery의 $.animate() 와 동일한 API를 사용하는 애니메이션 엔진이다.

jQuery와 함께 사용할 수도 있지만, 독립적으로 사용할 수도 있다.

오래 전부터 $.animate() 와 비교해서 훨씬 빠른 성능을 낸다고 알려져있다.

하지만 개인적인 생각은 지금은 jQuery 도 꾸준한 업데이트로 인해 비교할 만큼은 아니라고 본다.

성능이 아니라 이외에도 가볍고, 인터페이스 등 많은 장점이 존재한다.

Vue.js 공식 문서 중 트랜지션에서도 Velocity.js 와의 통합을 볼 수 있다. (Vue.js Veleocity)

Velocity.js 사용법을 위해 스프라이트 이미지를 조작해 애니메이션들을 구현해보았다.

See the Pen Use Velocity.js, sprite image by leejunghyun (@mygumi) on CodePen.

다음 코드는 캐릭터가 기본적으로 가만히 있는 애니메이션을 나타내기 위한 코드가 된다.

Velocity(el, {
    backgroundPositionX: [-210, 0], // [끝, 시작]
    backgroundPositionY: [-80, -80]
}, { 
    easing: [ 3 ], // 애니메이션 이미지 갯수
    duration: 400,
    loop: true, // 반복 여부
    queue: '',
    complete: function () {

    }
})

스프라이트 이미지를 사용하기 때문에, background-position 을 이용한다.

스프라이트 이미지의 좌표에 대한 것은 다음 사이트에서 쉽게 확인할 수 있다. (스프라이트 이미지 좌표 뽑기)

캐릭터가 상황에 따른 애니메이션을 위해 background-position 만을 조작하면서 바꿀 수 있다.

왼쪽 오른쪽 이동과 같은 애니메이션은 background-position 뿐만 아니라 추가적인 애니메이션이 필요하다.

단순히 translate 와 같은 애니메이션을 실행한다면, 기존 background-position 애니메이션이 동작하지 않는다.

이러한 상황에서는 queue 를 이용할 수 있다.

queue 에 true 값을 넣음으로써, 대기하지 않고, 병행으로 처리가 가능해진다.

이번에는 점프 같은 경우를 보자.

위와 같이 비슷한 상황이지만 위로 이동했다가 아래로 다시 이동해야한다.

이것이 의미하는 것은 위로 이동 완료 시점을 파악한 후, 아래로 다시 이동해야한다.

이러한 상황에서는 complete 를 이용할 수 있다.

callback 이라고 생각하면 된다.

애니메이션이 끝나면 complete 메소드가 호출된다.

s를 통해 실행되는 파이어볼 애니메이션은 같은 시간에 동작하는 서로 다른 애니메이션이 존재한다.

이동 + 크기 변화 즉, translate + scale 이 된다.

단순히 아래와 같이 실행하면 된다.

Velocity(el, {
    translateX: [ex, sx],
    translateY: [ey, sy],
    scale: [1, 0.5]
}, {
    // ....
})

codepen.io 를 통해 확인해보면, 단순히 Velocity.js 에서 제공하는 형태에서 커스텀했을 뿐이다.

사용법을 위해서 테스트로 구현한 것이라 코드를 이해할 필요는 없다.

Velocity.js 을 통해 웬만한 애니메이션은 쉽게 구현할 수 있다.