Canvas Flow - UI Presentation & Storyboarding

Canvas Flow – UI Presentation & Storyboarding
Canvas Flow is the essential companion to Unity UI, offering you a solution for easily transitioning between screens and crafting your user-interface's flow.

https://canvasflow.xyz

• Easily present & dismiss screens – Canvases are dynamically loaded and unloaded, enabling you to build large, complex, or dynamic user-interface flows, loading only the necessary screens on demand.
• Storyboard your user-interface – Visually create the flow of your user-interface in a node-based editor to build complete screen flows without writing a line of code.
• Customize the transitions between screens – Use one of five built-in, adjustable transition animators or build your own custom transition animations.

Available now on the Asset Store.

Quick Start

Screenshots






Feedback & suggestions welcome!
andy.
Pelican 7

​

 

Beautiful concept.

 

This looks amazing! Can I use this with something like CurveUI ? basically I need UI but in a VR space (world space and curved).

 

Cheers bud

Thanks! Canvas Flow works with Canvases in Screen Space - Camera mode at the moment, so currently you wouldn't be able to use it with world space UI. This is something I'm going to have a think about; thanks for the suggestion - it's going in the Trello board.

 

Yes, I am also developing for VR headsets so this would be great if you could get it to work in world space. Looks great, would be a real timesaver.

 

Sweet, thanks. Noted!

 

Maybe you should put it somewhere on your page or the asset store description that world space UI or framed screen space is not possible at the Moment.

 

I really like the concept and congratulation for this clean start.

some ideas from my side

* could you make an tutorial for touch (e.g.an polished Touch Script integration like you did with DoTween)
* could try to support world space ui´s. most UI\UX development we are planning for the future will be in world space.

 

Thanks!

Noted. This is now first on the priority list for updates thanks to the feedback/suggestions.

Are you referring to the TouchScript asset on the Asset Store? If so, this is a nice idea, thanks. It could be cool to demonstrate how you can trigger transitions from TouchScript gesture handlers.

 

With world space ui this could be easily one of those five-star-only-must-have packages like gaia, rewired or uber.

 

I totally agree.. this is one of those tools that should be built into Unity for UI. Right now I'm waiting before I purchase it. Like every one else has been echoing, once world space is in, it will be a must have... I will be instantly purchasing it.

I'd imagine making this worldspace compatible would involve a lot of masking.

 

I mean...I don't really have a stake in the game but your name... FlowCanvas already exists. Awesome to add to the confusion. :/

 

that example or demo is toooooooo simple！

 

Yes.
https://assetstore.unity.com/packages/tools/input-management/touchscript-7394
It s a solid free solution and would complete your scenario with a perfect touch implementation.

 

Hey everyone,

Thanks to @Carpe-Denius, @CaptKev, @PyroStudios, and @sasa42 for the suggestions of adding world space support to Canvas Flow. As such, I've been working on it and wanted to share a development preview video to give you an idea of how it works. I hope it's a chance for you to raise any questions/suggestions/feedback, if you wish , before I finalise this into a release for the Asset Store.

The workflow is still very similar. Some key points:

• Storyboards can now be presented in either screen space or world space. You don't need to make any changes to the storyboard or its canvas controllers to present in world space; you just set the presentation space before you present it. (Video: 0:03)
• Canvas controllers can be presented in world space from script, too. The PresentInitialCanvasController method now optionally takes a world space container, allowing you to present world space UI flows from script when not using storyboards. (Video: 1:07)
• Calls to PresentCanvasController are now context/space aware – that is, if being presented from a canvas in world space, a canvas will be presented in world space; if being presented from a canvas in screen space, a canvas will be presented in screen space. This allows you to simply call PresentCanvasController and know that it'll work in either presentation space.

Let me know if you have any questions/suggestions/feedback.
andy.

 

Looks good so far.
"The PresentInitialCanvasController method now optionally takes a world space container, allowing you to present world space UI flows from script when not using storyboards"

What about storyboards with a start in world space? I guess other pages will load as world space too?

 

Thanks. Yep. I should have also mentioned that the last bullet point - PresentCanvasController is context/space aware - applies to storyboards too. So any transitions in a storyboard will have the same logic. If a storyboard is presented in world space, the canvases that it presents will be in world space.

 

