Colin's Blog
[javascript] Paper.js를 활용한 게임 캐릭터 및 스프라이트 애니메이션 구현

지금은 웹 개발에서 게임 프로그래밍이 점점 더 중요해지는 추세입니다. 게임 캐릭터나 스프라이트 애니메이션을 구현하는 것은 전체 게임 경험의 퀄리티를 높이는 데에 있어서 핵심적인 역할을 합니다. 이번 기술 블로그에서는 Paper.js를 사용하여 게임 캐릭터 및 스프라이트 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Paper.js란 무엇인가요?

Paper.js는 HTML5 Canvas를 기반으로 한 벡터 그래픽 라이브러리입니다. 이 라이브러리를 사용하면 다양한 기하학적 도형을 그리고, 애니메이션을 만들 수 있습니다. 또한 Paper.js는 SVG와 호환되기 때문에, SVG 파일을 가져와서 화면에 렌더링할 수도 있습니다.

Paper.js 설치

Paper.js를 사용하기 위해선, 먼저 프로젝트에 Paper.js를 설치해야 합니다. 이를 위해 다음의 스크립트 태그를 HTML 파일에 추가합니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.3/paper-full.min.js"></script>

스프라이트 애니메이션 구현하기

Paper.js를 사용하여 스프라이트 애니메이션을 구현하려면, 몇 가지 단계를 거쳐야 합니다.

  1. 스프라이트 이미지 불러오기
  2. 스프라이트 애니메이션 시퀀스 정의하기
  3. 애니메이션 재생

1. 스프라이트 이미지 불러오기

Paper.js에서 이미지를 불러오기 위해 Raster 객체를 사용합니다. 다음의 코드를 통해 스프라이트 이미지를 불러올 수 있습니다:

var raster = new Raster('path/to/sprite.png');

2. 스프라이트 애니메이션 시퀀스 정의하기

스프라이트 애니메이션은 이미지의 일부분을 차례로 나타내는 것으로 구성됩니다. Paper.js에서는 Rectangle 객체를 사용하여 각각의 프레임을 정의할 수 있습니다. 예를 들어, 스프라이트 이미지가 4x4 그리드로 구성되어 있다면, 다음과 같이 각각의 프레임의 구간을 정의할 수 있습니다:

var frames = [
  new Rectangle(0, 0, 100, 100),
  new Rectangle(100, 0, 100, 100),
  new Rectangle(200, 0, 100, 100),
  //...
];

3. 애니메이션 재생

Paper.js에서 애니메이션을 재생하기 위해 onFrame 이벤트를 사용합니다. 이벤트 핸들러에서 Raster 객체의 sourceRectangle 속성을 업데이트하여 다음 프레임을 표시할 수 있습니다. 다음은 간단한 스프라이트 애니메이션 재생 예제입니다:

raster.onLoad = function() {
  var frameIndex = 0;
  var frameRate = 12; // 12프레임/초
  
  function onFrame(event) {
    if (event.count % Math.round(60 / frameRate) === 0) {
      // 다음 프레임으로 업데이트
      frameIndex = (frameIndex + 1) % frames.length;
      raster.sourceRectangle = frames[frameIndex];
    }
  }
  
  paper.view.onFrame = onFrame;
};

결론

Paper.js는 강력한 벡터 그래픽 라이브러리로, 게임 캐릭터 및 스프라이트 애니메이션 구현에 적합합니다. 스프라이트 이미지를 불러오고, 애니메이션 시퀀스를 정의하고, 애니메이션을 재생하는 방법을 알아보았습니다. Paper.js를 사용하면 더욱 동적이고 생동감 있는 웹 게임을 개발할 수 있습니다.

더 많은 Paper.js 기능과 예제에 대해서는 공식 문서를 참고해주세요.

© 2018 Colin. All rights reserved.