本篇只记录我个人觉得有难度,有用的知识点,也因为是写给自己看的,所以对于排版没有什么讲究!

第一章:用户的注册与登录的UI界面

UI界面一共五个面板,开始面板登录面板注册并登录面板服务器面板确定人物选择面板选择人物面板!!!

其中《开始面板》、《登录面板》、《注册面板》、《确定人物选择面板》,并没有什么难度,所以不进行叙述!
而面板之间的切换,也只是在每个面板中添加 NGUI 的 TweenScale 脚本,然后在脚本中写监听事件给面板的 Button 来进行切换!

1. 服务器面板:

红圈处就是我们要生成服务器的地方。
这里需要用动态列表生成
首先需要创建三个 panel(Slide-list-Frame、List、Grid) 和一个 Scrollbar

Slide-list-Frame、List、Grid 的Transform都在红圈内的!
《Slide-list-Frame》 添加 Scroll Rect 组件
《List》 添加 Mask 组件

目的: Scroll Rect 通常是和 Mask 组件一起使用的。 Mask 组件的功能是使滑动到 Scroll Rect 指定区域之外的内容隐藏。
ShowMaskGraphic: 决定了是否显示原 Image 纹理。若去掉勾选,则 Image 只被用作裁剪区域的选取之用,不会被渲染出来
通俗点说就是:勾选就显示 Image,不勾选就不显示 Image

以下是加 Mask 与没加 Mask 的区别:


ScrollRect 组件的参数:
Content: 滑动的内容,也就是 Grid ,因为将在该物体下生成服务器(预制体)

Horizontal: 水平滑动

Vertical : 垂直滑动 (这里只需要垂直滑动,所以只勾选 Vertical)

Movement Type : 滑动状态

**unrestricted:** 没有回弹效果,实现效果非常生硬(具体自己可以测下,语言表达能力有限)  **Elastic :** 最理想的滑动,有回弹 有摩擦力  **Clamped:** 无滑动**Elasticity:** 回弹的时间,越大越慢回到原来的位置

Inertia : 滑动结束时是否拥有惯性移动,为ture时会以Deceleration-Rate的值作为惯性的量!(勾上之后,滑动会顺畅很多)

**Decelaration-Rate:** 正常值为0 – 1 , 该值大于等于1时则永远不会减速,除非到达边界**Scroll Sensitivity:** 对于鼠标滚动轮或触控板的敏感度,该值越大,对鼠标滑轮的滚动反应越大,可以自行测试,对手指滑动和鼠标拖动影

响不大(目前未看到明显影响);

Viewport: ScrollRect的可见视窗。其实就是指向一个有 Mask 组件的游戏对象。

HorizontalScrollbar、VerticalScrollbar: 分别对应横向的滑动控制条以及纵向的滑动控制条.

OnValueChanged(Vector2 ): 一个滚动回调。可以传递一个Vector2变量。 应该是每一帧滑动的变化量。(具体不清楚)

空一行,看的没那么累

最后在 Grid 添加 Content-Size-Fitter、Grid-Layout-Group 组件

Content-Size-Fitter:
使用 Content Size Fitter 组件,Rect-Transform 组件会发生响应的变化!!!
Horizontal-Fit 不为 Unconstrained 时,Width 不可修改,同理,Vertical-Fit 不为 Unconstrained 时,Height 不可修改!!!

Content-Size-Fitter 组件主要是用来设置UI的长宽

Content-Size-Fitter 参数:
Horizontal-Fit、Vertical-Fit: 分别是控制UI的宽和高,

Unconstrained: 组件不根据布局元素调整 ,可手动修改长宽的值

MinSize: 根据布局元素的最小值来调整,不能手动修改长宽的值

PreferredSize: 根据布局元素的内容来调整,不能手动修改长宽的值,也就是会自动根据内容来调整大小


(因为我们的列表是垂直的,所以将 Vertical-Fit 设置为 Preferred-Size ,这样的话,就算我们生成 100 个服务器(预制体),他也会自行调整长度)

Grid-Layout-Group

Grid-Layout-Group 的参数:
padding: 矩形偏移

Left、Right、Top、Bottom 分别对应 左边缘、右边缘、顶边缘、底边缘,具体效果自己测试,不过看名称都能理解的

Cell-Size: Vector2类型,默认值为(100,100),网格中的每个单元格的大小
像生成的服务器(预制体),他们的大小是(587,90),所以这里也就设置为 X(587)、Y(90),保证生成出来的服务器保持正常大小

