# WELCOME! Welcome to the Ufolab Academy! Here you'll get an overview of all the amazing features Ufolab offers to help you build beautiful and interactive games in just minutes. ### Jump right in


Getting Started	Create a new game	/files/UHF7zjwcq36zmrwja3ub		/pages/dIYJclmzNx80xQfynJFq
Getting started	Publish your game	/files/vxs1ER5I8VkIA0IaOqfo		/pages/JjjojIyKxaiBPzzLwvtg

# What is UFOLAB UFOLAB is the unique platform to create and publish games in minutes. \ The platform is designed to empower individuals, businesses, and educational institutions to create engaging games without the need for advanced technical skills. By providing easy-to-use templates and a freemium model, the platform allows users to design, build, and share interactive experiences effortlessly. Whether it’s for personal use, educational purposes, or business gamification, UFOLAB caters to a wide range of needs, making game creation accessible to everyone. Let's change the rules of the game!\ \ Do you want to learn more about UFOLAB? # How to create a game UFOLAB lets you create a game from scratch or using a pre made and ready to edit game. How do you want to create your game? # From scratch Do you feel creative today? UFOLAB allows you to create a new game starting from scratch. \ \ Select the "Create game" in the Create section (left menu) and again in the preview modal. From this moment your creation will be generated automatically and available from "Projects" section as a Draft project. Set the general settings first and then start creating all the scenes of the game from the editor. Once the game is edited and published, you can find it in the Published games section.

# From template One of the great advantages of UFOLAB is that you can find a lot of pre-made games ready to edit. From the "Create" panel check all the available templates. At the top, you can filter these templates to quickly find what you need. Once you find a template you like, click on it, and a modal will open, allowing you to preview it or select it to start using it directly from "Use Template." Set the general settings first and then start creating all the scenes of the game from the editor. When the game is edited and published, you can find it in the Published games section. Let's see the amazing games you can crate thanks to UFOLAB!

You will need to configure the settings for your game # Publish your game Once you’ve finished creating your game, you can publish it. You can publish your game from your dashboard. Once published, you will get the public url and your game will be public accessible.

Once your game has been published, you will see the new status in the top bar

# Dashboard Once you´ve published your game you can use the **dashboard tool** to **monitorize** your **published games**. With this tool you can: * See the amount of **people** that has **played your games** in a **certain amount of time**. * **Filter by project** and **by time.** * See the **total amount of players** your games have accumulated. * See the **total amount of times** your games have been played. * See the **total amount of time** your games have been played. * See the **average time per game** played. * See a **graphic comparing** the **won matches** against the **lost matches.** * **Download** a **CSV file** with all these data.

# How to use the editor? Here you will find all the options you need to edit the game scene by scene.

{% hint style="info" %} **IMPORTANT**: **To make the game work DO NOT Delete the scenes "start" and "end".** \ START defines the first scene where your audience will land once open the link (usually used for the game cover or welcome page). \ \ END is the last scene of the game.\ \ Plus, if you use the countdown feature then you need also to have a scene named "GAMOVER" that will be the one used to take the player if they don't get it in time.
So, if you use the countdown feature (in the gamification bar), is mandatory to have the scenes: start, end and gameover.
{% endhint %} 1. **Game title:** the name you assigned to the game in the general settings section. 2. **Status of the game:** whether is published or still as a draft. 3. **Preview and publish**: in preview you can visualize the scene you are creating. Use the button PUBLISH once the game is finished. From that moment it will be public and you will find it in the "Published games" section at the dashboard. 4. **Profile**: edit your personal information, subscription plan or change your work space. 5. **Library:** in this first left side menu you will find a lot of elements you can use to build the scene, such as text, buttons, text boxes, icons, shapes, stickers and characters. 6. **Multimedia**: here you will be able to upload your own files, image, video, audio and gif. 7. **Components**: it includes all the interactive tools you can add to your game scenes to create richer and more dynamic experiences. 8. **Configuration**: the configuration section lets you define the main characteristics of your game, such as its title, cover image, size, and screen orientation.\ It’s divided into three tabs: General, Canvas and Flow. 9. **UfoAcademy: c**licking here will take you to this page where you can answer your questions and learn how to use UFOLAB. 10. **File Search Bar**: type the name of the element you need and all the results will be shown. 11. **Tags**: you can filter between what you want to find. 12. **Subcomponents:** once you click on the library or component, menu, here will be shown all the ready to use options, except in Multimedia where you can upload files too. 13. **Canvas**: this is the scene where you add all the components and multimedia. The scene of the game when is published will look like exactly like you built it here. 14. **Saved:** when this icon appears disabled it means that the changes in the game have been saved automatically. 15. **Resizer**: these options are meant to resize or escale the element or component you are using in that moment. The hand icon will help you move the canva. 16. **Do/Undo Actions** 17. **Move forward/backward**: send the element you are working with to backward or forward just with one click 18. **Element settings:** once you click any element in the canvas, this option will be available showing all the features you can set up for it. Most of the times is really important you select the options you need for that element, in order to follow the flow you need for the game. 19. **Actions**: each element has a set of actions you need to use to create the game. For instance, this determines how and when the game moves to the next scene.\ **It's necessary to stablish actions in each scene to define how to move from one scene to another,** otherwise the game flow will be broken and teh player will get stuck. 20. **Effects**: use this option to set when and how the element will appear and/or dissappear. This option is super useful to create a more dynamic game. 21. **Customize texts**: This icon allows you to customize the texts of each component for every available language in your game.\ You can edit and translate the displayed text directly from here to make your project multilingual and more accessible. 22. **Opacity and color** 23. **Properties**: here you will find all the properties each element has such as style, appearance or set up in the case of the gamifications components (puzzles, minigames, progress bar, etc...); in this case a purple wheel icon will appear. 24. **Thumbnail viewer:** by default scenes thumbnails will be visible in this bar. Click on this icon if you need to hide it. 25. **Interface layer**: this feature is important if you want to keep elements at a fixed place or activated during all the game. This is specially useful if you want to place a logo along all the scenes, or background music in loop, for instance. 26. **Interface layer settings**: you can create more than one interface layer for different parts of the game, clone them or delete them. 27. **Canvas center**: click is to center the center to full screen. 28. **Zoom in/out** 29. **Scenes thumbnails**: If the thumbnail viewer is on, you can see all the scenes here. Click on "+" icon to create a new scene. Now you know better all the options in the editor. It's time to start creating! # General Settings

Once you've chosen a template or the option to create the game from scratch it's time to set these options. Don’t worry if you want to change them later. Once you enter the game editor you can modify them from "Settings" in the left side menu. In GENERAL, you can configure the following: 1. **Front Image**: here, you can upload an image for the game's title. It's recommended to use a .png format with a transparent background. 2. **Background Image**: this will serve as the cover image for the game. Keep in mind that these two images will appear as the cover in the dashboard of your created projects. They don’t replace the cover image you'll need to configure in the "start" scene within the editor. 3. **Name**: this is the title of your game. 4. **Description**: this description will appear in the game's preview. 5. **Category**: you must select the main category under which you want to assign this game. Once you've set these options for the first time, a "Next" button will appear to take you to the Canvas configurator. After this initial setup, you can simply navigate between these two sections using the tabs above and modify what it's needed. In CANVAS, you can configure: 1. **Text Color**: this defines the default text color in the game. You can always change the color for each individual text element later in the scenes editor. 2. **Background Color**: when scenes don’t have images or videos covering the background, this default color will be visible as the scene's background. 3. **Width and Height**: it’s important to define the size of the game. Keep this in mind especially if the game is designed to be played on a specific type of device. For example, if you want the game to be played on mobile, it’s recommended to set the correct pixel size to ensure proper display and gameplay. The default size is 1920x1080, which is perfect for full-screen games on computers. 4. **Orientation**: this option is especially useful for games designed for mobile devices. Here, you can force the game to be played either vertically or horizontally. 5. **Full Screen**: this option is ideal for games that need to be played with a timer, without interruptions, and in one go. Full-screen mode improves the game's visibility as it will take up the entire display of the device it's played on. Have you set up everything? Great! You're now ready to start creating a fantastic project! # Multimedia

In multimedia you will find all the assets the game has in case you chose to use a template; otherwise it is empty. Here are all the images, video and music files. To add them just click on the "Upload" button at the top or just drag the file into the canva from your computer. \ \ If you want to find a file quickly use the Search Bar at the top of the subcomponents menu. {% hint style="info" %} To DELETE a file just drag it back on the white box at the top (the same used to upload the items). {% endhint %} # Audio To add music or sounds to your game, you must go to the Multimedia section and click on the "UPLOAD" section, or drag it to the scene from your files. You can add it in two different ways: * If you drag it into the normal scene, you'll only hear it in that scene, and when you move on to the next one, it won't be played. * However if you place it on the Interface Layer (![](/files/9sqyT2UquFvzmDPRZkX4)), you'll be able to hear it throughout the game. * You can put the audios you want in your game. * If you click on the audio and then on the audio settings button, you will see the following: 1. ***Audio file:*** listen to the sound or music you import. 2. ***Autoplay:*** if you turn this option on, the music will play automatically without you having to press the play button yourself. 3. ***Repeat:*** when the audio ends, if you turn on this feature, it will repeat from the beginning and continue to loop. 4. ***Show Controls:*** with this feature, you'll hide audio from the player's view, making it visible only to you in edit mode. 5. ***Initial volume: y***ou will be able to control the volume at which the audio will be heard.

# Video To add videos to your game, you must go to the Multimedia section and click on the "UPLOAD" section, or drag it to the scene from your files.

