---
sidebar_position: 3
---

# Powerplay

## Overview

![Desktop Bottom Bar](./img/powerplay/preview1.png)
![Desktop Bottom Bar](./img/powerplay/preview2.png)
![Desktop Bottom Bar](./img/powerplay/preview3.png)

---
## Prepare Prefabs

### Step 1: power-play-panel.prefab

**Copy** `template-power-play-panel`
from `assets\core-assets\hyper-core\packages\power-panel\prefabs\template-power-play-panel.prefab`

![Add Symbol Texture](./img/powerplay/from-powerplay-panel.png)

**Past & rename** `assets\game-assets\prefabs\power-play-panel.prefab`
:::warning
Must rename to **power-play-panel**
:::  

![Add Symbol Texture](./img/powerplay/powerplay-panel-to.png)

### Step 2: mobile-power-play-panel

**Copy** `template-mobile-power-play-panel`
from `assets\core-assets\hyper-core\packages\ui\mobile-ui\prefabs\templates\template-mobile-power-play-panel.prefab`

![Add Symbol Texture](./img/powerplay/mobile-from.png)

**Past & rename** `assets\game-assets\prefabs\mobile\power-play-panel.prefab`
:::warning
Must rename to **mobile-power-play-panel**
:::  

![Add Symbol Texture](./img/powerplay/mobile-to.png)

### Step 3: template-label

**Copy 5 prefab** `template-label-auto-selection` & `template-label-title` 

**From** `assets\core-assets\slotty-core\packages\power-panel\editor\`

![Add Symbol Texture](./img/powerplay/label-template-from.png)

**To** `assets\game-assets\editor\`

![Add Symbol Texture](./img/powerplay/label-template-to.png)

---
## Edit prefab

### Step 1: label-template

**Follow Design: edit these prefab**

![Add Symbol Texture](./img/powerplay/label-template-to.png)


| Component            | Description                                       |
| -------------------- | ------------------------------------------------- |
| **Label Outline**    | Add an outline to make the text stand out.        |
| **Label Shadow**     | Add a shadow for better contrast and readability. |
| -------------------- | ------------------------------------------------- |

---
## Setup Main Scene

Drag **power-play-panel** in your main scene:     

![Add Symbol Texture](./img/powerplay/ref-prefab.png)  

---
## Setup Mobile-ui

Open prefab **mobile-ui**

Drag **mobile-power-play-panel** into this script:

![Add Symbol Texture](./img/powerplay/ref-mobile.png)  

---

## Apply Textures 

**Checklist assets**  
 ![main scenes](./img/powerplay/asset-desktop.png)   ![main scenes](./img/powerplay/asset-mobile.png)   

 
**Run the Helper Tool** to configure **PowerplayDesktop** helper.

![Add Symbol Texture](./img/powerplay/desktop-helper.png)

**Run the Helper Tool** to configure **PowerplayMobile** helper.

![Add Symbol Texture](./img/powerplay/mobile-helper.png)

---