---
title: "Add a Start Button to your Game"
slug: "add-a-start-button-to-your-game"
updated: 2026-06-11T16:20:48Z
published: 2026-06-11T16:20:48Z
canonical: "docs.xtremepush.com/add-a-start-button-to-your-game"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a Start Button to your Game

An example of how to create a start button on your game's loader screen

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:

[Embedded content](https://app.screencast.com/wV3WSKppGd5wz/e)

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](/documentation/docs/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](/docs/add-a-start-button-to-your-game#create-a-group-layer-for-the-button)
2. [Add the Button Image to the group](/docs/add-a-start-button-to-your-game#configure-the-start-button-image)
3. [Add a Button Controller to make the image clickable](/docs/add-a-start-button-to-your-game#add-a-button-controller)
4. [Add an Animation for the Button](/docs/add-a-start-button-to-your-game#add-an-animation-layer)

### 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 Alph**a 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.