Comment on page
🎨
스프라이트시트 이해하기
// 이미지를 객체화 시키는 함수
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer)
블루맨 스프라이트 한 칸의 이미지 크기는 48픽셀 x 64픽셀 입니다.
frameWidth, frameHeight 파라미터에 48, 64를 지정하면 블루맨 스프라이트 각각의
이미지가 0번부터 41번까지 번호를 가지게 됩니다.
anims는 애니메이션을 지정할 배열을 의미합니다.
캐릭터 스프라이트로 사용 할 때와 오브젝트 스프라이트로 사용 할 때 양식이 다릅니다.
스프라이트가 단일 이미지인 경우 파일 이름을 제외한 나머지 파라미터는 입력하지 않아도 됩니다.
let blueman = App.loadSpritesheet('blueman.png')
단일 이미지도 캐릭터 이미지로 적용할 수 있습니다. 다만, 애니메이션을 지정하지 않았으니 어느 방향으로 움직여도 같은 이미지일 것 입니다.
단일 애니메이션을사용하는 경우에는 아래와 같이 하나의 배열로 애니메이션 프레임을 정의 할 수 있습니다. 춤추는 블루맨 오브젝트 애니메이션은 아래 코드와 같이 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
);
여러 애니메이션을 정의하는 경우에는 아래와 같이 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);
});
캐릭터는 오브젝트와 달리 플레이어가 조작하는 키에 따라 다양한 애니메이션 실행 할 수 있습니다. 캐릭터에 지정 가능한 애니메이션의 종류는 다음과 같이 총 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공격 모션:
down_attack, left_attack, right_attack, up_attack
Last modified 2mo ago