× Phaseshift FCOM Tutorials

Introduction to Bubble.UI




Bubble.UI is a Unity UI Framework, designed to help build menus quickly. Basic features include button navigation tools between scenes and menus without using code, theme based visuals for easy prototyping and built-in animations to make things look slick from the start. Create powerful visual menus flush with gorgeous design and reactive animations without a single line of code.

Navigation

Super straight-forward and navigation means setting up links between menus and sub menus is a breeze. The MenuManager keeps track of all available menus including current, previous as well as which menu should be shown when going 'back' or 'up' a level. Set your navigation buttons on each menu, drag and drop the menu to navigate to - then at runtime click the button and Bubble.UI will handle all animations, initialisation, navigation and other extras such as tooltips and button states.

Scenes are handled in a similar way, supply the scene name as a string (good ol' Unity) and the framework will deal with all of the event listeners, loading screens including loading screen tips, progress and visuals.

Themes

Themes allow for super quick prototyping to nail that menu look. Create multiple themes and switch them on the fly - upon switching every UI element will update to the visuals as set in the newly selected theme. Set designs per UI element with background, foreground and selected shapes as well as TextMeshPro assets including text formatting and animations. Set the colour semantics per UI element if you want to show different feels or emotions in each element. Link audio UI chirps and sounds to different element types to make your menus feel and sound unique. Then change theme entirely to compare the two. 

Animations

Bubble.UI allows for entry animations and text animations upon showing a menu. Animations are getting expanded as updates are released; currently 'All Show', 'Cascade' and 'Random' triggers container element entry animations in an everything all at once, sequential or a random pattern. Entry animation types include 'Show', 'FadeIn' and 'Slide From Left'. When these elements finish their entry animation, a text animation is triggered. Currently text animations are either 'Show' or 'Typewriter'. Like entry animations these will expand with further updates. Create unique and flashy animations that fit your aesthetic.


Liked this article?

Please consider sharing!
Author

Josh Lyell

Game Developer