Spacing: 这里的Spacing不同于水平布局、垂直布局,是Vector2类型,既然是网格布局,当然存在水平方向的间隔和垂直方向的间隔
例如我希望服务器与服务器的上下左右之间,保持一定距离,所以这里设置 X(10)、Y(10)

Start-Corner: 第一个单元格放在哪个角落,默认为 Upper-Left 左上角
《Upper-Left》、《Upper-Right》、《Lower-Left》、《Lower-Right》分别对应 左上角、右上角、左下角、右下角!!
这里我把第一单元格生成的位置设置成 Upper-Left!

Start-Axis: 设置你的优先排列单元格的方向,Horizontal(水平)、Vertical(垂直)
因为要 服务器(预制体)要 一排两个 这样生成,所以优先 Horizontal !!

Child-Alignment: 文本锚点
《UpperLeft 》《UpperCenter 》《UpperRight 》《MiddleLeft 》《MiddleCenter》《MiddleRight 》《LowerLeft 》《LowerCenter 》分别对应 上左、上中、上右、中左、中中、中右、下左、下中、下右
这里对于描点位置没有特殊要求,而有关描点的知识,另找

Constraint: 设置网格的行数、列数

Flexible: 不限制行数和列数

FixedColumnCount: 约束指定数量的列数

FixedRowCount: 约束指定数量的行数

空一行,看的没那么累

