캐릭터 이미지 바꾸기

애니메이션이 들어간 SpriteSheet 샘플을 준비합니다. 없다면 아래 이미지를 다운받아주세요.
- 주의: 직접 제작한 경우가 아닌 SpriteSheet는 저작권에 유의해서 사용해야 합니다.
위 이미지 같이 낱장의 이미지들이 동일한 규격으로 합쳐진 형태의 SpriteSheet 그림의 확장자는 png 파일이어야 합니다.
- TIP: 캐릭터의 경우 한 동작의 그림 규격으로 48(px) x 64(px)를 권장합니다.

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

</aside>

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)과 각각에 사용될 그림 인덱스 넘버들

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

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

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

// 블루맨이라는 변수를 자바스크립트 문법에 맞게 생성
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();
})

활용