Coin Shop

A Coin Shop is a UI Screen that allows the player to use the points or coins they have collected in the game to purchase a Character or Object.

In-game Example

The example below demonstrates how the player can purchase a red hat for their character.

After the player arrives at the 2D World, they can see the character is not wearing a hat. After the player clicks or taps the Coin Shop button, they arrive at the coin shop menu. After the player selects one of the Coin Shop buttons, they must click or tap the confirmation button to confirm their purchase.
After the player confirms their purchase, the button changes its color, and subtracts 1 from the Coin Score’s total amount. After the Coin Shop button is unlocked, the player can select it, changing the button’s outline color. After the player clicks or taps the play button, their character is now wearing a red hat.

Creating a Coin Shop

To create a Coin Shop menu, you need to create the following:

Placeholder Asset

After the player uses a Coin Shop Button to purchase an asset, the Placeholder asset will be replaced by the purchased asset.

To create a Placeholder Asset:

  1. In a World Editor and in the Asset panel on the left, click Asset Library.
  2. In the Shapes category, double-click Cube to add it to the Asset Panel.
  3. Click Asset Library to go back to the World Editor.
  4. Double-click the Cube to open the Asset Node Map.
  5. In the Node Category panel on the left, click Advanced category to expand it.
  6. Drag the Shop Item Placeholder node to the grid.
  7. In the Options panel on the right and in the Shop ID field, type a desired ID.
    This ID must match a Coin Shop Button’s shop ID
Coin Shop Button

The Coin Shop Button allows the player to purchase and select a Character or Object in the game.

To add a Coin Shop button to a UI Screen:

  1. In a UI Editor, and in the Objects category in the Asset panel, drag a Coin Shop Button to the grid.
  2. If needed, drag the sides and corners to resize the button.
  3. In the Options panel on the right and in the Asset field square, click the Edit button to open the Asset Manager.
  4. In the Asset Manager window and in the left panel, select the asset you want this button to purchase.
  5. In the right panel, scroll down and click Save to close the Asset Manager window.
  6. In the Shop ID field, type a Shop ID that matches a Placeholder Asset’s Shop ID.
  7. In the Price field, enter the amount of Coins or Points you want the player to spend on an asset.

Appearance

The Coin Shop Button contains 4 attribute categories that make up its appearance during the following occurrences:

Attribute Category Occurrence
Unselected The player has yet to interact with the button.
Selected The button is toggled or enabled and its asset will appear in the game when the Placeholder Asset spawns.
Locked Unable to be selected. Requires a purchase to unlock.
Unlocked The player is able to interact with the button to select its associated asset.

To change the button’s appearance, drag a PNG image from your computer to an Animation attribute field.

Shop Item Attributes

The Shop Item attribute category allows you to define which asset the button will unlock as well as the currency and price of the asset. This attribute category contains the following:

Attribute Description
Asset The asset that will appear in the game after it has been unlocked and selected.
Shop ID Enter an ID that matches a Placeholder Asset Shop ID.
Price Enter the amount of coins or points required to purchase the asset.
Currency Select the type of currency required to make the purchase:

  • Coins
  • Points
  • In-app Purchase
Unlocked by Default Select to make the button available for free and without any required purchase.
Selected by Default Select to make the button already be selected after the player arrives at the UI Screen.
Requires Confirmation Select to make a confirmation button appear after the player makes a purchase attempt

A Confirmation Button must be present in the UI Editor.
Confirmation Button (Optional)

Allows the player to confirm their Coin Shop Button purchase. Only one can exist in a UI Screen.

To add a confirmation button:

  1. On the UI Editor grid, select a Coin Shop Button.
  2. In the Options panel on the right, select the Requires Confirmation check-box.
  3. In the Asset panel on the left, drag a Confirmation Button to the grid.
Only 1 Confirmation Button can be present on a UI Screen. If a UI Screen contains more than 1 Confirmation Button the Coin Shop Buttons will only use the first one you added.