ZEP Guidebook (KR)
Search…
⌃K

스프라이트시트 이해하기

App.loadSpritesheet

// 이미지를 객체화 시키는 함수
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer)

frameWidth 와 frameHeight

블루맨 스프라이트 한 칸의 이미지 크기는 48픽셀 x 64픽셀 입니다.
frameWidth, frameHeight 파라미터에 48, 64를 지정하면 블루맨 스프라이트 각각의
이미지가 0번부터 41번까지 번호를 가지게 됩니다.

anims

anims는 애니메이션을 지정할 배열을 의미합니다.
캐릭터 스프라이트로 사용 할 때와 오브젝트 스프라이트로 사용 할 때 양식이 다릅니다.

예시1) 춤추는 블루맨 오브젝트

춤추는 블루맨 오브젝트 애니메이션은 아래 코드와 같이 21번째 ~ 38번째 이미지에 해당하는 이미지 번호를 배열로 지정해 사용할 수 있습니다.
let blueman_dance = App.loadSpritesheet(
"blueman.png",
48,
64,
[20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], // 21번째 ~ 38번째 이미지로 애니메이션을 구성
8
);

예시2) 블루맨을 캐릭터 이미지로 사용하고 싶은 경우

캐릭터는 오브젝트와 달리 플레이어가 조작하는 키에 따라 다양한 애니메이션 실행 할 수 있습니다. 이런 경우 anims 파라미터에 { } 브라켓을 입력 한뒤 다음과 같이 애니메이션 이름에 대한 이미지 배열을 지정해주면 됩니다. 캐릭터에 지정 가능한 애니메이션의 종류는 다음과 같이 총 9가지 이며, 특정 애니메이션에 대한 이미지가 부족한 경우 생략할 수 있습니다.
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],
dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],
down_jump: [38],
left_jump: [39],
right_jump: [40],
up_jump: [41],
}, 8);
// 플레이어가 입장하면 캐릭터 이미지가 바뀜
App.onJoinPlayer.Add(function(player){
player.sprite = blueman;
player.sendUpdated();
});
✅ 추가로 사용가능한 애니메이션 키
앉기 모션: down_sit, left_sit, right_sit, up_sit
서있는 모션: down_idle, left_idle, right_idle, up_idle

예시3) 단일 이미지인 경우

스프라이트가 단일 이미지인 경우 파일 이름을 제외한 나머지 파라미터는 입력하지 않아도 됩니다.
let blueman = App.loadSpritesheet('blueman.png')
단일 이미지도 캐릭터 이미지로 적용할 수 있습니다. 다만, 애니메이션을 지정하지 않았으니 어느 방향으로 움직여도 같은 이미지일 것 입니다.