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 initialization
void Awake () {
input = this.GetComponent<UIInput>();
}
// Update is called once per frame
public 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融入到自己以后做的东西里面了。