Add an Additional Wheel

Add an additional wheel to the Wheels game using the Game Editor

This use case explains how to add an additional wheel to your game using the game Editor. These instructions apply only if you created your campaign using a standard Xtremepush wheel template.

The example in this use case shows how to add a third wheel to a standard two-wheel game as shown in the image below.

Before you Begin

Ensure you have the following files ready:

• A png image of your new wheel.

• (optional) A png image for the new wheel's background.

Steps

The process of changing the number of wheels includes the following steps:

1. Configure the Additional Wheel

2. Upload your Wheel Assets

3. (Optional) Configure the Wheel Background Layer

4. Configure the Additional Wheel Image and Animation

5. Test the Wheel

Configure the Additional Wheel

First, you need to update the game settings to include the new wheel:

1. Go to Editor > Settings > Wheels

2. In the Wheels section, do the following:    

   • Increase the Wheel Count by one. For example from 2 to 3.

   • Scroll down to the newly added wheel section, for example, Wheel 3.

   • Set the number of sections for your new wheel.

   • Enter a unique name for each section.

   • Click Apply.

3. Go to the Settings > Assets

4. In the Images section of the Asset Configuration window, enter the file name of the new wheel and background images.
   The asset names you enter here must exactly match the filenames of wheel and background you will upload later in the Assets tab.

5. Click Apply and then Save your changes in the Editor.

Upload Your Wheel Assets

Now, upload the images you prepared for the wheels and wheel background.

1. Go to the Assets page of your game campaign.

2. Upload your new wheel and wheel background png files.

3. Ensure the filenames exactly match the asset names you defined in the Asset Configuration window in the Editor

4. Click Save.

(Optional) Configure the Wheel Background Layer

If you plan to use a background image for your wheel, configure this layer first, before adding the main wheel image.

1. In the Editor, right-click the Wheels group in the Layers pane and select Create Layer > Elements > Image

2. Select the newly created unnamed image layer in the Layers pane.

3. In the Properties pane on the left, configure the wheel background:    

   • Enter a descriptive name such as Wheel 3 Background in the Label field. This is the internal name of the background image.

   • From the Image dropdown, select the wheel background image you uploaded.

   • Adjust the size and position of the background image on the canvas as needed.

In the Properties pane, you can change the Positioning Mode to Complex for greater control. Changing the positioning mode to complex allows you to rotate the wheel using the Rotation field in the properties pane.

Configure the Additional Wheel Image and Animation

After adding the background, configure the main wheel image and its animation. To ensure correct functionality and save time, the easiest method is to copy the animation from an existing wheel layer.

To do this, perform the following:

1. Create the image layer for the wheel using the same method as the background layer.

2. Create the new image layer.

3. Select the new layer and, in the properties pane, assign a Label such as Wheel 3

4. Select your uploaded wheel Image.

5. Adjust the size and position of the wheel image on the canvas as needed.

6. In the Layers pane, locate a Wheel Animation layer nested under an already configured wheel. Right-click it and select Copy Layer.

7. Right-click your new wheel image layer and select Paste Layer. A new Wheel Animation layer will appear nested under the image layer of your new wheel.

8. Select the newly pasted Wheel Animation layer.

9. In the Wheel Animation pane on the left, go to the Logic section and select the new wheel number (e.g., Wheel 3) from the Wheel Number dropdown.

10. Finally, verify the wheel sections in the Section Mapping Test section:
    Click each section name in the list to confirm that the wheel on the canvas spins to the correct corresponding slice.

Test the Wheel

Finally, test the wheel in the Editor to confirm that the new wheel has been correctly added to your game.

1. In the Layers pane, click the Demo layer

2. In the Properties pane do the following:    

   • Under Game State section, click Load.

   • Under User Actions section, click Spin.