Coder Social home page Coder Social logo

gilzoide / unity-safe-area-layout Goto Github PK

View Code? Open in Web Editor NEW
41.0 3.0 7.0 3.84 MB

uGUI layout group that makes children respect the Safe Area. It drives children's anchors and supports LayoutElement.ignoreLayout

License: The Unlicense

C# 100.00%
layout safe-area safearea ugui ui unity gui autolayout

unity-safe-area-layout's Introduction

Safe Area Layout

openupm

Unity GUI layout group that makes children respect the Safe Area. It drives direct children's anchors while in Play Mode and supports LayoutElement.ignoreLayout.

Demonstration video

Features

  • Fully integrated with Unity GUI's layout system: only rebuilds the layout when needed, no Update method or coroutines attached
  • Does not resize it's own RectTransform, so it can be used in objects with a Canvas component directly
  • Does not demand a full screen RectTransform: the script detects where your rect overlaps with the Safe Area and updates accordingly
  • Ignore children using a IgnoreSafeArea component or LayoutElement with Ignore Layout marked as true. Useful for background images, for example.
  • Preview Safe Area adjustments in Editor using any of the Preview Modes in SafeAreaLayoutGroup's inspector while hovering the Hover to Preview Layout button or while in Play Mode. All Preview Modes support both portrait and landscape resolutions. Screen.safeArea Preview Mode is only applied when using Unity's Device Simulator (in Unity 2020 and older, available as an UPM package)
  • Only affects canvases in either Screen Space - Overlay or Screen Space - Camera modes, so World Space canvases are ignored

Installing

Either:

  • Install using openupm:

    openupm add com.gilzoide.safe-area-layout
    
  • Install via Unity Package Manager using the following git URL:

    https://github.com/gilzoide/unity-safe-area-layout.git#1.0.2
    
  • Clone this repository directly to your Packages folder or anywhere inside your project's Assets.

Sample

A sample scene is available at Samples~/SimpleSample.

How to use

  1. Add the SafeAreaLayoutGroup script anywhere in your UI hierarchy, even objects with Canvas components are supported. Direct children will have their anchors driven while the script is enabled.
  2. (optional) Select the Safe Area edges that your layout group will respect.
  3. (optional) Make specific children be ignored by the layout group by adding the IgnoreSafeArea component to them. Alternatively, use LayoutElement components with the Ignore Layout flag marked as true.
  4. (optional) Use one of the Preview Modes while in editor to preview the adjustments. Preview is applied on Play Mode and while hovering the Hover to Preview Layout button in the SafeAreaLayoutGroup's inspector.
  5. Play the game (play the game, everybody play the gaaaame)
  6. Enjoy ๐Ÿพ

unity-safe-area-layout's People

Contributors

gil-reis-supercompany avatar gilzoide avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

unity-safe-area-layout's Issues

Layout does not refresh it self in Play Mode

Need to move mouse over the specific area in a layout. That is so annoying thing. Because in the middle of development and debugging need to find a component with the SafeAreaLayout component and move mouse over. Is it possible to force it to work automatically OnAwake or OnStart events (at least as an option)?

Unity_RjdR9pUOmB.mp4

P.S. the package is very cool! Thanks for the work <3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.