You can learn more about UI layouts in the Makinom documentation. We want the player HUDs to display at the lower right corner, adding additional combatants to the left. UI Layout #įirst, we create a UI Layout that’ll handle placing the HUD for the player and other player group members.
HUD Setup #Īs a last step, we’ll set up the HUD in the Makinom editor. You can now remove the canvas (and HUD) from the scene. We’ll use a UI Layout to handle this, but you can also use the actual HUD game object’s position if you want. In that case, place the HUD on the canvas where you want it to display. You might be wondering about the placement of the HUD. limiting the number of displayed effects, combine stacked effects, etc. Rect Transform #įirst, we adjust the size of the overall HUD element – this is handled on the Status Effect Content game object.Īs for the HUD Status Effect List component, the default setup is already correct for us, but you can also adjust it to your liking, e.g. Like with the status value UI, this’ll create a ready-to-use setup for us that we’ll now adjust to our needs. Create the HUD element #Ĭreate a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Effect > Status Effect Content+Duration (for prefabs) Additionally, we’ll use the icon as a radial value bar for the duration. We’ll create a UI that shows the status effect’s name at the bottom, it’s duration at the top and the icon in the background. The Unity UI module uses a prefab for this – the HUD will use the prefab to create the individual status effects. Next, we’ll set up the Status Effect UI for status effects.
Save Settings #ĭon’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom. In this case, make sure to later also use the same UI key in the HUD Status Value List component setup. Change the Image components on the Empty Sprite and Value Sprite game objects (child objects of Canvas > Status Value > Value Bar).Īlternatively, you can also define a Key Status Value UI instead of setting the default UI.
We need to set the sprite the value bar will use. The structure of the created game object is as follows: We don’t really see much, as it’s currently white text on a white image. The ready to use status value game object is also set up for us and we can now style it to our liking. This will create a Canvas to style our UI in – the canvas is set up as Makinom’s default canvas would be. We create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (for prefabs) Using a white color allows us to color the sprite however we want using the Image component’s Color setting.ĭownload White Sprite Create the HUD element #Ĭreating our status value prefabs is pretty straight forward.
Unity3d ui set icon in list of images download#
You can download a simple, white sprite below in case you don’t have any sprite at hand. The value bar uses a sprite and fills it according to the status value’s filled state. We’ll create a UI that shows the status value’s name on the left side, it’s current value at the right side and a value bar. The Unity UI module uses a prefab for this – the HUD will use the prefab to create the individual status values. Status Value UI #įirst, we’ll set up the Status Value UI for our HP and MP status values. You still need to use those prefabs for the Status Value UI, Status Effect UI and HUD setup in the Makinom editor. This contains the player HUD, status value UI and status effect UI prefabs as well as the used images and font. You can download the completed HUD setup here: If not, check the initial setup tutorial for the Unity UI module. Your project’s UI system should already be set to use the Unity UI module. How you name your status values (or how many you have) doesn’t really matter for this setup. In this tutorial we’ll create a Combatant type HUD to display the player’s name and Consumable type status values (HP, MP) and applied status effects. Create a simple player HUD using the Unity UI module.
0 kommentar(er)
