[RELEASE] Nova UI Framework

Introducing Nova, a new kind of UI framework made for Unity developers, designers, and creators!

Nova brings modern UI features, such as rounded corners, drop shadows, virtualized lists and grids, padding, margins, and more, to a familiar Transform and Prefab workflow. Construct 2D and volumetric UIs like never before for mobile, desktop, XR, and beyond.

In addition to the extensive feature-set, Nova was built from the ground up with performance as a priority, heavily leveraging Unity’s Burst compiler and Job System, so you and your team can spend more time focusing on functionality and gameplay and less time worry about optimizing your menus.

Website
Asset Store

We encourage you to explore Nova's rich documentation at https://novaui.io to learn more, but here are some feature highlights:

Dynamic Styles
Take your visual quality to the next level without writing custom shaders or baking visual effects into textures. Add and adjust corner radius, gradients, drop shadows, and more on the fly!
- Rounded Corners
- Borders
- Gradients
- Drop Shadows/Glow
- Inner Shadows/Glow
- Rounded Edges
- Auto UV adjustment for images/icons/etc.
- Local anti-aliasing
- Text Super Sampling
- Multiple lighting models
- Rectangular masks and Texture masks
- Enhanced Geometry sorting and configurability (even a Z-Index property!)
- Works with TextMeshPro!

Adaptive Layout System
- Sizing

- Value and percent based!​

- Positioning

- Value and percent based!​

- Alignment (Top, Left, Bottom, Right, Front, Back)
- Padding
- Margin
- Min/Max Constraints
- Shrink to Content
- Expand to Parent
- AutoLayouts (Vertical, Horizontal, Depth)
- Aspect Ratio Locking

Data Binding
With a simple databinding API, flexible type-matching, and virtualized lists and grids, create a rich, dynamic, and performant UI with just a few lines of code.
- ListView
- GridView

Gesture recognition across all supported platforms, including XR!
- Hover/Unhover events
- Press/Release events
- Click events
- Drag events
- Scroll events - complete with refined scrolling animations

AND MORE!
- A garbage free Animations API for writing custom, modular UI animations!
- Dynamic texture atlasing
- Edge Snapping tools in scene view
- Gradient tool in scene view


We're also excited to share several heavily-commented sample projects along with an end-to-end video walkthrough of creating the Inventory UI.

Nova is available now on the Asset Store!
https://assetstore.unity.com/packages/slug/226304

 

Hi,

I just bought the framework and it looks promising.

I just tried an Android build using 2020.3.31f1 and got the following errors from NovaUIBlock3DLambertOpaque shader.

Code (CSharp):

1. Shader error in 'Hidden/Nova/NovaUIBlock3DLambertOpaque': invalid subscript 'xy' at Assets/Nova/Shaders/NovaPostV2F.cginc(27) (on gles3)
2.  
3. Compiling Vertex program with DIRECTIONAL LIGHTPROBE_SH SHADOWS_SHADOWMASK
4. Platform defines: SHADER_API_GLES30 SHADER_API_MOBILE UNITY_ENABLE_REFLECTION_BUFFERS UNITY_FRAMEBUFFER_FETCH_AVAILABLE UNITY_HARDWARE_TIER3 UNITY_LIGHTMAP_RGBM_ENCODING UNITY_NO_CUBEMAP_ARRAY UNITY_NO_DXT5nm UNITY_NO_RGBM UNITY_NO_SCREENSPACE_SHADOWS UNITY_PASS_FORWARDBASE UNITY_PBS_USE_BRDF2
5. Disabled keywords: NOVA_CLIP_MASK NOVA_CLIP_RECT NOVA_COLOR_MODIFIER SHADOWS_SCREEN UNITY_ASTC_NORMALMAP_ENCODING UNITY_COLORSPACE_GAMMA UNITY_ENABLE_DETAIL_NORMALMAP UNITY_ENABLE_NATIVE_SHADOW_LOOKUPS UNITY_HALF_PRECISION_FRAGMENT_SHADER_REGISTERS UNITY_HARDWARE_TIER1 UNITY_HARDWARE_TIER2 UNITY_LIGHTMAP_DLDR_ENCODING UNITY_LIGHTMAP_FULL_HDR UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_METAL_SHADOWS_USE_POINT_FILTERING UNITY_NO_FULL_STANDARD_SHADER UNITY_PBS_USE_BRDF1 UNITY_PBS_USE_BRDF3 UNITY_PRETRANSFORM_TO_DISPLAY_ORIENTATION UNITY_SPECCUBE_BLENDING UNITY_SPECCUBE_BOX_PROJECTION UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS UNITY_VIRTUAL_TEXTURING VERTEXLIGHT_ON

