关于Unity中stretch的分开使用、预制体、Scroll View的UI节点

2023-02-16,,,

一、上次讲的菊花的四个花瓣,只讲了四个花瓣和在一起的时候的作用,现在是分开的菊花的四个花瓣的作用

1.创建一个Canvas
2.对Canvas进行初始化
3.创建一个Image的UI节点作为Canvas的子节点,名字叫bg。
4.再创建一个GameObject的空节点作为Canvas的子节点。
5.在GameObject下面创建一个叫icon的Image类型的UI子节点
6.把icon的颜色改为红色便于观察,大小改为300X300
点击左上角的stretch,图案选择最右下角的四个花瓣对应四个角的状态,
7.菊花花瓣的作用是父亲节点GameObject伸缩多少,子节点icon就伸缩多少,四个角的偏移量不会变化,相对距离不变。就是子节点在四个花瓣的作用下跟着父节点伸缩。
8.如果上面中间两块花瓣,下面中间两块花瓣,那么父节点伸缩的时候,上下缩的话,子节点也上下缩,左右缩的时候,子节点不会缩。

二、预制
模板,有的时候,一个小兵要生成10个,需要一个模板
1.创建一个Canvas
2.对Canvas进行初始化
3.创建一个image的UI节点作为Canvas的子节点,名字叫item.
4.在Resources文件夹下面创建一个文件夹叫做prefabs
5.直接把item拖进prefabs文件夹中
6.发现会自动生成一个预制体,原来的item节点也会变成蓝色
7.这时候修改Hierachy下的item节点,预制体也会发生变化,修改之后记得点右上角的Apply
8.Revert表示预制体覆盖回节点,但是修改Rect Transform中的属性是无法Revert的。Apply是从节点再保存回预制体
9.如果想断开这种连接关系,选中节点-->菜单-->GameObject-->Break Prefab Instance
修改预制体,所有与它相关的节点都被修改,除非断开连接,这时候修改预制体,节点不会跟着变,但是一旦点击Revert或者Apply都会重新建立连接

预制体也是节点的一个复制
使用代码实例化预制体
1.写一个叫game_scane的脚本,挂载到Canvas节点上
2.定义脚本中的public属性,public GameObject item_prefab
3.把预制体拖进Hierachy面板的game_scane脚本的item_prefab属性上

public class game_scene : MonoBehaviour {
public GameObject item_prefab; // Use this for initialization
void Start () {
GameObject item = GameObject.Instantiate(this.item_prefab);//以预设体为模板实例化一个物体
item.transform.SetParent(this.transform);//放在正确的父节点下,不写这个会放根节点下
item.transform.localPosition = new Vector3(, , ); //设置坐标
}
}

三、Scroll View节点

1.创建一个Canvas
2.对Canvas进行初始化
3.创建一个Image的UI节点作为Canvas的子节点,名字叫bg。
4.创建一个Scroll View的UI节点在Canvas下作为子节点
5.Scroll View节点下面的Viewport子节点,Viewport子节点有一个Mask组件用来裁剪其子节点的显示范围,Viewport就相当于一个蒙版
6.Viewport节点下面有一个Content节点用来存放内容
7.Scrollbar Horizontal和Scrollbar Vertical是Scroll View的子节点,表示拉条。
8.在Content下面创建多个Imgae的UI子节点,把同一张图片依次拖进去
9.给Content一个排版的脚本,这里用Grid
10.发现运行后可以上下或者左右拖动Content中间的内容,这是因为在Scroll View节点的scroll rect属性面板勾选了Horizontal和Vertical,表示允许横拉和纵拉。
11.有的时候上下拖动不了,是因为Content的高度太小,图片的高度加起来比Content的高度大,修改一下Content的高度就好了,用计算器算出Content的高度。
12.Scrollbar关联的时候不能隐藏,可以直接删除。关联的方式是直接把Scrollbar节点拖进Scroll View的scroll rect的Scrollbar属性里

制作一个排行榜
1.创建一个Canvas
2.对Canvas进行初始化
3.创建一个Image的UI节点作为Canvas的子节点,名字叫bg。
4.创建一个叫rank的Scroll View的UI节点在Canvas下作为子节点
5.给rank一个排行榜的背景图片
6.在rank下面创建一个子Image节点叫tital,用来显示分数排行的标题图片
7.背景图片要在rank节点外面放好了就行了,最好是比rank大一点,可以给rank的Image一个颜色,再隐藏这个Image组件
8.在rank再创建一个rank_option的子节点,类型是Image
9.在rank_option的子节点下面再创建一个mask的子节点用来放头像的裁剪蒙版节点,记得要加上Mask裁剪组件和拖进裁剪贴纸。
10.在Mask节点下面再创建一个叫avator的Image节点用来表示放头像图片。这时候发现没有裁剪成功,是因为没有运行的原因,运行起来,头像就裁剪了。
11.在mask上面再创建一个空的父节点,在这个空的父节点下面创建一个Image类型的节点用来显示相框图片。
12.在rank_option子节点下面创建一个Image类型的UI节点用来放分割线,叫slice_line
13.在rank_option子节点下面创建一个Text类型的UI节点叫unick
14.把整个rank_option节点拖到预制体文件夹prefabs中,可以把空节点的Iamge组件隐藏起来,就可以去掉白色区域了。
15.给rank节点的Content加一个排版的组件grid,一般都是用grid,等一下要弄很多rank_option节点进来
16.用代码实现rank_option节点的实例化和批量添加和摆放

public class game_scene : MonoBehaviour {
public GameObject item_prefab;
public GameObject rank_prefab;
public ScrollRect rank;
// Use this for initialization
void Start () {
// rect transorm
this.rank.content.sizeDelta = new Vector2(, * ); for (int i = ; i < ; i++) {
GameObject opt = GameObject.Instantiate(this.rank_prefab);
opt.transform.SetParent(this.rank.content);
opt.transform.Find("unick").GetComponent<Text>().text = "" + (i + );
}
}
}

关于Unity中stretch的分开使用、预制体、Scroll View的UI节点的相关教程结束。

《关于Unity中stretch的分开使用、预制体、Scroll View的UI节点.doc》

下载本文的Word格式文档,以方便收藏与打印。