当前位置：首页 > wzjs >正文

网页设计与网站建设案例课堂郑州防疫办

wzjs 2025/9/5 22:05:04

网页设计与网站建设案例课堂,郑州防疫办,百度问答,商品网页设计图片1、ui界面的基础使用 ui可以在2d和矩形工具界面下操作，更方便，画布与游戏窗口的比例一般默认相同如图所示，图片在画布上显示的位置和在游戏窗口上显示的位置是相同的渲染模式：屏幕空间--覆盖，指画布覆盖在游戏物体渲…

1、ui界面的基础使用

ui可以在2d和矩形工具界面下操作，更方便，画布与游戏窗口的比例一般默认相同

如图所示，图片在画布上显示的位置和在游戏窗口上显示的位置是相同的

渲染模式：屏幕空间--覆盖，指画布覆盖在游戏物体渲染画面上，不会被游戏物体渲染的画面所遮挡。

而屏幕空间--摄像机则允许游戏物体和画布一起渲染甚至遮挡在画布之上，画布永远朝向摄像机

世界空间则允许画布进行旋转，方便做一些3d按钮.（明日方舟的主界面ui 弹幕）

而排序次序是指如果有多个ui画布，哪个画布最先被渲染 .而选择了ui缩放模式为屏幕大小缩放，固定分辨率之后，屏幕所设定的分辨率大小不会影响ui的显示效果

2、ui基础，锚点和轴心点

光线投射目标-- 指是否要进行射线检测

设置原生大小--显示图片原本的大小，因为有的图片被拉伸会模糊，需要展示原本大小

锚点是设置在父物体身上的，图像的位置是相对与锚点的偏移

锚点的最大值最小值是指四个点的比例.（锚点分散之后，被框选中的图像会随着画布大小的调整而调整弹幕云）。

图片跟锚点的上下左右保持相同距离，当屏幕大小改变时（笔记本电脑屏幕和4k电视屏幕），锚点随之改变，则图片大小也会随之改变（跟锚点上下左右保持固定距离但可能导致图片比例改变）.如果锚点的四个点是何在一起的，则图像的位置x,y是固定不变的（2d没有z轴）

当锚点像这样上下合在一起时，屏幕进行变化时，图像只会进行宽度的拉伸，不会进行高度的变化

图像的位置其实时图像的轴心点相对于父物体锚点的偏移

3、文本组件的基本使用

旧版字体富文本是指支持html语法等写法（通过标签进行加粗、斜体等等）。水平溢出是指自动截断文本到文本框所显示位置或者多出显示框显示范围的文本依旧显示，垂直溢出相同。最佳适应是指让字体大小显示由电脑选择（和最小大小和最大尺寸配合使用）

新版文本相比旧版更像word编辑了

4、按钮

interactable为是否可交互，过渡为鼠标移动或者按下时按钮的显示情况（加深等），高亮是指鼠标移动到按钮上时，过渡可以选择颜色色彩或者 sprite交换。2d游戏时，使用图标需要是sprite类型

导航按钮主要是让手柄通过上下键选中键盘的

导航的explict类似于按钮的超链接，指该按钮按上下左右分别可以跳转到哪一个按钮。使用的效果可以达到我希望我的敌人在战场上捡到我的游戏机没法正确的使用游戏机按钮的效果 .可以取消可视化去除连线显示

可以添加鼠标点击通知事件

public class ButtonTest : MonoBehaviour
{// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}public void ButtonClick(){Debug.Log("click1");}
}

5、文本输入框

interactable指文本是否可以被选中。角色限制纯纯机翻，是character limit。内容类型指可以设置输入内容为十进制、密码等。选择颜色是指文本框中字符被选中时高亮颜色。隐藏移动收入--移动端点击时会弹出输入键盘

输入文本框的事件通知和button差不多

public class ButtonTest : MonoBehaviour
{public InputField inputField; //新版的是TMP_InputField类型，来自TMPro类// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}public void TextChanged(){Debug.Log(inputField.text);}
}

6、选项组件

ui->切换，搭配toggle group组件实现多只能选1效果，将要多选1的选项拉到同一个toggle group

获取下拉框的组件

public class DropDownTest : MonoBehaviour
{// Start is called before the first frame updatevoid Start(){//获取下拉组件Dropdown dropdown = GetComponent<Dropdown>();//获取组件的选项List<Dropdown.OptionData> options = dropdown.options;//修改选项options.Add(new Dropdown.OptionData("俄罗斯"));}// Update is called once per framevoid Update(){}
}

要给下拉框的选项添加sprite，需要先给项图像添加图源，再配置sprite