https://github.com/Delt06/ui-scaling-toolkit

A collection of components to ensure proper UI scaling for mobile devices.
https://github.com/Delt06/ui-scaling-toolkit

ui unity

Last synced: about 2 months ago
JSON representation

A collection of components to ensure proper UI scaling for mobile devices.

• Host: GitHub
• URL: https://github.com/Delt06/ui-scaling-toolkit
• Owner: Delt06
• License: mit
• Created: 2021-08-09T07:11:26.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T10:24:15.000Z (over 2 years ago)
• Last Synced: 2024-08-02T05:11:49.809Z (5 months ago)
• Topics: ui, unity
• Language: ShaderLab
• Homepage:
• Size: 1.27 MB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# UI Scaling Toolkit

[![Version](https://img.shields.io/github/v/release/Delt06/ui-scaling-toolkit?sort=semver)](https://github.com/Delt06/ui-scaling-toolkit/releases)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

![Screenshot](Documentation/screenshot.png)

A collection of components to ensure proper UI scaling for mobile devices.

> Developed and tested with Unity 2021.3.3f1 LTS

> 

> Designed to work with Portrait mode games. 

## Installation

### Option 1

- Open Package Manager through Window/Package Manager

- Click "+" and choose "Add package from git URL..."

- Insert the URL: https://github.com/Delt06/ui-scaling-toolkit.git?path=Packages/com.deltation.ui-scaling-toolkit

### Option 2

Add the following line to `Packages/manifest.json`:

```

"com.deltation.ui-scaling-toolkit": "https://github.com/Delt06/ui-scaling-toolkit.git?path=Packages/com.deltation.ui-scaling-toolkit",

```

## Dependencies

- Unity UI (uGUI)

- Device Simulator (bundled with Unity)

## Components

- Safe Area Canvas Scaler - ensures safe area always has intended height

- Safe Area Settings - extra configuration 

  - Whether to ignore bottom unsafe area or not 

  - Extra padding (e.g. to handle banners)

- Safe Area Rect - adjusts anchors (full screen) to exclude unsafe area

> Tip: full screen backgrounds and overlays should not be inside a Safe Area Rect to prevent creating holes in unsafe area.

## Device

According to a [StackOverflow thread](https://stackoverflow.com/questions/7199492/what-are-the-aspect-ratios-for-all-android-phone-and-tablet-devices), the lowest width to height ratio is 9:19.5.

The package adds a custom device called "Widest Android" to Device Simulator to cover that case.