Game Development Reference
In-Depth Information
This is defined as:
•
Canvas
: A basic
Screen Space - Overlay
canvas
•
Game Menu Rect
: This is an empty GameObject for the area of the menu
(
Width
300
,
Height
300
)
•
Header
: This is the header image using an icon from the blue spritesheet
plus white text.
• The menu
Background
: This is an
Image
using a background sprite from
the grey spritesheet.
• A
Vertical Layout Group
: This is positioned in the center of the menu
background, also with a
Content Size Fitter
applied set to
Vertical Fit
Preferred
.
• Three
Buttons
: These
Buttons
are set to sprite swap using a blue sprite for
the normal, yellow for highlighted, another yellow for pressed, and a grey
sprite for disabled. Additionally, because we are using a
Content Size Fitter
on the group, add a
Layout Element
component setting the
Preferred
Height
to
50
.
Provided you set up your spritesheet correctly (either using sliced sprites or
just basic images), you should get a nice basic effect. Hovering over the buttons
turns them yellow, clicking on them just alters them slightly, and if you disable
interactivity on a button it will turn it grey.
Additionally, the UI pack comes with a
kenvector_future.ttf
Font
.
If you feel adventurous, then drop it in your Unity project and set the
Font
of the
Text
components to give it a different feel.
That's all well and good, but let's add a little bit more flair and leverage the extra
layout bits we added:
1.
Change the
Start Button
to an Animated button by setting the
Transition
property of the
Button
to
Animation
.
2.
Click on the
Auto Generate Animation
button to create the
default animation controller. When asked, save the controller in the
Animation\Controller
folder in your project (create it if it doesn't
exist already). This will result in the following
Animator
being created
for the button (it will also add an
Animator
component to your button
GameObject
). You can view the Animator at any time by double-clicking
on the new animation controller file in the project view:
