Unity - GUI Template
Jump to navigation
Jump to search
Contents
About
NOTE: This page is a daughter page of: Unity
Unity / Unity3D is a 3D game engine and on this page I outline how you might get a little GUI system with buttons and tabs / scroll areas working. Not just 2D game, but 3D game too often need a 2D GUI overlay layer which is complex enough that you'll want to switch between screens or tabs, and introduce scroll areas into the mix.
[TOC]
Heirachy
Top Level
Top level of Hierarchy:
- 0_MAIN_MONO_SCRIPTS_[S] .................................... (T. GuiOverlayMono Script - links to screens + DataControllerMono)
- Main Camera ....................................................................... (T. + camera + audio listener)
- GUI .......................................................................................... (RT. + canvas + scalar with reference 1080x1920 + graphic ray caster)
- Full Screen .................................................................... (RT. stretch left/top/all = 0, pivots 0.5)
- IMAGE_FOR_TRACING ................................... (RT. as above + image for you to manually trace)
- Content .................................................................... (RT. as above + image with white background InputFieldBackground)
- SCREEN_0_MAIN_MENU ....................... (RT.)
- SCREEN_1_GAMEPLAY .......................... (RT.)
- SCREEN_2_HIGH_SCORES .................. (RT.)
- Popup_Messages ................................................ (RT.)
- EventSystem ................................................................ (ES.)
- Full Screen .................................................................... (RT. stretch left/top/all = 0, pivots 0.5)
Main Menu with 2 buttons
For the main menu we want two buttons to fill up the screen, and we might add a Scroll Area just in case it's a rotated or tiny screen:
- SCREEN_0_MAIN_MENU .......................................... (RT.)
- Scroll View .................................................................. (RT. + scroll rect + viewport=viewport + vertical only)
- Viewport ............................................................... (RT. pivot 0,1, right,bottom=17 + mask)
- Content ......................................................... (RT.)
- Inset ........................................................ (RT. l,t,r,b=50 + vertical layout group with child force expand)
- title .................................................... (RT. 100x200 + horizontal layout group with child force expand + layout element with min height 200)
- btn_1_to_gameplay ................... (RT. 720x720 + layout element with min and preferred height 720)
- Button_[C] .............................. (RT. right=-850? + links to 0_MAIN_MONO_SCRIPTS_.SelectScreen(1))
- btn_2_to_scores ......................... (RT. 100x250 + layout element with min and preferred height 250)
- Button_[C] .............................. (RT. right=-850? + links to 0_MAIN_MONO_SCRIPTS_.SelectScreen(2))
- Inset ........................................................ (RT. l,t,r,b=50 + vertical layout group with child force expand)
- Content ......................................................... (RT.)
- Scrollbar Vertical .............................................. (RT. bottom-stretch... height 20 + image + scrollbar script)
- Viewport ............................................................... (RT. pivot 0,1, right,bottom=17 + mask)
- Scroll View .................................................................. (RT. + scroll rect + viewport=viewport + vertical only)
High Scores Scroll with prefab
For the high scores we definitely want a Scroll Area to show many scores, so it might look like this:
- SCREEN_2_HIGH_SCORES ................................. (RT.)
- Scroll View .............................................................. (RT. top=140 + scroll rect + viewport=viewport + vertical only)
- Viewport ........................................................... (RT. pivot 0,1, right,bottom=17 + mask)
- Content. .................................................... (RT. top=80 + vertical layout group with child control height + content size fitter with vertical unconstrained)
- high_score [PREFAB] ................... (RT. + layout element with min height=110)
- text ................................................ (RT. + text)
- high_score [PREFAB] ................... (RT. + layout element with min height=110)
- Content. .................................................... (RT. top=80 + vertical layout group with child control height + content size fitter with vertical unconstrained)
- Viewport ........................................................... (RT. pivot 0,1, right,bottom=17 + mask)
- top_banner .............................................................. (RT. top,stretch, height=140)
- Scroll View .............................................................. (RT. top=140 + scroll rect + viewport=viewport + vertical only)
Popup Message with Close Dialog
For the popup message, it has a black background to intercept clicks and a close button:
- Popup_Messages ................................................ (RT.)
- POPUP_ERROR_[S] ................................... (RT. + DlgPopupError with text_title and message)
- bg_blackout ............................................. (RT. + image black semi-transparent)
- Dialog ........................................................ (RT. + image white + vertical layout group, fixed width 800x420, pivot center, paddings=0 control child height)
- panel_top. ........................................ (RT. + layout_element with min height)
- text_title ..................................... (RT. + text + content size fitter)
- btn_close_[C] .......................... (RT. 44x44 + button to POPUP_ERROR_[S].Close)
- hit_area ................................ (RT. 100x100)
- message_inset ................................ (RT. + layout_element with min height)
- text_message ........................... (RT. text)
- panel_top. ........................................ (RT. + layout_element with min height)
- POPUP_ERROR_[S] ................................... (RT. + DlgPopupError with text_title and message)
Other Pages
- Unity - main Unity article
Links
- Unity Answers - community forum.