Comment on page
👤
캐릭터 이미지 바꾸기
- 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 파일을 준비합니다.
Last modified 2mo ago