Unity - GUI Template

From NoskeWiki
Jump to navigation Jump to search

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.)

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))
      • Scrollbar Vertical .............................................. (RT. bottom-stretch... height 20 + image + scrollbar script)

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)
    • top_banner .............................................................. (RT. top,stretch, height=140)

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)

Other Pages

  • Unity - main Unity article


Links