Home

Awesome

Unity-NGUIExtension

Various NGUI extension modules.

Modules

NGUI with Alpha-Masked Atlas

As mentioned on this post, you can also recude NGUI's atlas image size up to 1/4 compared with RGBA32 format. And it leads reducing image loading time so can make an user feel the game runs smoothly. An overhead of using alpha-mask which is known as not good at on a mobile device is slight, so it can be ignored in rendering UI images point of view.

The problem of using alpha maksed image approach can be found on a translucent sprite. Using alpha-masked approach is not good for a translucent sprite image. An image can be more translucent than it should be rendered due to its lack of color pixels. Compare the following images:

<p align="center"> <img src="https://github.com/kimsama/Unity-NGUIExtension/blob/master/Images/original.png?raw=true" alt="Original RGBA32"/> </p> <p align="center"> <img src="https://github.com/kimsama/Unity-NGUIExtension/blob/master/Images/alpha-masked.png?raw=true" alt="Alpha Masked"/> </p>

When all sprites of atals images are rendred with alpha masked 4bit images, the second image of the above, the differences are subtle except windows background sprite. The sprite image is more translucent than the RGBA32 one. So it is highly recommanded to use RGBA32 format, especially for a GUI sprite if the sprite image is translucent one.

All the sprite images of Alpha-Masked are made with NGUI and rendered with Transparent Colored Masked.shader in this repository. Surely its atlas image size is reduced up to 1/4 and very good strategy for reducing image size such as equipment icon sprite images.

NOTE: Don't forget to make an atlas image to have same width and height as power of two on iOS platform.

UISlider burn effect with TweenerSlider

Drawing burn out effect when value is going down can be easily done with two UISlider, one of that has TweenSlider component.

<p align="center"> <img src="https://github.com/kimsama/Unity-NGUIExtension/blob/master/Images/tweenslider.gif?raw=true" alt="TweenSlider"/> </p>

The red slider is burn out effect which does delayed move after value of the yellow slider changed. Attach TweenSlider compoent to the red slider then call UITweener related methods as the following:

    public UISlider yellowSlider; // NGUI UISlider object.
    public TweenSlider tweener;

    ...

    tweener.ResetToBeginning();
        
    tweener.slider.value = from;
    float duration = 0.5f;
    float to = yellowSlider.value;
    TweenSlider t = TweenSlider.Begin(tweener.slider, duration, to);
    t.PlayForward();

Other Resources

Other useful NGUI modules found on github.

License

This code is distributed under the terms and conditions of the MIT license.

Copyright (c) 2014 Kim, Hyoun Woo