Cool

 

Hey everyone,

Happy to say that Canvas Flow 1.1 is now available on the Asset Store. Version 1.1 adds support for world-space user-interface flows, as demonstrated in the video below.

1.1 Release Notes

New Features

• World Space Support
  • Storyboards can now be presented in world space by changing their presentation space to World Space.
  • Canvas Controllers can also be presented in world space from script by passing a CanvasControllerWorldSpaceContainer to CanvasController.PresentInitialCanvasController<T>().
  • The Storyboard component now has a custom inspector.
  • Created a new example - 3. World Space UI - to demonstrate presenting a storyboard in world space.

Resolved Issues

• Fixed an issue that caused an error to be logged to the console when creating a new scene using the right-click menu.

https://canvasflow.xyz/release-notes/1.1/

– andy.

 

Wow!! I was not expecting you to get world space integrated into the asset this fast! I just purchased as promised! Can't wait to try it out when I get home!

 

Sweet! Always open to feedback & suggestions if you have any after using it

 

I just left my feedback on the asset store. @Pelican_7 you did an amazing job and every concern I had before trying it (manual transitions, presentation modes and worldspace) were all handled beautifully in the asset.

Thank you so much for this asset!

 

Wow, thanks so much @PyroStudios! So pleased to hear that And thanks for the glowing review on the store; I really appreciate it!

 

Anyone know if this works with CuvedUI in VR?

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

 

Hi @sinzer0 I'm trying that out tomorrow when I get home. I'll post the results.

 

Ok @sinzer0 I have some good news! CurveUI does work with Canvas Flow World Space. However there is one "gotcha"

Whenever you present a new screen in the storyboard flow.. you have to disable the collider that CurveUI places on the previous screen or it blocks input to the new screen that transitioned in. Basicaly CanvasFlow animates the UICanvas but the CurveUI collider doesn't move with it. Luckily CanvasFlow has code hooks that make this easy and once you navigate back to the previous screen you re-enable the CurveUI collider and you can then interact with your UI again. Those methods are "CanvasDidDisappear() and CanvasDidAppear()".

Also note that you have to add the CurveUISettings component to each canvas of your screens. Also have to add one to the main Storyboard canvas.

Here's CanvasFlow using CurveUI.

 

@PyroStudios awesome thanks for figuring that out!

 

That's awesome, thanks from me too for figuring that out @PyroStudios!

I've also bought the Curved UI asset to have a bit of a test with this. I suppose the TLDR is that Canvas Flow mostly works with CurvedUI in world-space but there are some issues I'd like to iron out. My observations:

A single CurvedUISettings component

• I was able to add curvature to the World Space Example using a single CurvedUISettings component on the world space container canvas, instead of adding one to each screen individually.
• By only adding a single CurvedUISettings component, I was also able to avoid the issue @PyroStudios described of CurvedUI's collider blocking input (as there is only one for the whole container now).