You can add it in two different ways: * If you drag it into the normal scene, you'll only see it in that scene, but when you move on to the next one, it won't be seen. * However if you place it on the Interface Layer (![](/files/9sqyT2UquFvzmDPRZkX4)), you will be able to see it throughout the game. * You can put the images you want in your game. # Elements Elements are shapes that you can use in different ways. For example, if you take a cubic shape you can use it as if it were a piece of paper, or to use as a text box, etc There are different shapes, such as squares, circles, stars, and many more shapes. # Components # Subcomponents # Action Scheduler {% hint style="info" %} 🚀 **Premium Feature**: The Action Scheduler is a premium component that requires an upgraded UFOLab subscription to use in your games. {% endhint %} The **Action Scheduler** is an advanced component that lets you set up automatic events in your game. Think of it as a timer that can trigger things to happen at exactly the right moment - like revealing a hint after 30 seconds, playing background music when the game starts, or showing a popup at a specific time. ## Overview The Action Scheduler is completely invisible to your players - they'll never see it on screen. Instead, it works quietly in the background, waiting for the right moment to make things happen in your game. It's perfect for creating engaging experiences where events unfold automatically at just the right time. ![Action Scheduler component in the editor showing timing configuration](/files/4C4VRRj4LEJ8EROEkNfg) ## How to Add an Action Scheduler 1. Open your game in the UFOLab editor 2. Navigate to the **Components** section in the component picker 3. Select **Action Scheduler** from the advanced components 4. Drag and drop it onto your scene ![Adding Action Scheduler from component picker](/files/Rw3NIasS5T4EJsExtrhI) ## Setting Up Your Timer ### Choose When to Start Counting First, decide when you want the timer to begin counting down: ![Timing source selection dropdown](/files/tm9hnHb0la6EReObDJ24) #### When This Scene Starts * **Best for**: Events that should happen every time a player visits this scene * **How it works**: The timer starts fresh each time the player enters this scene * **Great for**: Welcome messages, scene-specific hints, or atmosphere effects #### When the Game Begins * **Best for**: Events that should happen at consistent times throughout the entire game * **How it works**: The timer starts counting from the moment the player first starts playing * **Great for**: Story progression, tutorial steps, or game-wide announcements #### When the Game Clock Starts * **Best for**: Competitive or timed challenges * **How it works**: The timer starts when your game's timer begins running * **Great for**: Time-limited puzzles, countdown events, or challenge modes #### At a Specific Date and Time * **Best for**: Real-world events or special occasions * **How it works**: The event triggers when the real date and time is reached * **Great for**: Holiday content, live events, or scheduled announcements ### Set Your Countdown Time ![Delay configuration with minutes and seconds](/files/11tLd9EGAhnAEfiiYu4Y) For most timing options, you'll set how long to wait: * **Minutes**: How many minutes to wait (you can use 0 if you only want seconds) * **Seconds**: How many seconds to wait (from 0 to 59) * **Example**: Setting 2 minutes and 30 seconds means your event will happen 2 minutes and 30 seconds after the timer starts ### Choose Your Specific Date and Time ![Date and time picker for absolute scheduling](/files/b3Y1cp4Zm15AQ1XILXU5) When using "At a Specific Date and Time": * **Pick a date**: Choose the calendar date when you want the event to happen * **Set the time**: Choose the exact hour and minute * **Important**: The time will be based on each player's local time zone ## Deciding What Should Happen {% hint style="warning" %} ⚠️ **Important**: Actions are required for the Action Scheduler to function properly. You must set up what happens when the timer executes. {% endhint %} Now that you've set up when the timer should trigger, you need to tell it what to do when the time comes: 1. Click on your Action Scheduler component to select it 2. Look for the **Actions** tab in the properties panel 3. Set up the **"When Timer Executes"** action ![Action configuration panel](/files/Wge270U5qmUxQ8dfH0G1) ### Popular Things You Can Do * **Show or hide game elements**: Reveal a helpful hint, show a secret door, or make a character appear * **Play sounds or music**: Start background music, play a notification sound, or trigger sound effects * **Move to another scene**: Automatically take players to the next level or area * **Update the game**: Change the score, unlock achievements, or modify game variables * **Create visual effects**: Start animations, fade effects, or other visual changes ## How It Looks in the Editor While editing your game, the Action Scheduler shows you helpful information: ![Editor visual feedback showing component status](/files/sPLsKRU5P6SBhL56NL56) * **Clock icon**: So you can easily spot it among other components * **Component name**: The name you gave it (helpful when you have multiple timers) * **Timing method**: Shows whether it's using scene start, game start, etc. * **Timer setting**: Displays how long the countdown is or what date/time it's set for * **On/Off status**: Shows whether the timer is currently active or disabled ## Popular Ways to Use Action Scheduler ### Teaching Players (Tutorials) Create automatic message sequences where information appears at perfectly timed intervals, without requiring any user action. **Multiple Action Schedulers Working Together:** ``` Action Scheduler #1 (Scene Start + 0 seconds) ↓ 0:00 - Shows welcome message: "Welcome to the magical forest!" Action Scheduler #2 (Scene Start + 5 seconds) ↓ 0:05 - Plays ambient forest sounds Action Scheduler #3 (Scene Start + 10 seconds) ↓ 0:10 - Shows narrator text: "Long ago, a treasure was hidden here..." Action Scheduler #4 (Scene Start + 20 seconds) ↓ 0:20 - Reveals a glowing hint on screen ``` **How it works**: Each Action Scheduler is a separate component with its own timing. You can have multiple schedulers in the same scene, each set to trigger at different moments to create a flowing sequence of automatic events. ### Storytelling Control when story elements are revealed to create suspense, drama, or perfect pacing in your narrative. **Example**: Have a character's dialogue appear, wait 5 seconds, then play a dramatic sound effect. ### Challenges and Games Add excitement with timed events, automatic level progression, or surprise elements that keep players engaged. **Example**: In a puzzle game, reveal a hint after 2 minutes if the player hasn't solved it yet. ### Atmosphere and Mood Create living, breathing game worlds with automatic background changes, weather effects, or ambient sounds. **Example**: Change the background music after 3 minutes to signal a shift in mood or difficulty. ## If Something's Not Working ### My Timer Isn't Triggering **Check these common issues:** * Make sure the Action Scheduler component is turned on (enabled) * **Most Important**: Verify that you've set up an action for "When Timer Executes" - this is required for the component to work * If using "Game Start" timing, make sure you have defined a starting scene for your game. * Double-check your time settings - did you set both minutes and seconds to 0 by accident? ### The Timing Seems Off * Test your game from the beginning to see the actual timing * Remember that "Scene Start" timing resets every time someone enters the scene * For consistent timing across your entire game, use "Game Start" instead ## Creative Tips ### Create Event Chains Use multiple Action Schedulers to create elaborate automatic sequences. Each scheduler works independently but together they create a coordinated experience. **Example - Automated Story Sequence:** * **Scheduler A**: Shows character after 3 seconds * **Scheduler B**: Character speaks after 8 seconds * **Scheduler C**: Background music starts after 12 seconds * **Scheduler D**: Character exits after 18 seconds **Pro Tip**: You can also use one Action Scheduler to trigger an action that enables/disables other components, creating even more complex automated sequences! ### Smart Hint Systems Set up helpful hints that appear when players might be stuck, making your game more user-friendly without being pushy. **Example**: If it's a puzzle game, show a small hint after 1 minute, a bigger hint after 3 minutes. *** The Action Scheduler is an amazing way to make your games feel more alive and engaging. With a little creativity, you can use it to create memorable moments that happen at just the right time, making your players feel like they're experiencing something truly special. # Variable Prompt {% hint style="info" %} 🚀 **Premium Feature**: The Variable Prompt is a premium component that requires an upgraded UFOLab subscription to use in your games. {% endhint %} The **Variable Prompt** is an advanced component that allows you to collect custom information from players and store it as variables in your game. Think of it as a way to personalize your game experience by asking players to provide specific information that can be used throughout the game - like their name, preferences, or any other custom data you need. ## Overview The Variable Prompt creates a simple form where players can enter text that gets stored as a game variable. This variable can then be used anywhere in your game through text templating, making your content dynamic and personalized. It's perfect for creating engaging, customized experiences where players feel like the game is responding to their input. ![Variable Prompt component in the editor showing the userName template](/files/hxhuYcGNHl7AxyRuD6ke) ## How to Add a Variable Prompt 1. Open your game in the UFOLab editor 2. Navigate to the **Components** section in the component picker 3. Select **Variable Prompt** from the advanced components 4. Drag and drop it onto your scene ![Adding Variable Prompt from component picker](/files/XQtR0QFQ7JDPwk8Va1MH) ## Setting Up Your Variable Prompt ### Choose Your Variable Template The Variable Prompt comes with pre-configured templates to make setup easier. Currently available: #### User Name Template * **Variable Name**: `userName` * **Purpose**: Collects the player's name for personalization * **Use Case**: Perfect for creating personalized experiences ### Configure Your Settings Click on your Variable Prompt component to access the configuration options: ![Variable Prompt configuration panel](/files/FOcGrI4fnjL0YLE2UUXZ) #### General Settings **Variable Name** (Hidden) * This is automatically set based on your chosen template * For the User Name template, this is set to `userName` * The variable name is how you'll reference this data in your game **Allow Repeated Submit** * **Default**: `false` (recommended) * When `false`: Players can only submit their input once * When `true`: Players can change their input multiple times * **Best Practice**: Keep this `false` for user names to maintain consistency ## Using Variables in Your Game Once a player submits their information through the Variable Prompt, you can use that data anywhere in your game using text templating. ### Text Templating Syntax Use double curly braces to reference your variables in any text component: ```markdown {{variableName}} ``` ### User Name Examples Here are practical examples of how to use the `userName` variable: #### Welcome Messages ```markdown Welcome to the adventure, {{userName}}! ``` #### Personalized Instructions ```markdown {{userName}}, you need to find the hidden treasure in the next room. ``` #### Dynamic Dialogue ```markdown "Hello {{userName}}! I've been waiting for you. The kingdom needs your help!" ``` #### Achievement Messages ```markdown Congratulations {{userName}}! You've completed the first level! ``` ### Setting Up Text with Variables 1. Add a **Text** component to your scene 2. In the text content, type your message using the variable syntax 3. The variable will be automatically replaced with the player's input when the game runs ![Text component showing variable usage](/files/jfecWTmUQpwPd0Mb5sf5) ## Actions Setup {% hint style="warning" %} ⚠️ **Important**: Actions are required for the Variable Prompt. You must set up what happens when the player submits their information so the user gets some feedback. {% endhint %} ### Required Actions When the player submits their information, you need to define what happens next: 1. Click on your Variable Prompt component to select it 2. Look for the **Actions** tab in the properties panel 3. Set up the **"When Submit"** action ![Action configuration panel](/files/ipidJg0BuSxavu6mj9Zq) ### Popular Actions After Submit * **Go to another scene** - Move the player to the next part of your game * **Show a welcome message** - Display personalized content using the variable * **Start a timer** - Begin a countdown or timed challenge * **Reveal game elements** - Show hidden components or information * **Play sounds** - Trigger audio feedback or background music ## Future Use Cases The Variable Prompt is designed to be extensible. While currently focused on user names, future updates will include additional templates for: * **Player preferences** - Difficulty level, game mode selection * **Custom data collection** - Survey responses, feedback, choices * **Personalization settings** - Avatar names, character customization * **Educational data** - Student information, class details The component structure is built to easily accommodate these future enhancements while maintaining the same simple setup process. ## Integration with Premium Features ### Ranking Component (Coming Soon) The `userName` variable collected by the Variable Prompt will be used by the upcoming **Ranking** component, another premium feature that will: * Display player names in leaderboards * Show personalized achievement lists * Create competitive experiences with named participants This integration makes the Variable Prompt an essential component for creating engaging, competitive game experiences. ## Popular Ways to Use Variable Prompt ### Personalized Learning Experiences Create educational games where students feel personally engaged: **Example Flow:** ``` 1. Variable Prompt: "What's your name?" 2. Text: "Welcome {{userName}}! Today we'll learn about..." 3. Personalized feedback throughout the lesson 4. Final message: "Great job {{userName}}! You've mastered the topic!" ``` ### Interactive Stories Make players the protagonist of their own adventure: **Example Flow:** ``` 1. Variable Prompt: "What should we call our hero?" 2. Story text: "{{userName}} walked into the mysterious forest..." 3. Character dialogue: "{{userName}}, you must find the ancient artifact!" ``` ### Corporate Training Personalize professional development content: **Example Flow:** ``` 1. Variable Prompt: "Enter your employee ID" 2. Training content: "Hello {{userName}}, let's review your training progress..." 3. Personalized completion certificates ``` ## If Something's Not Working ### My Variable Isn't Showing Up in Text **Check these common issues:** * Make sure you're using the correct variable name: `{{userName}}` (case-sensitive) * Verify that the player has actually submitted their information through the Variable Prompt * Ensure the text component is on the same scene or a later scene (variables persist throughout the game) * Check that you've set up the submit action properly ### The Variable Shows as Empty * Make sure the Variable Prompt has been submitted at least once * Verify that the variable name in your text matches exactly: `{{userName}}` * Check that the Variable Prompt is enabled and working properly ### Players Can't Submit Their Information * Ensure you've set up the "When Submit" action * Check that the Variable Prompt component is enabled * Verify that "Allow Repeated Submit" is set appropriately for your use case ## Creative Tips ### Create Variable Chains Use multiple Variable Prompts to collect different types of information: **Example - Character Creation:** 1. Variable Prompt 1: "What's your hero's name?" → {{userName}} 2. Text: "The hero, {{userName}}, begins their quest..." ### Combine with Other Components Use variables with other advanced components for rich interactions: * **Action Scheduler** + Variable: "{{userName}}, the timer starts now!" * **Dialogue** + Variable: Character says "Hello {{userName}}!" * **Quiz** + Variable: "{{userName}}, here's your personalized quiz!" ### Smart Defaults Consider what happens if players don't provide information: * Use fallback text: "Welcome, {{userName}}!" (shows as "Welcome, !" if empty) * Or create conditional logic with other components to handle empty variables *** The Variable Prompt is an amazing way to make your games feel personal and engaging. By collecting player information and using it throughout your game, you create experiences that feel tailored to each individual player, making your content more memorable and impactful. # Maze generator

{% hint style="info" %} To use this maze, it is advisable to add a Basic Questions puzzle to write the answer, that is, the word that will have to be formed to get out of the maze. {% endhint %}

In the settings of the maze, you will find the following sections: * Difficulty: there are three levels of difficulty (Easy, Medium and Hard). * Empty maze: use it to remove the letters and make only the maze appear. * Word: here you will write the word you want to be the solution to get from the beginning to the end of the maze. * Random Maze: generates a new maze with each game. * Seed: an initial value used to generate predictable random results. In other words, the route of the maze will change. * Color: change the color of the maze from black to white, or vice versa. # Flashlight

{% hint style="info" %} To use this flashlight, it is advisable to put it on top of the scene occupying the full screen. {% endhint %}

In the settings of the flashlight, you will find the following sections: * **Flashlight size:** number between 10 and 20 that will change the flashlihgt and its light size. * **Darkness:** number between 75 and 100 that will determine how dark the component will get, being 100 completely black. # Dialogue

The **Dialogue Component** in UFOLAB is a feature that allows game creators to add text-based dialogues, similar to those used in narrative-driven games. It’s designed to simulate character conversations or provide story elements to players in different stages or phases. This component is ideal for storytelling, giving instructions, or delivering information in a dynamic, stage-by-stage manner.

*** ### How to Set Up the Dialogue Component 1. **Adding the Dialogue Component**: * In the game editor, locate the **Dialogue Component** from the left toolbar in Components. * Drag the **Dialogue Component** into the scene where you want the dialogue to appear. 2. **Dialogue style**:\ You can personalize the appearance of the dialogue by adjusting fonts, text size, and color to fit the overall game design.
3. **Configuring Dialogue Stages**: * Once the component is added, you can set up the dialogue in different stages. This feature allows you to separate the conversation or information into manageable parts, which the player will experience in sequence. * For each stage, you need to add 3 dashes (---) and then Intro in your Keyboard. {% hint style="info" %} Dialogue stages need to be separated by: Intro + --- + Intro. \ Example: \ CHARACTER 1: Hello \--- CHARACTER 2: I am Ryder {% endhint %} 4. **Configuring Dialogue Options**: * **Speed: n**umber of keystrokes per second. * **Characters per tick: n**umber of characters typed per keystroke. * **Delay: w**ait time in seconds before typing starts. * **Key sound:** different styles of sound to adjust this component to the game style.

# Box

The **Box component** allows you to use a customizable text box, that you can adapt to any style you want

