Screen space canvas

To support the app phases for Smart Terrain, we will introduce a screen space canvas that holds the instructions for the user and buttons for stepping through the phases. Let's build that now and then use it next. We will use some graphic sprites provided in the BallGameArt package; if you do not have these assets then just use default UI elements:

  1. In the root of your scene Hierarchy, create a new UI | Canvas and name it ScreenSpaceCanvas.
  2. Keep Render Mode as Screen Space - Overlay, but set UI Scale Mode to Scale With Screen Size and adjust the Match value to 0.5.

Create the title:

  1. Under ScreenSpaceCanvas, create a child UI | Panel named TitlePanel.
  2. Set its Anchor Presets to Top/Stretch, Height: 72, Pos Y: -36 so it stretches across the top of the screen.
  3. Then remove its Image component (gear-icon | Remove Component).
  4. As a child of TitlePanel create a UI | Image named TitleImage.
  5. Set its Source Image to Title (provided in GameUI folder).
  6. Scale: (0.15, 0.15, 0.15), Width: 1600, Height: 560.
  7. Add Component | Outline, Effect Color: # D64816FF, Effect Distance: (10, -10).

Create the instruction panel:

  1. Under ScreenSpaceCanvas, create a child UI | Panel named InstructionPanel.
  2. Set its Anchor Preset to Bottom/Stretch.
  3. Set its Rect Transform Pos Y: 105, so it rests on the bottom of the screen.
  4. For Source Image use ButtonIcon, and set its Color to # D64816FF.
  5. Add Component | Aspect Ratio Fitter, Aspect Mode: Width Controls Height, and Aspect Ratio: 2.5.
  6. Add Component | Outline, Color: #FFFFFFFF, Effect Distance: (5, -5).

 

  1. Add Component | Vertical Layout Group, Spacing: 5, Control Child Size: Check both Width and Height, Child Force Expand: Check Width but not Height.
  2. For the Vertical Layout Group Padding, (you may need to unfold to reveal the slots) use 30, 30, 30, 10.
  3. As a child of InstructionPanel, create a UI | Text, named InstructionTitleText.
  4. Set it Text string to Instructions, Font Style: Bold, Font Size: 28, Alignment: Center/Top, Color: #FFFFFFFF.
  5. Duplicate the InstructionTitleText and rename it InstructionText.
  6. Set its Font Style: Normal, Font Size: 20, Alignment: Left/Top.

Create the complete button:

  1. Under ScreenSpaceCanvas, create a child UI | Button named CompleteButton.
  2. Set its Anchor Presets to Bottom/Right, Scale: (1.2, 1.2, 1.2), Pos X,Y: (-75, 75), Width/Height: (98, 98).
  3. Set Source Image: AbstractButton_2, Color: # 513B34FF.
  4. Edit its child Text element, Text: Complete, Style: Bold, Size: 12, Color: #FFFFFFFF.

Create the restart button:

  1. Duplicate the CompleteButton and rename it RestartButton.
  2. Change the Image Source Image to AbstractButton, Color: # D64816FF.
  3. Change its child Text to say Restart.

If you followed along, the resulting screen Canvas should look like this:

Looking good!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.136.97.64