Add CurvedUIVertexEffect components to new canvases
You'll notice that if you deselect the CurvedUISettings game object in the editor (or make a build) and run the scene, Curved UI won't work. This is because any dynamically instantiated objects need to have a CurvedUIVertexEffect added to them (CurvedUI docs), and Canvas Flow dynamically instantiates your screens. (I'm guessing the asset is doing something in an editor update function with regards to adding CurvedUIVertexEffect components, hence why it works when its selected.)

Therefore, I added the following callbacks to the Storyboard's events to add the CurvedUIVertexEffect on presentation:

Code (CSharp):

1. public CurvedUI.CurvedUISettings curvedUISettings;
2.  
3. public void OnStoryboardWillPresentInitialTransition(StoryboardTransition transition)
4. {
5.     curvedUISettings.AddEffectToChildren();
6. }
7.  
8. public void OnStoryboardWillPerformTransition(StoryboardTransition transition)
9. {
10.     // Is the transition downstream (a presentation)?
11.     if (transition.direction == StoryboardTransitionDirection.Downstream)
12.     {
13.         curvedUISettings.AddEffectToChildren();
14.     }
15. }

Which gives you:

Deselect Preserve Aspect on the CurvedUISettings
I had to deselect Preserve Aspect on the CurvedUISettings component to ensure correct masking of the canvases during some types of transition animations. This is illustrated below - with Preserve Aspect enabled you can see in the Game view how the canvas exceeds the boundaries as it animates sideways off screen. Looking in the Scene view you can see it is because the rect is being clipped according to its 2D rect. By deselecting Preserve Aspect you're ensuring that the curved canvas fills the rect, so the mask behaves correctly.



Perhaps worth noting, this is only an issue if you're animating on the curved axis. So for example, animating a canvas up & down with a Cylinder curve wouldn't have this issue, but animating left-to-right would.

One frame flicker
You might notice in the video that there appears to be a one-frame flicker just as the sideways transition begins, but not the slide-up transition. There appears to be one frame in which the canvases are for some reason not curved correctly during this type of animation. I'm speculating but I believe this is due to CurvedUI waiting a frame before calculating the updated curvature. I have tried using the curvedUISettings.SetAllChildrenDirty() method but this doesn't appear to fix the issue. I'm going to reach out to the developer about this and see if he has any ideas.

Logs
Curved UI logged quite a few warnings to the console as I was using it about UI elements outside of the canvas' rect. Of course this is not an issue for us, as we are animating the elements onto the canvas, so it'd be nice to be able to toggle these off.

Hope that helps give some info on getting CurvedUI working with Canvas Flow! I'll let you know what I hear back from the dev about the flicker issue.

Edit: I have created a short tutorial for using Curved UI with Canvas Flow – https://canvasflow.xyz/manual/tutor...canvas-flow/using-curved-ui-with-canvas-flow/

-andy.

 

Nice find and a much better solution!

 

Really amazing concept!

Is it also possible to use touch input to drag an off-screen canvas into the main screen?

 

Thanks!

Hmm, yes that's possible (if I've understood correctly!). It depends on what you're doing exactly but I can think of two ways immediately. The simplest way would be to just use a draggable child canvas - i.e. you have a canvas controller for your main screen, which has a draggable canvas as a child of its main canvas positioned off-screen. That's just standard Unity UI and there isn't anything particularly dynamic about it, but it would be easy to implement.

If you need a dynamic element - perhaps you want to load different screens as your draggable off-screen canvas depending on some condition - then you can call AddChildCanvasController from your main canvas controller, passing in the off-screen canvas controller's type. That will then load and embed the off-screen canvas inside the main canvas. You can specify any parent transform you want under which the loaded canvas will be embedded (parented and fitted), so you can pass one that is draggable and initially off-screen perhaps.

-andy.

 

Perfect thanks a lot!
I exactly need it with dynamic elements. The second way seems like a good solution.

 

Hi @Pelican_7 thanks for this asset, it has certainly made menu creation quite easy.

I have a few observations from the few hours I have been using this Asset, I would like to share them with you:

Pausing Canvas Controllers:
When a Transitions presentation mode is set to 'Keep Presenter Visible' it's update loop continues to run (as expected), it would be nice to have a 'Disable Presenter' mode that disables the CanvasController (and has a corresponding property like CanvasController.Hidden). Perhaps Buttons and other UI Objects with a Storyboard Hook can have their Interactable property set to false as well.

A simple uses case for this is toggling between a game overlay and a pause menu by hitting escape.

Currently the simplest way to achieve this is by keeping the presentation mode set to 'Hide Presenter' and checking for the 'Hidden' Property. This solution has the undesired effect of hiding the underlying UI though.

Allow preloading of scenes:
When showing a splash screen when launching a game it is desirable to preload the main menu screen.

This could be achieved by optionally setting asynchronously loaded transitions AsyncOperation.allowSceneActivation to be set to false, which can then be set to true after the desired time period.

On a similar note, it would be nice for 'PerformTransitionWithIdentifier()' to return the transition that was created with the facility to activate the scene.

Simple conditional storyboard transitions:
Currently it is not possible to create a splash screen as part of a main menu storyboard as each time the storyboard is loaded it will run the splash screen, this is not desirable when loading into the menu storyboard from the game storyboard.

No undo in the storyboard UI:
When I was going though the learning curve and experimenting with what the buttons do it would of been nice to undo my mistakes.

