Enterprise Apps: Zoo App Part 2

Objective: Main Menu and Map Panel

We start off by adding an UI Image element, which creates a Canvas. The Canvas UI Scale mode is then changed to scale with screen size and give a reference resolution of 1920*1080. A Panel is then used inside the Canvas and renamed to MainMenu.

The green background, Polar Bear, Giraffe, Balloons and Family Zoo title are all images which get resized, scaled and anchored positioning. The Interactive Map is a text element is positioned the same way, as is the Start Button element. All these UI elements excluding the background image are inside the MainMenu Panel.

For the MapPanel, we have a Map, Giraffe, Family Zoo, Balloons, Coffee Cup, Toilet Symbol, Giraffe Text Area and Area Background(areas being Big Cats, Bear Den etc) images. We then have text elements for the Entrance, Giraffe Chat(as a child of the chat image) and for the Area Names(Inside Button elements with the Area Background for a source image).

The last part of this task was enabling the MapPanel from the MainMenu Start Button. For this we use a simple OnClick event on the button without the need for a script. The OnClick takes the MapPanel and sets the GameObject to Active.