當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

NGUI学习

發(fā)布時(shí)間：2024/1/18 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 NGUI学习小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Uiroot是所有ui的根，必須先創(chuàng)建。

Label

Label fonts overflow

shrink content:

默認(rèn)的隨著邊框變化而變化的文本內(nèi)容

ClampContent：

把多余的減掉

Resizefreely：

文字和邊框強(qiáng)制保持一致。

resizeHeight:

可以調(diào)節(jié)寬度，高度與文字保持一致。

Label fonts alignment

對(duì)齊

Panel

Clipping soft-clip

根據(jù)限定的范圍顯示panel里面的內(nèi)容

Clipping contrain-but-dont-clip

限定panel的范圍但仍然顯示超出的內(nèi)容

Button

做label的按鈕，先要給label加上boxcolider。然后就attach一個(gè)button script。

這個(gè)東西需要在做圖片按鈕的時(shí)候用到 Altas--wooden altas

但是這里并沒(méi)有解釋為什么用這個(gè)東西。還有這個(gè)是什么意思。

上網(wǎng)查了一下，應(yīng)該是，圖集的意思。不太懂。

事件響應(yīng)：

首先先吧button弄好，然后腳本弄好，

在uibutton下面這個(gè)onclick是指定方法的地方，這個(gè)notify是指定掛載腳本的地方，比如我把控制這兩個(gè)按鈕的腳本放在了maincamera上面，那么這個(gè)notify就是maincamera。

像這樣，掛上去就可以使用了。

靜態(tài)字體與動(dòng)態(tài)字體

上次創(chuàng)建動(dòng)態(tài)字體的時(shí)候，fontmaker出現(xiàn)了問(wèn)題，解決不了，最后還是創(chuàng)建一個(gè)空的對(duì)象，然后掛載ngui的字體腳本上去弄出來(lái)了，但是用這種方式做出來(lái)的動(dòng)態(tài)字體不知道缺陷是什么。

靜態(tài)字體相當(dāng)于有一千個(gè)字，然后把這一千個(gè)字都做成一個(gè)圖集。但存量有限。

widget屬性 pivot depth和size

Privot 就是中心點(diǎn)的位置，可以調(diào)節(jié)

Depth就是深度，數(shù)值越大越靠前。

Anchor

?---------------------------------------2016.7.29-----------------

利用anchor做的背景圖片和相機(jī)相同大小自適應(yīng)：

把a(bǔ)nchor的type改為unified。

Left改為targetsleft。

Right改為targetright。

Bottom和top同樣。

然后left，right，bottom，top全部置為0。

利用anchor做的小地圖自適應(yīng)

Tween動(dòng)畫

Tween動(dòng)畫我感覺(jué)類似于網(wǎng)頁(yè)的一個(gè)東西。

功能都有這些，可以給各個(gè)ui控件做位移，旋轉(zhuǎn)，縮放，顏色什么的之類的操作。

Slider

就是做一個(gè)滑動(dòng)條的東西。

加上box colider 加上slider script 就可以做呈這樣一個(gè)滑動(dòng)條，另外ngui也有做好的prefab。

Popuplist

顧名思義，這就是做一個(gè)彈出列表的東西，跟上面的滑動(dòng)條也差不多，加一個(gè)box colider

再加一個(gè)popuplist再進(jìn)行相應(yīng)的設(shè)置即可。

需要注意的是，要在這個(gè)物體上面加一個(gè)label來(lái)顯示選中的選項(xiàng)，字體什么的也要注意一下，如果有中文的話，就要選擇支持中文的字體。

還要在加個(gè)方法監(jiān)聽(tīng)在label上面。

Checkbox

單選框，具體操作也跟上面的差不多。

先加boxcolider，再加toggle script。

具體就是，點(diǎn)擊掛載了togglescript的物體的時(shí)候，顯示設(shè)定好的第二張圖片，這張圖片是自己設(shè)定的。

根據(jù)教程，利用checkbox,popuplist,slider做出來(lái)的一個(gè)游戲設(shè)置界面：

-----------2016.7.31-------------

接下來(lái)，就是參數(shù)傳值什么的了。

參數(shù)傳值的做法：

利用UIPopupList.current.value.Trim()

UIToggle.current.value;

獲取到ui控件的值，然后反饋到腳本里面。保存起來(lái)。

像這樣：

????public?void?onGameGradeChanged()