Send a custom string to a transition:
I have a use case where I want to present the same screen but with slightly different behaviour.

An example use case is a loading screen that loads a 'start new game scene' or a 'load last game scene' depending on what is on this screen.

My current work around is to look at 'StoryboardTransition.invokedHook.tag' to see the gameobject's tag that invoked the transition.

Originally I was hoping to use the transitions 'User Identifier' property but is does not seem to be accessible via the 'StoryboardTransition' object.

Not assigning a Camera to a Canvas Controller causes an exception:
All of my canvases are set to the 'Screen Space - Overlay' Render Mode so a camera is not needed in the scenes that are UI only.

Currently in my project all of the cameras are present but disabled, it would be nice to just remove them outright when they are not required.

Although Unity tries to be "helpful" with a 'No cameras rendering' warning in the Game Screen in the editor, it still works perfectly on device once it loads other scenes with cameras.

Minimal feedback in the storyboard UI:
Sometimes I try to do something in the UI and nothing happens. For example the 'Make Storyboard entry point' button sometime does nothing on a click. it would be nice for it to debug.log out some information when this happens.

This might be a bug from when I duplicate/rename a CanvasController and it's script, and try to use it. Doing stuff like that can often result in repeating exceptions and the storyboard being no longer loadable. It could be an issue with that newly duplicated scene not being inserted into the Build Settings 'Scenes in Builds', although after adding it to the build settings there are still errors.

Not Compatible with Assembly Definition files:
The Storyboard Editor UI and the automatic adding of Storyboard Hooks does not seem to be compatible with Unity's Assembly Definition files.

the Unity Test Runner requires these to be setup for any code you wish to test, I am not suggesting that you add Assembly Definition files to this product, but instead just make it compatible with Assembly Definition files.

The reason this is important is that it is currently impossible to reference the any Canvas Flow classes from a class that is in anything but the default Assembly.

 

Hi,

Just purchased Canvas Flow. Is it possible to set up a menu system which uses Tabs? I have a header at the top that I need visible at all times and would like to design a storyboard that transitions between tabs.

 

Hi @Du-z. Thanks so much for that. That's really helpful and constructive feedback. I've got every point you made in my Trello board now and I'll be able to take a look into each of these later this week.

Really like the ideas around the splash screen - conditional transitions & preloading of scenes. About those exceptions – it sounds possible that the cause could be duplicating or renaming a canvas controller but I'll need to look into this. Thanks for catching that.

 

Hi @apexsoftworks. So this is something that isn't officially supported in storyboards. It's a feature that I have also thought about a lot but haven't discovered a solution that doesn't greatly complicate the storyboarding workflow.

There is a workaround to implement this using the AddChildCanvasController functionality, which embeds a canvas controller inside another. However, you would need to do some scripting and transitions would be immediate unless you animated them yourself. The way I'd implement this is to create a canvas controller to act as a container for both your header bar and the loaded screens. In it I would place the header bar with the tab buttons, as well as a container rect transform which loaded screens will be contained within. Then when a tab is selected, from your container canvas controller you can remove & unload the currently loaded canvas controller (if appropriate) and load & embed the new one, like so:

Code (CSharp):

1.  
2. private CanvasController currentLoadedCanvasController;
3.  
4. public void OnTabSelected(int index)
5. {
6.     // If there is a currently loaded canvas controller, remove and unload it.
7.     if (currentLoadedCanvasController != null)
8.     {
9.         RemoveAndUnloadChildCanvasController(currentLoadedCanvasController);
10.     }
11.  
12.     // Add the selected tab canvas as a child of the container.
13.     AddChildCanvasController<YourSelectedCanvasController>(containerRectTransform,
14.                                                            (canvasController) =>
15.     {
16.         currentLoadedCanvasController = canvasController;
17.     });
18. }

This will load and embed (parent & fill) YourSelectedCanvasController in the specified rect transform, containerRectTransform. You could introduce different logic here as you see fit. For example, if you don't have very many tabs, you might want to not unload the child canvas controllers, and simply toggle them on and off using the Hidden property.

Ultimately, I'd really like to have this kind of embedding functionality in storyboards (or an alternative way to have multiple canvas controllers on screen from a storyboard), if it's something people have a need for?

