> For the complete documentation index, see [llms.txt](https://kdoore.gitbook.io/cs2335/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kdoore.gitbook.io/cs2335/project-2-statemanager/optionpanel-prefab.md).

# OptionPanel Prefab

## Create OptionPanel Prefab: UI-Panel,2 UI-Buttons

* **Add UI-Panel to your scene**
* **Name it:  OptionPanel**
* **Configure the Canvas to use** [**Screen-Space Camera**](/cs2335/ui-components/project-1-score-and-ui-elements/screen-space_canvas.md)
* **Resize and use Rect-Transform presets** to configure the panel
* **Add CanvasGroup to the OptionPanel** (Components > Layout > CanvasGroup ) 
* **Add 2 Child GameObjects:** UI-Buttons: **ButtonOption1,  ButtonOption2**
* **Use Rect-Transform** presets to align the child Buttons within the OptionPanel
* **Optional:** Use Images for you Button (see below)
* **Optional:** Add Horizontal Layout Component to the OptionPanel (See below)
* **Make a prefab** from the OptionPanel GameObject
* **You can use this prefab to add scene-transition buttons to each scene.**

![](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-MIQ__sTj_htxLjABZnq%2F-MIQfe6hcrPehAzDHyZH%2FScreen%20Shot%202020-09-29%20at%204.04.15%20PM.png?alt=media\&token=eebed133-4542-4189-99d7-1a6858e33210)

![The Inspector View of OptionPanel Components](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-MItRzGuXjyGYGxp2TbX%2F-MIuR_XjdFdCSnY96ErP%2FScreen%20Shot%202020-10-05%20at%203.25.14%20PM.png?alt=media\&token=d9556888-65cd-42cb-a028-eaba0a5b1d8b)

### Horizontal Layout Component

**Optional:**  To create a Panel with Auto-layout to include padding, you can add a Horizontal Layout Component to the OptionPanel.  Set the Padding and Alignment to your preferences.

![Customize Padding and Alignment ](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-MIQVz0sIlZRsVx56s7f%2F-MIQZOeUZypLZ1QzUbNd%2FScreen%20Shot%202020-09-29%20at%203.31.21%20PM.png?alt=media\&token=633ed59b-9937-48da-981a-7361ef379cbf)

### Sprites For Panel and Buttons

The images below show how to use Images for Buttons.\
[**See the gitbook section on using Sprite Sheets**  ](/cs2335/project-2-statemanager/optionpanel-prefab/ui-images-sprite-sheets.md)

![](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-MIQVz0sIlZRsVx56s7f%2F-MIQYNwfV1W5LXsxTZDv%2FScreen%20Shot%202020-09-29%20at%203.07.27%20PM.png?alt=media\&token=9f7e08b1-352e-4a52-bcdf-8c0daee5b68a)

Select **Sprite Swap** as the **Button Transition** setting.  \
Then select the highlighted version of the button image for the **Highlight Sprite**.

Preserve Aspect ratio was used in this example.

![](https://3353821304-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-MIQVz0sIlZRsVx56s7f%2F-MIQYRGuOXWPOeu0Ltm9%2FScreen%20Shot%202020-09-29%20at%203.07.50%20PM.png?alt=media\&token=d93d46b5-18fb-487d-9e54-cc86c7017153)

#### Finally:  Remember to Make a Prefab of the OptionPanel