# Getting Started

## **Initializing Legends of Learning API in Construct 3**

A typical layout flow for a game at LoL made in Construct 3 should look similar to this.

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FGDOjjs4XOZ0zzXWzfnfk%2Fg67.png?alt=media&#x26;token=78fa5c5d-26b7-4870-98de-aba5557c56bd" alt=""><figcaption><p>Recommended Workflow for your Games</p></figcaption></figure>

It’s strongly recommended to use a Game Loader layout. By this, I don’t refer to the Construct 3 loader layout, but to a game layout intended to load local resources and complete initializations before even showing the title screen. However, the game loader and the title screen responsibilities could be combined in a single layout. It's up to you to decide.

This workflow ensures that all your resources are loaded and the LoL API is initialized correctly before showing the title screen.&#x20;

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FWmpV1SQxLBKfjdQBj73l%2Fg125.png?alt=media&#x26;token=9983344b-d187-4ec1-a5d1-7bb855eca930" alt=""><figcaption><p>Communication Diagram</p></figcaption></figure>

### **Step 1: Install the LoL API Plugin**

Before you can start using the **Legends of Learning** API, you first need to install the **LoL Plugin** in **Construct 3**:

1. Open **Construct 3**.
2. Go to the **Plugins** section by navigating to **View > Addon Manager** in the menu bar.

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2F6acUhFSs8Rz6RvpHpguK%2Fimage.png?alt=media&#x26;token=48642b72-60a8-4236-908a-5f8ea45755e7" alt="" width="314"><figcaption><p>Addon Manager</p></figcaption></figure>

3. Search for the **LoL API Plugin** and install it.

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FBMCBfc0zgFHPFY70utXG%2Fi2.png?alt=media&#x26;token=3cc2348d-6b8c-4e9f-8b19-3871c06e5dc9" alt="" width="375"><figcaption><p>Install</p></figcaption></figure>

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FBT8vppXqmP9eehsePAti%2Fi3.png?alt=media&#x26;token=9663fc21-fa20-48f3-a46d-d07c1c2ce84d" alt="" width="375"><figcaption><p>Confirm</p></figcaption></figure>

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FSHE75DIUwVI9TAr9fNry%2Fi4.png?alt=media&#x26;token=f0d8821b-cabc-4ac1-959d-8739178b46a9" alt="" width="375"><figcaption><p>Restart Construct</p></figcaption></figure>

3. Once installed, you will see the **LoL API** object available in your project.

***

### **Step 2: Create the Project in Construct 3**

1. **Open Construct 3** and create a **new project**.
2. Choose an appropriate **game resolution** (ensure that it follows Legends of Learning’s required resolution of **1024x576**, which has a **16:9 aspect ratio**).

   * Go to the **Layout Properties** and set the **Viewport Size** to **1024x576**.&#x20;

   <figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FMMUg5QjgEcLT8TKDn3NE%2Fimage.png?alt=media&#x26;token=845dbdfe-04b7-4234-8e8d-2fbde0423b61" alt=""><figcaption><p>16:9 resolution mode</p></figcaption></figure>

This resolution ensures your game will scale correctly on all devices that Legends of Learning supports. You can use different resolution sizes, as long as the aspect ratio remains 16:9. However, keep in mind the chromebooks used at schools have fewer graph capabilities. Keep it a the minimum necessary for better performance (recommended 854x480).

***

### **Step 3: Call `Game Is Ready`**

Before interacting with any other LoL API functions, you must first initialize the game to let Legends of Learning know that your game is ready to communicate. The **`Game Is Ready`** action should be called **first** in the event sheet.

1. **Action Example: `Game Is Ready`**

   * In your **event sheet**, add the following action after finishing loading all your game resources:

   <figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FrjDs2o1ZMrIE4j8YiB0r%2Fimage.png?alt=media&#x26;token=d1800731-4b6c-4159-96d2-dc9392e0e32c" alt=""><figcaption><p>Notifying Game Is Ready</p></figcaption></figure>

{% hint style="warning" %} <mark style="color:orange;">**Game Is Ready should be called just once per game loaded.**</mark>
{% endhint %}

