NGUI学习
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)畫(huà)
?
Tween動(dòng)畫(huà)我感覺(jué)類(lèi)似于網(wǎng)頁(yè)的一個(gè)東西。
?
功能都有這些，可以給各個(gè)ui控件做位移，旋轉(zhuǎn)，縮放，顏色什么的之類(lèi)的操作。
?
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)，字體什么的也要注意一下，如果有中文的話(huà)，就要選擇支持中文的字體。
還要在加個(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)畫(huà)。
先給start掛上tweenposition的動(dòng)畫(huà)。
?
?
?
效果是會(huì)把這個(gè)界面往左移出屏幕。
接下來(lái)是也要給option掛上tweenposition的動(dòng)畫(huà)。
?
效果是這個(gè)界面往左移進(jìn)屏幕。
把設(shè)置按鈕掛上通知腳本的方法：
?
?
?
另外一個(gè)按鈕也掛上：
?
?
?
最后在腳本里面寫(xiě)一下這兩個(gè)方法播放tween動(dòng)畫(huà)的代碼，就可以了。
如圖：
順帶一提PlayReverse()這個(gè)方法的意思是反向播放動(dòng)畫(huà)。
這樣，一個(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è)類(lèi)似輸入框的東西，那個(gè)是uisprite掛上uiinput之后，再加個(gè)label上去，然后再指定uiinput的label所制成的一個(gè)輸入文本，說(shuō)起來(lái)很復(fù)雜。
其實(shí)就是給sprite掛上一個(gè)uiinput腳本，然后指定一下label用于顯示就可以了。
值得一提的是，這里還可以有簡(jiǎn)易的輸入驗(yàn)證，再u(mài)iinput那里選定validation的類(lèi)型就可以了。
不過(guò)，由于有點(diǎn)不夠完善，大部分都是還是要自己寫(xiě)驗(yàn)證的。
所以，跟著教程，我也是寫(xiě)了一個(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)一下類(lèi)型int valueInt = int.Parse(value);if (valueInt<18){input.value = "18";}if (valueInt >120){input.value = "120";}} }?
?
?
但是這樣寫(xiě)完之后，還不行。
還要做以下一點(diǎn)小小的設(shè)置：
?
?
?
可以看出，onsubmit的時(shí)候通知了agelimit的OnAgeValueChang方法。
然后onReturnKey那里也變成了submit。也就是說(shuō)，按回車(chē)就會(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è)置之類(lèi)的了。
?
順序如下：
首先，把外層的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)槿绻畈欢嗟脑?huà)，系統(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的話(huà)，這樣就能用這個(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就是自然書(shū)寫(xiě)的樣子，從上面開(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上面去，之后在每句話(huà)前面加一個(gè)隨機(jī)的名字，這樣就有一種好像很多個(gè)人在說(shuō)話(huà)
????????//起到一種自欺欺人的效果，美哉
????????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)單，根本不用寫(xiě)什么東西，因?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é)
- 上一篇： 功率电感选型
- 下一篇： 睡眠的最佳时长是多久？