3D游戏编程与设计作业09

最新推荐文章于 2022-12-05 22:16:24 发布
原创 最新推荐文章于 2022-12-05 22:16:24 发布 · 599 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

3D游戏编程与设计作业09

UGUI基础

画布

基础概念

  • 画布(Canvas)：是绘图区域，同时是UI元素的容器。容器中UI元素及其子UI元素都将绘制在其上。拥有Canvas组件的游戏对象都有一个画布，它空间中的子对象，如果是UI元素将渲染在画布上。
  • UI元素采用像素单位表示位置和尺寸
  • UI元素的显示顺序：画布种的UI元素按照它们在层次结构中出现的顺序绘制。如果两个UI元素重叠，后面的元素将出现在较早的元素之上。因此，最后一个孩子显示在最上面。
    要更改这种显示顺序，可以通过直接拖动它们在Hierarchy视图中的位置，也可通过Transform组件的方法在脚本中控制，如SetAsFirstSiling，SetAsLastSibling，SetSiblingIndex
  • 渲染模式(Render Mode)：画布组件有渲染模式设置，可用于使其在屏幕空间(Screen Space）或世界空间(World Space)中渲染
    • 屏幕空间 - 叠加(Screen Space - Overlay)
      将UI元素放置在场景顶部渲染的屏幕，画布会自动更改大小匹配屏幕。Canvas默认中心点为屏幕中心！
    • 屏幕空间 - 相机(Screen Space - Camera)
      画布放在制定的渲染摄像机前，如100的位置，画布会自动匹配为屏幕分辨率。Canvas默认中心点为屏幕中心！
    • 世界空间(World Space)
      画布行为与场景中的其他任何对象一样，UI元素将放置在其他对象的前面或后面渲染。画布大小和位置任意设置。

测试渲染模式

  • 创建一个Button对象：GameObject->UI->Button

  • 创建一个Cube对象

  • 检查、设置以下对象属性

    • Main Camera的Position=(0,1,-10)
    • Canvas::Button的(PosX, PosY, PosZ) = (0,0,0)
    • Cube的Position=(0,0.5,0)

  • 使用鼠标中间滚轮在场景视图中缩小，直到看到整个画布，中间有一个Button，如图所示：
    ButtonInCanvas.PNG

  • 选择Canvas对象的Inspector面板中Canvas组件

    • 设置Render Mode为Screen Space - Overlay
    • 结果：在Game视图中，可以看到Button在Cube前面
      ScreenOverlay.PNG

  • 选择Canvas对象的Inspector面板中Canvas组件

    • 设置Render Mode为Screen Space - Camera
    • 设置Render Camera为Main Camera（拖过去赋值）
      ScreenSpaceCamera.png

    结果：在Game视图中可以看到Button在Cube后面
    ScreenSpaceCameraGame.png

  • 选择Main Camera：

    • 在Camera组件面板中修改Filed of View
    • 结果1：在Game视图中，Cube大小发生变化，而Button保持不变
      RenderTestGame.gif
    • 结果2：在Scene视图中，画布随着视口自动改变大小
      RenderTestScene.gif

UI布局基础

基本概念

每个UI元素都被表示为一个矩形，为了相对于Canvas和其他UI元素实现定位，Unity在Transform基础上定义了Rect Transform(矩形变换)支持矩形元素在2/3D场景中变换。

  • 矩形变换
    • 位置和尺寸应使用像素，以匹配素材
    • Pivot/旋转点/轴心：旋转点在场景视图中显示为蓝色圆圈，用规范化坐标表示位置。修改Rotation属性，矩形围绕此点旋转。
    • Anchors/锚点：锚点在场景视图中显示为四个小三角形手柄（四页花）。每个叶子位置对应矩形的四个顶点。当锚点随父对象变换时，矩形的顶点与对应的锚点相对位置必须保持不变

锚点练习

  • 将场景另存为Scene2
  • 将场景视图设置为2D模式
    Scene2D.png
  • 使用鼠标中间滚轮在场景视图中缩小，直到看到整个画布，中间有一个Button
  • 将Canvas的Render Mode设为World Space，以便改变父对象（画布）的大小
    • 测试结果1：UI元素锚定到父级的中心。该元素保持到中心的固定偏移量
      AnchorTest1.gif
    • 测试结果2：UI元素锚定在父级的右下角，该元素保持到右下角的固定偏移量
      AnchorTest2.gif
    • 测试结果3：左侧角落的UI元素锚定在父级的左下角，右侧角落锚定在右下角，则元素的角落保持固定的偏移到它们各自的锚点
      AnchorTest3.gif
  • 实现父子元素的等比缩放的方式：选择Canvas，直接在场景视图中对Canvas进行缩放即可

UI组件与元素

基本概念

UI部件都是用Script开发的自定义组件。包括在UI、Layout和Rendering等分类中。

  • 可视化组件：包括
    • Text：显示文本的文本区域。可以设置字体样式、大小等文本功能
    • Image：显示图片的区域。可以设置GUI精灵、色彩
    • Raw Image：原始图像采用纹理，进行UV矩形贴图
    • Mask：不是一个可见的UI控件。它将子元素限制(即“掩蔽”)为父元素的形状。如果孩子比父控件大，那么只有适合父节点Mask的部分是可见的
    • Effects：应用各种简单的效果，例如简单的投影或轮廓
      更多详细说明可参考官方文档
  • UI交互元素：UI交互元素是GameObject，它拥有UI交互组件、UI可视化组件及相关组件的组合，以及一些UI子元素构成，以方便用户在设计场景中创建交互界面
    • Button
    • Toggle
    • Toggle Group
    • Slider
    • Scrollbar
    • Dropdown
    • Input Field
    • Scroll Rect(Scroll View)
      更多详细说明可以参考官方文档

Mask练习

  • 将场景另存为Scene3，将除Main Camera和Directional Light以外的对象删掉
  • 将如下所示的图片拖入Assets/Texture目录中，作为纹理图像
    yibo.jpg
  • 创建Panel对象：GameObject->UI->Panel
  • 在Panel下添加Raw Image对象：右键Panel->UI->Raw Image
  • 将前面的纹理图像拖入Raw Image的Textrue插槽中
    RawImageTexture.png
  • 将场景视图设置为2D，并缩放至能看到整个画布
    Scene2Dyibo.PNG
  • 选择Panel对象
    • 在Rect Transform组件选择Anchor Presets为(middle, center)
      middleCenterAnchorPreset.png
    • 用Rect Tool，将Panel与图片的大小调为一致
      RecTool
    • 添加Mask组件
    • 选择Image组件，选择Source Image为Knob
  • 在Game视图中，可看到如下效果图：
    GameKnob.PNG

动画练习

  • 添加Animation编辑视图：Window->Animation->Animation
  • 选择Raw Image
  • 在视图Animation中，点击create按钮，则系统将在该对象上创建动画组件、动画控制器、动画文件，将文件保存为tets1.anim
    • Add Property->Rect Transform->Archored Position->+
  • 选择Scene视图，移动Raw Image到Panel左边
    left.PNG
  • 选择Animation视图，（记得先开启录制）在0s位置添加关键帧，将播放位置标线放置在最后
  • 选择Scene视图，移动Raw Image到Panel右边
    PanelRawImage.PNG
  • 选择Animation视图，在最后位置添加关键帧
  • 运行动画：
    Animation.gif

富文本测试

为了显示格式复杂的文字，Unity提供了类似HTML标签，控制字体、字号、颜色。

  • 在Canvas下添加Text元素
  • 在Text组件中输入：We are <color=green>green</color> with envy
  • 结果：
    RichText.PNG

简单血条

给动画人物Ethan添加Health Bar

  • 将场景另存为Scene4，将除Main Camera和Directional Light以外的对象删掉
  • 在Assets Store中下载并导入Standard Assets
  • 添加一个Plane对象：GameObject->3D Object->Plane
  • 将目录Assets/Standard Assets/Characters/ThirdPersonCharacter/Prefabs下的ThirdPersonController预制拖放入场景中，重命名为Ethan
  • 检查以下属性：
    • Plane的Transform的Position=(0,0,0)
    • Ethan的Transform的Position=(0,0,0)
    • Main Camera的Transform的Position=(0,1,-10)
  • 为Ethan添加画布子对象：右键Ethan->UI->Canvas
  • 添加滑条子对象作为血条：右键Ethan的子对象Canvas->UI->Slider
  • 选择Ethan的Canvas，在Inspector视图中，
    • 设置Canvas组件Render Mode为World Space
    • 设置Rect Transform组件(PosX, PosY, Width, Height)为(0,2,160,20)，此外Scale为(0.01,0.01,1)
  • 运行效果：
    SliderTest.gif
  • 展开Slider
    • 选择Handle Slider Area，在Inspector中反勾选该对象，在层级视图中它将变灰
    • 选择Background，在Inspector中反勾选该对象，在层级视图中它将变灰
    • 选择Fill Area的Fill，修改Image组件的Color为红色
      SliderConfig.png
  • 选择Slider的Slider组件
    • 设置Max Value为100
    • 设置Value为75
      SliderComponentConfig.png
  • 给Canvas挂载脚本LookAtCamera.cs
    using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LookAtCamera : MonoBehaviour
{
    // Update is called once per frame
    void Update()
    {
        this.transform.LookAt(Camera.main.transform.position);
    }
}
  • 运行效果：
    SliderLookAtCamera.gif

血条(Health Bar)的预制设计

UGUI实现

  • 用UGUI制作血条的方式见前面简单血条部分
  • 将Ethan的子对象Canvas拖入Assets/Prefabs制成预制，重命名为UGUIHealthBar

IMGUI实现

  • 场景另存为Scene6，去除多余的对象，保留Main Camera，Directional Light和Plane

  • 创建一个空对象：GameObject->Creat Empty，并重命名为IMGUIHealthBar

  • 创建脚本IMGUIHealthBar.cs

    • 借助HorizontalScrollbar(水平滚动条)实现

      // 用水平滚动条的宽度作为血条的显示值
GUI.color = Color.red;
GUI.HorizontalScrollbar(HealthBar, 0, health, 0.0f, maxHealth);

    • 使用Mathf.Lerp插值计算血量，以实现血条值平滑变化，而非突变

      if (GUI.Button(HealthUp, "+"))
{
    resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
}
if (GUI.Button(HealthDown, "-"))
{
    resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
}
//插值计算health值，以实现血条值平滑变化
health = Mathf.Lerp(health, resulthealth, 0.05f);

    • 让滚动条跟随父对象运动
      获取父对象的位置：

      private Transform father;
...
void Start()
{
    father = this.transform.parent.transform;
    ...
}

      根据父对象的位置设置滚动条的位置：

      //血条区域
HealthBar = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 100 - father.localScale.x * 10, 
    Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 10, 
    father.localScale.x * 100, father.localScale.z * 10);
