#틀
가장 먼저 전체적인 틀을 살펴볼 차례입니다. 가장 먼저 접할 코드는 preload(), create(), update(), render(), config 일텐데 지금부터 하나하나 살펴보도록 하겠습니다.
#config
일단 이 class를 살펴보는 것도 좋을 것 같다 생각하여 넣어봤습니다. 오리엔테이션에서는
var game = new Phaser.Game(config)
로 ▼parameter를 채웠지만, 원래는 여러 parameter들을 넣을 수 있습니다.
(예를 들어 alert('hello world')에서 함수 안에 넣은 매개변수인 'hello world'같은 것들을 parameter라 부릅니다. 추가로 이때 할당된 변수값은 argument라 부릅니다)
var game = new Phaser.Game(canvasWidth, canvasHeight, type, canvasElement, scene)
대충 이런 느낌입니다. canvasWidth, canvasHeight의 경우엔 기본 800, 600으로 말그대로 게임화면의 크기를 결정합니다. 근데 캔버스 크기뿐만 아니라 요소 css의 width와 height도 맞춰서 바꿔주길래 예제에서 저는 canvas의 높이를 100%를 맞춰지게 해놨습니다.
type의 경우엔 예제에서 Phaser.AUTO를 입력했던 부분입니다. 그 외에도 Phaser.CANVAS, Phaser.WEBGL이 있습니다. 근데 함수형식이 아닌 변수 타입이다 보니 Phaser.AUTO의 변수값자체는 그냥 0이고 차례대로 1, 2 이더라고요 Phaser.AUTO대신 0을 입력해도 큰 상관은 없는 것 같습니다.
Phaser.WEBGL을 한다면 WebGL을 사용하여 게임을 렌더링한다. WebGL은 캔버스에 2D나 3D 그래픽을 렌더링 라이브러리다. 기본적으로 브라우저에 내장되어 있으므로 따로 import는 필요없다. Phaser.CANVAS를 한다면 WebGL을 사용하지 않고 순수하게 캔버스를 사용하여 렌더링한다. 웬만하면 렌더링을 할때 WebGL을 사용하는 편이 좋은데, 가끔 지원되지 않는 환경을 위하여 알아서 WebGL이 된다면 사용하고 안된다면 canvas으로 렌더링을 하게 하는 Phaser.AUTO가 있다. 그니까, 그냥 Phaser.AUTO를 사용하면 된다. 위에 부분 설명 안읽어도 된다. 특수한 경우가 아니라면 그냥 Phaser.AUTO를 사용하면 편하다.
canvasElement는 렌더링한 것을 넣을 캔버스를 넣으면 된다. 만약 공백으로 놔두면 그냥 자동으로 생성해준다. 화면 중 일부에 게임을 넣을 거라면 미리 canvas를 생성하고 parameter에 이 요소를 넣는 편이 좋겠지.
scene은 config에서 작성한 거에 들어있던 것처럼 preload, create, update, render... 각각에 함수를 할당하는 것이다.
이렇게 설명이 길어질 줄은 몰랐다.
antialias | - |
antialias | - |
antialiasGL | - |
audio{} | - |
audioCenter | - |
autoFocus | - |
autoRound | - |
backgroundColor{} | - |
bannerBackgroundColor[] | - |
bannerTextColor | - |
batchSize | - |
canvas | - |
canvasStyle | - |
clearBeforeRender | - |
context | - |
customEnvironment | - |
defaultImage | - |
defaultPhysicsSystem | - |
defaultPlugins[] | - |
desynchronized | - |
disableContextMenu | - |
domBehindCanvas | - |
domPointerEvents | - |
expandParent | - |
failIfMajorPerformanceCaveat | - |
fps | - |
fullscreenTarget | - |
gameTitle | - |
gameURL | - |
gameVersion | - |
height | - |
hideBanner | - |
hidePhaser | - |
inputActivePointers | - |
inputGamepad | - |
inputGamepadEventTarget | - |
inputKeyboard | - |
inputKeyboardCapture[] | - |
inputKeyboardEventTarget | - |
inputMouse | - |
inputMouseEventTarget | - |
inputMousePreventDefaultDown | - |
inputMousePreventDefaultMove | - |
inputMousePreventDefaultUp | - |
inputMousePreventDefaultWheel | - |
inputSmoothFactor | - |
inputTouch | - |
inputTouchCapture | - |
inputTouchEventTarget | - |
inputWindowEvents | - |
installGlobalPlugins[] | - |
installScenePlugins[] | - |
loaderAsync | - |
loaderBaseUrl | - |
loaderCrossOrigin | - |
loaderMaxParallelDownloads | - |
loaderPassword | - |
loaderPath | - |
loaderResponseType | - |
loaderTimout | - |
loaderUser | - |
loaderWithCredentials | - |
maxHeight | - |
maxLights | - |
maxTextures | - |
maxWidth | - |
minHeight | - |
minWidth | - |
mipmapFilter | - |
missingImage | - |
parent | - |
physics{} | - |
pipeline | - |
pixelArt | - |
postBoot() | - |
powerPreference | - |
preBoot() | - |
premultipliedAlpha | - |
preserveDrawingBuffer | - |
renderType | - |
resizeInterval | - |
roundPixels | - |
scaleMode | - |
sceneConfig{} | - |
seed[] | - |
transparent | - |
whiteImage | - |
width | - |
zoom | 게임을 확대합니다. (100% = 1.00) |
'olds > Phaser.js' 카테고리의 다른 글
[2] preload (0) | 2022.03.03 |
---|---|
[0] Orientation (0) | 2022.03.02 |