siki_unity_2-4_ugui_unity5.1 UI Case Study

Unity 2-4 Ugui Unity5.1 UI Case Study Task 1:ugui Introduction

What is a GUI:
Start menu of the game
RPG game menu bar, sidebar and function bar (e.g. backpack system, task list, etc.)
Designed to control the movement of virtual rods and attack buttons

Ugui:
Unity Built-in
GUI can also be implemented with third-party plug-ins: such as Ngui, Dfgui, etc.

Task 2: Introduction to the game case

Task 3: Create a game menu

Components in the Ugui:
Panel, UI--panels
Button--Buttons
Text--Texts
Image--Image
Raw Image--a material to drag and drop
Slider--Slider
Scrollbar--scroll bar
Toggle--Switch (check box)
Input Field--Enter box
Canvas-canvases (all UI components are located under canvas)
Event System--Events systems (handling events related to UI)

Almost all of the UI components have
Rect Transform--Used to control location and anchor information
Script Scripts--the function of the control component

Button:
button->text-> text (Script)--You can modify the display
Image (Script)--Modify background image

Toggle: check box
toggle->label-> text (Script)--Modify the display
toggle->background-> image (Script)--Modify the background image
Toggle->background->checkmark-> Image (Script)--Change the mark of a tick

Slider: Slider
Float value corresponding to the current slider position for slider, [0, 1]
Slider->background-> Image (Script)--modifies the back background (slider not sliding area)
Slider->fill area->fill-> Image (Script)--Slider front background: Slider slide area
Slider->handle Slide Area->handle (Script), slide block background

Task 4: Create a text list of announcements

Create image, rename to Notebg, as background of text
Modify Alpha Value: transparency

Create another image, rename it as TITLEBG, as the caption background, as the child object of note

Create text under NOTEBG and TITLEBG, respectively

Add up and down scrolling function to text under NOTEBG
1. Create an image under NOTEBG, in the same size as Notebg->text
2. Add scroll rect component to image
Use text as a sub-object of image
Content property: Specifies the control that owns the scroll function, where the text is assigned
At this point, the text has the ability to scroll
Scroll the horizontal direction to uncheck Horizontal
At this time slipped, found no, just appeared text can be dragged away
3.

Task 5: Tap event for a listener button task 6: Create a spinning ball game

siki_unity_2-4_ugui_unity5.1 UI Case Study