👤캐릭터 이미지 바꾸기

1. 애니메이션이 들어간 SpriteSheet 샘플을 준비합니다. 없다면 아래 이미지를 다운 받아주세요.

*주의: 직접 제작한 경우가 아닌 SpriteSheet는 저작권에 유의해서 사용해야 합니다.

2. 위 이미지 같이 낱장의 이미지들이 동일한 규격으로 합쳐진 형태의 SpriteSheet 그림의 확장자는 png 파일이어야 합니다.

• TIP: 캐릭터의 경우 한 동작의 그림 규격으로 48(px) x 64(px)를 권장합니다.

스프라이트 시트(sprite sheet)는 여러 개의 작은 그래픽을 정렬하여 구성한 비트맵 이미지 파일입니다. 게임 개발에서 캐릭터의 연속적인 포즈를 한 장의 이미지에 구성하여 2D 애니메이션 제작에 사용됩니다.

3. SpriteSheet를 읽는 API 로는 App.loadSpritesheet 를 사용합니다.

App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource

• 첫 번째 인자(fileName): 확장자가 포함된 SpriteSheet 시트의 파일 명을 넣습니다.

• 두 번째 인자(frameWidth): 하나의 동작이 그려져 있는 그림의 가로 크기(px)

• 세 번째 인자(frameHeight): 하나의 동작이 그려져 있는 그림의 높이(px)

• 네 번째 인자(anims): ZEP에서 정해져 있는 애니메이션 이름(left, right, up, down)과 각각에 사용될 그림 인덱스 넘버들

그림 순서의 인덱스 넘버는 왼쪽 상단 가로 줄 부터 0으로 시작합니다.

• 다섯 번째 인자(frameRate): 1초에 몇 장을 돌아가게 할 것인지 정합니다.

4. player의 속성을 변경하였으므로 player.sendUpdated() 를 써주어야 실제 반영됩니다.

5. 예시 코드

// 블루맨이라는 변수를 자바스크립트 문법에 맞게 생성
let blueman = null;

// 변수에 SpriteSheet를 읽어 저장
blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9], // left 라는 이미 정해진 왼쪽 방향으로 걸을 때의 애니메이션 이름
    up: [15, 16, 17, 18, 19], // 그 이름에 쓰일 전체 파일에서의 인덱스 넘버들
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
}, 8); // 1초에 8장으로 한다.

// 플레이어가 입장할 때 바로 블루맨 그림으로 교체해준다.
App.onJoinPlayer.Add(function(player){
	player.sprite = blueman;
  
  // 플레이어 속성이 변경되었으므로 호출해서 실제 반영해준다.
	player.sendUpdated();
})

6. 활용

// 변수 선언과 동시에 바로 저장이 가능하다.
let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9], 
    up: [15, 16, 17, 18, 19],
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
}, 8);

플레이어가 입장할 때가 아닌, 다른 특수한 조건일 때에도 캐릭터가 변할 수 있겠죠? 생각해보세요. 그리고 만들어 보세요!

참고

- 튜토리얼의 App type은 미니게임(Mini game)을 권장합니다.

- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다.

- 배포 방법을 아직 모르신다면, ZEP Script 배포 가이드를 참고해주세요.