Outscal Logooutscal logo
Jobs
Courses
Resources
Companies
Placements
Community

UI Part 2

Download

Unity Cheat Sheet: #23

Abhishek Smith

Abhishek Smith

Building Outscal | Land Jobs in the gaming industry | EA, Epic Games, TCS, | CMU, IIT K

Unity's UI system isn't just a collection of buttons and text - it's a component hierarchy. Every UI element you see is actually multiple components working together. For example, a simple "Play" button is:

  • Image component for visuals
  • Button component for clicks
  • Text component for label
  • Layout component for positioning
  • Canvas component for rendering

Basic UI Components:

Interactable Elements

  • Button: Click handlers, colors, interactability
  • Slider: Min/max values, value change events
  • Toggle: On/off states, toggle groups
  • InputField: Text input, placeholders, validation

Visual Components

  • Text: Content, font size, color
  • Image: Sprites, colors, aspect ratio
  • TextMeshPro: Advanced text rendering
  • Mask: Clip/hide parts of UI

Layout Systems

  • Canvas: Root of all UI elements
  • RenderMode: Screen space or world space
  • Sorting layers: Control draw order

Layout Groups

  • Vertical: Stack elements top to bottom
  • Horizontal: Arrange elements left to right
  • Grid: Organize in rows/columns
  • Control spacing, padding, alignment

ScrollRect & Scrollbar

  • Content container that scrolls
  • Horizontal/vertical scroll control
  • Scrollbar value handling

Visual Effects

  • Shadow: Offset, color, distance
  • Outline: Width, color settings
  • Aspect Ratio: Maintain proportions
  • Content Size Fitter: Auto-sizing

Remember: UI performance depends on how these components interact. Too many nested layouts or real-time shadows can kill frame rate.

Show More

Our Resources

All Resources