Comment on page
Lifecycle
앱이 시작되어, 실행되고 종료될 때까지를 하나의 생애 주기(Lifecycle)라고 합니다. 관련 함수들을 이용하여 앱이 시작될 때, 실행 중일 때 그리고 종료될 때 등의 상황에서 필요한 동작들을 실행 해 전체적인 앱의 생애주기를 만들 수 있습니다.
이름 | 설명 |
|---|---|
onInit | App이 최초로 시작될 때 한 번 호출되는 함수입니다. |
onJoinPlayer | onInit이 호출된 후, 접속해 있는 모든 플레이어를 해당 이벤트를 통해 입장 시키고, 이후 입장하는 플레이어가 있을 때 마다 동작합니다. |
onStart | 모든 플레이어가 onJoinPlayer를 통해 입장한 후 한 번 호출 됩니다. |
onUpdate | 약 20ms 마다 주기적으로 실행되는 함수입니다. |
onLeavePlayer | 퇴장하는 플레이어가 있을 때 마다 동작합니다. 이후, 다른 App이 실행되거나 설치한 Game Block이 파괴될 때 모든 플레이어를 이 함수를 통해 퇴장시킵니다. |
onDestroy | 다른 App이 실행되거나 설치한 Game Block이 파괴될 때 동작합니다. |
Lifecycle 함수들은 생애 주기에 맞게 기능을 만들 수 있는 필수적인 함수입니다.
아래 그림과 같이 앱이 실행될 때는 Enter 단계의 함수들이 동작하고, 앱이 실행 중 일 때는 Update 단계의 함수들이 주기적으로 동작하며, 앱이 종료될 때는 Exit 단계의 함수들이 동작하게됩니다.
앱이 실행되어 종료될 때 까지 각 단계의 함수들을 잘 활용해 생애 주기에 맞게 App을 만들어보세요.
Lifecycle 함수 한 눈에 보기
// App 실행 시에 최초로 호출되는 이벤트 (유저 진입 전)
// Normal App과 Sidebar App은 Script 적용 후 맵이 실행될 때 호출 [ Enter ]
App.onInit.Add(function(){
});
// 모든 플레이어를 이 이벤트를 통해 App에 진입시킴 [ Enter ]
// 이후 플레이어가 입장 할 때마다 호출 [ Events ]
App.onJoinPlayer.Add(function(player) {
});
// 플레이어 모두 진입 시 최초로 시작되는 이벤트 [ Enter ]
App.onStart.Add(function(){
});
// 20ms 마다 호출되는 이벤트
// dt: deltatime(전 프레임이 완료되기까지 걸린 시간) [ Update ]
App.onUpdate.Add(function(dt){
});
// 이벤트 콜백 처리 후 다시 onUpdate
// App 종료 시 모든 플레이어를 App에서 나가게 함 [ Exit ]
App.onLeavePlayer.Add(function(player){
});
// App 종료 시 마지막으로 호출 [ Exit ]
// Normal App과 Sidebar App은 별도의 종료
App.onDestroy.Add(function(){
});
App의 실행과 함께 호출되는 라이프사이 클 Enter 단계에서 호출되는 함수를 안내합니다.
App.onInit.Add(function(){})
App이 최초로 시작될 때 한 번 호출됩니다.
파라미터
- 없음
예제
onInit 에서 채팅 출력해보기. ( 미니게임으로 만들어 확인해보세요. )
App.onInit.Add(function(){
App.sayToAll("-- onInit --")
App.sayToAll(" ready.. ")
App.sayToAll("------------")
});
App.onJoinPlayer.Add(function(player){})
onInit이 호출된 후, 접속해 있는 모든 플레이어를 해당 이벤트를 통해 입장시키고, 이후 입장하는 플레이어가 있을 때 마다 동작합니다.
파라미터
이름 | 타입 | 설명 |
|---|---|---|
player | Player | player는 입장하는 플레이어를 가르킴
파라미터의 이름은 임의로 변경가능 |
예시
플레이어 입장시 메시지 출력해보기
App.onJoinPlayer.Add(function(player){
App.showCenterLabel(`${player.name}님이 입장하셨습니다.`)
});
App.onStart.Add(function(){})
모든 플레이어가 onJoinPlayer를 통해 입장한 후 한 번 호출 됩니다.
파라미터
- 없음
예제
onStart에서 채팅 출력해보기 ( 미니게임으로 만들어 확인해보세요. )
App.onStart.Add(function(){
App.sayToAll("-- App Start --")
});
Enter 단계 함수의 흐름 이해하기
Lifecycle Enter 단계의 흐름을 코드로 확인해보세요.
아래 코드를 미니게임으로 만들어 실행해보세요!
// main.js
App.onInit.Add(function(){
App.sayToAll("-- onInit --")
App.sayToAll(" ready.. ")
App.sayToAll("------------")
});
App.onJoinPlayer.Add(function(player){
App.sayToAll(`${player.name}님이 입장하셨습니다.`)
});
App.onStart.Add(function(){
App.sayToAll("-- App Start --")
});
Enter 단계 함수들이 순서대로 동작하는 모습.
Update에는 약 20ms 마다 주기적으로 실행되는 함수 onUpdate가 있습니다.
onJoinPlayer, onLeavePlayer 등의 이벤트가 발생하면 해당 이벤트 처리 후 다시 onUpdate가 주기적으로 실행됩니다.
App.onUpdate.Add(function(dt){})
약 20ms 마다 주기적으로 실행되는 함수입니다.
파라미터
이름 | 타입 | 설명 |
|---|---|---|
dt | Number | deltatime (전 프레임이 완료되기까지 걸린 시간, 약 20ms)
dt 파라미터의 이름은 임의로 변경 가능 |
예시
onUpdate 함수를 이용해 10초 카운트다운 만들어보기
let countdown = 10;
let timer = 0;
App.onUpdate.Add(function(dt){
timer += dt;
if(timer >=1){
if(countdown >= 0)
{
App.showCenterLabel(countdown--);
}
else{
App.showCenterLabel("Time Over");
}
timer = 0;
}
})
앱이 종료될 때 실행되는 함수 입니다.
App.onLeavePlayer.Add(function(player){})
퇴장하는 플레이어가 있을 때 마다 동작합니다. 이후, 다른 App이 실행되거나 설치한 Game Block이 파괴될 때 모든 플레이어를 이 함수를 통해 퇴장시킵니다.
파라미터
이름 | 타입 | 설명 |
|---|---|---|
player | Player | player 파라미터는 퇴장하는 플레이어를 가르킴
player 파라미터의 이름은 임의로 변경 가능 |
예시
플레이어 퇴장 시 메시지 출력해보기
// 플레이어가 퇴장할 때 실행
App.onLeavePlayer.Add(function(player){
App.showCenterLabel(`${player.name}님이 퇴장하셨습니다.`)
});
App.onDestroy.Add(function(){})
다른 App이 실행되거나, 설치한 Game Block이 파괴될 때 동작합니다.
파라미터
- 없음
예제
Game Block 파괴 시 메시지 출력해보기 ( 미니게임 )
// Game Block 파괴 시 실행
App.onDestroy.Add(function(){
App.showCenterLabel("게임 블록이 파괴되었습니다.")
});
Last modified 3mo ago