NGUI学习
Uiroot是所有ui的根，必須先創建。
?
Label
?
Label fonts overflow
shrink content:
默認的隨著邊框變化而變化的文本內容
ClampContent：
把多余的減掉
Resizefreely：
文字和邊框強制保持一致。
resizeHeight:
可以調節寬度，高度與文字保持一致。
?
Label fonts alignment
對齊
?
?
Panel
Clipping soft-clip
根據限定的范圍顯示panel里面的內容
?
Clipping contrain-but-dont-clip
限定panel的范圍但仍然顯示超出的內容
?
Button
做label的按鈕，先要給label加上boxcolider。然后就attach一個button script。
?
?
這個東西需要在做圖片按鈕的時候用到 Altas--wooden altas
但是這里并沒有解釋為什么用這個東西。還有這個是什么意思。
上網查了一下，應該是，圖集的意思。不太懂。
?
事件響應：
首先先吧button弄好，然后腳本弄好，
?
在uibutton下面這個onclick是指定方法的地方，這個notify是指定掛載腳本的地方，比如我把控制這兩個按鈕的腳本放在了maincamera上面，那么這個notify就是maincamera。
?
像這樣，掛上去就可以使用了。
?
靜態字體與動態字體
上次創建動態字體的時候，fontmaker出現了問題，解決不了，最后還是創建一個空的對象，然后掛載ngui的字體腳本上去弄出來了，但是用這種方式做出來的動態字體不知道缺陷是什么。
靜態字體相當于有一千個字，然后把這一千個字都做成一個圖集。但存量有限。
?
widget屬性 pivot depth和size
Privot 就是中心點的位置，可以調節
Depth就是深度，數值越大越靠前。
?
?
Anchor
?---------------------------------------2016.7.29-----------------
利用anchor做的背景圖片和相機相同大小自適應：
把anchor的type改為unified。
Left改為targetsleft。
Right改為targetright。
Bottom和top同樣。
然后left，right，bottom，top全部置為0。
?
?
利用anchor做的小地圖自適應
?
?
?
Tween動畫
?
Tween動畫我感覺類似于網頁的一個東西。
?
功能都有這些，可以給各個ui控件做位移，旋轉，縮放，顏色什么的之類的操作。
?
Slider
就是做一個滑動條的東西。
加上box colider 加上slider script 就可以做呈這樣一個滑動條，另外ngui也有做好的prefab。
?
?
?
Popuplist
顧名思義，這就是做一個彈出列表的東西，跟上面的滑動條也差不多，加一個box colider
再加一個popuplist再進行相應的設置即可。
需要注意的是，要在這個物體上面加一個label來顯示選中的選項，字體什么的也要注意一下，如果有中文的話，就要選擇支持中文的字體。
還要在加個方法監聽在label上面。
?
Checkbox
單選框，具體操作也跟上面的差不多。
先加boxcolider，再加toggle script。
具體就是，點擊掛載了togglescript的物體的時候，顯示設定好的第二張圖片，這張圖片是自己設定的。
?
?
?
?
根據教程，利用checkbox,popuplist,slider做出來的一個游戲設置界面：
-----------2016.7.31-------------
?
接下來，就是參數傳值什么的了。
參數傳值的做法：
利用UIPopupList.current.value.Trim()
UIToggle.current.value;
獲取到ui控件的值，然后反饋到腳本里面。保存起來。
像這樣：
????public?void?onGameGradeChanged()
????{
????????switch?(UIPopupList.current.value.Trim())
????????{
????????????case?"簡單":
????????????????grade = GameGrade.EASY;
????????????????break;
????????????case?"一般":
????????????????grade = GameGrade.NORMAL;
????????????????break;
????????????case?"困難":
????????????????grade = GameGrade.DIFFCULTY;
????????????????break;
????????}
????????print("onGameGradeChanged"+UIPopupList.current.value);
}
然后記得
?
?
?
兩個下拉列表，一個單選框，大概都是這樣的操作。
?
然后開始做界面切換的動畫。
先給start掛上tweenposition的動畫。
?
?
?
效果是會把這個界面往左移出屏幕。
接下來是也要給option掛上tweenposition的動畫。
?
效果是這個界面往左移進屏幕。
把設置按鈕掛上通知腳本的方法：
?
?
?
另外一個按鈕也掛上：
?
?
?
最后在腳本里面寫一下這兩個方法播放tween動畫的代碼，就可以了。
如圖：
順帶一提PlayReverse()這個方法的意思是反向播放動畫。
這樣，一個游戲菜單的小demo就完成了。
--------------------------2016.8.3---------------
?
技能cd
創建一個sprite
再創建一個sprite作為子物體type選為filled。作為技能cd的那個遮罩。再用一個腳本來控制遮罩的運作。大體就是這樣。
如圖：
?
?
?
代碼：
?
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){//釋放技能//創建粒子系統 顯示技能特效//顯示ui技能冷卻效果sprite.fillAmount = 1;startCold = true;}if (startCold){sprite.fillAmount -= (1f / coldTime) * Time.deltaTime;if (sprite.fillAmount<=0.05f){startCold = false;sprite.fillAmount = 0;}} } }?
?
?
掛到這里就好了。
?
?
?
然后就可以了。
?
?
?
?
注冊頁面簡易demo
首先，這是這個簡易demo的層級結構：
?
?
?
首先，我們可以看到，有四個類似輸入框的東西，那個是uisprite掛上uiinput之后，再加個label上去，然后再指定uiinput的label所制成的一個輸入文本，說起來很復雜。
其實就是給sprite掛上一個uiinput腳本，然后指定一下label用于顯示就可以了。
值得一提的是，這里還可以有簡易的輸入驗證，再uiinput那里選定validation的類型就可以了。
不過，由于有點不夠完善，大部分都是還是要自己寫驗證的。
所以，跟著教程，我也是寫了一個驗證年齡的腳本。
代碼：
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;//轉一下類型int valueInt = int.Parse(value);if (valueInt<18){input.value = "18";}if (valueInt >120){input.value = "120";}} }?
?
?
但是這樣寫完之后，還不行。
還要做以下一點小小的設置：
?
?
?
可以看出，onsubmit的時候通知了agelimit的OnAgeValueChang方法。
然后onReturnKey那里也變成了submit。也就是說，按回車就會有發送，發送就會檢查。
所以，這個小demo也完成了。
?
?
可拖拽窗口控件
這個倒是意外的簡單啊，也可以運用到ngui里面很多控件上面去。
首先，創建個sprite，在創建一個sprite用來做拖放的指標。
?
然后就是掛腳本和設置之類的了。
?
順序如下：
首先，把外層的sprite掛上UI DragObject的腳本。
然后，把內層的sprite掛上 UI DragResize腳本。
最后，指定UI DragResize的target。
如圖：
?
?
創建滾動條
其實到這里，大家也都差不多知道了，這個ngui的使用方式有很多都是一樣的。
這里創建滾動條也是差不多的。
首先，我們先創建一個sprite。取名為back。
?
然后在這個sprite下面再創建一個sprite取名為fore，把fore的大小調整到與back差不多，然后把fore的anchor弄好。
為什么要大小弄的差不多才開始調整anchor呢？
因為如果差不多的話，系統會自動識別對齊的錨點，就不用自己一個個再點了。
如圖
?
?
?
接下來，將back attach一個boxcolider然后掛上腳本scrollbar script
最后在指定一下。
如圖：
?
?
?
聊天系統demo
首先，這是總體結構
?
首先，先創建一個背景。
?
給背景加上boxcolider，然后加上一個可拖拽的腳本。
并指定背景為target。
?
?
?
在bg下面創建一個resizebutton
?
?
?
resizebutton同樣是要加上boxcolider
然后掛上dragresize，指定target為bg的話，這樣就能用這個sprite來控制整個背景的大小了。
這種方式幾乎可以用在所有的ui控件上面。
需要注意的是，這bg并不是黃色那塊背景。
現在要弄的是黃色那塊背景--chatBg
創建一個sprite，然后選一個圖片。
然后做自適應（自適應就是把anchor的錨點弄一下）
然后再chatBg下面創建一個label，把這個label掛上textlist的腳本。這樣就可以顯示多行了。另外，也要指定一下textlist的各種設置。
如圖
?
?
?
Textlabel的意思就是字顯示的地方。
Scrollbar，顧名思義就是滾動條，跟上面所說的滾動條差不多，只是背景顏色變了一下，變的更加顯眼了而已。
Style有兩種，一種是text，一種是chat。Chat就是像微信聊天那樣，從下面開始一條條蹦出來，而text就是自然書寫的樣子，從上面開始，一行行慢慢往下走。
Paragraph history就是最大的段落行數，上面設置的是50，這個可以按照實際情況來。
接下來也是幫這兩個新建的ui組件做一下自適應。
Ps：由于每個新建的ui組件都要做自適應，下面也就不做贅述。
滾動條也沒什么好說的，這個滾動條是我直接從上面的案例那里拿過來的。
接下來介紹一下輸入框。
這個輸入框，我用的是ngui里面做好的prefab，叫simple input field，輸入框也沒什么好說的。
說一下腳本。
詳細看腳本注釋。
using?System.Collections;
using?System.Collections.Generic;
using?UnityEngine;
?
public?class?MyChatIntput?:MonoBehaviour?{
????//獲取到輸入框
????private?UIInput?input;
????//再用public拖動的方式來指定bg里面的textlist
????public?UITextList?textlist;
????//這個是名字
????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()
????{
????????//這個方法的作用就是把輸入框的字獲取到，然后加到textlist上面去，之后在每句話前面加一個隨機的名字，這樣就有一種好像很多個人在說話
????????//起到一種自欺欺人的效果，美哉
????????string?username = names[Random.Range(0,4)];
????????string?chatMessage = input.value;
????????textlist.Add(username +" : "+chatMessage);
????????input.value = "";
????}
}
最后成功的樣子：
--------------------------------------------------------------------------2017.10.27-------------------------------------------------------------------------
?
簡易背包demo
這個簡易的背包demo，到最后我還是有幾個問題解決不了，希望路過的大神能教教我。
問題如下:
1、在兩個物體交換的時候，有時候會像這樣卡著
?
?
?
首先 先看下搭建完成的樣子
?
而這下面是運行的樣子：
?
然后再說說制作過程
?
?
1.先搭建好背包的樣子，一個背景sprite名為knapack_bg，還有背包的格子也要搭建好。
2.給背包格子加上boxcolider
3.給物品加上boxcolider并做成prefab。
4.給knapack_bg掛上腳本，腳本內容為：
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)
????????????????{
????????????????????//當前格子沒有物體
????????????????????//添加新撿起來的物體
????????????????????GameObject?go =NGUITools.AddChild(cells[i], item);
????????????????????go.GetComponent<UISprite>().spriteName = names;
????????????????????go.transform.localPosition = Vector3.zero;
????????????????????break;
????????????????}
????????????}
????????}
????}
}
?
可以看出來，該腳本的主要內容為往背包格子里面隨機添加物品。
需要注意的是，還要設置好相關的東西。
如圖：
然后就完成了。
HUDTEXT
Hudtext的簡單應用效果：
?
?
?
可以看的出來，就像游戲里面人物掉血的樣子。
要實現起來也非常簡單，根本不用寫什么東西，因為這個插件都弄好了，我們調用一下就可以了。
首先，在場景創建一個空的游戲物體，掛上hudtext的腳本，取名為hudtext以作區別。接下來，創建一個cube，在cube上方一點點，創建一個空的游戲物體，給hudtext掛上一個UI Follow Target，如下圖設置好：
?
?
?
然后在cube那里創建一個腳本：
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.
就完成了。
?
?
?
最后，教程到這里就結束了，我也不知道還能有什么東西做，也只能這個ngui融入到自己以后做的東西里面了。
?
總結
- 上一篇： 功率电感选型
- 下一篇： 睡眠的最佳时长是多久？