//加血按钮区域  
HealthUp = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 100 - father.localScale.x * 30
    , Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 10
    , father.localScale.x * 20, father.localScale.z * 10);
//减血按钮区域
HealthDown = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 100 + father.localScale.x * 90, 
    Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 10, 
    father.localScale.x * 20, father.localScale.z * 10);

  • 将脚本IMGUIHealthBar.cs和前面已经写好的LookAtCamera.cs挂载到IMGUIHealthBar下

  • 将IMGUIHealthBar拖入Assets/Prefabs制成预制

  • 运行效果：
    IMGUIHealthBar.gif
    完整项目传送门

两种实现的比较

UGUIIMGUI
优点1. 所见即所得（WYSIWYG）设计工具，设计师也能参与程序开发
2.支 持多模式、多摄像机渲染
3. UI 元素与游戏场景融为一体的交互
4. 面向对象的编程		1. 符合游戏编程传统
2. 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
3. 这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中
缺点1. 没有 UIWrap 来循环 scrollview 内容
2. 暂时没有Tween组件		1. 传统代码驱动的 UI 面临效率低下
2. 难以调试

使用方式

创建一个ThirdPersonController对象，将预制UGUIHealthBar或IMGUIHealthBar拖到层级面板中，使之成为ThirdPersonController对象的子对象即可

