Unity Tutorial 06 (Semester 2)

 

Image from the tutorial

For this weeks tutorial I had to add a user interface to my game so that I could see Ruby's health on screen. The first thing I had to do was create a UI canvas in my hierarchy. After I did this a new GameObject called EventSystem was added to my scene. This GameObject is a component that dealt with interactions with the UI such as a mouse click. I then had to select this GameObject in my inspector. The GameObject had something called a rect transform component instead of a transform component. The difference between a transform component and a rect transform component is that it has additional UI data and it can be in three different modes: Overlay which makes Unity display your health on screen at all times, camera which aligns the UI with your camera and world space which draws a plane anywhere in your world.  I had to keep it in overlay so I could see Ruby's health all the time. I then had to use the canvas scaler component and set it to constant pixel size so that the UI would stay the same size no matter what. I then had to add an image to the UI by creating an Image GameObject in the hierarchy. I then had to edit my UI to resize my image. To do this I had to select my image in the rect tool and resize it using the shift key and put it in the top left corner like in most games and anchor the image. I then had to add a portrait of Ruby to my health bar by selecting my CharacterPortrait sprite.  After I created the health bar I had to make it possible for Ruby to talk to characters. First I had to create a new character called Jambi. This was easy as I had already created characters before. I then had to add in a new physics system called raycasting which is casting a ray to my scene and seeing if it interacts with a collider. To make this happen I had to add RaycastHit2D to my Update function in my script. I then had to add a dialog UI to my game. To do this I had to click on Jambi and do exactly what I did in the last UI tutorial. I then had to edit my rect transform and set both my position x and y to 0, my width to 300, my height to 200 and my scale to 0.01 in x, y and z. I then had to move my dialog UI above my characters. I then had to add text to my dialog box using my inspector.