最后是当我点击绿圈的哪个服务器,红圈就显示哪个服务器!
方法:给服务器(预制体)添加一个脚本,用于点击事件,当我们点击哪个服务器,就将服务器的 Image.sprite、text.text 换成红圈 服务器的 Image.sprite、text.text
代码部分:

 public void OnPress(){if (audioClip != audioClip.isPlaying) audioClip.Play();//选择了 当前的服务器StartmenuController._instance.gameObject.SendMessage("OnServerSelect", this.gameObject, SendMessageOptions.RequireReceiver);}

服务器的 Image.sprite、text.text 的更换给《StartMenuController》脚本来处理,而服务器的脚本仅仅只是用于点击事件!

public void OnServerSelect(GameObject serverGo){sp = serverGo.GetComponent<ServerProperty>();serverSelectedGO.GetComponent<Image>().sprite = serverGo.GetComponent<Image>().sprite;serverSelectedGO.transform.Find("Text").GetComponent<Text>().text = sp.serverName;}

空一行,看的没那么累

2. 选择人物面板
为了让3D物体在UI界面中可以进行互动,首先在 Hierarchy 面板中创建 RawImage 和 另一个 Camera,然后再到 Project 面板中创建 RebderTextTure。
RawImage:
RawImage 是将 Camera 记录的渲染纹理,赋值给 RawImage ,用于显示3D图像。
一般 RawImage 的大小跟 UI面板一致,除非有特殊要求 大小自己设置。

Camera:
将摄影机的 Audio-Listener 移除,不然 Console 会报警说场景中存在2个耳朵。

RenderTexture
这里不讨论它的深层含义,只解释它的参数

Dimension: 要渲染纹理的维度(类型)
2D、3D: 没啥好说的
Cube: 最常用于动态 cubemap 反射,见 Camera.RenderToCubemap 。一个 cubemap 渲染纹理必须有相同的宽度和高度,并且必须是两个大小。

Size: 默认是(256,256),通过增大数值可以让显示出现影像更加清晰,但同时性能也消耗越大。

Anti-Aliasing: 渲染纹理的抗锯齿级别。

Color-Forrmat: 渲染纹理的颜色格式。
参数过多,能力有限没法进行一一叙述,
ARGB32: 用于处理静态图片可以,动态渲染太慢
ARGB64: 适合用于动态渲染
Depth-Buffer、SRGB(Color-Render)、Enable-Mip-Maps、Autio-Generate-Mip-M、Dynamic-Scaling、Wrap-Mode、Filter-Mode: 本次项目未用到,就不进行深究。

空一行,看的没那么累

接下来是赋值:
RawImage 覆盖整个UI界面后,给 RawImage 新建一个Layer层级 《UGUI》

RenderTexture 赋值到 RawImageTexture

然后将 RenderTexture 也赋值到 CameraTargetTexture

CameraClear-Flags 设置 Depth-only (其实只要不是 Sky-Box 就行)

还有 Culling-Mask 设置 RawImageLayer《UGUI》

其他都不选,这样就只渲染 RawImage 的影像。

最后就是调3D物体的位置到我们想要的位置(个人觉得将 CameraProjection 设置成 Orthographic 比较好,具体如何自行测试!)

实现的效果:
当我们鼠标点击人物后,该人物就被放大,点击另一个人物也放大,但同时之前的人物就变回原来的大小。
这里我用了笨方法(目前能想到):新建两个 Bottun 覆盖两个模型的影像(当然 Bottun 的透明值调到零),然后,当我点击模型也就是 Botton 就放大被覆盖的模型
这里的模型放大 用了 DoTweenDoScale 进行放大。

代码部分:

  /// <summary>/// 来回切换角色的大小/// </summary>/// <param name="go">点击的角色</param>/// <param name="characterScale">角色原来的大小</param>public void OnCharacterClick(GameObject go, Vector3 characterScale){if (audioClip != audioClip.isPlaying) audioClip.Play(); //点击后,播放音效if (go == characterSelected) return; //当我点击同一个角色的时候,就不进行任何反馈go.transform.DOScale(go.transform.localScale + new Vector3(0.5f, 0.5f, 0.5f), 0.5f);//本代码的实现目的是:当我点击另一个角色,那原来的角色就变回原来的大小。//因为要选择的角色一开始为空, 所以当 characterSelected 为 null , null 又没法进行缩小就会报错//当我点击另一个角色,进行放大,然后characterSelected 也就是之前点击的角色),就进行缩小if (characterSelected != null){characterSelected.transform.DOScale(characterScale, 0.5f); }characterSelected = go;}其中 characterSelected 就是点击后,要选择的角色

实现的效果:

当我们选择好角色并命名后,点击确定,在 《确定人物选择面板》 就显示选择好的角色(名称和登录显示过于简单,不进行叙述)

我的方法是:声明一个数组变量,把两个人物放进去,然后用 for 循环进行遍历,当我选择的角色 和 遍历的角色 一致时,就得到该索引,然后在 《确定人物选择面板》 中设置到的位置,生成出来。并且设该位置的空物体 (characterPos) 为父级,同时人物的 Transform 的位置、旋转都设为原点,大小必须保持跟之前设置好的一样。(先在 Awake 中获得角色的 locaScale ,然后在 《确定人物选择面板》 中生成时,就将模型的大小赋值给生成的预制体),点击返回按钮也一样。 要先将原来的大小赋值给生成的预制体

代码部分:

  /// <summary>/// 选择角色面板中的确定按钮/// </summary>public void OnButtonSure(){if (audioClip != audioClip.isPlaying) audioClip.Play(); //点击后,播放音效//1、判断名称是否输入正确//2、判断是否选择了角色int index = -1;for (int i = 0; i < characterArray.Length; i++){if (characterSelected == characterArray[i]){index = i;break;}}if (index == -1) return;GameObject go = Instantiate(characterArray[index], Vector3.zero, Quaternion.identity);go.transform.SetParent(characterSelectedBoyPos);characterSelectedBoyPos.localScale = characterScale;go.transform.localPosition = Vector3.zero;go.transform.localRotation = Quaternion.identity;go.transform.localScale = Vector3.one;

可这里有一个问题:当我生成好后,在点击 更换角色 时,生成的角色就出现在 《选择人物面板》 中,所以当我点击 更换角色 时,应该将生成的模型进行销毁,但一开始 《确定人物选择面板》 是没有模型可以进行销毁的,所以要判断下 (characterPos) 有没有子物体。

代码部分:

  /// <summary>/// 点击更换角色按钮的方法/// </summary>public void OnButtonCharavterClick(){if (audioClip != audioClip.isPlaying) audioClip.Play(); //点击后,播放音效//当我点击确定按钮,再更换面板中角色将会被销毁if (characterSelectedBoyPos.GetComponentsInChildren<Transform>(true).Length > 1){characterSelectedBoyPos.localScale = Vector3.one;}//当我点击确定按钮,再更换面板中角色将会被销毁if (characterSelectedBoyPos.GetComponentsInChildren<Transform>(true).Length > 1){Destroy(characterSelectedBoyPos.GetComponentInChildren<Animation>().gameObject);}

以上就是泰斗破坏神的UI界面视频教程的知识点,接下来就是主界面的开发视频教程!
为自己打气加油!!!

泰斗破坏神的学习笔记相关推荐

  1. unity3d泰斗破坏神2----课程列表

    免费 课时1:泰斗破坏神第一支预告视频 01:32 免费 课时2:泰斗破坏神第二支预告视频 01:58 第 1 章 : 游戏开始 用户登录 服务器选择 课时3:游戏开始 用户登录 服务器选择 课时4: ...

  2. 泰斗破坏神中对象一直为空,但对象的字段值却不为空

    泰斗破坏神中对象一直为空,但对象的字段值却不为空 错误原因: 按照规范,继承自monobehaviour的类都是组件,组件都要unity负责创建,我们是不能自己去new的 解决方法: 不继承monob ...

  3. Unity3D泰课在线 ARPG 课程《泰斗破坏神》系列视频教程附素...

    泰课在线 Unity3d史诗 MMO ARPG 课程<泰斗破坏神>,精心设计将包含200+课时,由视频课时+直播课时+测试课时混合组成. 本年度泰课最重头unity3d ARGP课程,完整 ...

  4. elasticsearch狂神说笔记_神级学习笔记!别再说不会Elasticsearch了,这位架构师都整理好了...

    搜索是软件工程师的一项必备技能.而 Elasticsearch 就是一款功能强大的开源分布式搜索与分析引擎,在同领域几乎没有竞争对手--近三年 DB-Engines 数据库评测中,ES 在搜索引擎领域 ...

  5. cad把图形切成两部分_转载一位CAD大神的学习笔记, 初学CAD的人可以看看

    学员内部找到的一份CAD学习笔记,每张图虽然没有讲详细绘图步骤,但将审图思路.绘图基本步骤和重点难点给列出来了,我觉得对初学者会有帮助,在此分享一下,前面几张图加上了我的注解. 第一部分 1-1 图 ...

  6. 2021-10-074号靶场转自y神的学习笔记(net渗透,sockcap,msf多重网段渗透,os-shell,验证码重放,C#解密,wfuzz穷举subdomain)

    欢迎大家一起来Hacking水友攻防实验室学习,渗透测试,代码审计,免杀逆向,实战分享,靶场靶机,求关注 masscan扫描 kali@kali:~$ sudo masscan -p 1-65535 ...

  7. MySQL+JDBC--狂神视频学习笔记

    01.什么是数据库,为什么要学习数据库 javaEE:企业级java开发 Web 前端(页面:展示,数据!) 后台(连接点:连接数据库JDBC,连接前端(控制,控制视图跳转,和给前端传递数据)) 数据 ...

  8. 小白to大神 vim学习笔记

    Vim文档编辑 一.实验介绍 1.2 实验知识点 Vim重复命令 跳转命令 复制粘贴 二.实验步骤 2.1 vim重复命令 2.1.1 重复执行上次命令 在普通模式下.(小数点)表示重复上一次的命令操 ...

  9. 移动网优大神VoLTE学习笔记(一)

    文/张阳,本文来源于微信公众号:网优小谈(wireless_talk) 俗话说的好,一入豪门深似海,对于VoLTE这个新技术领域的学习认知也一样,相比传统的电信技术,它糅合了大量计算机互联网的理念,正 ...

最新文章

  1. 从业务发展的阶段看系统发展
  2. 数人云CEO王璞:容器正成为软件交付的标准
  3. win8服务器无法安装win7系统安装,win8怎么安装win7 win8改win7教程详解【图文】
  4. python typeerror_Python 新手必须要注意的错误
  5. 分布式红锁的waitTime的设计原理
  6. undefined reference to `vtable for XXX‘
  7. vs没有windows窗体应用_既能防木马病毒又能多开应用,这款软件 Windows 不能没有!...
  8. android imagebutton 动画,Android中ImageButton的三种点击效果—点击变化,点一次换一张,逐帧动画的实现...
  9. Sql Server2005创建数据库
  10. Web应用程序的开发方法
  11. 前端福利 - h5源码一键下载
  12. 打工能实现财富自由吗?--互联网老辛的思考
  13. 2 errors and 0 warnings potentially fixable with the `--fix` option,vue-cli3中eslint详解(转载)
  14. 蝴蝶效应,混沌理论与股市
  15. idempotent - 幂等
  16. linux不出现图形界面的解决方法
  17. 【沙发管家】夏普电视怎么装软件?怎么才能看免费电影,电视直播?
  18. YOLO5 旋转模型图片标注及训练
  19. 《C语言动漫教程(初级)》
  20. 解决win10系统无法打开截图工具

热门文章

  1. 旋变解码(RDC)芯片分析
  2. STC15单片机驱动WS2812
  3. linux 利用win网络共享上网
  4. java基础学习(吐血借鉴)
  5. hibernate 学习 并且与spring 整合
  6. MATLAB中添加机器人插件(名称为rvctools)分享给大家
  7. java发票打印_java的发票打印CommPortIdentifier
  8. 金蝶在虚拟机安装服务器端,金蝶KIS旗舰版V6.0安装运行环境
  9. tkinter布局详解
  10. PHP对接管家婆erp系统获取对应的token