- Now we're ready to start looking at the button component.…Let's create a new scene called ButtonScene…and save it into our Scenes folder.…Next, we'll create a button.…Now, let's take a look at the components…that make up the button.…The button is a complex component.…It's actually made up of two UI elements.…The top layer being the button…and the bottom being text label.…
On the button, if we scroll down…past the Canvas Renderer and Image,…we'll see there's a Button (Script).…On the Button (Script) we can select…whether this button is interactable.…We can also change the transition type.…By default, the transition is set to a color tint.…It's target graphic is the image component of the button…and it just changes the tint as you use the button.…
There are states for normal, highlighted, pressed, disabled…and you can alter the color manipulation…as well as the fade duration.…Below that is Navigation,…which we'll look at in a later video.…And then at the very end is the On Click handler.…This allows us to link our button to other scripts.…
Author
Updated
10/14/2016Released
11/25/2015- Adding new components to the Canvas
- Working with RectTransforms
- Nesting UI elements
- Adding rich text and effects to the UI
- Creating images
- Styling UI buttons
- Handling input
- Creating sliders
- Controlling the layout of the screen
- Adding toggles and dropdowns
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome34s
-
-
1. The Canvas
-
The Canvas2m 7s
-
Canvas scaling4m 1s
-
Canvas: Screen space1m 52s
-
Canvas: World space3m 20s
-
2. Working with the RectTransform
-
Working with RectTransforms2m 26s
-
Understanding anchors2m 11s
-
Controlling the pivot3m 14s
-
Stretching UI elements1m 48s
-
Nesting UI elements4m 4s
-
-
3. Working with Text
-
Creating text1m 44s
-
Handling overflow2m 54s
-
Working with fonts1m 38s
-
Using rich text2m 15s
-
Creating font textures3m 1s
-
Adding effects1m 51s
-
Working with text in scripts2m 59s
-
-
4. Working with Images
-
Creating an image2m 41s
-
Creating sliced images2m 43s
-
-
5. Working with Buttons
-
Creating a button2m 56s
-
Styling buttons2m 49s
-
-
6. Handling UI Input
-
The Input classes2m 57s
-
Controlling UI navigation5m 12s
-
-
7. Working with a Slider
-
Creating a slider2m 21s
-
Styling sliders2m 24s
-
-
8. Controlling Layout
-
Using layout elements3m 34s
-
Understanding grid layouts3m 21s
-
Scrolling lists3m 3s
-
9. Toggles, Dropdowns, and the Input Field
-
Creating a dropdown3m 12s
-
Creating an input field1m 50s
-
Conclusion
-
Next steps51s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating a button