Unity UI Storyboard
🇺🇸English
🇰🇷Korean🇺🇸English
🇺🇸English
🇰🇷Korean🇺🇸English
  • UI Storyboard
    • Sample Project
    • 概要
      • References
      • Dependencies
      • Overall structure diagram
      • Key Design Concepts
        • Onion Architecture
        • MVRP Method (Model-View-Reactive Presenter)
        • UI/UX Design Principles
        • Principles for using Reactive libraries
        • About the MVP concept
        • Model, View, Presenter (Lifecycle)
        • Test & Mockup Policy
        • Managing code dependencies and .asmdefs
    • Quick Start
      • 安装
      • Project Initialization
        • Using automatic initialization
      • [Planners] Organizing your first storyboard
        • Determining the reference resolution
        • Page and Modal
        • Creating a Storyboard
        • Add a Page node and a Modal node
        • Representing screen movement
        • Configure a simple mockup UI
        • Adding a mockup UI to a storyboard
        • Leave notes
        • Finalize your storyboard
      • [UI/UX Designer] Designing the UI
        • Organizing screens
        • Organizing with prep
        • Updating your storyboard
        • Tips for newbies
      • [Developers] Write your first UI code
        • See an example of implementing a login modal window
        • View
        • Lifecycle (presenter)
        • Model (ViewModel)
        • Builder
        • LifetimeScope
        • RootLifetimeScope
        • UseCase
        • Repository
        • Gateway
      • [Developers] Writing test/mockup code
        • The power of mockup code
        • Writing mockup code
      • Finished mockup UI
  • UnityScreenNavigator
    • Lifecycle
  • ScreenSystem
    • Understanding the concept
      • What is an out game?
      • Dependencies
      • Relationship to UnityScreenNavigator
      • Class design
      • Implementation Sample Project
    • Core Components
      • LifetimeScope
        • RootLifetimeScope
      • Lifecycle
      • Model
      • View
      • Builder
      • UseCase
        • About the timing of communication processing according to screen switching
      • Repository
    • Screen-to-screen messaging with MessagePipe
Powered by GitBook
On this page
  • Create an empty scene
  • Set to Reference Resolution
  • Setting the Player in the Editor to a Reference Resolution
  • Setting the canvas resolution to the reference resolution
  • Configure the mockup UI
  1. UI Storyboard
  2. Quick Start
  3. [Planners] Organizing your first storyboard

Configure a simple mockup UI

PreviousRepresenting screen movementNextAdding a mockup UI to a storyboard

Last updated 1 month ago

Create an empty scene

  1. In the Project window, Right-click -> Select Create Right-click -> Scene Right-click -> -> Scene

  2. Double-click to open the created scene

Set to Reference Resolution

Setting the Player in the Editor to a Reference Resolution

Setting the canvas resolution to the reference resolution

Configure the mockup UI

This library was developed with the assumption that the UI will be configured as a UGUI.

  • The sample below uses the Image component to create a background and the

  • Button TextMeshPro object to represent the login button.