NBlur User Guide

Yes, NGUI can become transparent and blur

After receiving several email asking for an alternative version of blurred UI plugin for NGUI. We decide to try re-implement the trick on NGUI.

And finally it’s here. NBlur – a blurred UI plugin specifically designed for NGUI.

2015-06-25 20_13_41-Unity Personal (64bit) - Big.unity - projectNBlur - PC, Mac & Linux Standalone_

Features

Specially designed for NGUI. You can actually use NBlur on any NGUI object which has a UIWidget!

As easy as UBlur – no coding require. Actually, they are almost the same! Just two clicks away and your NGUI become transparent and blur.

2015-06-26 17_41_52-Unity Personal (64bit) - Demo.unity - projectNBlur - PC, Mac & Linux Standalone

Tested and run on multiple platforms. iOS / Android / WP8.1 / Desktop.

WindowsAppleAndroid

Setup the correct hierarchy

NGUI has a different design from UGUI. Which makes setting up NBlur a little bit different from setting up UBlur.
In order to sort your blurred UI correctly, you need to separate your UI and background in different panels, layers and rendered them in different cameras.

The main difference with UBlur is, in NBlur you need extra layers to sort UIs and image effects correctly, in UBlur you can do them all in the same layer. Which is due to the natural limitation of NGUI.

Don’t worry, it’s not that difficult. Here’s a quick screenshot guide for you:

NBlurGuide

Pro tip: For keep your UI’s depth order correct make sure to separate them in different panels, different layers.

And rendered them in different cameras and have their depth difference by 2.

Scripting

Scripting NBlur is identical to scripting UBlur.
Just follow this link to see UBlur scripting guide and replace all keyword “UBlur” to “NBlur”.

That’s all.
If you have an idea or would like to comment, please don’t hesitate to send me an email.

Live Demo

Asset Store Link

Looking For Support?

UBlur Introduction

When UGUI meets image effects

Introducing UBlur. a Unity3D plugin which helps you accomplish modern, slick-looking blurred transparent 2D UI.

UBlurTitle1

Features

Designed to work with UGUI, the built-in GUI system comes with Unity3D. The ultimate solution!

UGUIBlur

It’s designed to match the general work-flow of Unity3D. Just add a UBlur component from menu and adjust the component settings, no extra work required, UBlur is simple for non coders.

UBlurComponent

An easy-to-use editor can adjust and preview everything on-the-fly.

UBlurInspector

Tested and run on multiple platforms. iOS / Android / WP8.1 / Desktop. More platforms WIP.

WindowsAppleAndroid

Note:

As with any image effect use Ublur wisely to maintain optimum performance.

Questions or comments please send to uninet.neo@gmail.com

We always open to your suggestions.

Thank you!

Basic Setup

Scripting Guide

Live Demo

Asset Store Link

Looking For Support?

UBlur Basic Setup

UBlurTitle2
UBlur works with 2D UGUI. It uses real image effects and relies on cameras. That means a simple setup is needed for the effects to show correctly.
Here’s a simple and basic setup screenshot for your reference.

UBlurBasicSetup1

Remember this: UBlur only works with UGUI Canvas render mode: Screen Space – Camera. All Canvas must be set to this render mode if it has a UBlur UGUI object.

Another advance tip: If you want to have multiple UBlur UGUI objects stacked on screen at the same time. The best way to keep their depth order correct is to separate them in different canvases with different cameras and have their depth difference by 2, like what we did in the screenshot.

Scripting Guide

Live Demo

Asset Store Link

Looking For Support?