Difference between revisions of "User Interface"
m |
m |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[http://space.apps.uri.edu/wiki/index.php?title=Learn_Unity_First '''Main guide page'''] | [http://space.apps.uri.edu/wiki/index.php?title=Learn_Unity_First '''Main guide page'''] | ||
| − | + | ||
| + | All of the objects listed here can be created from the list in GameObject > UI. | ||
=Canvas= | =Canvas= | ||
| − | This holds all the other User Interface (UI) elements you'll want to use. If you go to GameObject > UI > and pick anything other than Canvas or Event System, both will be created (unless they already exist). Render Mode is for saying if you want the UI elements to just follow the main camera (the default of Screen Space - Overlay), or remain attached to an object and stay in place no matter where the player is (the World Space option). You can have more than one canvas in a scene, so Sort Order determines which canvas is on the top layer, above any other canvases. | + | This holds all the other User Interface (UI) elements you'll want to use. If you go to GameObject > UI > and pick anything other than Canvas or Event System, both will be created (unless they already exist). Render Mode is for saying if you want the UI elements to just follow the main camera (the default of Screen Space - Overlay), or remain attached to an object and stay in place no matter where the player is (the World Space option). You can have more than one canvas in a scene, so Sort Order determines which canvas is on the top layer, above any other canvases. You probably have to zoom out to see the whole canvas, in overlay mode it represents the full screen size. So if you're using overlay do not scale the canvas down, and if you do your ui might be oddly sized in relation to the screen. |
| + | All elements placed on the canvas can be moved 3-dimensionally, but only position on the x and y axes matter for what the player will see of the ui, at least in overlay mode. | ||
=Text= | =Text= | ||
| − | ''Note: TextMesh Pro's text ui is much more | + | ''Note: TextMesh Pro's text ui is much more customizable, and it is a very good and free plugin that is better in most situations, but I'm going to talk about the text ui object that Unity has by default. Even if you do decide to use the plugin for text objects, this section is still relevant. Do try out TextMesh Pro in the asset store though, it's really good!'' |
For text visibility, try not to make the font size too small, and always test that your UI looks right after major changes. Wrapping and truncation can change text, that you think is completely fine, to look a bit different than what you might think it would be. | For text visibility, try not to make the font size too small, and always test that your UI looks right after major changes. Wrapping and truncation can change text, that you think is completely fine, to look a bit different than what you might think it would be. | ||
=Images (and Raw Images)= | =Images (and Raw Images)= | ||
| + | Images are for displaying sprites, from a sheet of many similar images, while raw images are for simply displaying an image as a whole. To select the image shown, change Source Image or Texture, for Images and Raw Images respectively. When choosing a Source Image for an Image will only show resulting images from splitting up all the sprite sheets available in assets. When choosing a texture for a raw image, you have the choice between every image in your assets, including whole sprite sheets. You can also basically crop a raw image to whatever you want by changing the UV Rect. If you want the whole image, x = 0, y = 0, w = 1, and h = 1 is fine. x and y are for the upper left corner of a rectangle with a width of w and height of h. | ||
=Input= | =Input= | ||
| + | You can create these elements but as camera movement and ui interaction are both controlled by the mouse in 3d games, you can only test interactions with ui if you press escape and click around with your mouse while it still controls the camera too. Players can't use this method though, so you must do some basic scripting for players to easily use input based ui. | ||
==Buttons== | ==Buttons== | ||
| + | Buttons can be used to make a script method fire off upon being clicked. In the inspector you can adjust how the button looks after it has been clicked and how long the change takes to happen and then fade away, the button texture, color when hovering over the button or when the user is holding it down or when it is not enabled as interactable. You can also select the method(s) you want firing off when the button is clicked, by adding it to the On Click() field. The text displayed on the button can also be changed. You can see the button has a child object, and that child object controls what the button has on it. | ||
==Text== | ==Text== | ||
| + | Input fields. They can be used if you want the user to type something in. I'd recommend you use them sparingly unless you have some good text validation code implemented as well, so the user can't just type in a space or leave it blank and submit. | ||
==Dropdown== | ==Dropdown== | ||
| + | Similar to a button, but it has a bit more functionality, when pressed it toggles a menu of options to choose from and the chosen option from those gets to be the top option on the list when the dropdown is closed again. An event can also be fired off when the chosen item changes so relevant data gets updated. | ||
=Slider= | =Slider= | ||
| + | Used to let the user select a value out of a range of numbers. You can change the direction of the slider, starting location of the handle, and what range the slider is for. The On Value Changed() function lets you do something when the user changes the selected value (and passes in the value so you know what it was changed to). | ||
| + | |||
| + | Make sure to take a look at the videos over at [https://unity3d.com/learn/tutorials/topics/user-interface-ui Unity's site] for more information on UI elements. | ||
| − | + | Move onto [[Basic Scripting]] -> | |
Latest revision as of 16:25, 1 June 2017
All of the objects listed here can be created from the list in GameObject > UI.
Contents
Canvas
This holds all the other User Interface (UI) elements you'll want to use. If you go to GameObject > UI > and pick anything other than Canvas or Event System, both will be created (unless they already exist). Render Mode is for saying if you want the UI elements to just follow the main camera (the default of Screen Space - Overlay), or remain attached to an object and stay in place no matter where the player is (the World Space option). You can have more than one canvas in a scene, so Sort Order determines which canvas is on the top layer, above any other canvases. You probably have to zoom out to see the whole canvas, in overlay mode it represents the full screen size. So if you're using overlay do not scale the canvas down, and if you do your ui might be oddly sized in relation to the screen. All elements placed on the canvas can be moved 3-dimensionally, but only position on the x and y axes matter for what the player will see of the ui, at least in overlay mode.
Text
Note: TextMesh Pro's text ui is much more customizable, and it is a very good and free plugin that is better in most situations, but I'm going to talk about the text ui object that Unity has by default. Even if you do decide to use the plugin for text objects, this section is still relevant. Do try out TextMesh Pro in the asset store though, it's really good!
For text visibility, try not to make the font size too small, and always test that your UI looks right after major changes. Wrapping and truncation can change text, that you think is completely fine, to look a bit different than what you might think it would be.
Images (and Raw Images)
Images are for displaying sprites, from a sheet of many similar images, while raw images are for simply displaying an image as a whole. To select the image shown, change Source Image or Texture, for Images and Raw Images respectively. When choosing a Source Image for an Image will only show resulting images from splitting up all the sprite sheets available in assets. When choosing a texture for a raw image, you have the choice between every image in your assets, including whole sprite sheets. You can also basically crop a raw image to whatever you want by changing the UV Rect. If you want the whole image, x = 0, y = 0, w = 1, and h = 1 is fine. x and y are for the upper left corner of a rectangle with a width of w and height of h.
Input
You can create these elements but as camera movement and ui interaction are both controlled by the mouse in 3d games, you can only test interactions with ui if you press escape and click around with your mouse while it still controls the camera too. Players can't use this method though, so you must do some basic scripting for players to easily use input based ui.
Buttons
Buttons can be used to make a script method fire off upon being clicked. In the inspector you can adjust how the button looks after it has been clicked and how long the change takes to happen and then fade away, the button texture, color when hovering over the button or when the user is holding it down or when it is not enabled as interactable. You can also select the method(s) you want firing off when the button is clicked, by adding it to the On Click() field. The text displayed on the button can also be changed. You can see the button has a child object, and that child object controls what the button has on it.
Text
Input fields. They can be used if you want the user to type something in. I'd recommend you use them sparingly unless you have some good text validation code implemented as well, so the user can't just type in a space or leave it blank and submit.
Dropdown
Similar to a button, but it has a bit more functionality, when pressed it toggles a menu of options to choose from and the chosen option from those gets to be the top option on the list when the dropdown is closed again. An event can also be fired off when the chosen item changes so relevant data gets updated.
Slider
Used to let the user select a value out of a range of numbers. You can change the direction of the slider, starting location of the handle, and what range the slider is for. The On Value Changed() function lets you do something when the user changes the selected value (and passes in the value so you know what it was changed to).
Make sure to take a look at the videos over at Unity's site for more information on UI elements.
Move onto Basic Scripting ->
