# Lifecycle

### Introduction

An app’s **lifecycle** refers to a cycle where an app starts, runs, and ends. You can create an app’s lifecycle by executing necessary actions in situations **when the app starts, runs, or ends**.

<table><thead><tr><th width="186">Name</th><th>Description</th></tr></thead><tbody><tr><td>onInit</td><td>Function that is called once when running the app the first time</td></tr><tr><td>onJoinPlayer</td><td>Once onInit is called, the event lets all connected players enter and operates whenever a player enters afterward.</td></tr><tr><td>onStart</td><td>Function that is called once after each player enters through onJoinPlayer</td></tr><tr><td>onUpdate</td><td>Function that runs periodically every 20ms</td></tr><tr><td>onLeavePlayer</td><td>This function causes all players to exit an app when another app is launched or the installed Game Block is destroyed.</td></tr><tr><td>onDestroy</td><td>Operates when another app is launched or the installed Game Block is destroyed.</td></tr></tbody></table>



### Understanding an App’s Lifecycle

Lifecycle functions are necessary as they help create functions according to an app’s life cycle. As you can see in the image below, **Enter-Phase** functions operate when an app starts. When an app is running, **Update-Phase** functions operate periodically, and when it ends, **Exit-Phase** functions start.

Make your app’s lifecycle from onInit to onDestroy utilizing the timing of each phrase.

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2F4YjgGhaTS4LHHJ0ALeCk%2FUntitled.png?alt=media&#x26;token=37f812eb-7f4c-416c-9a48-438a22b52a9d" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">**Lifecycle at a Glance**</mark>

```jsx
// The first event called when running the app (before the user enters)
// Normal and Sidebar apps are called when the map is executed after applying the script [ Enter ]
App.onInit.Add(function(){
});

// All players enter the app through this event [ Enter ]
// Calls whenever a player enters afterward [ Events ]
App.onJoinPlayer.Add(function(player) {
});

// Event that starts first when each player enters [ Enter ]
App.onStart.Add(function(){
});

// Calls event every 20ms
// dt: deltatime (time taken for the previous frame to complete) [ Update ]
App.onUpdate.Add(function(dt){
});

// onUpdate again after handling the event callback

// Causes all players to leave the app when the app exits [ Exit ]
App.onLeavePlayer.Add(function(player){
});

// Last called when an app exits [ Exit ]
// Normal app and Sidebar app are closed separately
App.onDestroy.Add(function(){
});
```



## 1️⃣ Enter-Phase Functions

This guides the functions called during the **lifecycle’s Enter Phase** along with the execution of an app.



### onInit

{% hint style="info" %}
App.onInit.Add(function(){})
{% endhint %}

This function is called once when running the app for the first time.

**Parameter**

* None

**Example**

Display chat in onInit. (Make this as a Mini-Game to check it out.)

```jsx
App.onInit.Add(function(){
	App.sayToAll("-- onInit --")
	App.sayToAll("   ready..  ")
	App.sayToAll("------------")
});
```



### onJoinPlayer

{% hint style="info" %}
App.onJoinPlayer.Add(function(player){})
{% endhint %}

Once onInit is called, this event lets all connected players enter and then operates whenever a new player enters afterward.

**Parameter**

<table><thead><tr><th width="124.33333333333331">Name</th><th width="128">Type</th><th>Description</th></tr></thead><tbody><tr><td>player</td><td>Player</td><td>The player who enters<br>The player’s parameter names can be changed arbitrarily</td></tr></tbody></table>

**Example**

Display a message when a player enters.

```jsx
App.onJoinPlayer.Add(function(player){
	App.showCenterLabel(`${player.name} has entered.`)
});
```



### onStart

{% hint style="info" %}
App.onStart.Add(function(){})
{% endhint %}

This function is called once after players have entered via onJoinPlayer.

**Parameter**

* None

**Example**

Display chat in onStart. (Make this as a Mini-Game to check it out.)

```jsx
App.onStart.Add(function(){
	App.sayToAll("-- App Start --")
});
```



<mark style="background-color:yellow;">**Understanding the Flow of Enter-Phase Functions**</mark>

Check **the Enter-Phase lifecycle** flow with codes.\
Make a Mini-Game with the code below and run it!

```jsx
// main.js
App.onInit.Add(function(){
	App.sayToAll("-- onInit --")
	App.sayToAll("   ready..  ")
	App.sayToAll("------------")
});

App.onJoinPlayer.Add(function(player){
	App.sayToAll(`${player.name} has entered.`)
});

App.onStart.Add(function(){
	App.sayToAll("-- App Start --")
});
```

<div align="center"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FYrpryu0t2OJpKnkNGRPr%2FUntitled%201.png?alt=media&#x26;token=fe3d7271-d1be-4331-b013-3f8a2619d5cd" alt=""><figcaption><p>Figure of Enter-phase functions in sequence</p></figcaption></figure></div>



## 2️⃣ Update-Phase Functions

Update has an onUpdate function that runs periodically about every 20ms.

When an event such as onJoinPlayer or onLeavePlayer occurs, onUpdate is periodically executed again after handling the event.



### onUpdate

{% hint style="info" %}
App.onUpdate.Add(function(dt){})
{% endhint %}

This function runs periodically about every 20ms.

**Parameter**

<table><thead><tr><th width="122.33333333333331">Name</th><th width="130">Type</th><th>Description</th></tr></thead><tbody><tr><td>dt</td><td>Number</td><td>deltatime (time taken for the previous frame to complete, about 20ms)<br>The dt parameter names can be changed arbitrarily</td></tr></tbody></table>

**Example**

Make a 10-second timer using the onUpdate function.

<div align="center"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FcdhvlXRJunime0IccKNd%2Fcountdown.gif?alt=media&#x26;token=e1087e94-0c60-46ff-90c5-9a9823495a31" alt=""><figcaption><p>Timer Example</p></figcaption></figure></div>

```jsx
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;
	}
})
```



## 3️⃣ Exit-Phase Functions

These functions execute when an app ends.



### onLeavePlayer

{% hint style="info" %}
App.onLeavePlayer.Add(function(player){})
{% endhint %}

This function operates whenever a player exits. After that, this function kicks all players from the app when another app is launched or the installed Game Block is destroyed.

**Parameter**

<table><thead><tr><th width="124">Name</th><th width="113.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>player</td><td>Player</td><td>The player who exits<br>The player’s parameter names can be changed arbitrarily</td></tr></tbody></table>

**Example**

Display a message when a player exits.

```jsx
// Executes when a player exits
App.onLeavePlayer.Add(function(player){
	App.showCenterLabel(`${player.name} has left.`)
});
```



### onDestroy

{% hint style="info" %}
&#x20;App.onDestroy.Add(function(){})
{% endhint %}

It operates when another app is launched or the installed Game Block is destroyed.

**Parameter**

* None

**Example**

Display a message when Game Block is destroyed. (Mini-Game)

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FahN1DGak5D8i7lBrwipk%2Fdestroy.gif?alt=media&#x26;token=5427300d-14fb-4944-a226-077e233dcd4c" alt=""><figcaption></figcaption></figure></div>

```jsx
// Executes when Game Block is destroyed
App.onDestroy.Add(function(){
	App.showCenterLabel("Game Block has been destroyed.")
});
```

***

***
