melonjs-장면-및-상태은(는) 무엇을 하나요?
이 스킬은 melonJS의 장면 구조와 게임 흐름을 다룹니다 — Stage 서브클래스, 상태 관리자, 전환, 일시정지, 업데이트 루프, 타이머 및 트윈을 포함합니다. onResetEvent와 생성자의 차이, state.set 후 state.change 사용, 스테이지별 카메라 및 월드 라이프사이클, 일시정지 인식 타이밍을 다룹니다. 다음 키워드에서 트리거됩니다: Stage, state, state.set, state.change, state.transition, state.pause, onResetEvent, onDestroyEvent, onActivateEvent, onDeactivateEvent, PLAY, MENU, LOADING, update loop, GAME_UPDATE, timer, setTimeout, setInterval, Tween, freeze.
주요 개념
Stage 서브클래스
me.Stage를 상속받아 각 장면(Scene)을 정의합니다.onResetEvent()는 장면이 활성화될 때마다 호출되며, 생성자와 달리 반복적인 초기화에 적합합니다.- 생성자는 한 번만 실행되므로 정적 리소스 로딩에 적합합니다.
상태 관리자 (me.state)
me.state.set()으로 상태를 등록하고,me.state.change()로 전환합니다.state.set()은 등록 시,state.change()는 전환 시 호출됩니다.state.transition()으로 전환 효과(페이드 등)를 추가할 수 있습니다.state.pause()로 현재 장면을 일시정지하고state.resume()으로 재개합니다.
생명주기 메서드
onResetEvent(): 장면이 활성화될 때마다 호출됩니다.onDestroyEvent(): 장면이 제거되거나 다른 장면으로 전환될 때 호출됩니다.onActivateEvent(): 장면이 활성화될 때(전환 직후) 호출됩니다.onDeactivateEvent(): 장면이 비활성화될 때(전환 직전) 호출됩니다.
카메라 및 월드 라이프사이클
- 각 Stage는 고유한
me.game.world와me.game.viewport(카메라)를 가집니다. - 장면 전환 시 이전 장면의 월드와 카메라는 자동으로 정리됩니다.
- 수동 정리가 필요하면
onDestroyEvent()에서 수행합니다.
업데이트 루프
update(dt)메서드를 오버라이드하여 매 프레임마다 로직을 실행합니다.GAME_UPDATE이벤트를 수신하여 사용자 정의 업데이트를 추가할 수 있습니다.dt는 프레임 간 시간 차이(밀리초)입니다.
타이머 및 트윈
me.timer.setTimeout()과me.timer.setInterval()은 일시정지 인식 타이머입니다.- 게임이 일시정지되면(
state.pause()) 이 타이머도 일시정지됩니다. - 네이티브
setTimeout/setInterval은 일시정지의 영향을 받지 않습니다. me.Tween은 애니메이션을 위한 트윈 라이브러리로, 일시정지 인식이며 프레임 기반으로 작동합니다.freeze()는 트윈을 일시정지하고,resume()은 재개합니다.
사용 예시
// Stage 서브클래스 정의
class MenuStage extends me.Stage {
onResetEvent() {
me.game.world.addChild(new me.ColorLayer("background", "#000000"));
// 메뉴 UI 초기화
}
onDestroyEvent() {
// 정리 작업
}
}
// 상태 등록 및 전환
me.state.set(me.state.PLAY, new PlayStage());
me.state.set(me.state.MENU, new MenuStage());
me.state.transition("fade", "#000000", 250);
me.state.change(me.state.MENU);
// 일시정지 인식 타이머
me.timer.setTimeout(() => {
console.log("이것은 게임이 일시정지되면 멈춥니다");
}, 1000);
// 네이티브 타이머 (일시정지 영향 없음)
setTimeout(() => {
console.log("이것은 게임이 일시정지되어도 계속 실행됩니다");
}, 1000);
// 트윈 사용 예시
let myTween = new me.Tween(sprite.pos)
.to({ x: 300, y: 200 }, 1000)
.easing(me.Tween.Easing.Quadratic.InOut)
.start();
// 일시정지 (트윈도 멈춤)
me.state.pause();
// 재개 (트윈도 재개)
me.state.resume();
참고 사항
state.set()과state.change()는 반드시state.set()이 먼저 호출되어야 합니다.- 생성자에서 무거운 리소스를 로딩하고
onResetEvent에서는 가벼운 초기화만 수행하는 것이 권장됩니다. - 카메라 위치는 장면 전환 시 초기화되므로 매
onResetEvent에서 설정해야 합니다. me.timer의 타이머는 게임 일시정지 시 자동으로 멈추지만, 네이티브setTimeout/setInterval은 멈추지 않습니다.