Hope that helps!
-andy.

 

Hey Andy,

Thanks for your detailed response. I will give this a try. I think it would be a nice feature to have embedded as I think a lot of people would benefit. There has been a rise in tab style UIs in games, and for good reason.

 

The CurvedUI asset developer (Daniel) has very kindly spent time looking into this one-frame-flicker issue for us and has found an easy solution: changing CurvedUIVertexEffect's Update() method to LateUpdate() fixes the glitch.

So if you are using CurvedUI with Canvas Flow you can implement this change to get a smooth transition between curved canvases.

Note that Daniel has said he plans to do some further testing and, if all goes well, to include this change in the next CurvedUI update, so you may already have this change if you are reading some time after this post. So, thanks to him for finding an easy solution!

Edit: I have created a short tutorial for using Curved UI with Canvas Flow – https://canvasflow.xyz/manual/tutor...canvas-flow/using-curved-ui-with-canvas-flow/

-andy.

 

Hi @Pelican_7!

First of all thank you for this asset! It looks really promising and right when we decided to redo our UI/Menu System your asset popped up in the Asset Store. The documentation is superb and the Storyboard editor looks great and is easy to use.
I've been playing around with it for a few days now and want to share my experiences as well. They are very similar to what @Du-z and @apexsoftworks already reported.

The things it does work really well as far as I can tell. But sadly there is still some functionality missing so that it would be usable for our purposes.
We're not developing a game but a kind of multimedia/multi-touch application that has different panels that can be shown at the same time but toggled individually. The panels only occupy a certain region on the screen. So this is similar to the tabs problem of @apexsoftworks. We need to make multiple transitions from one CanvasController to individual panel CanvasControllers and from each panel back to the originating one.
And we need to be able to use a Storyboard for this so our designers can integrate different panels on their own.
This simple Storyboard illustrates what we need to be able to do:

In this example the main CanvasController when presented should load two panel CanvasControllers automatically using manual transitions. But it only performs the first transition of the two.
As I understand it it's not possible to have two active CanvasControllers at the same time? This would really be necessary in our case.
I also added buttons to present each panel and buttons on the panels to hide them again. So I can present both panels using the buttons but when I try to hide them using their buttons the main CanvasController disappears.
So I think this is all part of the same problem. Also when I press the buttons on the main controller multiple times the transitions are executed again and the panel controller scenes are loaded every time.
I can send you my test project if you like but it should be easy to reproduce.

This is our main issue and it would be super important that this could be done in a future version. I hope it is of value to you and others as well and worth implementing.

I also want to mention a few ideas and nice to haves and give +1s to things that already have been mentioned:

(Error) Logging
I tried to perform manual transitions when a CanvasController was presented. So I called

PerformTransitionWithIdentifier("PresentPanel1");

PerformTransitionWithIdentifier("PresentPanel2");

right in CanvasDidAppear() what didn't work but there was no error message. So +1 for better (error) logging. Then I put it in Start() what worked but only for the first transition also with no information why the second one didn't work.

Optional Fields for CanvasController
Our Canvases are in Screen Overlay without a Camera and sometimes don't even have a background. So the only things necessary should be a Canvas and a RectTransform.

Child CanvasControllers in Storyboards
Being able to add a CanvasController as a child of the Canvas of another CanvasController in a Storyboard would be essential since it is such an important feature of the asset. Without this the Storyboard which is the most important part quickly becomes useless esp. for designers without coding skills.

Hide but not unload CanvasController
It would be useful to have the option for upstream transitions to only hide the CanvasController and not completely unload its scene.

Create Canvas from Prefab
It's good that the Reference Resolution can be set in the Preferences but there are many more options and sometimes custom scripts on the Canvas objects. So it would be nice to be able to set a Prefab that is used to create the Canvas of a CanvasController. So when something changes not every CanvasController scene has to be edited manually.

Source Code
When playing around with an asset and finding some issues I like to edit the source code to find out what is going on and maybe fix the problem. So I would really appreciate a release with the source included. I think this would benefit both sides as bugs could be fixed by users of the plugin and integrated by you in a future release.

Assembly Definition Files
+1

Super nice to have