{% hint style="info" %} The Box component is customizable, this means you can use a custom image for the box and adjust the margins of the text. {% endhint %} Click on the component and then on the settings gear icon that will appear in the top menu or double click on the component. You will see a menu with two set up options: Configuration and Advanced. ### Configuration By clicking here you can set a custom image to the component. ### Advanced By clicking here you can change the margins of the text.

# Embedded frame

Drag the component from the elements tab to the scene you're working on. \ This component allows you to display an external web page directly inside your game.\ Make sure that the page you want to show allows embedding on external sites. ### How to change the component style To resize it, use the arrow icon in the top menu.\ You can freely adjust the size of the embedded window to fit your scene layout. ### How to set up the Embedded Window Click on the component and then on the settings gear icon that will appear in the top menu or double click on the component. You will see a menu with two setup options: **General** and **Advanced Settings**. #### General Here you can define: * **Enabled on start** → Enable or disable the embedded window visibility when the scene starts. * **Page URL to display** → Enter the full URL of the web page you want to embed (e.g., `https://theufolab.com`).\ The page must be configured to allow embedding in external domains. * **Scroll behavior** → Choose how the scroll behaves inside the embedded page.\ Options include: * **None** – disables scrolling. * **Auto** – scrolling is enabled automatically if the page content exceeds the visible area. * **Yes / No** – force scroll activation or deactivation. #### Advanced Settings In the **Advanced Settings** tab, you can control more technical options: * **Allow fullscreen** → Enables the embedded window to switch to fullscreen mode. * **Window permissions** → Define what the embedded page is allowed to do.\ Common permissions include: * `allow-forms` → Allows form submission within the embedded page. * `allow-modals` → Enables modal windows (such as alerts or confirmation dialogs). * `allow-pointer-lock` → Grants control over the mouse pointer (useful for interactive web content). * `allow-popups` → Allows pop-up windows to open from the embedded page. * `allow-popups-to-escape-sandbox` → Lets pop-ups open outside the sandboxed environment. * `allow-presentation` → Enables presentation mode, often used for media or slides. * `allow-same-origin` → Allows access to resources from the same domain as the embedded content. * `allow-scripts` → Permits the execution of JavaScript inside the embedded page. \ By default, the embedded window has restricted access for security reasons.\ You can manually add permissions if the page requires specific functionality (such as scripts, popups, or forms). ### Player interaction The embedded page behaves like a small browser inside your game.\ Players can scroll, click, and interact with the embedded content based on the permissions you’ve enabled. # Ranking {% hint style="info" %} 🚀 **Premium Feature**: The Ranking component is a premium feature that requires an upgraded UFOLab subscription to use in your games. {% endhint %} The **Ranking** component displays game rankings and leaderboards, allowing you to showcase top performers and create competitive experiences. It automatically fetches and displays player scores and completion times, making it perfect for games where competition and achievement matter. ## Overview The Ranking component creates a dynamic leaderboard that pulls real gameplay data from your game. Players can see where they stand compared to others, view top performers, and track their progress over time. With extensive customization options, you can control what information is displayed, how many entries appear, and even filter rankings by date ranges. ## How to Add a Ranking Component 1. Open your game in the UFOLab editor 2. Navigate to the **Components** section in the component picker 3. Select **Ranking** from the static components 4. Drag and drop it onto your scene ## Configuration Settings Click on your Ranking component to access the configuration options, organized into two tabs: **General** and **Display**. ### General Settings #### Number of Rows * **Default**: `10` * **Range**: 1-100 entries * Controls how many ranking entries are displayed * **Tip**: Start with 10-20 entries for optimal readability #### Show Anonymous Users * **Default**: `false` * When `true`: Includes anonymous players in the ranking * When `false`: Shows only named players * **Best Practice**: Enable this if you want to show all participation, disable for cleaner professional leaderboards #### Enable Pagination * **Default**: `false` * When `true`: Adds navigation buttons to browse through multiple pages * When `false`: Shows only the first set of entries * **Use Case**: Enable for games with many participants to allow browsing through all rankings #### Start Date * **Default**: Empty (no start limit) * Filter rankings to show only games played from this date onwards * **Use Case**: Create weekly, monthly, or seasonal leaderboards #### End Date * **Default**: Empty (no end limit) * Filter rankings to show only games played up to this date * **Use Case**: Create time-limited competitions or historical rankings #### Only Completed Games * **Default**: `true` * When `true`: Shows only players who completed the entire game * When `false`: Includes all game attempts regardless of completion * **Best Practice**: Keep `true` for fair competition where everyone finished the same content ### Display Settings #### Display Score * **Default**: `true` * Shows the score column in the ranking table * **Use Case**: Disable if your game doesn't use scoring or if you only want to rank by time #### Display Time * **Default**: `true` * Shows the completion time column in the ranking table * Time is automatically formatted as MM:SS or HH:MM:SS * **Use Case**: Essential for time-based challenges or speed-run competitions #### Show User Context * **Default**: `false` * When `true`: Centers the ranking around the current player's position * Shows positions above and below the player * **Use Case**: Perfect for large leaderboards where players want to see their local competition * **Note**: This overrides the standard top-N display #### Context Rows * **Default**: `5` * **Range**: 1-50 positions * Number of positions to show above and below the current player (±) * **Only visible when** "Show User Context" is enabled * **Example**: If set to 5, shows 5 positions above, the player, and 5 positions below (11 total entries) #### Show Background * **Default**: `true` * When `true`: Displays a background box around the ranking * When `false`: Shows the ranking table without a container background * **Use Case**: Disable for transparent overlays or custom-styled scenes ## Understanding Ranking Display Modes The Ranking component can operate in two different modes: ### Top Rankings Mode (Default) * Shows the top N players based on score and time * Best for highlighting top performers * Controlled by the "Number of Rows" setting ### User Context Mode * Centers the ranking around the current player * Shows their local competition (players ranked near them) * Activated by enabling "Show User Context" * Shows ± positions around the player (controlled by "Context Rows") ## Customizing Appearance ### Text Styling The Ranking component provides toolbar controls for quick text customization: * **Font Family**: Choose from available fonts (default: Inter) * **Font Size**: Adjust text size (default: 16pt) * **Text Color**: Set the color for all text in the ranking (default: #000000) ### Translatable Text Fields The Ranking component includes several text fields that can be customized and localized: * **title**: Heading shown above the ranking table * **position**: Column header for ranking position * **player**: Column header for player names * **score**: Column header for scores * **time**: Column header for completion times * **loading**: Message shown while fetching data * **noData**: Message shown when no rankings are available * **nextPage**: Text for next page button * **prevPage**: Text for previous page button * **page**: Label for current page indicator * **anonymous**: Text shown for anonymous players **Default values (English):** ``` title: "Ranking" position: "Position" player: "Player" score: "Score" time: "Time" loading: "Loading..." noData: "No data available" nextPage: "Next" prevPage: "Previous" page: "Page" anonymous: "Anonymous" ``` ## How Rankings Work ### Ranking Criteria Players are ranked based on the following logic: 1. **Primary**: Higher score = better rank 2. **Secondary**: Faster completion time = better rank (when scores are equal) 3. Each entry shows the player's best performance ### Data Source * Rankings pull from actual gameplay data * Only displays in **Play Mode** (shows sample data in Editor and Preview modes) * Automatically updates when new games are completed * Respects all filter settings (dates, completion status, anonymous users) ### Time Formatting Completion times are automatically formatted for readability: * **Under 1 hour**: MM:SS (e.g., "5:23" for 5 minutes 23 seconds) * **1 hour or more**: HH:MM:SS (e.g., "1:15:30" for 1 hour 15 minutes 30 seconds) ## Integration with Other Components ### Variable Prompt Integration The Ranking component works seamlessly with the [Variable Prompt](/game-editor/components/subcomponents/variable-prompt) component: 1. Use Variable Prompt to collect player names (`userName` variable) 2. Player names automatically appear in the ranking instead of "Anonymous" 3. Creates a more personal and engaging competitive experience **Example Flow:** ``` Scene 1: Variable Prompt → Collect player name Scene 2-5: Game content Scene 6: Ranking → Shows personalized leaderboard with player names ``` ### Action Scheduler Combine with Action Scheduler to create time-limited competitions: * Set up actions to navigate to the ranking screen after game completion * Create timed challenges where rankings update in real-time * Build tournament-style experiences with scheduled leaderboard reveals ## Popular Use Cases ### Educational Quizzes Create competitive learning experiences: **Setup:** 1. Variable Prompt: Collect student names 2. Quiz components: Educational content with scoring 3. Ranking component: Display top performers 4. **Settings**: `onlyCompleted: true`, `displayScore: true`, `displayTime: true` ### Speed Challenges Build time-trial competitions: **Setup:** 1. Set clear objectives or obstacles to overcome 2. Track completion time automatically 3. Ranking: Sort by fastest times 4. **Settings**: `displayTime: true`, `displayScore: false` (if scoring isn't used) ### Weekly Competitions Create recurring leaderboards: **Setup:** 1. Set `startDate` to beginning of current week 2. Set `endDate` to end of current week 3. Update dates weekly for fresh competition 4. **Tip**: Consider creating multiple game versions for different time periods ### Corporate Training Track employee progress and engagement: **Setup:** 1. Variable Prompt: Employee identification 2. Training modules with assessment 3. Ranking: Display top learners 4. **Settings**: `showAnonymous: false`, `onlyCompleted: true` ### Tournament Events Build competitive gaming experiences: **Setup:** 1. Set specific date range for the tournament period 2. Show top performers only 3. Enable pagination for large participant pools 4. **Settings**: `limit: 20`, `enablePagination: true`, `showUserContext: false` ### Personal Progress Tracking Help players see their local competition: **Setup:** 1. Enable "Show User Context" 2. Set context rows to 5-10 3. Players see where they rank among nearby competitors 4. **Settings**: `showUserContext: true`, `contextRows: 5-10` ## If Something's Not Working ### The Ranking Shows "No Data Available" **Check these common issues:** * Verify that players have actually completed games (if `onlyCompleted` is `true`) * Check that your date filters (if set) include valid game completion dates * Make sure the game has been played at least once in Play Mode * Confirm you're viewing in Play Mode (not Editor or Preview) ### Rankings Don't Update * Rankings fetch fresh data each time the component loads * Refresh the page to see the latest rankings * Verify that new game completions meet your filter criteria (completion status, dates) ### Pagination Isn't Working * Pagination only appears when there are more results than the `limit` setting * Enable "Enable Pagination" in General settings * Verify you have more completed games than your "Number of Rows" setting ### Anonymous Players Appearing When They Shouldn't * Check "Show Anonymous Users" setting - ensure it's set to `false` * Verify that players are using the Variable Prompt to set their names * Confirm the `userName` variable is being set before game completion ### User Context Not Showing Correctly * Ensure "Show User Context" is enabled * Verify that the current player has completed at least one game * Check that `contextRows` is set appropriately for the number of participants ## Creative Tips ### Create Multiple Leaderboards Use multiple Ranking components with different settings on different scenes: * **Scene 1**: Overall top 10 performers (all-time) * **Scene 2**: This month's leaderboard (date filtered) * **Scene 3**: Player's personal context view ### Combine with Action Scheduler Create dynamic leaderboard reveals: 1. Show loading message for 2 seconds 2. Reveal ranking with animation 3. Highlight current player's position 4. Celebrate top performers with special effects ### Seasonal Competitions Create recurring engagement with date-filtered rankings: * **Weekly Rankings**: Reset every Monday * **Monthly Championships**: Show last month's winners * **Seasonal Events**: Special holiday or themed competitions ### Achievement Tiers Design multiple difficulty levels with separate rankings: * **Beginner Ranking**: Show only "Easy" mode completions * **Expert Ranking**: Show only "Hard" mode completions * Use different scenes or game versions for each tier ### Visual Enhancements Make your rankings stand out: * Use custom background images behind the ranking component * Apply animations or transitions when the ranking appears * Highlight the top 3 positions with special visual styling * Add celebratory sounds when displaying rankings ### Friendly Competition Encourage engagement without overwhelming players: * Use "User Context" mode to show local competition * Set reasonable "Number of Rows" (10-20) to avoid intimidation * Hide anonymous users for more personal connections * Display encouraging messages for all participants *** The Ranking component transforms your games into competitive experiences that keep players engaged and coming back to improve their performance. Whether you're creating educational challenges, training assessments, or pure entertainment, rankings add that extra layer of motivation that drives participation and excellence. # Minigames # Questions (Basic Puzzle)

## How to set the puzzle question component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Solutions**: here is where you indicate the valid answers. If there are multiple correct answers, click "+" and add all the necessary ones. * **Ignore Case Letters:** if you check this option, the player can write the answer in either lowercase or uppercase letters. You’ll need to add all possible answers in lowercase. On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked.

## How to set the actions after the solutions is written When the player enters their answer in the puzzle, there are only two options: either the answer is correct, or it is incorrect. {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} The available options are: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL**

{% hint style="info" %} When the answers can be very broad, remember to include all possible solutions as valid answers. {% endhint %} \ For example, if the correct answer is the name of a street, the player might write the answer in different ways, such as: Calle San Bernardo, Calle de San Bernardo, San Bernardo... # Colors (Basic Puzzle)

