All Projects → Rellac-Rellac → unity-ui-manager

Rellac-Rellac / unity-ui-manager

Licence: Unlicense License
🎫 A Simple UI Manager for rapid prototyping and ease of collaboration

Programming Languages

C#
18002 projects

Projects that are alternatives of or similar to unity-ui-manager

Underexpress
A free, responsive, ready to use website ui kit, built with bootstrap 4.
Stars: ✭ 205 (+365.91%)
Mutual labels:  uikit, ui-components, design-tools
Ibanimatable
Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.
Stars: ✭ 8,585 (+19411.36%)
Mutual labels:  uikit, transition-animation, ui-components
Komponents Deprecated
📦 React-inspired UIKit Components - ⚠️ Deprecated
Stars: ✭ 202 (+359.09%)
Mutual labels:  uikit, ui-components
ventilator-FI5
FI5: Rapidly Manufactured Ventilator System
Stars: ✭ 31 (-29.55%)
Mutual labels:  rapid-prototyping, rapid-development
nodejs-hackathon-boilerplate-starter-kit
Just a Hackaton/Startup Full-stack node.js starter
Stars: ✭ 37 (-15.91%)
Mutual labels:  rapid-prototyping, rapid-development
Collectionviewslantedlayout
A CollectionView Layout displaying a slanted cells
Stars: ✭ 2,029 (+4511.36%)
Mutual labels:  uikit, ui-components
Light dark toggle
An awesome flutter app which artistically animates light and dark mode 😍
Stars: ✭ 175 (+297.73%)
Mutual labels:  uikit, ui-components
Numl
A UI Design Language, WC UI Library, and Runtime CSS Framework for rapidly building interfaces that follow your Design System 🌈
Stars: ✭ 229 (+420.45%)
Mutual labels:  uikit, ui-components
CheckMarkView
UI view which draws programmatically a checkmark with different styles
Stars: ✭ 35 (-20.45%)
Mutual labels:  uikit, ui-components
bash on steroids
Use bash scrpts for writing beautiful web apps. 🌐
Stars: ✭ 45 (+2.27%)
Mutual labels:  rapid-prototyping, rapid-development
vue2-animate
A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
Stars: ✭ 1,338 (+2940.91%)
Mutual labels:  transition-animation, transition
Calendar Ios
Calendar View
Stars: ✭ 154 (+250%)
Mutual labels:  uikit, ui-components
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (+250%)
Mutual labels:  uikit, ui-components
Boomerang Free Bootstrap Ui Kit
Boomerang is a high quality UI Kit built on top of the well known Bootstrap 4 Framework. This theme was designed as its own extended version of Bootstrap with multiple functionalities and controls added, extended color palette and beautiful typography.
Stars: ✭ 196 (+345.45%)
Mutual labels:  uikit, ui-components
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (+225%)
Mutual labels:  uikit, ui-components
Centroui
CentroUI is a library for building user interfaces for WebVR
Stars: ✭ 135 (+206.82%)
Mutual labels:  uikit, ui-components
ng-sq-ui
Flexible and easily customizable UI-kit for Angular 11+
Stars: ✭ 99 (+125%)
Mutual labels:  uikit, ui-components
Flamesui
A css-based web components.
Stars: ✭ 133 (+202.27%)
Mutual labels:  uikit, ui-components
Paper Kit 2 Angular
Free Bootstrap 4 UI Kit for Angular 2+
Stars: ✭ 133 (+202.27%)
Mutual labels:  uikit, ui-components
open design system
Open Source Design System using Sketch. It's early days of my project.
Stars: ✭ 22 (-50%)
Mutual labels:  uikit, ui-components

unity-ui-manager

A Simple UI Manager for rapid prototyping and ease of collaboration

Made with Unity

Features


  • Extremely modular - forget about merge conflicts!
  • Very fast to get a prototype up and running
  • Pretty UI Transitions just as easy as GameObject.SetActive()
  • Very simple inspector with minimal inputs, a great way to bridge the experience gap between a developer and a designer
  • Use of Animations give an incredible amount of control over transitions
  • No code required

Contents


UI Manager


Create > UI > Manager

The UI Manager is used to instantiate a starting point and flip between panels in that RectTransform. Multiple managers can be used throughout the project and they can reference any UI Panel object.

A Manager must first be Initialised with a starting RectTransform before panels can be called.

An initialised Manager can swap between panels via SetPanel(UIPanel)

UI Managers can be set to have "loop groups" - if so, you will specify here a previous/next transition to override what is specified in the UIPanels listed on the UIManager. Panels will logically transition by calling NextPanel() and PreviousPanel() in the UIManager, the index will reset automatically. A Manager with a loop group will override the speed of the animation transition. That value is set here.

UI Panel


Create > UI > Panel

UI Panels are used to reference the panel prefab and the transition animation used for each panel.

Assign a prefab here to instantiate whenever this UIPanel is called - root will be adjusted to a stretched fit over the target RectTransform of the UI Manager

Specify here the transition animation that you would like to use. The speed of the transition is specified in seconds

You can enable the passover click blocker for your smaller panels to prevent clicking unwanted background buttons

Events are available for whenever this panel is instantiated and when the transitions in/out have ended

UI Transition


Create > UI > Transition

UI Transitions are references by the UIPanel to know which animation to play and which way to order the panels. The animation must be listed in the Animator Controller of the UIRoot prefab

Here you can set the "Panel on Top" to be either the panel currently coming in, or the panel currently going away.

See "Adding an Animation" for further info on the specifics of the required animation

UI Panel Listener


UIPanelListener can be added to any GameObject and will listen for the relevant events of any specified panel. This can be used to trigger an animation within the panel once it has transitioned or to hide a GameObject until the transition has finished.

Available events to register to:

Adding an Animation


Animations can be added to the prefab located at UIManager/Resources/UIManager/UI Root

Do not adjust the sizeDelta in your animation - this value is adjusted by the UIFitter on the UI Root prefab. It will automatically adjust the Rect to fit the specified parent Rect

The "Parent_In" object is the panel that is currently coming in and will end as the main panel the user is looking at

The "Parent_Out" object is the panel that is currently already in and will end out of sight of the user

If a new GameObject is required to create your bespoke transition, make sure that the starting pose is in its "off" state so that other animations don't need to reference it - see the behaviour of the currently disabled GameObjects under the UI Root prefab animations

Animations should last 1 second each so that we can specify the speed in seconds - don't worry if the transition is too fast at 1 second - simply specify a larger time in your UIPanel Object

If you want the out parent to clear its contents early (default is at the end of the transition), simply add an Animation Event to your Animation and call ClearOutParent()

Attribution


I've used some icons under the creative commons license for this manager

You shouldn't need to add these attributions your application, as they only show in the editor:

UIManager

  • Electronic Data Storage by ProSymbols from the Noun Project

UIPanel

  • page by Kirsh from the Noun Project

UITransition

  • play by Royyan Razka from the Noun Project
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].