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.
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.
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.
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.
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.
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:
public class CurvedCanvasController : CanvasController
{
protected override void ViewWillAppear()
{
base.ViewWillAppear();
CurvedUI.CurvedUISettings settings = View.GetComponentInParent<CurvedUI.CurvedUISettings>();
settings.AddEffectToChildren();
}
}
(You could make your other canvas controller’s inherit from CurvedCanvasController so you don’t have to write this in each of them individually.)
I am having trouble getting my initial Canvas Controller (on the graph) to transition off when a new canvas is presented. Any canvases after the first are getting the dismiss transition, but not the initial canvas.
Is there a way to have the initial canvas use an animation transition?
Right now I have 2 Sequence presenters, one for my initial canvas linked in it’s scriptable object that is a fade in/out for present/dismiss setup as to/from respectively and a second on the secondary canvases that does a slide/fade in and out.
The secondary animation transitions work just fine, but the initial canvas never seems to be dismissed.
Hi @boysenberry . When presenting a second canvas controller, your initial canvas controller isn’t ‘dismissed’ as such. It is simply hidden by its ‘presented view controller’. If you ensure the second canvas controller’s opaque flag is selected, UI Graph will hide the second canvas controller’s ‘presenting view controller’ (the initial canvas controller) after presentation.
Hi @f1chris . There is no built-in mechanism but you can use the canvas controller’s ViewDidLoad method to set your switches to the desired value stored in PlayerPrefs.
I noticed there were no scripts for container view controllers generated when creating the container asset, for example the stack controller.
Is that by design?
Basically what i am trying to do is have an empty canvas controller with a script that watches for an event such as the player selects a unit then the script calls the correct transition. I dont want the empty canvas controller to disable when it transitions and thus I was thinking a stack controller would work but now I don’t see how to have its own script like the normal canvas controller.
Yes, this is by design. You create instances of the built-in containers and use them as-is. You are of course free to create your own custom container canvas controllers (a container canvas controller is simply defined as any canvas controller that embeds child canvas controllers).
Hmm, could you simply have a normal Monobehaviour script that does this? You can then place this script on a game object in your stack canvas controller’s view. As you pointed out, being in a parent canvas controller view, this script would not be disabled.
On receiving a game event, such as “select unit”, your script can invoke the relevant transition, such as “Push Canvas Controller X”. This tutorial - https://uigraph.xyz/manual/guides/canvas-controller-reference-from-mono-behaviour.html - may be of interest to you. It explains how you can configure a MonoBehaviour in your view to reference the owning canvas controller (your Stack Controller). For example, something like this:
public class ListenForGameEvents : MonoBehaviour
{
private StackCanvasController stackCanvasController;
// Add this method to the Canvas View Owner Bindings' On Bound To Owner event in your stack controller's view prefab.
public void Configure(CanvasController canvasController)
{
stackCanvasController = canvasController as StackCanvasController;
}
// e.g. Invoked by your 'player selected unit' event.
public void OnPlayerSelectedUnitEvent()
{
stackCanvasController.PerformGraphTransitionWithIdentifier("Push Select Unit Canvas Controller");
}
}
Sorry in advance if this is not a ui graph issue, I am probably missing something obvious.
I cant get unity to play nice with the rendering order of ui elements with ui graph like it normally does and I have an issue with a background image covering anything dynamically added via ui graph stackviewcontroller.
I have a gamecontainer controller and the first game object is a background image. After that I have empty game object with a graphable embeed component. In the graph I have configured a StackViewController to go into that gameobject. Its worth noting this appears to not be an issue with a normal canvascontroller only the stackviewcontroller.
So the problem is the background image covers anything added into the stackviewcontroller even though the image is at the top of the hierarchy and rendered first.