and

Code (CSharp):

1. Shader error in 'Hidden/Nova/NovaUIBlock3DLambertOpaque': invalid subscript 'xy' at Assets/Nova/Shaders/NovaPostV2F.cginc(35) (on gles3)
2.  
3. Compiling Vertex program with POINT SHADOWS_SHADOWMASK
4. Platform defines: SHADER_API_GLES30 SHADER_API_MOBILE UNITY_ENABLE_REFLECTION_BUFFERS UNITY_FRAMEBUFFER_FETCH_AVAILABLE UNITY_HARDWARE_TIER2 UNITY_LIGHTMAP_RGBM_ENCODING UNITY_NO_CUBEMAP_ARRAY UNITY_NO_DXT5nm UNITY_NO_RGBM UNITY_NO_SCREENSPACE_SHADOWS UNITY_PASS_FORWARDADD UNITY_PBS_USE_BRDF2
5. Disabled keywords: DIRECTIONAL DIRECTIONAL_COOKIE LIGHTMAP_SHADOW_MIXING NOVA_CLIP_MASK NOVA_CLIP_RECT NOVA_COLOR_MODIFIER POINT_COOKIE SHADOWS_CUBE SHADOWS_DEPTH SHADOWS_SCREEN SHADOWS_SOFT SPOT UNITY_ASTC_NORMALMAP_ENCODING UNITY_COLORSPACE_GAMMA UNITY_ENABLE_DETAIL_NORMALMAP UNITY_ENABLE_NATIVE_SHADOW_LOOKUPS UNITY_HALF_PRECISION_FRAGMENT_SHADER_REGISTERS UNITY_HARDWARE_TIER1 UNITY_HARDWARE_TIER3 UNITY_LIGHTMAP_DLDR_ENCODING UNITY_LIGHTMAP_FULL_HDR UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_METAL_SHADOWS_USE_POINT_FILTERING UNITY_NO_FULL_STANDARD_SHADER UNITY_PBS_USE_BRDF1 UNITY_PBS_USE_BRDF3 UNITY_PRETRANSFORM_TO_DISPLAY_ORIENTATION UNITY_SPECCUBE_BLENDING UNITY_SPECCUBE_BOX_PROJECTION UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS UNITY_VIRTUAL_TEXTURING
6.  
7.  

Any suggestions?

Also, would it be possible to have the Hand UI sample as a separate package for importing to an existing project?

 

Thanks for checking out Nova! Apologies for the issue you're running into. Nova does not currently support shadow masks, but it looks like we missed removing that shader keyword explicitly. We will push out the keyword fix to the asset store, however that typically takes a few days for Unity to approve, so, in the meantime, if you want a temporary workaround to unblock your builds, in the "NovaPostV2F.cginc" file pointed out by the errors you posted you can replace both instances of

UNITY_TRANSFER_LIGHTING(o, 0);

with

COMPUTE_LIGHT_COORDS(o);

And if shadow masks are a feature you would like Nova to support, be sure to let us know here.

As for the Hand Menu sample, we don't currently plan to publish it as an asset store package. Instead it's readily available to download on GitHub, along with our other samples, and you're welcome to use any pieces relevant to you in your own projects!

 

Looks great - however - I could not find any information about what is usually my biggest headache for maintaining and doing changes to UI - styles and centralized style sheets. What kind of support is there for styles?

 

And is there support for joystick input and navigation?

 

While scrolling via joystick is supported, there are not currently out-of-box solutions for DPad-esque navigation and centralized style sheets/management in the v1 release of Nova. These are both features we have discussed internally (and even initially planned on having both in the v1 release) so we will likely add support for them in the future, but it's too soon to provide a timeline at the moment.

If you submit a feature request via our feedback forum, users can upvote and comment on it which will really help us prioritize features for future releases.

 

Question: Is there a "best practice" for enforcing styling throughout a project - like the radius of corners, or shadow offset? Could not find anything about this in the doc...?


PS.
I really like what you have made - so I am really trying to find ways to use the v1 release in my projects.

 

While not exactly "enforceable", we've found creating modular, nested prefabs is quite helpful when trying to be consistent about styling - that way you can just change the prefab itself and have the adjusted styles automatically apply wherever the prefab is referenced. If you're granular about your prefabs, then they can become style templates for common elements, like a default corner radius, drop shadow, etc.

