Join Jesse Freeman for an in-depth discussion in this video Styling buttons, part of Unity 5: UI.
- View Offline
- Exercise Files
- Now that we've connected up our button,…let's look into some different ways of styling it.…We've already covered a little bit about how…the transition works inside of the button script,…but let's say you want to have a more complex button.…In this case, we want to put…a small icon inside of our button.…In order to do this, let's right click…on our button and create a new image.…Then, we'll set this image to the button border.…
On thing to note: The button border's…pixels to units are set to one, but since we never change…this in our canvas and they are set to 100,…our image is going to be really large.…So let's select our canvas and change the…"Reference Pixels to Units" to one.…Now, back at our image, let's call this "Icon."…Next, we're going to change…the size of the icon to 20 by 20.…Next, we'll anchor the icon…to the center left-hand side.…
Now we're going to want to change the pivot,…so let's set the X-pivot to zero, so it's on…the left-hand side of our icon…and we'll change the "Position X" to 10.…Next, we're going to want to change the alignment…
- 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
Unity 5 2D Essential Training (2015)with Jesse Freeman3h 22m Intermediate
1. The Canvas
2. Working with the RectTransform
3. Working with Text
4. Working with Images
5. Working with Buttons
6. Handling UI Input
7. Working with a Slider
8. Controlling Layout
9. Toggles, Dropdowns, and the Input Field
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take 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.