????{

????????switch?(UIPopupList.current.value.Trim())

????????{

????????????case?"簡(jiǎn)單":

????????????????grade = GameGrade.EASY;

????????????????break;

????????????case?"一般":

????????????????grade = GameGrade.NORMAL;

????????????????break;

????????????case?"困難":

????????????????grade = GameGrade.DIFFCULTY;

????????????????break;

????????}

????????print("onGameGradeChanged"+UIPopupList.current.value);

}

然后記得

兩個(gè)下拉列表，一個(gè)單選框，大概都是這樣的操作。

然后開(kāi)始做界面切換的動(dòng)畫。

先給start掛上tweenposition的動(dòng)畫。

效果是會(huì)把這個(gè)界面往左移出屏幕。

接下來(lái)是也要給option掛上tweenposition的動(dòng)畫。

效果是這個(gè)界面往左移進(jìn)屏幕。

把設(shè)置按鈕掛上通知腳本的方法：

另外一個(gè)按鈕也掛上：

最后在腳本里面寫一下這兩個(gè)方法播放tween動(dòng)畫的代碼，就可以了。

如圖：

順帶一提PlayReverse()這個(gè)方法的意思是反向播放動(dòng)畫。

這樣，一個(gè)游戲菜單的小demo就完成了。

--------------------------2016.8.3---------------

技能cd

創(chuàng)建一個(gè)sprite

再創(chuàng)建一個(gè)sprite作為子物體type選為filled。作為技能cd的那個(gè)遮罩。再用一個(gè)腳本來(lái)控制遮罩的運(yùn)作。大體就是這樣。

如圖：

代碼：

