# 캐릭터 이미지 바꾸기
1. **애니메이션이 들어간 SpriteSheet 샘플을 준비합니다. 없다면 아래 이미지를 다운 받아주세요.**
\*주의: 직접 제작한 경우가 아닌 SpriteSheet는 저작권에 유의해서 사용해야 합니다.
**2. 위 이미지 같이 낱장의 이미지들이 동일한 규격으로 합쳐진 형태의 SpriteSheet 그림의 확장자는 png 파일이어야 합니다.**
* TIP: 캐릭터의 경우 한 동작의 그림 규격으로 48(px) x 64(px)를 권장합니다.
{% hint style="success" %}
스프라이트 시트(sprite sheet)는 여러 개의 작은 그래픽을 정렬하여 구성한 비트맵 이미지 파일입니다. 게임 개발에서 캐릭터의 연속적인 포즈를 한 장의 이미지에 구성하여 2D 애니메이션 제작에 사용됩니다.
{% endhint %}
**3. SpriteSheet를 읽는 API 로는** `App.loadSpritesheet` **를 사용합니다.**
```jsx
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)과 각각에 사용될 그림 인덱스 넘버들
{% hint style="success" %}
그림 순서의 인덱스 넘버는 왼쪽 상단 가로 줄 부터 0으로 시작합니다.
{% endhint %}
* 다섯 번째 인자(frameRate): 1초에 몇 장을 돌아가게 할 것인지 정합니다.
**4. player의 속성을 변경하였으므로** `player.sendUpdated()` **를 써주어야 실제 반영됩니다.**
**5. 예시 코드**
```jsx
// 블루맨이라는 변수를 자바스크립트 문법에 맞게 생성
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. 활용**
```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],
}, 8);
```
{% hint style="success" %}
플레이어가 입장할 때가 아닌, 다른 특수한 조건일 때에도 캐릭터가 변할 수 있겠죠? 생각해보세요. 그리고 만들어 보세요!
{% endhint %}
{% hint style="warning" %}
참고
\- 튜토리얼의 App type은 미니게임(Mini game)을 권장합니다.
\- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다.
\- 배포 방법을 아직 모르신다면,[ ZEP Script 배포 가이드](/creator/dev-guide/zep-script.md)를 참고해주세요.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs-kr.zep.us/creator/tutor/tutorial/3.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.