Minimizing a CanvasController in the Storyboard
When adding a number of CanvasControllers to a Storyboard they quickly take up lots of space and it gets more difficult to get an overview over the whole board. A possible solution could be to be able to minimize a CanvasController so it takes up less space (Minimize/Maximize All).

Nested Prefabs
With Nested Prefabs on the horizon it may be practical to be able to load (Child)CanvasControllers from a Prefab some day.

In conclusion, I want to say that I really like your asset and think that it could become a real must have for UI development. And of course I hope that our issue can be taken into consideration for future releases.

Cheers,
Ferdinand

 

I have a quick follow up to my previous post about calling PerformTransitionWithIdentifier() in Start() or CanvasDidAppear() as I want to make a manual transition as soon as a CanvasController is presented since it is not possible (yet) to make more than one transition at the same time.
I found out that as long as IsTransitioning of the CanvasController is true no other transition can be made and when CanvasDidAppear() is called IsTransitioning is still true.
So I wrote a little helper coroutine that waits until the end of the frame where IsTransitioning is false and then make the transition:

Code (CSharp):

1. private IEnumerator PerformTransition(string transitionId)
2. {
3.     yield return new WaitForEndOfFrame();
4.     PerformTransitionWithIdentifier(transitionId);
5. }

And there is another small pitfall. If the transition is not animated CanvasDidAppear() gets called before Start(). Therefore I was able to perform the transition in Start() but not CanvasDidAppear().
So it probably would be best if IsTransitioning is already false in CanvasDidAppear() and a transition could be made without any workaround.

 

Hi @ferdinho,

Thanks so much for your detailed feedback. That's massively helpful and some great suggestions. I've got every point you made in Trello now so I can look at them in turn.

About the PerformTransitionWithIdentifier point you made. Yes you're right that the reason was because a canvas controller cannot present whilst it is in transition. I agree this should have better error logging as to why a presentation did not occur. I also agree that it makes more sense for IsTransitioning to be false in the past-tense CanvasDidAppear callback - i.e. it has transitioned. This would allow you to present a canvas controller in CanvasDidAppear without your workaround.

---

About your multi-touch application – I think it's clear that there is enough demand to look into adding support for this kind of multi-canvas interface in storyboards. I'm going to need some time to plan this feature out but I have an overarching idea of what I'd like to achieve.

(As an aside, you could achieve this kind of interface currently via scripting using AddChildCanvasController. Instead of calling PresentCanvasController/PerformTransition from your main canvas controller, you can call AddChildCanvasController, which will embed the loaded canvas controller under the specified transform. You could then toggle them on/off in response to your button press. However, any animation would need to be done manually.)

If you're interested, this is what I'm thinking…

To put it simply, I'd like to be able to create transitions in a storyboard that describe an embedded transition. I think that this would facilitate both the examples given in the previous posts of a tab-bar interface and your panel interface.

To elaborate, currently you can only create storyboard transitions that present and dismiss canvas controllers. This operates conceptually like a stack of screens – presenting pushes onto the stack, dismissing pops off the stack. As you have found, this means a canvas controller only has one presentedCanvasController.

However, canvas controllers may also have child canvas controllers. This allows a canvas controller to contain or embed canvas controllers within it, without affecting the main presentation stack. This means that you could script a canvas controller whose job is to manage a collection of children, loading, embedding, animating, and unloading them as required. Then instead of calling PresentCanvasController, you call your own methods – perhaps SetSelectedTabIndex() in a tab-like interface or ShowLeftCanvasController() and ShowRightCanvasController() in your example. (If you've ever worked with iOS this is conceptually very similar to UIKit's container view controllers.) As the container itself is a canvas controller, you can easily add any container-specific UI in its scene, such as tab buttons or a navigation title bar, as well as easily present/dismiss it using the standard Present/Dismiss transitions.

A storyboard would then need to expose your embedded transition types for you to connect up in the storyboard – I'm thinking the storyboard will likely ask your canvas controller for any custom transition types. I'd also like to make sure that, where possible, the transition animators can still be used with these transitions, and to make it as simple as possible to script a container…

