Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by Pelican_7, Aug 30, 2019.

  1. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    181
    ui-graph-banner.png

    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
    Screenshot 1.png
    Screenshot 2.png
    Screenshot 3.png
    Screenshot 4.png

    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.
     
    Last edited: Sep 4, 2019
    ikemen_blueD and Jos-Yule like this.
  2. kennyd-itp

    kennyd-itp

    Joined:
    Jan 13, 2014
    Posts:
    29
    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.
     
  3. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    181
    Thanks a lot @kennyd-itp! Don't hesitate to get in touch if you have any questions.
     
  4. f1chris

    f1chris

    Joined:
    Sep 21, 2013
    Posts:
    256
    Do you support joysticks or gamepad ?
     
  5. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    181
    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
     
    Jos-Yule and f1chris like this.
  6. JeBuSBrian

    JeBuSBrian

    Joined:
    Mar 3, 2013
    Posts:
    14
    Is there any drag 'n' drop functionality available in this system?
     
  7. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    181
    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.
     
  8. boysenberry

    boysenberry

    Joined:
    Jul 28, 2014
    Posts:
    339
    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
     
  9. boysenberry

    boysenberry

    Joined:
    Jul 28, 2014
    Posts:
    339
    I figured it out and adjusted the canvas controller titles.
    Great product!
     
  10. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    181
    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.
     
    Last edited: Nov 4, 2019
    boysenberry likes this.
  11. sinzer0

    sinzer0

    Joined:
    Aug 29, 2013
    Posts:
    140
  12. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    181
    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.
     
    sinzer0 likes this.