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

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) 단일 이미지인 경우

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

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

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

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

단일 애니메이션을사용하는 경우에는 아래와 같이 하나의 배열로 애니메이션 프레임을 정의 할 수 있습니다. 춤추는 블루맨 오브젝트 애니메이션은 아래 코드와 같이 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
);

예시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가지 이며, 특정 애니메이션에 대한 이미지가 부족한 경우 생략할 수 있습니다.

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

---

---