So, to illustrate this idea with your example, you could script a container canvas controller for your team that is a regular canvas controller with the addition of four methods (marked as embedded transition methods somehow!) – ShowLeftCanvasController, ShowRightCanvasController, HideLeftCanvasController, and HideRightCanvasController. In these methods you'd perhaps call AddChildCanvasController if it's not already loaded, and simply toggle its canvas' visibility appropriately. Any non-coders on your team can then drop this canvas controller into a storyboard and when connecting it up, they'd be offered your embedded transition methods in addition to the standard Present/Dismiss, as well as being able to edit the canvas controller as usual in the scene view.

That's the initial idea anyway… feel free to make suggestions if you want to – it all helps to balance complexity with satisfying as many real-world UI-designs as possible.

---

I'm currently aiming for a 1.1.1 release in August that will address some of the feedback mentioned above, such as optional fields and Screen Overlay support, IsTransitioning etc.. I'm then thinking that my priority will move to these embedded interfaces for release in version 1.2.

 

Hi all,

Version 1.1.1 of Canvas Flow is now live on the Asset Store.

1.1.1 Release Notes
https://canvasflow.xyz/release-notes/1.1.1/

Changes

• Log to the console when 'Make storyboard entry point' is selected for a node that is already the storyboard's entry point.
• Allow for a canvas controller to have a null camera (for use with Overlay mode).
• You can now access a StoryboardTransition's user identifier via the userIdentifier property.
• Log an error when a storyboard cannot perform a transition.
• Canvas controller appearance methods are now called in the same order relative to Awake and Start for both animated and un-animated transitions. The defined order for a standard canvas controller is Awake -> Start -> CanvasWillAppear (before transition) -> CanvasDidAppear (after transition).
• A canvas controller's IsTransitioning flag will now be false in past-tense appearance methods - CanvasDidAppear & CanvasDidDisappear.
• Zooming in a storyboard with Alt + Scroll-Wheel now zooms in when scrolling up and zooms out when scrolling down.
• Moved the minimum supported Unity version to 2017.4.1f1 (from 2017.3).

Resolved Issues

• Fixed an issue whereby an indirectly dismissed initial canvas controller would not have its completion handler invoked.
• Fixed the following error being logged to the console in Unity 2018.2: "ExecuteMenuItem failed because there is no menu named 'Window/Inspector[/Scene]'". This caused the Inspector window to not open automatically after selecting a storyboard transition, as well as the Scene window to not open automatically after selecting the "Open canvas controller scene" button.

-andy.

 

@Pelican_7 hi, your asset looks very nice. Before purchasing I wanted to ask how will It integrate with MVVM data binding? Will there be any problems due to asset's architecture? Also can used canvases be preloaded so they don't load on demand?

 

Thanks @mmvlad. Hmm... Screens in Canvas Flow, known as Canvas Controllers, are stored in their own scene file and are a MonoBehaviour. I'd probably categorise them as 'View' in an M-V-VM architecture. There is therefore nothing preventing you from adding a View Model component in a canvas controller's scene.

For example, if your model was a ScriptableObject asset containing some data, you could place your View-Model component in the canvas controller's scene with a reference to the model asset. Your View-Model can then communicate with the Model (the ScriptableObject asset) and the View (the Canvas Controller).

If the model is not so easily referencable from your canvas controller - perhaps it is a singleton instance created in another scene somewhere - then you can use the StoryboardWillPerformTransition callback to pass a reference to it through to a newly instantiated canvas controller.

I tend to stick to Unity's Component based architecture when working in Unity, so my experience of MVC and MVVM has been on iOS only. Therefore I'm not sure I can say with certainty whether there will be any problems without knowing how exactly you set up your MVVM architecture within Unity. Happy to answer any more questions if that hasn't cleared it up - just let me know a bit about your setup.

You cannot currently preload canvases - it's something that's in the backlog to be considered in the future.

-andy.

 

@Pelican_7 sounds like there shouldn't be any problems with MVVM.
Few more questions:
1. Are mobile platforms supported?
2. Are you planning on making source code available?
3. What about popups/dialogs support? (with features like dialog stack etc.)

Thank you

 

1. Yes, Canvas Flow is built with Unity's Canvas component and doesn't have any platform specific dependencies. Also, all editor-related data in storyboards is excluded from builds, keeping the size of the assets to a minimum.

