영상을 보면서 따라 쓰긴했다만 sprite가 대체 뭐길래 자꾸 나오는거지? 사이다..? 허허
이번엔 이미지 로드하는 소스를 분석해볼 것이다.
k.loadSprite("spritesheet", "./spritesheet.png", {
sliceX: 39,
sliceY: 31,
anims: {
"idle-down": 936,
"walk-down": { from: 936, to: 939, loop: true, speed: 8 },
"idle-side": 975,
"walk-side": { from: 975, to: 978, loop: true, speed: 8 },
"idle-up": 1014,
"walk-up": { from: 1014, to: 1017, loop: true, speed: 8 },
},
});
k.loadSprite("map", "./map.png");sprite sheet
스프라이트 시트(sprite sheet)는 여러 개의 작은 이미지를 하나의 이미지 파일에 포함하여 관리하는 방법이다.
options
-
loadSprite : 스프라이트 시트를 로드 한다. 위의 코드에서는
spritesheet로 이름을 지정하였고 스프라이트 시트 이미지 파일 경로를 지정해 주었다. -
sliceX, sliceY : 스프라이트 시트를 잘라서 가각의 스프라이트로 분할할 때 사용할 가로 및 세로 슬라이스의 수를 지정한다. 이미지를 sliceX, sliceY에 주어진 수대로 나눠서 사용한다고 생각하면 될 것 같다.
-
anims: 스프라이트 시트에 포함된 각 애니메이션에 대한 정보를 제공한다. 각 매니메이션을 이름과 시작 프레임 끝 프레임, 루프 여부 및 속도를 지정하여 정의된다. 각 애니메이션의 시작과 끝에 대한 Tile Id는 Tiled 프로그램에서 확인해볼 수 있다.
예를 들어walk-down의 경우에는 936타일부터 939타일까지 8의 속도로 반복하는 애니메이션이다.
다음 포스트 바로가기 -> player를 화면에 뿌려주자
