Gaming Art - Week 6 | UI Elements in Unity

In today's class we made a basic main menu in Unity. It's easier if the 2D perspective is activated.

The first thing is creating a Canvas. Inside the Canvas create a Text (Create > UI > Canvas or Text).



To use other Typos you have to copy and paste them in the Assets Folder to access it. Then you can edit the size, colour, etc. as usual.


Create a button (under UI). Under the Button you can find the Text and edit it. You can also change the button's form with the source option.


You can change the background colour through the Main Camera.


Import the UI Elements in the Assets Folder. You can even use the Photoshop file for this, which is useful in case you want to edit it directly, so every change is automatically saved in Unity as well.
Then cut the elements with the Sprite Editor. 


Add an Image (under UI) for the title. To maintain the original size click the Native Size button in the Inspector.


The main menu should stay in a separate scene. So for the actual level create a new scene and build whatever.


To activate the buttons and make them work we need a bit of code. So create a new C# Script.


I added some more buttons. Through the start button the first level will load. The help button (we did not implement that one, but it works the same way) opens the options or help menu and the Quit button exits the game.


This is what the code looks like. We need one method per Button which will be applied to each button in the Inspector. By clicking the button, attach the script, drag and drop the button object in the source and under the methods select MainMenu > and the method that corresponds to that button, e.g. NewGame(), which will load the first scene.


Under File > Build Settings you have to add every scene first, so that the Scene Manager recognizes the existing scenes in the game.


At the end we build the game so that we could test the Quit option.

Comments

Post a Comment

Popular posts from this blog

Gaming Art - Week 7 | Mudbox + LOD in Maya and Unity

Image
MUDBOX The first thing is import the the objects in Maya, in this case a low poly bridge. Delete the history and attributes and send it to Mudbox ( File > Send to Mudbox > Send as new scene ). Under the Select/Move Tools Tab click on the Scale tool and scale it 10x10x10, because the scale is different between Mudbox and Maya. Increase the Subdivision levels up to 5 with Shift+D . Create a new sculpt layer. Now we can start carving. Select the sculpt tool and some stamp, increase the Strength to 100 and make the size pretty small. Activate Invert Function and start carving the stones. After that I added a granulated texture with a very big brush and weak strength. Then import a rock texture for the stones and set it as a stencil or stamp. Under the Paint Tools tab select the Projection and start painting. Oh, and do this in a new diffuse Paint Layer . In a new Specular Paint Layer paint with the Paint Brush black where it is not shiny and whit...
Read more

Gaming Art - Week 8 | Modelling the astronaut and backpack + Animations list

Image
We're gonna have to make animation trees in Unity once we start building in the assets and characters and everything, so I made a small list of the things I think I may need to animate soon. Astronaut's animations: hit dead shoot movement Enemies' animations rotate Boss: lights to spikes Also I kept modeling stuff! The astronaut's backpack and the astronaut. I really like how the backpack turned out.  Then I made a quick comparison of the astronaut's head in 3 mode and I did not dislike it at first, so I was unsure of how to leave it. But I sent both models to Unity to compare them in the Unity render with the Unity's lighting and the first one looks better, since it's more consistent with the low poly style.
Read more

BSA227 - Week 9 | Nuke: Green Screen

Image
Import all the files with Read nodes.  Add a Keylight node and on the right side click the color pipe and select the green screen. Change the view to Screen Matte to see the result in grayscale values. This way is easier to control the amount of green without altering the character too much. Add a Roto node and mask the character. Merge the mask and the background with a Merge node. Change the View to Final Result . The background is too big for the screen format. To fix this add a Reformat node. Lastly, I corrected the colour of the character to make her fit better in the background's lighting.
Read more