Thanks for the feedback! We wish we were able to include every feature right off the bat, but we are quite happy with the functionality we've been able to deliver in the v1 release. Our samples are a good place to start to see the variety of UIs Nova is capable of producing, and our step-by-step Inventory Tutorial shows how quickly a user can get a visually refined and functional UI up and running in their own project. We're really excited to see what users will create!

So we hope you give Nova a shot, and please keep the feedback coming. More features and improvements will continue to be added, and the more people who use Nova on a regular basis, the more insightful feedback we can integrate into those updates!

 

I just can't get the hand sample to run. Editor version 2021.3.6f1. I've read your document very closely.

The scene starts in VR. I get white hands that are rotated incorrectly. I can move them around but the fingers don't bend. I don't see any menus. How do you bring up menus?

Same behavior with OpenXR or Oculus runtime.

Also, the graphic elements in the settings panel are small white or black boxes.

All the Icons under panels in the hand launcher are missing as well.

Any suggestions?

 

In order to bring up the menus, you will first need to get hand tracking working correctly. While the hand tracking functionality/meshes are the default ones that come with the Oculus Integration asset, we've seen a very similar issue to the one you described when you start the app using the controllers or use controllers inside the app and then switch to hands. So one thing worth trying to get hand tracking working is to launch the app using your hands and only use hands inside of the app.

As for the icons and graphic elements looking incorrect, is this in editor, on device, or both?

In order to get a validation baseline for either or both issues, you can also sideload our prebuilt version of the sample (which you can get here).

Also, to avoid drowning out questions users may have about Nova features, capabilities, etc. with debugging, we will spin up a private chat with you where we can resolve the rest of your issues!

 

Looks like direct messages aren't working right now, so never mind - we can continue the conversation here!

 

Thanks for the APK. That works fine.

I was able to get the hand sample working in the editor. I'd been starting the app while using controllers and not hand tracking. The icons references are still not set. I've tried downloading the project and importing as you describe and the references are always null. No matter I don't really need that sample since I'm going to my own.

NovaUI is interesting. Looking forward to working with it.

 

Very cool. Are there any performance benchmark comparisons between Nova UI and UI Toolkit?

 

Thanks for the kind words!

We've only looked at UI Toolkit performance anecdotally, so we don't have an apples-to-apples benchmark comparison. That said, a lot of work has gone into providing great performance out-of-the-box with Nova across both CPU and GPU workloads!

On the CPU side, Nova leverages Unity's Burst compiler extensively for its core engine update, input system, and many other features. In practice this translates to roughly 3x-10x CPU performance improvements in the paid version of Nova with Burst enabled, compared to what you'd see in the free trial, which we just released a few weeks ago.

On the GPU side, Nova makes use of static branching in our shaders using shader features. So Nova only pays the cost of the more advanced style properties (e.g. drop shadows, lighting, etc.) on UIBlock2Ds that have those features enabled. And that's on top of all the draw-call batching optimizations covered in our documentation.

Having more concrete numbers on hand is a good idea, though, so we'll investigate what it would take to get an accurate performance comparison to UI Toolkit in the near future

 

Yes please do, but compare against ugui instead. I randomly stumble to Nova and the perf benchmark would have been great incentive. Since perf is the main pain point of ugui for me

 

Hi there. I have been messing around with the free Nova UI version, and I ran into a problem where the NovaUI elements seemed to be jittering every time I moved the player character. Is there any fix to this, and if so, does it have to do with Nova UI elements or something else?

 

Thanks for checking out Nova!

This sounds like the UI camera is moving after the Nova Engine runs. A few questions to better understand your setup:
1. Is your UI camera a child of your player character?
2. Do you happen to know at which part of the frame your character controller actually moves the character? E.g. Update, LateUpdate, some ECS ComponentSystemGroup (e.g. PresentationSystemGroup), etc.

 

Thanks for the quick reply. I found out that the problem was originating from the plane distance in my screen scape component. The camera in my game is a bit weird because there is not just one (we are trying multiplayer implementation). I will relay the reply to my engine programmer. Thanks again!

 

Hello! I stumbled across this UI framework and I have some questions:

1. Are there any platforms that Nova UI doesn't currently support?

2. Any "known issues" to be aware of?

3. I saw that Nova UI heavily leverages Unity’s Burst compiler and Job System - but does Nova UI still run (and perform well) without Burst and the Job System? The reason I ask is because I saw that WebGL support was added to Nova UI, but Burst isn't supported for WebGL and WebGL doesn't support multithreading. So, I am just wondering what that means in regards to Nova UI's reliance on Burst and Jobs.

 

