# 스프라이트시트 이해하기

## App.loadSpritesheet

<div align="left"><figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2Fe4q2g39g43jsXY6AjOz9%2Fblueman.png?alt=media&#x26;token=ebeca192-cb28-4539-8059-8e1777d58d90" alt=""><figcaption></figcaption></figure></div>

```jsx
// 이미지를 객체화 시키는 함수
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) 단일 이미지인 경우

<div align="left"><figure><img src="https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F24tOYsXkiVFltJachN16%2Fblueman%201.png?alt=media&#x26;token=003a4e36-63df-4efd-a993-a11c3b53ca9c" alt=""><figcaption></figcaption></figure></div>

스프라이트가 단일 이미지인 경우 파일 이름을 제외한 나머지 파라미터는 입력하지 않아도 됩니다.

```jsx
let blueman = App.loadSpritesheet('blueman.png')
```

단일 이미지도 캐릭터 이미지로 적용할 수 있습니다. 다만, 애니메이션을 지정하지 않았으니 어느 방향으로 움직여도 같은 이미지일 것 입니다.

### 예시2) 단일 애니메이션을 정의하는경우

단일 애니메이션을사용하는 경우에는 아래와 같이 하나의 배열로 애니메이션 프레임을 정의 할 수 있습니다.  춤추는 블루맨 오브젝트 애니메이션은 아래 코드와 같이 21번째 \~ 38번째 이미지에 해당하는 이미지 번호를 배열로 지정해 사용할 수 있습니다.

```jsx
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
);
```

### 예시3) 2개 이상의 애니메이션을 정의하는 경우

여러 애니메이션을 정의하는 경우에는 아래와 같이 anims 파라미터에 { } 브라켓을 입력 한뒤 다음과 같이 애니메이션 이름에 대한 이미지 배열을 지정해주면 됩니다. 아래 예시에서는 **`Map.playObjectAnimationWithKey`** 함수를 사용해 정의한 여러 애니메이션 중 "dance"에 대한 애니메이션을 실행합니다.

```
var blueman_sprite = 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],
		idle: [0],
	},
	8
);

// q 키를 누르면 동작하는 함수
App.addOnKeyDown(KeyCodeType.Q, function (player) {
	Map.putObjectWithKey(10, 10, blueman_sprite, {
		overlap: true,
		movespeed: 80, // default: 80
		key: "blueman",
	});
	// "dance" 애니메이션 재생
	Map.playObjectAnimationWithKey("blueman", "dance", -1);
});
```

### 예시4) 캐릭터 애니메이션 정의

캐릭터는 오브젝트와 달리 플레이어가 조작하는 키에 따라 다양한 애니메이션 실행 할 수 있습니다.  캐릭터에 지정 가능한 애니메이션의 종류는 다음과 같이 총 9가지 이며, 특정 애니메이션에 대한 이미지가 부족한 경우 생략할 수 있습니다.

```jsx
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`

공격 모션: `down_attack, left_attack, right_attack, up_attack`

***

***