Drag the component from the components bar to the scene you're working on. {% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes or lose. {% endhint %} ## How to set the colors puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Images**: all the options you can use in this puzzle. * **Solutions**: here is where you set up the valid answers. If there are multiple correct answers, click "+" and add all the necessary combinations. Just drag the colors available from "Images" to the spaces in "Solutions". If you want the combination of colors in a certain order, don't forget to place the colors in that order, from left to right. * **Ignore Order in the Answer:** if you check this option, the player can pick the colors of the answer in any order. Example, the question is "which colors form the rainbow?". In this case, it doesn't make any change the order in which the player picks the colors, the answer is fully valid no matter the order. * **Not allow duplicates**: this option will disable a color once the player has already picked it. Example, the question is "which colors form the rainbow?", every color in the rainbow appear once, so of you let the player selected it from the color picker more than once may be confusing. * **Solution length**: number of elements the solution should have. Allows you to restrict the number of options in the 'Response' area and will set the height of the component {% hint style="info" %} To remove a color from the solution, just click on it and will dissapear. If you need to remove a full combination of colors, repeat this on each one. {% endhint %} On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked.

# Arrows (Basic Puzzle)

## How to set the arrows puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Images**: all the options you can use in this puzzle (right, left, up and left). * **Solutions**: here is where you set up the valid answers. If there are multiple correct answers, click "+" and add all the necessary combinations. Just drag the arrows available from "Images" to the spaces in "Solutions". If you want the combination of arrows in a certain order, don't forget to place the arrows in that order, from left to right. * **Ignore Order in the Answer:** if you check this option, the player can pick the arrows of the answer in any order. * **Not allow duplicates**: this option will disable each arrow when selected. * **Solution length**: number of elements the solution should have. Allows you to restrict the number of options in the 'Response' area and will set the height of the component {% hint style="info" %} To remove a option from the solution, just click on it and will dissapear. If you need to remove a full combination, repeat this on each one. {% endhint %} On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked.

# Shapes (Basic Puzzle)

## How to set the shapes puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Images**: all the options you can use in this puzzle. * **Solutions**: here is where you set up the valid answers. If there are multiple correct answers, click "+" and add all the necessary combinations. Just drag the shapes available from "Images" to the spaces in "Solutions". If you want the combination of shapes in a certain order, don't forget to place the shapes in that order, from left to right. * **Ignore Order in the Answer:** if you check this option, the player can pick the shapes of the answer in any order. * **Not allow duplicates**: this option will disable each shape when selected. * **Solution length**: number of elements the solution should have. Allows you to restrict the number of options in the 'Response' area and will set the height of the component {% hint style="info" %} To remove a option from the solution, just click on it and will dissapear. If you need to remove a full combination, repeat this on each one. {% endhint %} On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked.

# Letters (Basic Puzzle)

## How to set the letters puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Images**: all the options you can use in this puzzle. * **Solutions**: here is where you set up the valid answers. If there are multiple correct answers, click "+" and add all the necessary combinations. Just drag the letters available from "Images" to the spaces in "Solutions". If you want the combination of letters in a certain order, don't forget to place the letters in that order, from left to right. * **Ignore Order in the Answer:** If you check this option, the player can pick the letters of the answer in any order. * **Not allow duplicates**: this option will disable each letter when selected. * **Solution length**: number of elements the solution should have. Allows you to restrict the number of options in the 'Response' area and will set the height of the component {% hint style="info" %} To remove a option from the solution, just click on it and will dissapear. If you need to remove a full combination, repeat this on each one. {% endhint %} On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked

# Numbers (Basic Puzzle)

## How to set the numbers puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Images**: all the options you can use in this puzzle. * **Solutions**: here is where you set up the valid answers. If there are multiple correct answers, click "+" and add all the necessary combinations. Just drag the numbers available from "Images" to the spaces in "Solutions". If you want the combination of numbers in a certain order, don't forget to place the numbers in that order, from left to right. * **Ignore Order in the Answer:** if you check this option, the player can pick the numbers of the answer in any order. * **Not allow duplicates**: this option will disable each number when selected. * **Solution length**: number of elements the solution should have. Allows you to restrict the number of options in the 'Response' area and will set the height of the component {% hint style="info" %} To remove a option from the solution, just click on it and will dissapear. If you need to remove a full combination, repeat this on each one. {% endhint %} On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked.

# True or False (Basic Puzzle)

# Scratch Image (Basic Puzzle)

## How to set the Scratch Image component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Remove Background image**: When scratched, the component reveals what´s underneath. * **Brush size**: adjust the size of the brush used to scratch. {% hint style="info" %} To use a custom image to reveal, unmark the "Remove background image option" or place it below the component. {% endhint %} On the left, you'll see another section called "Others," where you can: * **Mute** the correct or incorrect answer sound that plays after the response is checked. * Change the **volume**. * Add a white **frame** to the component. * Adjust the time between when the player reveals the image and the winning action is executed.

## How to set the actions after the image is revealed When the player reveals the image , there the winning action is triggered. {% hint style="info" %} It's very important to specify what should happen in this case. Click on the Actions icon in the top menu and add one or more actions for when the player gets the puzzle right. {% endhint %} The available options are: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL**

# Custom Images (Basic Puzzle)

Drag the component from the subcomponents bar to the scene you're working on. ## How to change the component style To resize it, use the arrow icon in the top menu.

{% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes or lose. {% endhint %} ## How to set the images puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Images**: all the options you can use in this puzzle (right, left, up and left). * **Solutions**: here is where you set up the valid answers. If there are multiple correct answers, click "+" and add all the necessary combinations. Just drag the images available from "Images" to the spaces in "Solutions". If you want the combination of images in a certain order, don't forget to place the images in that order, from left to right. * **Ignore Order in the Answer:** if you check this option, the player can pick the images of the answer in any order. * **Not allow duplicates**: this option will disable each image when selected. * **Solution length**: number of elements the solution should have. Allows you to restrict the number of options in the 'Response' area and will set the height of the component {% hint style="info" %} To remove a option from the solution, just click on it and will dissapear. If you need to remove a full combination, repeat this on each one. {% endhint %} On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Error** option, meaning that if the player enters an invalid answer, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the correct or incorrect answer sound that plays after the response is checked.

# Simon # Rings (Advanced Puzzle)

Drag the component from the minigame tab to the scene you're working on. ## How to change the component style To resize it, use the arrow icon in the top menu.

## How to set up the Rings puzzle Click on the component and then on the settings gear icon that will appear in the top menu or double click on the component. You will see a menu with three set up options: Puzzle, Aspect and Advanced. ### Puzzle \ By clicking here you can set the amount of rings you want the puzzle to have, this way you can set the difficulty, you can also set the threshold in wich the ring is considered to be placed correctly, and you can also set if you want the winning action to be played once the puzzle is finished (this way the player doesn´t need to press the confirm button). You can also add a custom .jpg or .png image to the puzzle. {% hint style="info" %} Remember that if you use the auto confirm option, the losing action will not trigger. {% endhint %}

### Aspect In the Aspect setting you can: * Change the size of the middle ring. * Change the size of the margins. * Remove edges and shadows. ### Advanced In the advanced setting you can: * Set the wait time between when the player finishes the puzzle and when the win or lose actions are executed. ## Player interaction Players can move the rings in circles (except the one at the center) to place them at the right position.

## How to set up the actions of winning and losing. There are different actions that you can set up for this game.

### When the player solves the puzzle. When the player hits the solve button and the rings are placed correctly (player doesn´t need to press it if the auto solve option is checked) the winning action occurs. \ For winning you can set up the following actions: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** ### When the player fails to solve the puzzle When the player hits the solve button and the rings are not placed correctly (player doesn´t need to press it if the auto solve option is checked) the lossing action occurs. For lossing you can set up the following actions: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the gameç** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} # Fill the gaps (Advanced Puzzle)

## How to set the Fill the gaps puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * ***Screens:*** You can add as many screens as you want. In them, you must add a text and below it, the blank words as possible answers. The words you choose as blank spaces will be the answers that the player can decide between. That is, if your text includes three blank words which are red, green and blue, the player must decide which space each of those three goes in. It will not be possible to choose the options for each blank space.

* ***Advanced:*** You will be able to mute the game sound.

{% hint style="info" %} To remove a option from the solution, just click click on the trash icon and will dissapear. If you need to remove a full combination, repeat this on each one. {% endhint %} ## How to set the actions after the solutions is written When the player enters their answer in the puzzle, there are only two options: either the answer is correct, or it is incorrect. {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} The available options are: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** # Control Access Password (Advanced Puzzle)

## How to set the Control Access Password puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * ***Puzzle:*** You will be able to choose the length of the numeric password (Minimum 2 and maximum 6 digits). You can also create a list of valid solutions to solve the puzzle. * ***Advanced:*** In this section you can decide if the text will be deleted when the answer is incorrect or not. You can also mute the game.

# Computer Access (Advanced Puzzle)

Drag the component from the subcomponents bar to the scene you're working on. {% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes or lose. {% endhint %} ## How to set the computer access puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Solutions**: here is where you set up the valid passwords. If there are multiple correct passwords, click "+" and add all the desired passwords. * **Username:** it will display the text set by the puzzle creator as the User. On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Fail** option, meaning that if the player enters an incorrect password, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the sound that plays after the response is checked. ## How to set the actions after the solutions are written When the player enters their answer in the puzzle, there are only two options: either the answer is correct, or it is incorrect. {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} The available options are: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** # Phone Access (Advanced Puzzle)

Drag the component from the subcomponents bar to the scene you're working on. {% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes or lose. {% endhint %} ## How to set the computer access puzzle component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration options are as follows: * **Puzzle Identifier**: a default ID appears, but you can rename it if desired. * **Solutions**: here is where you set up the valid passwords. If there are multiple correct passwords, click "+" and add all the desired passwords. * **Username:** it will display the text set by the puzzle creator as the User. On the left, you'll see another section called "Others," where you can: * Enable the **Clear on Fail** option, meaning that if the player enters an incorrect password, it will be erased immediately after checking, leaving the space blank for a new attempt. * **Mute** the sound that plays after the response is checked. ## How to set the actions after the solutions is written When the player enters their answer in the puzzle, there are only two options: either the answer is correct, or it is incorrect. {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} The available options are: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** # Jigsaw (Advanced Puzzle)

• Image upload: The game creator can upload an image in PNG or JPG format.

* Difficulty selection: Creator Difficulty Options: * Easy: 8 pieces (2x4). * Medium: 16 pieces (4x4). * Hard: 24 pieces (4x6). The difficulty chosen determines the number of divisions in the image. • Automatic shuffling: When you select the difficulty, the system splits the image into the specified number of pieces. The pieces are then shuffled randomly and placed in the menu on the right side. * Player Interaction: * Players can drag and drop pieces onto the board to assemble them. * The player will be able to see all the pieces in the menu by scrolling with the two vertical arrows.

* Actions: * Win: Once the puzzle is correctly assembled, a victory message is displayed * When placing a piece in a bad position: If the position isn´t correct the piece will not fit and will remain “floating”. When placing a piece in a good position: Pieces automatically snap into place when positioned correctly and the edge of the piece lights up. (Something similar like the video in comments but only the outilne) * Advanced options: * Mute sound * Design: * A box on the right side, white with a grey outline (#EDEFF3), in which the pieces will be placed, the box will disappear once the puzzle is completed. On the left side a menu where the pieces will appear, with two arrows so the player can see all of them. # Tic-Tac-Toe (Minigame)

Drag the component from the subcomponents bar to the scene you're working on. {% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes or lose. {% endhint %} ## How to change the component style To resize it, use the arrow icon in the top menu. ## How to set the Tic-Tac-Toe component Click on the component and then on the settings gear icon that will appear in the top menu.\ The configuration option is as follows: * **General**: you can adjust the opponent's difficulty to "Easy", "Medium", "Hard" and "None" mode. ## How to set the actions after the solutions is written When the player enters their answer in the puzzle, there are only two options: either the answer is correct, or it is incorrect. {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} The available options are: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** # Quiz (Minigame)

## How to set up the Quiz minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: questions and answers and Advanced. ### Questions and answers \ By clicking here you can set up as many questions as you want and add the answers to each question. Select the correct answer from the dropdown menu. You can select if the player must get all the answers right to win the game.

{% hint style="info" %} To remove a question or an answer click on the trash icon and it will dissapear. If you remove a question, all the answers written on this question will be removed as well. {% endhint %} ### Advanced In the advanced setting you can: * Mute the game. * Set the wait time between when the player finishes answering all the quiz questions and when the win or lose actions are executed. * Allow the player to restart the quiz once they've finished answering all the questions * Show summary of all the questions, right answers and answers selected by the player at the end of the quiz. * Show progress bar on the top right. * Shuffle the answers.

## How to set up the actions during the game and after the player answers all the quiz questions There are different actions that you can set up for this game.

### When the player answers all the quiz questions When the player finishes answering all the quiz questions there are two options: winning or losing.\ For winning or losing you can set up the following actions: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} ### When the player gets one answer right or wrong You can set up actions for every question the player answers. This is not mandatory.\ For getting questions right or wrong you can set up one or more of the following actions: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game**
# Swipe Time (Minigame)

Drag the component from the minigames tab to the scene you're working on. {% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes, or loses. {% endhint %} ## How to change the component style To resize it, use the arrow icon in the top menu.

## How to set up the Swipe time minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: Questions and Advanced. ### Questions By clicking here you can set up as many questions as you want, add the answers to each question and select the .jpg or .png image you want the answer selector to have. Select the correct answer from the dropdown menu. You can select if the player must get all the answers right to win the game, and if that is not the case, you can select the minimum number of questions the player has to get right to win the minigame.

{% hint style="info" %} To remove a question or an image click on the trash icon and it will dissapear. If you remove a question, all the answers written on this question will be removed as well. {% endhint %} ### Advanced In the advanced setting you can: * Mute the game. * Change the minigame volume. * Set the wait time between when the player finishes answering all the questions and when the win or lose actions are executed. * Show summary of all the questions and the right answers at the end of the minigame. * Randomize the order in which questions are shown.

## Player interaction Players can move the card at the center to the right or to the left to select the answer.

## How to set up the actions during the game and after the player answers all the questions There are different actions that you can set up for this game.

### When the player wins or loses When the player finishes answering all the questions there are two options: winning or losing.\ For winning or losing you can set up the following actions: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** ### When the player gets one answer right or wrong You can set up actions for every question the player answers. This is not mandatory.\ For getting questions right or wrong you can set up one or more of the following actions: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} # Wordwheel (Minigame)

## How to set up Wordwheel WordWheel is a super fun mini-game incredibly easy to set up.

Simply drag this component into the scene where you want it. To configure it, double-click on the component within the canvas or use the settings option that appears at the top of the menu when you click on the component. A modal will appear with two options: * **Questions and Answers**: you must configure all the options that will appear in the game.\ The order in which they will appear in the game is the same as the order shown in the configurator, from top to bottom.\ Assign each letter to a question. You can include one or multiple answers in the response field.
* **Advanced**: you will find two advanced options: * **Include welcome message:** use this feature to include a welcome message before starting the mini-game. The message "Welcome" will appear, along with a button the player will press to start playing WordWheel. * **Fail to pass letter**: If it is not activated, the player will be able to pass a word and try again once around the wheel. If enabled, the player will lose the letter if they decide to pass a word without guessing it. This forces you to play the wheel only once. {% hint style="info" %} The component directly will show the title "Starts with the letter X" or "Contains the letter X" according to the solution.\ Example: Letter=M; Question=Capital of Spain --> Title (automatic)= "Starts with M:" {% endhint %} At the end of the game, an automatic message will appear, indicating how many questions the player answered correctly out of the total. ## Actions available for Wordwheel This step is very important and it's also simple, so let's go!

The options available to set up are: * Player gets all the questions right before the countdown finishes (passes the game) * Player doesn't get all the questions right or do it by the time (loses the game) * Player fails a question * Player hits a question * Player pass a question For every option you can assign one or more actions from these: * Go to scene * Add X points * Substract X points * Visit a URL Example: If player gets all the questions right (passes the game): * Action 1: Go to Scene "end" * Action 2: Wins 1000 points. {% hint style="info" %} It's key you set up all the actions so the player gets a feedback with every action they take during the game. Also, actions will define what happens once the game finishes. {% endhint %} # Timeline (Advanced Minigame)

Drag the component from the minigame tab to the scene you're working on. {% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes, or loses. {% endhint %} ## How to change the component style To resize it, use the arrow icon in the top menu.

## How to set up the Timeline minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: "Tarjetas" and Advanced. ### Tarjetas By clicking here you can set up as many items as you want and add the title, a brief description and a date. You can add a custom image to every card you add.

{% hint style="info" %} To remove a card click on the trash icon and it will dissapear. {% endhint %} ### Advanced In the advanced setting you can: * Mute the game. * Change the volume. * Set the wait time between when the player finishes placing all the cards and when the win or lose actions are executed.

## Player interaction Players can place the cards in whichever order they want. Once placed, players can also change or trade the position of the card. Once they have finished, they can press the check button. They have two opportunities to get it right before the lose action triggers.

## How to set up the actions during the game and after the player finishes sorting all the cards. There are different actions that you can set up for this game.

### When the player hits the check button. When the player hits the check button there are two options: winning or losing. The player has two chances to get the order right, if that´s not the case, losing action occurs.\ For winning or losing you can set up the following actions: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** ### When the player gets one answer right or wrong You can set up actions for every card the player sorts correctly. This is not mandatory.\ For getting cards right or wrong you can set up one or more of the following actions: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} # Crossword (Advanced Minigame)

Drag the component from the minigame tab to the scene you're working on. ## How to change the component style To resize it, use the arrow icon in the top menu.

{% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes, or loses. {% endhint %} ## How to set up the Crossword minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: Words and clues and Others. ### Words and clues \ By clicking here you can set up as many words as you want and add a clue. You can also switch between a transparent or a black backgorund. {% hint style="info" %} It´s important that you write all the key words in capital letters, otherwise the word wil not be included in the minigame. {% endhint %}

{% hint style="info" %} To remove a word click on the trash icon and it will dissapear. {% endhint %} ### Others In the others setting you can: * Mute the game. * Change the volume. * Set the wait time between when the player finishes filling all the words and when the win or lose actions are executed.

## Player interaction Players can cycle trough the hints and write the word related to that hint.

## How to set up the actions during the game and after the player finishes writing all the words. There are different actions that you can set up for this game.

### When the player writes one word correctly. You can set up actions for every word the player writes correctly: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** ### When the player finishes writing all the words. You can set up actions for when the player has written all the words correctly: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for when the player gets one or every word right. {% endhint %} # Memory Game (Advanced Minigame)

Drag the component from the minigame tab to the scene you're working on. ## How to change the component style To resize it, use the arrow icon in the top menu.

{% hint style="info" %} All the minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes, or loses. {% endhint %} ## How to set up the Memory Game minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: Puzzle and Advanced. ### Puzzle \ By clicking here you can set up as many images as you want You can add .jpg and .png custom images and delete them by dragging them on to the trash can. {% hint style="info" %} Remember that the more images you add the bigger the component will be {% endhint %}

### Advanced In the Advanced setting you can: * Mute the game. * Change the volume. * Set the wait time between when the player finishes pairing all the images and when the win action is executed.

## Player interaction Players can click on the different cards to unveil the image below and make pairs with them.

## How to set up the actions during the game and after the player finishes pairing all the images. There are different actions that you can set up for this game.

### When the player finds one pair. You can set up actions for every pair the player finds: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** ### When the player finds a non-pair. You can set up actions for when the player unveil two different images: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** ### When the player finds all pairs. You can set up actions for when the player unveils all the images: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for when the player gets one or every pair right. {% endhint %} # Einstein's Riddle (Advanced Minigame)

Drag the component from the subcomponents bar to the scene you're working on. ## How to change the component style To resize it, use the arrow icon in the top menu.

{% hint style="info" %} The minigames and puzzles must be set up with actions to work properly and also define what happens once the player wins, finishes, or loses. {% endhint %} ## How to set up the Einstein's riddle minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: Settings and Advanced. ### Settings

To set up this game you have to set columns, rows, tiles and clues. * **Columns**: you can add up to 6 columns, add a name to each column. * **Rows**: you can add up to 6 rows, add a name to each row. * **Tiles**: within the rows you can add to up 6 tiles per row, adding a name to each tile. * **Clues:** you can add an unlimited number of clues to help the player organize the tiles in their correct possition. The player can go backward and forward between the clues during the game. {% hint style="info" %} It's important that you add the tiles in the correct order. The first tile of the row is under the first column, the second tile of the row is under the second column and so on. This will determine the correct answer for the game {% endhint %} ### Advanced

In the advanced options you can: * Mute the game. * Activate Autocheck: this will let the player know when they have placed a tile in its correct position (only if it's not muted) and will end the game once all the tiles are in its correct position. ## How to set up the win/lose actions: There are only two options in this game. Winning or losing the game. {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %}

For each one of these options you can set you the following actions: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** {% hint style="info" %} If the Autocheck is activated the player can only win the game {% endhint %} # Quizz Run (Advanced Minigame)

Drag the component from the minigame tab to the scene you're working on. ## How to change the component style To resize it, use the arrow icon in the top menu.

## How to set up the Quizz Run minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two set up options: Configuration and Advanced. ### Configuration By clicking here you can set up as many levels as you want, in each level you can write a question and 3 short answers. Use the dropwdown menu to select which one is the right answer. {% hint style="info" %} The maximum lenght of the answers is 4 letters or numbers {% endhint %} In this menu, you can also turn on the arcade mode. In this mode, instead of answering questions, the objective is to pick up all the pills to advance to the next level. You can also select if you want to use a custom character for the game or if you want to use the ones taht are included in the minigame. Additionally, you can choose the color of the walls, adjust the difficultty and set if you want the player to get a minimum score in order to win the game. {% hint style="info" %} for the custom character you can use .jpg or .png files {% endhint %}

{% hint style="info" %} To remove a level click on the trash icon and it will dissapear. {% endhint %} ### Advanced In the Advanced setting you can: * Mute the game. * Change the volume. * Allow the player to restart the game once it´s completed. * Set the wait time between when the player finishes all the levels and when the win or lose actions are executed. * Show a the summary of all the questions with all the correct answers. * Show an in-game progress. * Randomize the order in which the questions show up.

## Player interaction Players can move the character towards the right answer (or just the pills in arcade mode) while they try to avoid the enemies moving around the labyrynth.

## How to set up the actions during the game and after the player finishes all the levels. There are different actions that you can set up for this game.

### When the player answer a question correctly. You can set up actions for every right answer the player gets: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** ### When the player fails a question. You can set up actions for every answer the player fails: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** ### When the player dies. You can set up actions for every time the player dies: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** ### When the player completes a level. You can set up actions for every time the player completes a level: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** ### When the player picks up a pill. You can set up actions for every pill the player picks up: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** ### When the player ends the game. You can set up actions for when the player completes all the levels: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. # Racer # Padlock (Advanced Puzzle)

There are **four different padlock designs** available (see the image below). All of them work and are set up in the exact same way. You can freely choose the one that best fits your game’s design.

### How to set up the Padlock puzzle Click on the puzzle and then on the settings gear icon that will appear in the top menu or double click on the puzzle. #### Puzzle Here you can define: * **Password length** → Set the number of characters (minimum 3, maximum 5). * **Symbols** → Choose between **letters** or **numbers** (you cannot mix both). * **Solutions** → Add one or multiple valid solutions for the puzzle. * **Preview** → Check how the padlock will look and test the combinations. #### Advanced In the Advanced settings you can: * Mute the game. * Change the puzzle volume. * Set the wait time (in seconds) between when the player solves the padlock and when the win or lose actions are executed.

### Player interaction Players can rotate the padlock wheels to set the right combination and unlock it.

### How to set up the actions when the player interacts with the puzzle There are different actions you can configure for this game. #### When the player solves the padlock You can set up one or more of the following actions: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** #### When the player fails a part of the combination You can also define actions when the player selects an incorrect combination. Possible actions include: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** {% hint style="info" %} It's very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for both when the player gets the puzzle right or wrong. {% endhint %} # Catch and avoid (Minigame)

Drag the component from the minigames tab to the scene you're working on. ### How to change the component style To resize it, use the arrow icon in the top menu.

### How to set up the Catch and Avoid minigame Click on the minigame and then on the settings gear icon that will appear in the top menu or double click on the minigame. You will see a menu with two setup options: **Puzzle** and **Advanced**. #### Puzzle Here you can define: * **Good and bad elements** → Upload your own images and divide the good elements and the bad ones. * **Container** → You can choose between **three different containers** for the player to use at the bottom of the screen. The game always starts with **3 lives**. Each time the player catches a bad item, one life is lost. When all lives are lost, the game ends automatically. #### Advanced In the Advanced settings you can: * Mute the game. * Change the minigame volume. * Set the wait time (in seconds) before the win/lose actions are executed. * Allow the player to restart the game. * Show a summary at the end of the game. ### Player interaction Players can only move the container horizontally at the bottom of the screen. The goal is to **catch the good elements** and **avoid the bad ones** as they fall from the top. As the game progresses, objects will fall faster and appear more frequently, making it increasingly challenging. ### How to set up the actions There are different actions you can configure for this game. #### When the player finishes the game You can set up one or more of the following actions: * **Go to another scene in the game** * **Add X points** * **Subtract X points** * **Visit an external URL** #### When the player collects a good item You can also set up actions for each correct item collected, for example: * **Add X points** * **Subtract X points** * **Visit an external URL** * **Go to another scene in the game** #### When the player collects a bad item You can set up actions for each incorrect item collected, for example: * **Add X points** * **Subtract X points** * **Visit an external URL** * **Go to another scene in the game** {% hint style="info" %} It’s very important to specify what should happen in each case. Click on the Actions icon in the top menu and add one or more actions for when the player collects a good or bad element, or when the game ends. {% endhint %} # Letter Platformer The **Letter Platformer** is a classic side-scrolling platformer minigame where players collect letters scattered throughout a procedurally generated level to form a target word. This engaging component combines the nostalgia of retro platformers with educational value, making it perfect for language learning, spelling challenges, and interactive storytelling. ## Overview Players control a character that runs, jumps, and navigates through platforming challenges while collecting target letters. The game features procedurally generated levels with enemies, coins, obstacles, and customizable graphics, creating a unique experience every time (or consistent levels using seeds). ## How to Add Letter Platformer 1. Open your game in the UFOLab editor 2. Navigate to the **Components** section in the component picker 3. Select **Letter Platformer** from the minigame components 4. Drag and drop it onto your scene ## Configuration Settings The Letter Platformer offers extensive customization through six configuration tabs: **General**, **Graphics**, **Audio**, **HUD**, **Scoring**, and **Advanced**. ### General Settings #### Target Letters (Required) * The word or sequence of letters players must collect * **Range**: 1-16 characters * **Supports**: Any unicode characters including emojis * Spaces are ignored (not collectable) * **Example**: "UFOLAB", "HELLO WORLD", "🎮🎯" #### Difficulty * **Default**: `easy` * **Options**: * **Easy**: Slower enemies (1.0x speed), 30% enemy spawn rate * **Medium**: Medium enemies (1.5x speed), 50% enemy spawn rate * **Hard**: Fast enemies (2.2x speed), 70% enemy spawn rate #### Level Length * **Default**: `100` * **Range**: 10-500 segments * Number of platform segments in the procedurally generated level * Longer levels = more challenging and time-consuming * **Tip**: 50-150 segments work well for most games #### Random Level * **Default**: `false` * When `true`: Generates a completely new random level each playthrough * When `false`: Uses the Level Seed for consistent generation * **Use Case**: Enable for replayability, disable for fair competitions #### Level Seed * **Default**: Empty (uses target letters as seed) * String value that controls procedural generation * Same seed = same level layout every time * **Hidden when** "Random Level" is enabled * **Use Case**: Create specific challenge levels or allow players to share levels #### Hide Letters * **Default**: `true` * When `true`: Shows "?" for uncollected letters * When `false`: Shows actual letters before collection * **Use Case**: Keep `true` for word discovery challenges, `false` for spelling practice ### Graphics Settings #### Sprite Sheet URL * Custom tileset image (16x16 sprites) * Must contain: player animations (idle, running), jump sprite, enemy animations, and all platform tiles * **Important**: Tile positions must match the default layout * **Format**: PNG image with transparent background * **Default**: Provided retro pixel art tileset #### Cloud Image * PNG image for cloud decorations in the background * **Format**: Any size PNG (will be scaled dynamically) * Clouds use parallax scrolling for depth effect #### Far Mountain Image * PNG image for distant mountains (slowest parallax layer) * Scaled to 40% of original size * **Format**: Any size PNG, recommended 250-500px height #### Near Mountain Image * PNG image for nearby mountains (faster parallax layer) * Scaled to 37.5% of original size * **Format**: Any size PNG, recommended 180-380px height #### Sky Color (Top) * **Default**: `#87CEEB` (light blue) * Top color of the sky gradient #### Sky Color (Bottom) * **Default**: `#6b8cff` (deeper blue) * Bottom color of the sky gradient * Blends with Ground Color if set #### Ground and Fog Color * **Default**: `#795548` (brown) * Sets the color for: * Bottom portion of sky gradient * Fog layers over mountains * Ground fog at bottom of screen #### Transparent Background * **Default**: `false` * When `true`: Removes sky and background rendering * **Use Case**: Overlay the platformer on custom scene backgrounds ### Audio Settings #### Mute * **Default**: `false` * Completely mutes all game sounds * **Tip**: Useful for silent gameplay or when using external audio #### Volume * **Default**: `0.5` (50%) * **Range**: 0.0 to 1.0 (0% to 100%) * **Hidden when** "Mute" is enabled * Multiplied by global game volume * Controls all 8-bit sound effects (jump, coin, item, squash, die, win) ### HUD Settings #### Show Score * **Default**: `true` * Displays the integrated score counter in the top-left HUD * **Tip**: Disable if using custom score displays #### Show Coin Counter * **Default**: `true` * Displays coin sprite and count in the HUD * Shows total coins collected #### Show Enemy Kill Counter * **Default**: `false` * Displays enemy sprite and kill count in the HUD * **Use Case**: Enable for combat-focused challenges ### Scoring Settings Control point values for different collectibles: #### Coin Score Value * **Default**: `50` * Points awarded for each coin collected #### Letter Score Value * **Default**: `500` * Points awarded for each letter collected #### Enemy Kill Score Value * **Default**: `100` * Points awarded for defeating an enemy ### Advanced Settings {% hint style="warning" %} ⚠️ **Advanced Features**: These settings provide integration with global game state and debug capabilities. Use carefully. {% endhint %} #### Debug: Show Hitboxes * **Default**: `false` * When `true`: Renders collision boxes around player and enemies * **Use Case**: Debug collision issues or understand game mechanics #### Lives Configuration **Lives Storage** * **Default**: `Internal` * **Options**: * **Internal**: Lives managed only by this component instance * **Shared (Global State)**: Lives stored in global game state, accessible by other components **Variable Name** (Shared mode only) * **Default**: `lives` * Name of the global variable for storing lives * Use this variable name in other components to access/modify lives **Initial Lives** (Internal mode only) * **Default**: `3` * Number of lives the player starts with #### Score Configuration **Score Storage** * **Default**: `Internal` * **Options**: * **Internal**: Score managed only by this component * **Shared (Global State)**: Score accessible across the entire game **Variable Name** (Shared mode only) * **Default**: `score` * Name of the global variable for storing score #### Coins Configuration **Coins Storage** * **Default**: `Internal` * **Options**: * **Internal**: Coin count local to this component * **Shared (Global State)**: Coins persist across game scenes **Variable Name** (Shared mode only) * **Default**: `coins` * Name of the global variable for storing coin count #### Enemy Kills Configuration **Enemy Kills Storage** * **Default**: `Internal` * **Options**: * **Internal**: Kill count local to this component * **Shared (Global State)**: Kills tracked globally **Variable Name** (Shared mode only) * **Default**: `enemyKills` * Name of the global variable for storing enemy kills ## Game Mechanics ### Controls **Keyboard** * **Arrow Keys** or **WASD**: Move left/right * **Spacebar**: Jump **Touch/Mobile** * **On-screen buttons**: Appear automatically on touch devices * **Left/Right**: Movement * **Jump button**: Jumping **Gamepad** * **D-pad/Analog stick**: Movement * **A/B buttons**: Jump ### Player Abilities **Movement** * Smooth acceleration and friction-based physics * Maximum speed: adjustable based on difficulty * Direction changes show "skid" animation **Jumping** * Variable height jumps (hold longer = jump higher) * Short hop by tapping jump button * Can't jump in mid-air (single jump only) **Combat** * Defeat enemies by jumping on their heads * Touching enemies from the side or below causes death * Brief invincibility period after respawning (2 seconds, flashing effect) ### Level Generation #### Procedural Generation The platformer generates levels using seeded randomization: * **Platform Layout**: Ground platforms with variable heights and gaps * **Box Platforms**: One-way platforms you can jump through from below * **Gap Detection**: Automatically adds helper platforms for impossible jumps * **Platform Merging**: Adjacent platforms combine for smoother terrain #### Element Placement **Letters** * Distributed throughout the level * At least one letter guaranteed in the final 20% of the level * Placed at accessible heights above platforms * Float up and down with smooth animation **Coins** * Randomly placed on valid platform positions * 50% spawn chance on available spots * Floating animation synchronized with game time **Enemies** * Spawn based on difficulty setting (30%-70% chance) * Patrol specific platform ranges * Animated walking sprites * Can be defeated by jumping on them **Background Elements** * **Furniture**: Trees and decorative items placed on ground platforms * Trees: Variable height (0-3 middle segments) * Items: 3 variants randomly selected * 80% placement rate for high decoration density * **Parallax Layers**: Clouds, far mountains, near mountains * Depth-based scrolling for 3D effect * Fog layers for atmospheric depth #### Platform Types **Ground Platforms** (`ground`) * Solid surfaces with grass on top, dirt below * Cannot jump through * Main navigation path **Box Platforms** (`box`) * One-way platforms * Can jump up through from below * Solid when landing on top * Create alternate paths and shortcuts **Hard Platforms** (`hard`) * Solid walls and barriers * Used for level boundaries * Block horizontal movement ### Collision System **Spatial Culling** * Only checks nearby entities for performance * Ignores off-screen platforms **One-Way Platform Logic** * Box platforms allow upward movement * Prevents falling through when landing * Swept collision detection prevents phase-through at high speeds **Death Conditions** * Touching enemy from side or below * Falling off the bottom of the map * Respawn after death (if lives remaining) * Particle effects on death ## Actions & Events The Letter Platformer triggers various actions for integration with your game: ### On Win (`success`) * **Trigger**: Player collects all target letters * **Payload**: The completed word (string) * **Use Case**: Progress to next scene, show victory screen, award points ### On Lose (`fail`) * **Trigger**: Player runs out of lives * **Use Case**: Navigate to game over screen, retry prompt, score submission ### On Restart (`restart`) * **Trigger**: Player clicks "Play Again" after winning or losing * **Use Case**: Reset game state, increment attempt counter ### On Game Start (`start`) * **Trigger**: Player clicks START for the first time * **Use Case**: Start timer, trigger intro animations, hide instructions ### On Respawn (`respawn`) * **Trigger**: Player respawns after death (with lives remaining) * **Use Case**: Play respawn sound, show encouragement message ### On Player Death (`playerDeath`) * **Trigger**: Player dies (hits enemy or falls off map) * **Use Case**: Play death animation, update death counter, show hint ### On Coin Collected (`coinCollected`) * **Trigger**: Each time a coin is collected * **Use Case**: Track coin streaks, play custom sounds, show combo effects ### On Letter Collected (`letterCollected`) * **Trigger**: Each time a letter is collected * **Payload**: The collected letter character (string) * **Use Case**: Reveal hints, show letter in UI, celebrate milestone ### On Enemy Killed (`enemyKilled`) * **Trigger**: Player defeats an enemy by jumping on it * **Use Case**: Award bonus points, track combat stats, trigger power-ups ## Popular Use Cases ### Spelling Practice Create educational spelling games: **Setup:** 1. Set **Target Letters** to vocabulary words 2. Enable **Hide Letters** to make it a discovery challenge 3. Set **Difficulty** to Easy for younger learners 4. Use **On Letter Collected** action to provide pronunciation audio 5. **On Win**: Show definition and use in a sentence **Example Flow:** ``` Word: "ADVENTURE" Level Length: 80 segments Difficulty: Easy On Win → Navigate to "Word Definition" scene ``` ### Language Learning Teach vocabulary in different languages: **Setup:** 1. Use **Target Letters** with words in target language 2. Set **Level Seed** for consistent difficulty 3. **On Win**: Show translation and example sentence 4. Chain multiple Letter Platformer scenes for vocabulary lists ### Speed Challenges Create time-trial competitions: **Setup:** 1. Set **Random Level** to `false` for fair competition 2. Use specific **Level Seed** for identical levels 3. Enable **Show Score** for point tracking 4. Set **Lives Storage** to Shared to carry lives across attempts 5. Use **Ranking** component to display leaderboards **Settings:** * Level Length: 100-150 segments * Difficulty: Medium or Hard * Hide Letters: true ### Story Adventures Embed words into narrative gameplay: **Setup:** 1. **Target Letters**: Character names, magical words, quest items 2. Use custom **Graphics** (sprite sheet, backgrounds) for theme matching 3. **On Letter Collected**: Trigger story narration for each letter 4. **On Win**: Continue story in next scene **Example:** ``` Scene 1: Collect "SWORD" Scene 2: Collect "SHIELD" Scene 3: Collect "DRAGON" → Final boss fight ``` ### Math Word Problems Combine platforming with problem-solving: **Setup:** 1. Show math problem in previous scene (e.g., "5 + 3 = ?") 2. **Target Letters**: "EIGHT" (the answer) 3. **On Win**: Validate answer, proceed to next problem 4. **Lives Storage**: Shared (mistakes carry over) ### Treasure Hunt Create exploration-based gameplay: **Setup:** 1. **Target Letters**: "TREASURE" or clue words 2. **Level Length**: Long (200-300 segments) for exploration 3. **Hide Letters**: true 4. Use custom **backgrounds** for themed environments (jungle, cave, ocean) 5. **On Win**: Reveal treasure location or next clue **Advanced:** * Multiple Letter Platformer scenes for multi-stage hunts * **Score Storage**: Shared to accumulate treasure value * Custom sprite sheets matching theme ## Global State Integration ### Why Use Shared Storage? **Internal Mode** * Best for standalone minigames * Each instance manages its own state * Simple, no cross-component complexity **Shared Mode** * Perfect for multi-level games * Lives/score persist across scenes * Other components can read/modify values * Create meta-progression systems ### Example: Multi-Level Platformer Game **Setup:** ``` Scene 1: Letter Platformer - Target: "LEVEL" - Lives Storage: Shared → "lives" - Score Storage: Shared → "totalScore" - Initial Lives: 5 Scene 2: Letter Platformer - Target: "STAGE" - Lives Storage: Shared → "lives" (continues from Scene 1) - Score Storage: Shared → "totalScore" (accumulates) Scene 3: Ranking Component - Display top scores using "totalScore" variable ``` ### Using Variables in Text Display game state in other components using templating: ```markdown Lives Remaining: {{lives}} Total Score: {{totalScore}} Coins Collected: {{coins}} Enemies Defeated: {{enemyKills}} ``` ## Customization Tips ### Creating Custom Sprite Sheets {% hint style="info" %} 💡 **Important**: Custom sprite sheets must follow an exact layout. The game expects specific sprites in specific positions. Any deviation will cause visual glitches or errors. {% endhint %} #### Sprite Sheet Requirements **Technical Specifications:** * **Sprite Size**: Exactly 16×16 pixels per sprite * **File Format**: PNG with transparent background * **Grid System**: 16×16 grid with 0px spacing between sprites * **Minimum Canvas Size**: 112×112 pixels (7 columns × 7 rows) **Critical**: Each sprite must be in its exact position. The game reads sprites based on grid coordinates, not by searching for them. #### Complete Sprite Layout Map The sprite sheet is organized in a grid where each cell is 16×16 pixels: **Row 0 (Y: 0px):** Platform Tiles - Ground Surface * Column 0: Empty/Transparent (reserved) * Column 1: Ground Left Edge (grass, curved left) * Column 2: Ground Middle (grass, flat) * Column 3: Ground Right Edge (grass, curved right) * Column 4+: Additional decorative tiles (optional) **Row 1 (Y: 16px):** Platform Tiles - Underground/Hard Surfaces * Column 0: Box Platform (one-way platform sprite) * Column 1: Hard Platform Left Edge (dirt/stone, left side) * Column 2: Hard Platform Middle (dirt/stone, center) * Column 3: Hard Platform Right Edge (dirt/stone, right side) * Column 4+: Additional decorative tiles (optional) **Row 2 (Y: 32px):** Collectibles * Column 0: Coin sprite (16×16, single frame or first frame of animation) * Column 1-4: Optional additional coin animation frames **Row 3 (Y: 48px):** Player Idle Animation - **5 frames required** * Columns 0-4: Idle animation frames (character standing still, subtle movement) * All 5 frames must be present * Animation plays in sequence: frame 0 → 1 → 2 → 3 → 4 → repeat **Row 4 (Y: 64px):** Player Run Animation - **5 frames required** * Columns 0-4: Run/walk animation frames (character running, legs moving) * All 5 frames must be present * Plays faster than idle animation for smooth running effect **Row 5 (Y: 80px):** Player Special Actions * Column 0: Jump sprite (single frame, used while in air) * Column 1-4: Can be copies of jump or unused (only first frame used) **Row 6 (Y: 96px):** Enemy Animation - **5 frames required** * Columns 0-4: Enemy walk animation frames * All 5 frames must be present * Enemy moves back and forth on platforms #### Animation Frame Requirements Some sprites require multiple frames for animation: **Player Idle (Row 3):** 5 frames * Creates subtle "breathing" or idle movement * **Tip**: If you don't want animation, duplicate the same sprite 5 times across columns 0-4 * Example: Standing pose → slight body movement → back to standing **Player Run (Row 4):** 5 frames * Creates running/walking motion * **Tip**: Minimum viable animation: standing → one leg forward → standing → other leg forward → standing * Must have all 5 frames even if some are duplicates **Enemy Walk (Row 6):** 5 frames * Enemy walking/movement animation * **Tip**: Can reuse player running animation with different colors if desired * Must have all 5 frames for smooth enemy motion **Single-Frame Sprites:** * Jump (Row 5, Column 0): Only 1 frame needed * Coin (Row 2, Column 0): Only 1 frame needed * Platform tiles: Single sprites, no animation #### Quick Tips for Non-Animators {% hint style="success" %} ✨ **No Animation Skills? No Problem!** {% endhint %} **Creating Simple Animations:** 1. **Idle Animation**: Draw your character once, then duplicate it 5 times * Optionally: Move the head slightly up/down in frames 2-3 * Result: Subtle "breathing" effect 2. **Run Animation**: Use this simple 5-frame pattern: * Frame 0: Standing pose * Frame 1: Left leg forward * Frame 2: Standing pose (copy of frame 0) * Frame 3: Right leg forward * Frame 4: Standing pose (copy of frame 0) 3. **Enemy Animation**: Reuse your run animation * Change colors to make it distinct from player * Or flip horizontally for variety 4. **Static Character**: If you truly want no animation: * Draw character once * Copy-paste it 5 times for idle (Row 3) * Copy-paste it 5 times for run (Row 4) * Copy-paste it 5 times for enemy (Row 6) * Result: Character will slide without animating (retro style!) #### Creating Your Sprite Sheet **Step-by-Step:** 1. **Create Canvas**: 112×112 pixels (or larger multiples: 224×224, 336×336) 2. **Enable Grid**: Set up 16×16 pixel grid in your image editor 3. **Draw Sprites**: Place each sprite in exact position according to layout map 4. **Transparent Background**: Ensure background is fully transparent (not white) 5. **Export**: Save as PNG with transparency 6. **Test**: Upload to UFOLab and enable "Show Hitboxes" to verify **Recommended Tools:** * **Piskel** (free, browser-based, perfect for pixel art) * **Aseprite** (paid, professional pixel art tool) * **GIMP** (free, powerful image editor) * **Photoshop** (paid, with pixel art plugins) #### Common Sprite Sheet Mistakes **❌ Wrong sprite size:** Using 32×32 or other sizes * **Solution**: Each sprite must be exactly 16×16 pixels **❌ Missing animation frames:** Only 3 frames instead of 5 * **Solution**: Duplicate frames to reach 5 frames total **❌ Sprites in wrong positions:** Player on Row 2 instead of Row 3 * **Solution**: Follow the exact layout map above **❌ Non-transparent background:** White or colored background * **Solution**: Use transparent PNG background **❌ Spacing between sprites:** Gaps in the grid * **Solution**: Sprites must be in a continuous 16×16 grid with 0px spacing **❌ Platform tiles misaligned:** Different sizes for ground tiles * **Solution**: All platform tiles must be exactly 16×16 pixels #### Visual Example Reference ``` Column: 0 1 2 3 4 5 6 Row 0: [ ][GRL][GRM][GRR][ ][ ][ ] Ground tiles Row 1: [BOX][HDL][HDM][HDR][ ][ ][ ] Hard/Box tiles Row 2: [CON][ ][ ][ ][ ][ ][ ] Coin Row 3: [ID0][ID1][ID2][ID3][ID4][ ][ ] Player idle (5 frames) Row 4: [RN0][RN1][RN2][RN3][RN4][ ][ ] Player run (5 frames) Row 5: [JMP][ ][ ][ ][ ][ ][ ] Player jump (1 frame) Row 6: [EN0][EN1][EN2][EN3][EN4][ ][ ] Enemy walk (5 frames) Legend: GRL = Ground Left, GRM = Ground Middle, GRR = Ground Right HDL = Hard Left, HDM = Hard Middle, HDR = Hard Right BOX = Box platform (one-way) CON = Coin ID0-4 = Idle animation frames 0-4 RN0-4 = Run animation frames 0-4 JMP = Jump sprite EN0-4 = Enemy animation frames 0-4 ``` #### Design Tips **Visual Clarity:** * Use contrasting colors: bright player, darker enemies * Add outlines (1px black border) for better visibility * Keep details minimal at 16×16 size * Test at actual size (16×16) while designing **Color Palette:** * Limit to 4-8 colors per sprite for retro aesthetic * Use consistent palette across all sprites * Reserve unique colors for important elements (player, enemies) **Animation:** * Subtle movements work better than dramatic poses * Maintain consistent sprite center point across frames * Test animation speed in-game (some frames may play faster/slower) **Platform Tiles:** * Ensure edges (left/right) connect smoothly with middle tiles * Ground surface should be visually distinct from underground (hard) tiles * Box platforms should look different (e.g., floating wooden crate) #### Testing Your Sprite Sheet 1. **Upload** sprite sheet URL to **Graphics Settings** 2. **Enable** "Debug: Show Hitboxes" in Advanced settings 3. **Preview** the game in editor 4. **Check**: * All animations play smoothly * Platforms connect properly * No missing sprites (showing fallback colors) * Collision boxes match visual sprites 5. **Adjust** and re-upload until perfect ### Creating Custom Backgrounds **Mountain/Cloud Assets:** * Use PNG format with transparency * Recommended sizes: * Clouds: 64-128px wide * Far Mountains: 250-500px height * Near Mountains: 180-380px height * Images will be scaled automatically * Silhouette style works best (no fine details) **Color Coordination:** * Match **Sky Colors** to your theme * Use **Ground Color** to tie together background and foreground * **Fog Color** should complement mountain colors ### Performance Optimization **For Long Levels:** * Use **Level Length** of 100-200 (sweet spot) * Longer levels (300+) may impact performance on low-end devices * Consider splitting very long levels into multiple scenes **For Complex Graphics:** * Optimize custom sprite sheets (keep file size under 500KB) * Use compressed PNG images for backgrounds * Avoid excessive transparency in sprite sheets ## If Something's Not Working ### Letters Not Appearing **Check:** * Verify **Target Letters** is not empty * Ensure level has enough length for letter placement (minimum 10 segments) * Look for letters floating above platforms (they may be off-screen) * Check if **Hide Letters** is enabled (shows "?" until collected) ### Player Falls Through Platforms **Possible Causes:** * Very high frame rate causing physics issues (rare) * Custom sprite sheet with incorrect collision data * **Debugging**: Enable "Show Hitboxes" to verify collision areas ### Can't Jump Through Box Platforms **This is correct behavior:** * Box platforms are one-way (jump through from below, solid from above) * Ensure you're jumping from below, not falling onto them from above * Can't jump through regular ground platforms (by design) ### Enemies Not Spawning **Check:** * **Difficulty** setting affects enemy spawn rate: * Easy: 30% chance * Medium: 50% chance * Hard: 70% chance * Very short levels may have few/no enemies * Increase **Level Length** for more potential spawn points ### Game Too Easy/Hard **Adjust:** * **Difficulty**: Changes enemy speed and spawn rate * **Level Length**: Longer = more challenging * **Initial Lives**: More lives = more forgiving * **Random Level**: Different layouts have varying difficulty * **Level Seed**: Some seeds generate harder layouts than others ### Score Not Persisting **Verify:** * **Score Storage** set to "Shared (Global State)" * **Variable Name** matches across all components accessing it * Using same variable name in text templating: `{{score}}` ### Custom Graphics Not Loading **Check:** * Image URLs are accessible (test in browser) * Images are PNG format * File sizes reasonable (< 2MB per image) * Sprite sheet matches required 16x16 layout ### Performance Issues **Solutions:** * Reduce **Level Length** (try 80-120 segments) * Remove custom backgrounds if not needed * Disable **Show Enemy Kill Counter** if not used * Use **Transparent Background** only when necessary * Ensure sprite sheet is optimized (compressed PNG) ## Creative Ideas ### Progressive Difficulty Campaign Create a series of platformer scenes with increasing challenge: **Structure:** ``` Level 1: Word "START" - Easy, 50 segments, 5 lives Level 2: Word "CLIMB" - Easy, 80 segments, shared lives Level 3: Word "DANGER" - Medium, 100 segments, shared lives Level 4: Word "MASTER" - Hard, 150 segments, shared lives Final: Word "VICTORY" - Hard, 200 segments, shared lives ``` Use **Shared Storage** for lives and score to create tension and continuity. ### Hidden Message Game Players collect letters across multiple levels to form a secret message: **Example:** * Level 1: "THE" * Level 2: "KEY" * Level 3: "IS" * Level 4: "HIDDEN" * Final message revealed: "THE KEY IS HIDDEN" Use different **Level Seeds** and **Difficulty** settings for variety. ### Themed Platformers Create immersive worlds with custom graphics: **Jungle Theme:** * Green gradient sky colors * Custom tree backgrounds (Near/Far Mountains) * Brown/green ground color * Words: "JUNGLE", "VINE", "TIGER", etc. **Space Theme:** * Dark blue/purple sky gradient * Star/planet backgrounds * Black ground color * **Transparent Background** for starfield effect * Words: "ROCKET", "STARS", "MOON" **Ocean Theme:** * Blue gradient sky colors * Wave backgrounds * Blue-tinted ground color * Words: "OCEAN", "FISH", "CORAL" ### Combo Chain Challenges Reward consecutive actions: **Implementation:** 1. Use **On Coin Collected** to track streak 2. Multiply points for unbroken chains 3. Use **On Player Death** to reset streak 4. Display combo counter with custom text components ### Race Mode Multiple players compete on the same level: **Setup:** 1. Set **Random Level** to `false` 2. Share specific **Level Seed** with all players 3. Use **Ranking** component to display times 4. **On Win** → Submit time to leaderboard ### Daily Challenges Generate unique levels each day: **Implementation:** 1. Use **Random Level** = `true` or date-based **Level Seed** 2. Same target word for all players 3. **Shared Storage** for global daily leaderboard 4. Reset at midnight using date-based seeds *** The Letter Platformer brings classic platforming action to your educational and entertainment games. With extensive customization options, procedural generation, and deep integration capabilities, it's a versatile component that can adapt to countless use cases. Whether you're teaching spelling, creating epic adventures, or building competitive challenges, the Letter Platformer delivers engaging, replayable gameplay that keeps players coming back for more. # Gamification Bar

The **Gamification Bar** is a dynamic component in UFOLAB that enhances gameplay by integrating interactive elements such as a **countdown/timer**, **progress bar**, and **points system**. These elements are crucial in adding engagement and challenge to your game. Below is a breakdown of each feature. You can use it just adding the **Gamification Bar** by dragging it into your scene.

{% hint style="info" %} The location where the gamificatin bar is placed when you drag it into any scene on the Interface Layer (![](/files/9sqyT2UquFvzmDPRZkX4)), will remain during all the game from the scene it's set up to be shown initially and until the gameover scene, at the exact same position. {% endhint %} ### Elements in the gamification bar There are 3 elements, and you can decide whether use just one, two or all of them. **1. Countdown/Timer** * **Purpose**: adds a sense of urgency to the game, encouraging players to complete tasks within a limited time frame. * **Usage Example**: Useful in scenarios where players need to solve puzzles or complete challenges within a time limit.\ \ In advanced option you can select in which scene the gamification bar starts. {% hint style="info" %} When the countdown ends the game finishes and takes the player to the gameover scene. It is mandatory to keep this scene created in the game if you use the Countdown. {% endhint %} **2. Progress Bar** * **Purpose**: Visually tracks the player’s progress throughout the game. * **Usage Example**: Particularly helpful for games with multiple stages or challenges, showing how far the player has progressed through the game. **3. Points System** * **Purpose**: Tracks and displays points that players accumulate based on their actions and performance within the game. * **Usage Example**: Ideal for quiz-style games or educational scenarios where players are rewarded for correct answers and deducted points for incorrect ones. {% hint style="info" %} Points need to be defined along the game in the actions linked to components and/or puzzles and minigames. {% endhint %} ### How to Configure and Use the Gamification Bar * **Step 1**: navigate to the left-hand panel and select the **Gamification Bar** option from the list of components. * **Step 2**: drag it onto the scene placing it on the Interface Layer (![](/files/9sqyT2UquFvzmDPRZkX4)), this way it will appear in all the scenes of the game. * **Step 3**: customize the size and behaviour of each element using the options in the top menu. * **Step 4**: set specific actions that should happen when the player interacts with these components. For example, when the timer ends, the game can cause a scene change or a points deduction. # Library # Text The text component is essential for adding any text to your game. Simply select the text component that best matches the style you're looking for and drag it into the scene. Once inside the editor, you can customize it using the properties that appear in the top menu after you click on the component.

# Text Boxes

**Text boxes** allow you to **show information to the player**, from a dialogue to something you want the player to know. You can find them on the left side of the screen, in the **library tab.**

## Configuration Text boxes are customizable, you can change the font, color, size and margins of the text, and even change the image of the box. To do this you only have to press the configuration wheel on the top bar or just double click the box.

## Actions You can set up multiple multiple actions to happen when the player clicks on the box, to set up this, click on the box and then on the action button at the top bar. The actions you can set up are: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** # Buttons

**Buttons** allow you to connect different scenes or actions in the same scene. You can find them on the left side of the screen, in **the library tab**.

## Configuration All the buttons are customizable, you can change the font, color, size and margins of the text (in case they have text) , and even change the image of the button. To do this you only have to press the configuration wheel on the top bar or just double click the button. {% hint style="info" %} Some buttons don´t have text and only their image can be customized. {% endhint %} ## Actions You can set up multiple multiple actions to happen when the player clicks on the button, to set up this, click on the button and then on the action button at the top bar. The actions you can set up are: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** # Icons

**Icons** allow you to represent actions, objects, or concepts in a visual and intuitive way. You can find them on the left side of the screen, in the **library tab.**

## Configuration Icons have some customization, you can change the **color, style and thickness** of the line**.** You can also make them invisible so you can create interactive areas. {% hint style="info" %} To make icons interactive areas, just open the configuration menu, mark the **invisible** option and add an action to the icon, as explained below in this page. {% endhint %} To change the icon style just click on it and change the attributes located on the **top bar.** {% hint style="info" %} Please have in mind that not all the icons are customizable. {% endhint %} ## Actions You can set up multiple multiple actions to happen when the player clicks on the icon, to set up this, click on the icon and then on the action button at the top bar. The actions you can set up are: * **Visit an external URL** * **Subtract X points** * **Add X points** * **Go to another scene in the game** # Shapes

**Shapes** allow you to **represent** ideas, emotions or informations. You can find them on the left side of the screen, in the **library tab.**

## Configuration Shapes have some customization, you can change the **color, style and thickness** of the line**.** You can also make them invisible so you can create interactive areas. {% hint style="info" %} To make shapes interactive areas, just open the configuration menu, mark the invisible option and add an action to the shape, as explained below in this page. {% endhint %} To change the **shape** **style** just click on it and change the **attributes** located at the **top bar.** ## Actions You can set up multiple multiple actions to happen when the player clicks the shape, to set up this, click on the shape and then on the action button at the top bar. The actions you can set up are: * **Visit an external url.** * **Subtract X points.** * **Add X points.** * **Go to another scene in the game.** # Stickers

**Stickers**, a wide collection of visual elements that you can use to enrich your game scenes.\ Browse through or use the search bar to quickly find what you need. Once you find the perfect sticker, simply **drag and drop it into your scene (dashboard)**.

You can freely **resize, reposition, and combine** stickers to create dynamic and personalized environments.\ \ Use keywords in the search bar to make your search faster and more precise.\ All stickers can be scaled and adapted to fit your game’s style. # Characters

Explore the library, **drag and drop** any character you like into your game, and then **adjust its size and position** to fit perfectly within the scene.

You can also use the **search bar** to find specific types of characters using keywords (for example: *happy, sad, astronaut, robot*). Characters can be fully customized in size and position.\ Combine them with stickers, backgrounds, and other elements to create more engaging stories and visual compositions. # Scorm {% hint style="info" %} Available in plan Epic in private beta {% endhint %} You can export any game in Scorm format 1.4 It will generate an independent and offline Scorm package, which won't requiere the Ufolab platform to run. You will need to upload the scorm package in your LMS. # Create games with AI {% hint style="info" %} Coming soon {% endhint %} This feature is under # Text templating When you're using text, you can include information about the game using variables. Here are un example: `Fantastic! You have reached {{score}} points!!` {% hint style="info" %} The text is translated as soon as it's loaded when starting a new level.\ That means if you show {{score}} and after that the game assign more points, the text won't be updated. {% endhint %} Here is a list of the available variables: * `{{score}}` : Shows the current score * `{{visitedLevels}}` \ List of visited levels:\ ![](/files/IzJ6cmtx5FY10wMWyt2m) * `{{time}}`\ Elapsed time in seconds since the countdown started * `{{timeLeft}}`\ Time left of the countdown in seconds * `{{formattedTime}}`\ Elapsed time in seconds since the countdown started in format `hh:mm` * `{{formattedTimeLeft}}`\ Time left of the countdown in seconds in format `hh:mm` # Actions If we click on an element of the scene and then click on the ACTIONS button we can find two sections:

* ***Appear:*** We will have the following animations: * None * Molten * Swipe from the left * Swipe from the right * Swipe from top * Swipe from below * Zoom in * Zoom out * ***Disappear:*** We will have the following animations: * None * Molten * Swipe from the left * Swipe from the right * Swipe from top * Swipe from below * Zoom in * Zoom out

To access the puzzle actions, you can double-click on the puzzle or go to the configuration wheel and you will also find inside

# How to create an actionable area To create an actionable area, you'll have two possible options: 1. You can drag a PNG into the scene and then add an action to it. 2. If it turns out that the actionable area is in the background, you'll need to add a shape and an action to it, and remove opacity. For example, if there is a table with a key in the background, you could put a square shape with no opacity where it is and add an action to it. # How to undo and redo? To undo and redo the job done, just click on the buttons at the top left. You can also press CTRL+Z on your keyboard to undo and CTRL+Y to redo.

# How to resize the letters of a text? To change the size of the letters of your text you just have to click on it and on the button at the top right, change the size as you like:

# How to preview our game? It is advisable to PREVIEW to check that the game is correctly ordered and works before being published. Below you can see how to do it:

# Brand customization - Watermark Make your game unique by adding a **custom watermark** or logo that remains visible throughout the entire experience.\ You can upload your own image, adjust its position, and control its size and transparency.

### How to set up your watermark Go to the **Game Settings** section and open the **Canvas** tab.\ Scroll down to find the **Brand Customization** area. Here you can configure the following options: #### Watermark Enable or disable the watermark feature. #### Watermark image Upload your custom logo by dragging and dropping it into the upload box or by clicking to browse your files.\ Recommended image with transparency: `.png`, and `.webp`. #### Size and opacity * **Size** – Adjust the logo size relative to the screen height using the slider. * **Opacity** – Control the transparency of your logo. #### Position Choose where you want the watermark to appear on the screen:\ bottom left, bottom right, top left, or top right. #### Text Add an alternative text to display next to or below your logo (e.g. “Powered by UFOLab”). #### URL Add a clickable link to your watermark.\ When players click on the logo, they’ll be redirected to the specified web address (e.g. `https://www.theufolab.com`). \ Using a watermark is a great way to personalize your game or include your organization’s logo while maintaining a professional look. # How to clone and rename scenes? To clone and rename scenes, just click on the following buttons below it: * ![](/files/jm0qiteDXNls6KAyJkO0) * ![](/files/eRaxyg7Jdrk5yll0r4XH)

* {% hint style="info" %} If you clone a scene but don't rename it, it will give you an error and it won't be cloned until you change the name, because it will tell you that the scene already exists {% endhint %} # How to delete multimedia files? To delete media files you will simply have to drag them to the delete trash can icon.

# How to create a mobile game? It is necessary to do tests on the mobile to check that everything is correct because some things could change or not look good depending on the device and browser we use for it. If you want to adapt your game to a mobile enviroment you can change the size of the canvas to fit everything properly.

# How to add background music To make the music or sound heard throughout the game, you could use the interface layer, as this would allow us to permanently listen to the audio throughout the project, without the need to repeat it in each scene. Conversely, if you only want it to play in one scene, you just have to drag the audio into it. ### Music configuration For the music you can configure: * If you want the music to start playing as soon as the palyer enters the game or the scene the music is on. * If you want the music to be in a loop. * If you want the player to see the controls of the music player. * Volume. Only in **one scene**:

In **all the scenes**:

# How to resize the elements What you'll do to resize the elements will be very simple. You just have to drag the element you want into the scene, and with the arrows that you will see at the top left, you will place it in the way you prefer.

* Automatic (![](/files/x6OVrePhYg17TKWwmMpo)): with this button you can scale, shrink and stretch.

* Expand/Decrease (Alt/Option) (![](/files/0kL85h22I9jzZvMI11v3)): with this button you can scale the object extend or reduce.

* Move (Space) (![](/files/dd9V9hRuSAE0pW9s62Cl)): with this selection, you can drag and move the panel.

# How to change the scenes order The scenes will be seen below and you can simply drag them. In any case, the order in which the scenes are placed is simply indicative, because what really matters is which scene you configure that is directed by the actions.

# How to move elements of the scene back and forth? To move back and forth elements of the scene, press the buttons in the top left as follows:

# How to make the cover of your game? When creating a new game, by default the "FRONT IMAGE" and "BACKGROUND IMAGE" sections appear in the general settings, at the bottom. However, you can always edit it again later in the SETTINGS section. Example:

# How to change the canvas size? To change the size of the canvas, you just have to go to SETTINGS, located on the left of the screen, then you will select CANVAS and you can change the width and length of the game area. To finish you must click on the APPLY CHANGES button.

# What's the size limit for files? Depending on the type of file, we will have one size limit or another: * Images: * JPEG/PNG/WEBP/SVG -> 5Mb * GIF -> 10Mb * Audio: * MP3/WAV/OGG -> 5Mb * Video: * MP4/OGV/WEBM -> 20Mb * Other: * 5Mb {% hint style="info" %} Large image sizes should not normally be necessary, as a standard screen is usually 1920 x 1080 pixels. {% endhint %} # How to zoom in, zoom out, and adjust the screen? If you need to zoom out, zoom in or adjust the screen you will simply have to use the following buttons located at the bottom right:

# You need help? Search our help center for answers or start a conversation with us. {% hint style="info" %} It is advisable to write your contact email to answer your questions {% endhint %} To receive help you will simply have to click on the button " ![](/files/1NdUnyKRaiEv4cMbq4yJ) " located at the bottom right.

# Levels The levels are the scenes we created below. Putting all these scenes together, the game is formed. As soon as we create a new game, we will already have three scenes predetermined: * Beginning * End * Game over # Effects If we click on an element of the scene and then click on the EFFECTS button we can find two sections:

To access the puzzle effects, you can double-click on the puzzle or go to the configuration wheel and you will also find inside

# Interface layer The interface layer is used when we want an icon, text, image, etc., to remain in all scenes, and in the same place where it was put at the beginning. {% hint style="info" %} An example in which you will normally use the interface layer would be with the gamification bar because, in this way, the time, the score, etc. would be seen throughout the process. {% endhint %}