1. Nova is supported on all platforms! However, as we mention on the compatibility page of our website: "Nova requires GPU instancing and shader feature set 3.5, so it may not be supported on certain, older hardware and older versions of OpenGL (e.g. OpenGL 2, OpenGL ES 2)."

2. Any major "known issues"/restrictions are mentioned in the compatibility page linked above. Of course, no software is perfect, but you can see all bugs being tracked on our feedback forum.

3. Though WebGL doesn't support burst, it simply means that Nova won't be burst compiled as it would be on the platforms where burst _is_ supported. However, Nova does require the burst and jobs packages to be installed in the project.

Also, it's worth mentioning that as of Nova 2.0 (which we recently released), you can try Nova for free with the Free Trial. While the Free Trial has some restrictions (it's obfuscated and not burst compiled on any platform), it will allow you to evaluate Nova and verify that it works in your scenarios and target platforms (though, if you encounter a platform on which Nova doesn't work, be sure to file a bug in our feedback forum!).

 

Hi, does it support ui blur?

 

I tried the trial.. 0.50ms on the sample scenes is this reduced on the main version?

I think my one gripe with it all, is aside from having to learn a new ui system again, is just not alot of widgets and things that there out of the box.. compared to what ugui has now and especialy 'new widgets ui' which is enough in that to provide an example of most ui functionality you'd want to use.

also in the sample there is a resize window.. and I just thought it was pretty broken...the bottom-right corner when you shrink the window.. its fine.. but try to expand it and it starts expanding before the mouse cursor has even gotten paste the minimum size of the window :S .. I can't explain it, it just indicative of something not implementated properly at all, I don't think it even was movable .. I don't have the time or interest to sort out things like that.. I just want stuff that works and works well.. lots of examples and widgets that work out of the box properly really.. (https://ilih.name/unity-assets/UIWidgets/demo/ is the resizable demo in that for comparison.. but again is enough in that to make ugui not complete garbage... even though it sorely misses a proper flex box system.. and uitoolkit is about 5years in unity time to actually being useful currently seems like over engineered rubbish that doesn't even support alot of css stuff or even some of no brainer basics that should have been there from the start.

so I dunno I'm on the fence anyway,

 

Hello, I'm trying to get Nova to work on a VR project and I am unable to get the button component to work with the oculus quest controller. I tried to copy what you guys did on the grid inventory project but still nothing.

I am unsure what i am missing and i was unable to find a vr tutorial for nova.

 

Hi!

A few questions so we better understand your setup:
1. Are you using the Button component directly (meaning did you create your own button from scratch), or are you using one of the prebuilt Button control prefabs? If using a button you made, do you have an Interactable component in your button hierarchy?
2. Do you have an Input Manager in your scene which hooks into Nova's Interaction APIs? From the Inventory project that would be XRInputManager.cs

Here are some additional resources from our documentation which could be helpful as well, just in case you haven't seen them already:
1. Input Overview and key concepts (link)
2. Using XR controllers and hand-tracking (link)

 

Hi, I was wondering if it was possible to assign custom materials and shaders to the UI? for example allowing me to use shaders for the UI Blur instead of going the render texture route?

 

Hi!

Custom materials are not currently supported, but the feature is actively in development and is expected to be available in the (relatively) near future

You can track the status of the work on our GitHub, and we'll be sure to update that thread when we have news to share and/or whenever the feature is released!

 

This asset is so wonderful. Thanks in advance for all the new features that will come!
I'm a beginner, and I have some questions for you.

1. Everything is so nice with Nova that I'm asking myself: Is there a performance cost to it, or maybe this performance cost is negligible?

2. Is your gradient tool complete? Do you have any plans to upgrade it? I would really like to have something like Photoshop, where you can apply multiple colors to a gradient (3 or more) and some sliders to play around with the gradient, something like this:



3. Is there a way to manipulate each corner radius individually? I'd like to modify only the corner radius at the bottom of my rectangle.

4. If your UIBlock2D has a sprite image with rounded corners, does the shadow feature become useless? It seems like the shadow go around the blue corner of the block instead of applying to the sprite itself.

Thanks!

 

I’m looking to create a pie chart style interface where segments of the pie can be resized in their percentage of the full pie by using a finger. Each part of the pie represents user settings where the portion of a resource is shared across what is represented by the pie segments.
Can this be done using ListView or GridView?