[2] preload

#preload

  흔히 프리로딩한다 하죠. 이미지를 페이지 로딩할 때 미리미리 불러와서 게임 중에 갑자기 이미지가 없다가 로딩되어 나타나게 하는 경우를 방지하기 위해서입니다. 일단 저는 지금도 충분히 어리지만 어릴 적 게임을 만들다가 프리로딩이라는 개념을 몰라서 게임 중에 계속 이미지가 로딩되지 않아서 이상하게 만들어진 적이 있습니다. 그래서 이미지 화질을 다 낮추고 그랬었죠.

  phaser에서의 프리로딩은 스프라이트를 업로드하는 것입니다. 여기에서 쓸 수 있는 코드들을 살펴보겠습니다.

function preload() {
	this.load.setBaseURL('assets/');
	this.load.image('sky', 'sky.png');
    this.load.spritesheet('dude', 'dude.png', 32, 48);
}

  두번째 줄이 왜 저리 탭키가 많이 눌렸는지는 의문이지만... 무시하고 합시다. 일단 여기서 this는 game이기에 this대신 game.load.setBaseURL로 해도 무관합니다. 다른 것들도요. this가 편해서 앞으로 this라 할게요. this.load.setBaseURL의 경우엔 파일들의 기본경로를 설정할 수 있습니다. 오디오, 이미지 모두 마찬가지로요. 보통 assets/로 하시게 될 것입니다.

  this.load.image의 경우엔 말그대로 이미지를 일단 프리로딩하는 코드입니다.

  this.load.spritesheet는 게임에서 자주 쓰이는 프레임있는 이미지를 프레임에 맞춰 가져오는 것입니다.

  제가 만든 이미지라 그리 좋은 예시는 아니지만, 아무튼 게임파일 뜯어보면 자주 보이는 png 파일입니다. 이런 이미지를 아틀라스 이미지(Atlas image)라 부릅니다.

game.load.spritesheet(spriteName, url, width, height)

  이런 식으로 파라미터를 정리하면 편하겠네요. width, height는 한 프레임 당 크기입니다. 게임에서 굳이 gif파일을 사용하지 않고 이런 아틀라스 이미지를 사용하는 이유를 묻는다면, 뇌피셜이지만 비효율적인 gif사진 대신 png파일을 사용함으로써 파일 용량을 정말 대폭 줄일 수 있고, 시간 간격도 게임 내에서 마음대로 조절할 수 있기 때문이겠네요. 무엇보다 캔버스는 gif파일을 지원하지 않아요! 

  제가 아는 선에선 여기까지밖에 설명을 못하겠네요.

 

---

#game.load

(v3.55.2 기준)

메서드/프로퍼티명 (game.load.~)	설명
animation()	-
aseprite()	-
atlas()	-
atlasXML()	-
audio()	-
audioSprite()	-
baseURL	-
binary()	-
bitmapFont()	-
cacheManager{}	-
crossOrigin	-
css()	-
glsl()	-
html()	-
htmlTexture()	-
image()	-
inflight{}	-
json()	-
list{}	-
maxParallelDownloads	-
multiKeyIndex	-
multiatlas()	-
obj()	-
pack()	-
path	-
progress	-
queue{}	-
scene{}	-
sceneFile()	-
sceneManage{}	-
scenePlugin()	-
script()	-
scripts()	-
spritesheet()	-
state	-
svg()	-
systems{}	-
text()	-
textManager{}	-
tilemapCSV()	-
tilemapImpact()	-
tilemapTiledJSON()	-
totalComplete	-
totalFailed	-
totalToLoad	-
unityAtlas()	-
video()	-
xhr{}	-
xml()	-
_deleteQueue{}	-
_events{}	-
_eventsCount	-
▼ [prototype]
addFile()
addPack()
boot()
checkLoadQueue()
destroy()
fileProcssComplete()
flagForRemoval()
isLoading()
isReady()
keyExists()
loadComplete()
nextFile()
plusginStart()
reset()
save()
saveJSON()
setBaseURL()
setCORS()
setPath()
setPrefix()
shutdown()
start()
update()
updateProgress()