UI Graph – A Menu System For Unity (formerly Canvas Flow)

UI Graph – A Menu System For Unity
UI Graph is a powerful menu system for Unity that lets you easily create complete user-interfaces by building them visually in a flow graph.

• Build each screen of your user-interface using native Unity UI.
• Visually create the flow of your user-interface in a node-based editor.
• Construct complex multi-screen layouts by nesting screens.
• Customize the transitions between screens using an extensible animation system.

https://uigraph.xyz

Trailer

Screenshots





Available now on the Asset Store. Online documentation is available at https://uigraph.xyz.

Feel free to post feedback, suggestions, or support requests in this thread. Alternatively, you can email support@pelican7.com.

-andy.
Pelican 7.

 

This looks tremendous! Being able to manage and present (mobile) UI in a decent way is important in a lot of the apps we make, and we've had to write quite a bit of code to support it. This looks like it could be a great addition to our tooling, will check it out asap.

 

Thanks a lot @kennyd-itp! Don't hesitate to get in touch if you have any questions.

 

Do you support joysticks or gamepad ?

 

Not quite by default. The standard container view controllers (and your own view controllers) use native Unity UI components, which can be used with joysticks and gamepads but you'll need to configure that yourself. This can just be a case of setting your UI components' Navigation field to Automatic, depending on your set up.

For example, in the Assassin demo the Options screen's buttons each have their Navigation field set to Automatic, allowing them to be navigated with a controller. In the video below I'm using a Playstation controller to move through the options.

https://drive.google.com/file/d/1E6GkzYcK6KhLR_c0C0VHr_C0ZLcP_fnH/view?usp=sharing

 

Is there any drag 'n' drop functionality available in this system?

 

Not by default. UI Graph is a menu system for creating the flow of your user-interface. Each individual screen is built with native Unity UI, so if you have a drag and drop system implemented in Unity UI, you can use it in your menu.

 

In the quick start instructions after the point where the Tab Bar Canvas Controller is added I notice the labels read Blue and Yellow. Mine read: BlueCanvasController and YellowCanvasController. How do I change the labeling for the tabs? I did not see anything in the instructions.

Thank you, great system so far!
Boysenberry

 

I figured it out and adjusted the canvas controller titles.
Great product!

 

Thanks a lot @boysenberry!

Yep, you can adjust each canvas controller's title in its inspector (select the Scriptable Object), as you found. By default the Tab Bar Canvas Controller uses the canvas controller's title for its corresponding item label.

Edit: Added a note to the Quick Start regarding the title labels.

 

hey i think I asked this on your old asset but wanted to check before i upgrade. Do you know if this works with Curved UI in VR?

https://assetstore.unity.com/packag...ready-solution-to-bend-warp-your-canvas-53258

 

Hi @sinzer0,

I've not worked a massive amount with Curved UI but I have had another user asking about Curved UI and UI Graph together, and as far as I have tested, yes it does.

UI Graph's UI Canvas workflow still uses a Canvas component as before so you can still use Curved UI with that. As with Canvas Flow, I believe Curved UI still requires that when instantiating children (presenting screens in our case), you call its AddEffectToChildren() method. UI Graph, however, doesn't have the same hooks as Canvas Flow, so invoking this method will be slightly different. Whereas before we could call AddEffectToChildren()in the storyboard callbacks, we now need to call it on a per canvas controller basis.

Now, I think the best and most performant solution would be to add the CurvedUIVertexEffect component to each game object that requires it in the canvas controller's view prefab itself (i.e. at build time), if Curved UI allows this. That way, at runtime you aren't having to do any work in finding and adding the component to the relevant objects upon instantiation (which AddEffectToChildren() is doing). You could perhaps write an editor script that does something similar to AddEffectToChildren() in the editor to automate this for yourself.

Alternatively, if you want to do it at runtime, similar to before, you could call AddEffectToChildren() in the canvas controller's ViewWillAppear method. You'd need to get a reference to the CurvedUISettings object, which would be placed on the canvas window. One way of doing this could look something like:

Code (CSharp):

1. public class CurvedCanvasController : CanvasController
2. {
3.     protected override void ViewWillAppear()
4.     {
5.         base.ViewWillAppear();
6.         CurvedUI.CurvedUISettings settings = View.GetComponentInParent<CurvedUI.CurvedUISettings>();
7.         settings.AddEffectToChildren();
8.     }
9. }

(You could make your other canvas controller's inherit from CurvedCanvasController so you don't have to write this in each of them individually.)

Hope that helps!
Andy.