Add a Start Button to your Game

Some games take your users directly to the gameplay screen after game loads. To create a more controlled entry into the game, you can add a clickable, animated Start button to the loader screen as shown in the example video below:

Adding a start button also enables background music in your game, as most browsers require a user interaction before playing any audio.

This page provides detailed instructions on how to add a start button for any game.

Prerequisites: Ensure you have a .png image file of your start button. You must add this image as an additional asset in your game campaign. For more information on adding additional assets, see Add Additional Assets

Overview of Adding a Start Button

You must add and configure the button from the Editor on the Loader screen. The process involves four main steps:

1. Create a Group Layer for the Button
2. Add the Button Image to the group
3. Add a Button Controller to make the image clickable
4. Add an Animation for the Button

Create a Group Layer for the Button

First, create a group layer that contains all the elements of your start button. This makes it easier to manage the buttons position and layers.

1. In the Layers pane, right-click Root and select Create Layer>Elements>Group
2. In the properties pane on the right, enter a name for the group under Label. For example, Start Button
3. Select the Leading checkbox
4. Change the Positioning Mode to relative and move the group below your game’s loader progress bar.

Configure the Start Button Image

Now, add your prepared start button image to the group you just created.

1. In the Layers pane select your configured group and right-click Create Layer>Elements>Loader Image
2. In the properties pane, enter a name for the image layer in the Label field.
3. In the Image drop-down, select the start button image you added earlier.
4. Save your changes in the Editor

Add a Button Controller

Add a button layer to make the image interactive. Here, you'll configure the image to function as a button that starts the game when clicked.

1. In the Layers pane select your group and right-click Create Layer>Controllers>Buttons
2. In the properties pane, enter a name for the button layer in the Label field.
3. In the Hitbox Element field, specify the clickable element of your button by entering the image layer ID.
4. In the Image Control section, configure the button's appearance when a user hovers over it.
   To add a slight tint on hover as shown in the video example earlier, do the following:
   1. In the Image Element field, enter the layer ID of your image layer.
   2. Select the Change Tint checkbox.
   3. In Tint Hover, select a darker colour.
   4. Click Set Hover to preview the effect.
      Alternatively, you can use the Change Image checkbox to display a different image when a user hovers over or clicks the button. This option requires you to first upload the images for each state to your game's assets.
5. Configure the button to start the game when clicked:
   1. In the Layers tab, select the layer for progress bar animator and in the properties pane uncheck Emit on Stop
      This action prevents the game screen from displaying after the progress bar animation completes and reaches 100%.
   2. Select your button layer and then navigate to Clicked Events in the properties pane
   3. In the Event drop-down, select NamedEvent
   4. In the Event Name drop-down, select loader_exit. This ensures that your user is directed to the gameplay screen.
6. Save your changes in the Editor

Add an Animation layer

Without animation, the button will appear static. You can add a simple fade-in animation, so the button appears smoothly after the game finishes loading.

1. In the Layers pane select the group and right-click Create Layer>Effects>Animation
2. In the properties pane, enter a name for the button layer under Label.
3. In the Logic section, from the Init Action dropdown, select Hidden.
   This ensures that the button is hidden by default and appears only when an event is triggered.
4. In the Trigger section, configure the animation to start after the loader progress bar reaches 100.
   1. Select loadProgress in the event drop-down.
   2. Select irrelevant in the resume drop-down
   3. Condition: Enter loader.progress == 100. This ensures the animation only starts when the loader progress reaches 100%.
5. In the Animation section, adjust the parameters to create a smooth fade-in effect as shown in the video example earlier:
   1. Duration of the animation to 500 ms
   2. Select Animate Alpha checkbox
   3. Alpha steps: Enter 0%, 0 on the first line and 100%, 1, easeIn on the second line. This animates the button from fully transparent to fully opaque.
   4. Click Start to test the animation.
6. To test the button, select the Demo layer and in the properties pane, click Run Simulation.
7. Save your changes in the Editor.