(三)NGUI-Sprite

Sprite:圖片精靈。可以在一張大圖(Atlas,整體圖像集合)中去截取一部分,而截取的小圖就是一個精靈。給精靈命名后,使用時通過精靈的名稱就能直接繪制。圖片精靈還可以用來制作動畫(Tween相關(guān)腳本)。

創(chuàng)建Sprite:

創(chuàng)建Sprite
創(chuàng)建完成

Sprite的屬性欄

Spritel屬性欄

圖片的選擇:首先點擊Atlas(圖冊),會彈出圖冊選擇界面,下圖中四個圖冊是NGUI自帶的。
我選擇的是示范圖冊是最后一個“Wooden Atals”。

Atlas

點擊精靈,選擇圖集中的一張圖片。


Sprite
Type:圖片樣式。有五種樣式可供選擇。
Type

Simple:標準的Sprite,自適應大小。

Simple

Sliced:九宮格切片,創(chuàng)建固定邊框控件的最佳選擇。邊框固定,圖片中間做拉伸(縮放),如角色頭像,按鈕背景。

Sliced

Tiled:平鋪,一個Sprite縮放填充整個區(qū)域,如背景平鋪。

Tiled

Filled:每個Sprite有一個單獨的參數(shù)(file Amout)來控制哪些是可見的,用來制作技能CD冷卻時間或進度條。

Filled

舉個制作技能冷卻時間轉(zhuǎn)動的例子:
先添加Cooldown(冷卻時間)腳本

Cooldown

下面為Cooldown腳本的代碼:

using UnityEngine;

public class Cooldown : MonoBehaviour {

    private UISprite mySprite;

    void Start () {
        mySprite = GetComponent<UISprite>();//實例化
    }

    void Update () {
        
    }
    private void FixedUpdate()
    {
        if (mySprite.fillAmount != 0)
        {
            mySprite.fillAmount -= 0.01f;//每0.02s圖片減少的1%,即該圖片的CD為2秒。
        }
        else
        {
            mySprite.fillAmount = 1;//當CD好了的時候(mySprite.fillAmount==0),重置CD
        }
    }
}

點擊運行后,效果圖如下,360度的技能冷卻就做好了。

Cooldown

Advanced:高級的,自定義左右上下中的Sprite Type。

Advanced

我們會發(fā)現(xiàn),無論是Label,還是Sprite,都會有Widget和Anchors這兩個屬性。其實這任何NGUI的控件都有著兩個屬性,下面我們就來了解Widget和Anchors的用法。

Widget和Anchors
Widget

這個部件屬性包含了Sprite的中心點【Pivot】,層級深度【Depth】(當有多個圖層的時候就會用到),大小【Size】,還有可調(diào)方向【Aspect】。

Pivot:中心點
此時以Sprit的左上角頂點為中心點,所以在對Sprite進行旋轉(zhuǎn)操作時,就圍繞左上角頂點進行旋轉(zhuǎn)。

Pivot

Anchors:對齊方式
Anchors

Unified

Unified

Advanced:四個邊的對齊參照物均可自定義選擇(也就是說至多可以有四個對其參照物)

Advanced

感謝觀看:)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容