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
  • Landscape or Portrait?
  • High or low resolution?
  • Register a reference resolution in Settings
  1. UI Storyboard
  2. Quick Start
  3. [Planners] Organizing your first storyboard

Determining the reference resolution

Landscape or Portrait?

  • First, decide whether you're working in landscape or portrait resolution.

  • Unlike web-front development, gaming apps like ours are typically developed for either landscape or portrait resolutions, and fully responsive design is not considered by default.

  • Choose portrait for casual, one-handed games, or landscape for more serious games.

High or low resolution?

  • FHD, QHD, UHD... Monitor resolutions are getting higher and higher.

  • So is it a good idea to future-proof your references with higher resolutions? -> No.

  • The UI doesn't need to be high resolution.

    • UI resources are stored in the have a very, very large impact on performanceon performance.

    • At the same time, users don't notice much when resources are at higher resolutions.

  • For moderate mobile orientation, FHD or lower resolutions are sufficient.

  • For example, one of our popular UI assets is designed for 978x1664 resolution.

For the purposes of this example guide, we'll use 1080x1920.

Register a reference resolution in Settings

  • The reference resolution registered here will be used as the basis for automatically generating thumbnails for Page and Modal preps in the Storyboard.

  • The same resolution will be used in the Canvas that will be used in the actual game later on.

Previous[Planners] Organizing your first storyboardNextPage and Modal

Last updated 1 month ago