1. **Explanation**:
   * **`Game Is Ready`** informs the Legends of Learning platform that your game is set up and ready to start receiving and sending data, such as progress, questions, and answers.
   * This action is critical as no other LoL-related API calls should be made before calling **`Game Is Ready`**.
   * **`Game Is Ready`** is usually called from the Loader layout, even before showing the title screen.

***

### **Step 4: Respond to `On Start`**

Once **`Game Is Ready`** is triggered, your game should respond to the **`On Start`** condition. This condition is triggered when Legends of Learning signals that your game is now live and can interact with the platform.&#x20;

1. **Condition Example: `On Start`**

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2Fa3jbE5R2xXRPa8Olmm6m%2Fimage.png?alt=media&#x26;token=08c8f65d-10b0-4ac8-ba73-457d67e71a89" alt=""><figcaption><p>Requesting the last Saved State and Setting the Start Button visible</p></figcaption></figure>

1. **Explanation**:
   * **`On Start`** should be used to initialize the game’s starting state, such as setting up the score, initializing level progress, or displaying a welcome message to the player.
   * **`On Start`** Receives the language file from LoL's backend, containing the language set by the teachers for the game. <mark style="color:blue;">**See**</mark> [#step-7-understanding-the-lang.json-file-structure](#step-7-understanding-the-lang.json-file-structure "mention")
   * This is the point where you prepare any game data that needs to be shown or tracked when the game starts.

***

### **Step 5: Call `Load State`**

Once your game has started, you need to allow the player to continue from where they left off, if applicable. The **`Load State`** action retrieves the saved game state from Legends of Learning, so the player can resume where they stopped. As shown in the previous step, it is usual to call **`Load State`** after LoL confirmed the game can start.

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2Fx7tHk1cWzzRFSGf0qzLT%2Fimage.png?alt=media&#x26;token=2c4e1475-56fa-4ac5-abbd-b9c23e7806e3" alt=""><figcaption><p>Requesting the Saved Data</p></figcaption></figure>

1. **Explanation**:
   * **`Load State`** loads the saved data (e.g., score, level) that was previously stored in the Legends of Learning backend.
   * You can call **`Load State`** at the beginning of the game after **`On Start`** to restore the player’s previous progress.

***

### **Step 6: Respond to `On Load State`**

After calling **`Load State`**, the **`On Load State`** condition is triggered when the game successfully loads the saved state.

1. **Condition Example: `On Load State`**

<figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FY21UZ06UGpqq6to45rpj%2Fimage.png?alt=media&#x26;token=7654cb62-c64a-4d2a-967f-8aa36bcda757" alt=""><figcaption><p>Receiving the Game Data and saving it for processing.</p></figcaption></figure>

1. **Explanation**:

   * **`On Load State`** triggers once the saved data (e.g., score, progress) is retrieved from Legends of Learning.
   * This is useful for updating the game state to reflect the player’s previous session and displaying that information.

   **Example Save State Data**:

   ```json
   {
     "score": 1000,
     "level": 5,
     "max-combo":3
   }
   ```

***

### **Step 7: Understanding the `lang.json` File Structure**

The **`lang.json`** file is crucial for managing the text content in your game. Legends of Learning automatically translates the text based on the player’s language. You need to structure the file correctly to ensure smooth localization.

1. **Basic Structure**:

   * The `lang.json` file contains translations of text keys. The keys are the identifiers for text strings used in your game, and the values are the corresponding translations.

   **Example of a valid `lang.json` file**:

   ```json
   {
     "en": {
       "ui-play": "Play the game",
       "ui-pause": "Pause",
       "level-complete": "Level Complete"
     },
     "es": {
       "ui-play": "Jugar al juego",
       "ui-pause": "Pausa",
       "level-complete": "Nivel Completado"
     }
   }
   ```
2. **Explanation**:
   * **"en"**: Contains the English text for your game.
   * **"es"**: Contains the Spanish translation.
   * Each **key** (e.g., `"ui-play"`) corresponds to a piece of text in the game.
   * You only need to provide the **English version**. Legends of Learning will handle the translations for other languages automatically.
3. **Important Notes**:
   * Ensure that all the keys in your `lang.json` file are correctly named and match the text IDs in your game.
   * Don’t include language blocks with incomplete translations. This will cause errors when uploading the `lang.json` file.
   * Make sure that special characters (like accents in Spanish) render correctly in your game’s UI.
