Difference between revisions of "Unity - GUI Template"

From NoskeWiki
Jump to navigation Jump to search
m (Main Menu with 2 buttons)
m (High Scores Scroll with prefab)
Line 44: Line 44:
 
For the high scores we definitely want a Scroll Area to show many scores, so it might look like this:
 
For the high scores we definitely want a Scroll Area to show many scores, so it might look like this:
  
* SCREEN_2_HIGH_SCORES      {{SmallFontSpan}}................ (RT.)</span>
+
* SCREEN_2_HIGH_SCORES      {{SmallFontSpan}}................................. (RT.)</span>
** Scroll View              {{SmallFontSpan}}................ (RT. top=140 + scroll rect + viewport=viewport + vertical only)</span>
+
** Scroll View              {{SmallFontSpan}}.............................................................. (RT. top=140 + scroll rect + viewport=viewport + vertical only)</span>
*** Viewport                {{SmallFontSpan}}................ (RT. pivot 0,1, right,bottom=17 + mask)</span>
+
*** Viewport                {{SmallFontSpan}}........................................................... (RT. pivot 0,1, right,bottom=17 + mask)</span>
**** Content.              {{SmallFontSpan}}................ (RT. top=80 + vertical layout group with child control height + content size fitter with vertical unconstrained)</span>
+
**** Content.              {{SmallFontSpan}}.................................................... (RT. top=80 + vertical layout group with child control height + content size fitter with vertical unconstrained)</span>
***** high_score [PREFAB]  {{SmallFontSpan}}................ (RT. + layout element with min height=110)</span>
+
***** high_score [PREFAB]  {{SmallFontSpan}}................... (RT. + layout element with min height=110)</span>
****** text                {{SmallFontSpan}}................ (RT. + text)
+
****** text                {{SmallFontSpan}}................................................ (RT. + text)
** top_banner              {{SmallFontSpan}}................ (RT. top,stretch, height=140)</span>
+
** top_banner              {{SmallFontSpan}}.............................................................. (RT. top,stretch, height=140)</span>
 
 
  
 
====Popup Message with Close Dialog====
 
====Popup Message with Close Dialog====

Revision as of 22:24, 9 May 2019

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