2. I haven't got any plans to make the source code available at the moment. My concern with this is two-fold - firstly the potential increase in the difficulty of providing support to users as I'll have to support modified versions of the asset, and secondly with migrating existing users over from the DLL without causing missing script issues.

3. The hierarchy is a stack - i.e. a canvas controller presents a canvas controller and so on. So an alert dialog can just be a canvas controller and can be presented and dismissed like any other (and can present and dismiss canvas controllers itself). Perhaps worth mentioning on a related note, there is currently limited support (not supported in storyboards) for embedding canvas controllers inside one another - an alternative to the stack. The reason you might want to do that would be to display screens side by side (as siblings), such as in a tab-bar interface.

-andy.

 

A tutorial on how to access other objects data and call transitions from script would be very helpful for beginners. (more in depth than the game scene).
E.g. if you think about a simple login screen flow with different canvas (Login, Signup, SignedIn with Profilpicture, Loading Screen) all that needs to get called from authentication controller scripts or game controller scripts.

 

Thanks for the suggestion @phili_maas. A few other people have asked for some longer-form tutorials too, so I'll take this on board for possible content.

 

Hello @Pelican_7

this asset looks very promising, concept of separating menu screens/canvases into scenes is interesting.
But what about performance-wise impact of this decision? Is there any noticeable lag when loading/unloading individual canvases? I assume this happens synchronously - is it seamless?
Presumably it's related to complexity of given canvas/its children, I'm wondering whether it's problematic on low/mid tier mobile devices.

 

Hi @mtpabis.

Thanks a lot.

Yes, you're exactly right - it's entirely dependent upon the size of the canvas' scene file as to how long it takes to load. In my experience, the load time of a UI scene hasn't really been an issue. Although Canvas Flow is a more recent development and iteration of my ideas, I have been using this structure of keeping UI screens in separate scenes and loading them on demand for approximately three years on mobile games, so I've used it on quite a few mobile devices.

I did have an issue once of a particularly large screen (a massive list of items requiring native calls) causing a noticable lag on iPod Touch devices, but the solution here was to simply add a loading spinner to the canvas (so the scene loads quickly) and then load the intensive list once the canvas was visible with the spinner.

With regards to synchronous loading, Canvas Flow actually exposes asynchronous/synchronous loading as an option. By default, screens are loaded asynchronously but the synchronous option is there if required.

I think it's an interesting discussion about the performance impact of separating UI screens into their own scenes and loading/unloading them on demand, so here are the main reasons why I chose this architecture.

1. Memory
I have seen quite a few smaller game projects that have all UI canvases placed directly in a scene and then subsequently enable and disable them as required. This puts all your load time up front when the scene loads (where there is usually some kind of loading screen), however it means that all canvases are loaded into RAM, even when they aren't being used.

Memory is a precious resource in games, so why not only load the UI we need, when we need it, and then unload it when we're done. The larger your game, the more crucial this will become. For example, imagine a scenario in which you have a large game which has many types of entities - shops, crafting objects, vehicles etc. - and each entity presents its own UI when the player interacts with it. Having all these screens in memory becomes unfeasible and loading them on demand is a lot more efficient.

2. Screen Reuse
Separating each screen into its own scene firstly allows us to easily reuse them across the game. For example, we could have a 'Find A New Online Game' screen, and easily make this accessible both from the main menu, as well as the game over screen.

Secondly, it allows us to have multiple instances of a screen in memory at once. For example, say you have a 'Player Profile' screen that displays a player's profile and their friends. Tapping on a friend can easily present another 'Player Profile' screen, with this one configured to the selected friend.

Both of these scenarios would be tricky to accomplish in an architecture in which screens are singular embedded instances.

3. Working In Teams
When working in teams, you generally only want one developer/client editing a scene file at once. Multiple people editing the same scene will usually end up in a merge conflict. By separating screens in this way, two team members could work on two separate screens concurrently, as they are separate scenes. This is something that would not be easily possible if both of these screens were located within the same game scene, as in the first example.

So, I see it as a trade-off. In return for load time of screens (which in my experience has not been an issue), we get the benefits described above.

Hope that helps!
-andy.