using System.Collections; using System.Collections.Generic; using UnityEngine;public class skill : MonoBehaviour {public float coldTime = 2;//private bool isCanRelease = true;private UISprite sprite;private bool startCold = false; // Use this for initialization void Awake () {sprite = transform.Find("Sprite").GetComponent<UISprite>(); } // Update is called once per frame void Update () {if (Input.GetKeyDown(KeyCode.Q)&&!startCold){//釋放技能//創(chuàng)建粒子系統(tǒng) 顯示技能特效//顯示ui技能冷卻效果sprite.fillAmount = 1;startCold = true;}if (startCold){sprite.fillAmount -= (1f / coldTime) * Time.deltaTime;if (sprite.fillAmount<=0.05f){startCold = false;sprite.fillAmount = 0;}} } }

掛到這里就好了。

然后就可以了。

注冊(cè)頁(yè)面簡(jiǎn)易demo

首先，這是這個(gè)簡(jiǎn)易demo的層級(jí)結(jié)構(gòu)：

首先，我們可以看到，有四個(gè)類似輸入框的東西，那個(gè)是uisprite掛上uiinput之后，再加個(gè)label上去，然后再指定uiinput的label所制成的一個(gè)輸入文本，說(shuō)起來(lái)很復(fù)雜。

其實(shí)就是給sprite掛上一個(gè)uiinput腳本，然后指定一下label用于顯示就可以了。

值得一提的是，這里還可以有簡(jiǎn)易的輸入驗(yàn)證，再uiinput那里選定validation的類型就可以了。

不過(guò)，由于有點(diǎn)不夠完善，大部分都是還是要自己寫驗(yàn)證的。

所以，跟著教程，我也是寫了一個(gè)驗(yàn)證年齡的腳本。

代碼：

using System.Collections; using System.Collections.Generic; using UnityEngine;public class AgeLimit : MonoBehaviour {private UIInput input;// Use this for initializationvoid Awake () {input = this.GetComponent<UIInput>();}// Update is called once per framepublic void OnAgeValueChange(){string value = input.value;//轉(zhuǎn)一下類型int valueInt = int.Parse(value);if (valueInt<18){input.value = "18";}if (valueInt >120){input.value = "120";}} }

但是這樣寫完之后，還不行。

還要做以下一點(diǎn)小小的設(shè)置：

可以看出，onsubmit的時(shí)候通知了agelimit的OnAgeValueChang方法。

然后onReturnKey那里也變成了submit。也就是說(shuō)，按回車就會(huì)有發(fā)送，發(fā)送就會(huì)檢查。

所以，這個(gè)小demo也完成了。

可拖拽窗口控件

這個(gè)倒是意外的簡(jiǎn)單啊，也可以運(yùn)用到ngui里面很多控件上面去。

首先，創(chuàng)建個(gè)sprite，在創(chuàng)建一個(gè)sprite用來(lái)做拖放的指標(biāo)。

然后就是掛腳本和設(shè)置之類的了。

順序如下：

首先，把外層的sprite掛上UI DragObject的腳本。

然后，把內(nèi)層的sprite掛上 UI DragResize腳本。

最后，指定UI DragResize的target。

如圖：

創(chuàng)建滾動(dòng)條

其實(shí)到這里，大家也都差不多知道了，這個(gè)ngui的使用方式有很多都是一樣的。

這里創(chuàng)建滾動(dòng)條也是差不多的。

首先，我們先創(chuàng)建一個(gè)sprite。取名為back。

然后在這個(gè)sprite下面再創(chuàng)建一個(gè)sprite取名為fore，把fore的大小調(diào)整到與back差不多，然后把fore的anchor弄好。

為什么要大小弄的差不多才開(kāi)始調(diào)整anchor呢？

因?yàn)槿绻畈欢嗟脑?#xff0c;系統(tǒng)會(huì)自動(dòng)識(shí)別對(duì)齊的錨點(diǎn)，就不用自己一個(gè)個(gè)再點(diǎn)了。

如圖

接下來(lái)，將back attach一個(gè)boxcolider然后掛上腳本scrollbar script

最后在指定一下。

如圖：

聊天系統(tǒng)demo

首先，這是總體結(jié)構(gòu)

首先，先創(chuàng)建一個(gè)背景。

給背景加上boxcolider，然后加上一個(gè)可拖拽的腳本。

并指定背景為target。

在bg下面創(chuàng)建一個(gè)resizebutton

resizebutton同樣是要加上boxcolider

然后掛上dragresize，指定target為bg的話，這樣就能用這個(gè)sprite來(lái)控制整個(gè)背景的大小了。

這種方式幾乎可以用在所有的ui控件上面。

需要注意的是，這bg并不是黃色那塊背景。

現(xiàn)在要弄的是黃色那塊背景--chatBg

創(chuàng)建一個(gè)sprite，然后選一個(gè)圖片。

然后做自適應(yīng)（自適應(yīng)就是把a(bǔ)nchor的錨點(diǎn)弄一下）

然后再chatBg下面創(chuàng)建一個(gè)label，把這個(gè)label掛上textlist的腳本。這樣就可以顯示多行了。另外，也要指定一下textlist的各種設(shè)置。

如圖

Textlabel的意思就是字顯示的地方。

Scrollbar，顧名思義就是滾動(dòng)條，跟上面所說(shuō)的滾動(dòng)條差不多，只是背景顏色變了一下，變的更加顯眼了而已。

Style有兩種，一種是text，一種是chat。Chat就是像微信聊天那樣，從下面開(kāi)始一條條蹦出來(lái)，而text就是自然書寫的樣子，從上面開(kāi)始，一行行慢慢往下走。

Paragraph history就是最大的段落行數(shù)，上面設(shè)置的是50，這個(gè)可以按照實(shí)際情況來(lái)。

接下來(lái)也是幫這兩個(gè)新建的ui組件做一下自適應(yīng)。

Ps：由于每個(gè)新建的ui組件都要做自適應(yīng)，下面也就不做贅述。

滾動(dòng)條也沒(méi)什么好說(shuō)的，這個(gè)滾動(dòng)條是我直接從上面的案例那里拿過(guò)來(lái)的。

接下來(lái)介紹一下輸入框。

這個(gè)輸入框，我用的是ngui里面做好的prefab，叫simple input field，輸入框也沒(méi)什么好說(shuō)的。

說(shuō)一下腳本。

詳細(xì)看腳本注釋。

using?System.Collections;

using?System.Collections.Generic;

using?UnityEngine;

public?class?MyChatIntput?:MonoBehaviour?{

????//獲取到輸入框

????private?UIInput?input;

????//再用public拖動(dòng)的方式來(lái)指定bg里面的textlist

????public?UITextList?textlist;

????//這個(gè)是名字

????private?string[] names =new?string[4]

????{

????????"ys",

????????"李雷",

?????????"王重",

??????????"林三酒",

????};

// Use this for initialization

void?Awake?() {

????????//然后這里是初始化

????????input = GetComponent<UIInput>();

}

// Update is called once per frame

????public?void?onChatSubmit()

????{

????????//這個(gè)方法的作用就是把輸入框的字獲取到，然后加到textlist上面去，之后在每句話前面加一個(gè)隨機(jī)的名字，這樣就有一種好像很多個(gè)人在說(shuō)話

????????//起到一種自欺欺人的效果，美哉

????????string?username = names[Random.Range(0,4)];

????????string?chatMessage = input.value;

????????textlist.Add(username +" : "+chatMessage);

????????input.value = "";

????}

}

最后成功的樣子：

--------------------------------------------------------------------------2017.10.27-------------------------------------------------------------------------

簡(jiǎn)易背包demo

這個(gè)簡(jiǎn)易的背包demo，到最后我還是有幾個(gè)問(wèn)題解決不了，希望路過(guò)的大神能教教我。

問(wèn)題如下:

1、在兩個(gè)物體交換的時(shí)候，有時(shí)候會(huì)像這樣卡著

首先先看下搭建完成的樣子

而這下面是運(yùn)行的樣子：

然后再說(shuō)說(shuō)制作過(guò)程

1.先搭建好背包的樣子，一個(gè)背景sprite名為knapack_bg，還有背包的格子也要搭建好。

2.給背包格子加上boxcolider

3.給物品加上boxcolider并做成prefab。

4.給knapack_bg掛上腳本，腳本內(nèi)容為：

using?System.Collections;

using?System.Collections.Generic;

using?UnityEngine;

public?class?Knapsack?:MonoBehaviour?{

????public?GameObject[] cells;

????public?string[] EquipmentNames;

????public?GameObject?item;

?????void?Update()

????{

????????if?(Input.GetKeyDown(KeyCode.X))

????????{

????????????PickUp();

????????}

????}

????public?void?PickUp()

????{

????????bool?isFind = false;

????????int?index = Random.Range(0,EquipmentNames.Length);

????????string?names = EquipmentNames[index];

????????for?(int?i= 0;i<cells.Length;i++)

????????{

????????????if?(cells[i].transform.childCount>0) {

???????????????KnapsackItem?item = ?cells[i].GetComponentInChildren<KnapsackItem>();

????????????????if?(item.sprite.spriteName == names)

????????????????{

????????????????????isFind = true;

????????????????????item.AddCount();

????????????????????break;

????????????????}

????????????}

????????}

????????if?(isFind==false) {

????????????for?(int?i = 0; i < cells.Length; i++)

????????????{

????????????????if?(cells[i].transform.childCount == 0)

????????????????{

????????????????????//當(dāng)前格子沒(méi)有物體

????????????????????//添加新?lián)炱饋?lái)的物體

????????????????????GameObject?go =NGUITools.AddChild(cells[i], item);

????????????????????go.GetComponent<UISprite>().spriteName = names;

????????????????????go.transform.localPosition = Vector3.zero;

????????????????????break;

????????????????}

????????????}

????????}

????}

}

可以看出來(lái)，該腳本的主要內(nèi)容為往背包格子里面隨機(jī)添加物品。

需要注意的是，還要設(shè)置好相關(guān)的東西。

如圖：

然后就完成了。

HUDTEXT

Hudtext的簡(jiǎn)單應(yīng)用效果：

可以看的出來(lái)，就像游戲里面人物掉血的樣子。

要實(shí)現(xiàn)起來(lái)也非常簡(jiǎn)單，根本不用寫什么東西，因?yàn)檫@個(gè)插件都弄好了，我們調(diào)用一下就可以了。

首先，在場(chǎng)景創(chuàng)建一個(gè)空的游戲物體，掛上hudtext的腳本，取名為hudtext以作區(qū)別。接下來(lái)，創(chuàng)建一個(gè)cube，在cube上方一點(diǎn)點(diǎn)，創(chuàng)建一個(gè)空的游戲物體，給hudtext掛上一個(gè)UI Follow Target，如下圖設(shè)置好：

然后在cube那里創(chuàng)建一個(gè)腳本：

public?class?HudTest?:MonoBehaviour?{

????public?HUDText?text;

// Use this for initialization

// Update is called once per frame

void?Update?() {

????????if?(Input.GetKeyDown(KeyCode.A))

????????{

???????????

????????????text.Add(-10,Color.red,1f);

????????}

????????if?(Input.GetKeyDown(KeyCode.Space))

????????{

????????????text.Add(+10, Color.green, 1f);

????????}

}

指定一下HUDTEXT.

就完成了。

最后，教程到這里就結(jié)束了，我也不知道還能有什么東西做，也只能這個(gè)ngui融入到自己以后做的東西里面了。

總結(jié)

以上是生活随笔為你收集整理的NGUI学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

NGUI