其他参考资料

潘老师的课程网站 第九章 UI系统
Unity3D学习笔记（四）分别使用IMGUI和UGUI实现血条的预制设计

20级软件工程中山大学3D游戏编程与设计作业4
09-30
总的来说，“20级软件工程中山大学3D游戏编程与设计作业4”涉及到的知识点包括天空盒的创建、地形生成与渲染、Tilemap地图构造以及相关的图形学技术。通过实践这些内容，学生将深入理解3D游戏环境的构建，并掌握游戏...
中山大学20级软件工程 黄卓谌3D游戏编程与设计作业2
09-21
标题"中山大学20级软件工程 黄卓谌3D游戏编程与设计作业2"表明这是一个关于3D游戏编程与设计的作业，来自中山大学20级软件工程课程，由学生黄卓谌完成。这个作业可能是课程的一部分，旨在让学生实践3D游戏开发的关键...
3D游戏编程与设计作业03
鱼板: RE的博客
09-21 300
3D游戏编程与设计作业03Priests and Devils编程初实践列出游戏中提及的事物(Objects)玩家动作表 Priests and Devils编程初实践 列出游戏中提及的事物(Objects) Objects 个数 代表图像 牧师(Priest) 3个 正方体 恶魔(Devil) 3个 球体 船 1个 棕色圆柱体 河岸 2个 绿色长方体 玩家动作表 ...
3D游戏编程与设计 作业二
wrrrrryyyyy的博客
09-23 174
1、简答题 解释 游戏对象（GameObjects） 和 资源（Assets）的区别与联系。 游戏对象（GameObject） 指的是一个能够容纳实现实际功能的组件。游戏中的每个对象都是一个游戏对象 (GameObject)。然而，游戏对象 (GameObjects) 本身不做任何事情。它们需要特殊属性 (special properties) 才能成为一个角色、一种环境或者一种特殊效果。但是每个对象要做很多不同的事情。 资源（Assets） 指的是在游戏中可能用到的各种东西，比如模型、声音文件、贴图文
3D游戏编程与设计第四次作业
Kwok_CheungYuk的博客
10-05 290
作业内容 1.编写一个简单的鼠标打飞碟（Hit UFO）游戏 这次的作业最重要的是单例模式和工厂模式。 单例模式：确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例，这个类称为单例类，它提供全局访问的方法。是对象创建型模式。 模板如下： using System.Collections; using System.Collections.Generic; using UnityE...
3D游戏编程与设计作业3
Xiaozhen__的博客
09-26 622
3D游戏编程与设计作业3
3D游戏编程与设计作业——血条预制
Xiaozhen__的博客
12-05 596
3D游戏编程与设计作业——血条预制
3D游戏编程与设计作业六
Floating__dust的博客
11-13 2163
3D游戏编程与设计作业六
3D游戏编程与设计 作业八
wrrrrryyyyy的博客
12-02 158
3D游戏编程与设计 作业八 粒子系统是模拟一些不确定、流动现象的技术。它采用许多形状简单且赋予生命的微小粒子作为基本元素来表示物体(一般由点或很小的多边形通过纹理贴图表示)，表达物体的总体形态和特征的动态变化。人们经常使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹这样的抽象视觉效果等等。 创建粒子光环 参考 http://i-remember.fr/en ，使用粒子流编程控制制作一些效果， 如“粒子光环” 效果图： 创建粒子系统 新建一个空对象并命名为P
3D游戏编程与设计作业二
weixin_59460680的博客
10-07 706
2022年中山大学3D游戏编程与设计作业二
3D 游戏编程与设计 - Minecraft 游戏介绍
とある黄鱼のOIブログ
09-08 1912
作业要求 介绍 Minecraft 是一款有关放置方块与探险的 3D 沙盒游戏。玩家出生在一个拥有无限可能性的世界中，这个世界可以无限探索，玩家在世界中没有游戏目标，也没有固定的游戏模式。在游戏过程中，玩家必须探索世界、收集资源、制作工具、修建房屋、战斗。 Minecraft 游戏中拥有不止一个世界，玩家在探索出生的主世界时，还可以通过传送门进入其他不一样的世界（比如地狱、末地、月球等世界）进行探...
3D游戏编程与设计作业4——使用skybox构建游戏场景
Xiaozhen__的博客
10-13 671
3D游戏编程与设计作业——使用skybox构建游戏场景
中山大学20级3D游戏编程与设计作业
12-13
unity小游戏小球历险记，目前有两个关卡，第一关为弹球收集硬币较为简单，W、A、S、D控制小球移动，碰到墙壁会使小球反弹，多次碰撞会使小球速度加快，从而加大通关难度，第二关为小球跑酷，A、D键控制左右，空格键...
中山大学20级软件工程3D游戏编程与设计作业3
09-27
这里是中山大学20级软件工程3D游戏编程与设计作业3抛物线的3种实现方式，Assets文件夹的Scenes文件内有三个场景分别为FallByFunc、FallByTransform、FallByVector以不同的方法实现了抛物线。其中对应的脚本文件在...
中山大学20级软件工程3D游戏编程与设计作业5
10-26
这个游戏的设计与编程涉及到多个IT领域的关键知识点，包括但不限于游戏开发基础、图形渲染、用户交互、物理模拟以及软件工程实践。 首先，游戏开发基础是这个项目的核心。游戏开发通常涉及游戏引擎的使用，例如...
(Kriging-NSGA2)克里金模型结合多目标遗传算法求最优因变量及对应的最佳自变量组合研究（Matlab代码实现）
最新发布
12-17
(Kriging_NSGA2)克里金模型结合多目标遗传算法求最优因变量及对应的最佳自变量组合研究（Matlab代码实现）内容概要：本文介绍了克里金模型（Kriging）与多目标遗传算法NSGA-II相结合的方法，用于求解最优因变量及其对应的最佳自变量组合，并提供了完整的Matlab代码实现。该方法首先利用克里金模型构建高精度的代理模型，逼近复杂的非线性系统响应，减少计算成本；随后结合NSGA-II算法进行多目标优化，搜索帕累托前沿解集，从而获得多个最优折衷方案。文中详细阐述了代理模型构建、算法集成流程及参数设置，适用于工程设计、参数反演等复杂优化问题。此外，文档还展示了该方法在SCI一区论文中的复现应用，体现了其科学性与实用性。; 适合人群：具备一定Matlab编程基础，熟悉优化算法和数值建模的研究生、科研人员及工程技术人员，尤其适合从事仿真优化、实验设计、代理模型研究的相关领域工作者。; 使用场景及目标：①解决高计算成本的多目标优化问题，通过代理模型降低仿真次数；②在无法解析求导或函数高度非线性的情况下寻找最优变量组合；③复现SCI高水平论文中的优化方法，提升科研可信度与效率；④应用于工程设计、能源系统调度、智能制造等需参数优化的实际场景。; 阅读建议：建议读者结合提供的Matlab代码逐段理解算法实现过程，重点关注克里金模型的构建步骤与NSGA-II的集成方式，建议自行调整测试函数或实际案例验证算法性能，并配合YALMIP等工具包扩展优化求解能力。
FindAddress 读第三方程序的变量的原理
12-17
读第三方程序的变量的原理 2 https://flyfish.blog.youkuaiyun.com/article/details/155859130
PVE开启直通+CPU硬盘温度显示,风扇转速+一些群辉自用的小脚本
12-17
先展示下效果 https://pan.quark.cn/s/b85190ab5f38 ### pve虚拟机磁盘路径 ### 虚拟机路径 ### LXC路径 ### 无需借助任何软件直接转换openwrt的img文件为虚拟磁盘 ### PVE-LXC容器换源 ### pve显示信息
基于人脸识别的宿舍门禁管理系统的设计与实现源码.zip
12-17
基于人脸识别的宿舍门禁管理系统的设计与实现源码.zip
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值