Unity中的GUI图形与用户界面

Posted 2023-04-30

参考技术A GUI特点

GUI的优点：灵活、快速、可视化

GUI组件概要

Canvas（画布）

Render Mode（渲染模式）

Canvas Scaler 组件

Graphic Raycaster 组件

EventSystem （事件系统）

GUI布局组件

The Rect Tool（矩形工具）

Rect Transform （矩形变换组件）

Pivot（中心点）

Anchors（锚点）

GUI核心组件

Button（按钮）

Text （文本）

Image（图像）

Raw Image（原图）

Input（输入）

Toggle（切换）组件

Toggle Group（切换组）

Slider（滑动条）

Scrollbar（滚动条）

Scrollbar Rect（滑动区域）

Panel 面板

UI组件概要—Canvas（画布）

Canvas（画布）是摆放容纳所有的UI元素的区域。画布是一个游戏对象上的某个Canvas Component组件，

并且所有UI组件都要绘制在这个画布里的，脱离画布，UI组件就不能使用。

UI组件概要—Render Mode（渲染模式）

Screen Space-Overlay渲染模式

在Screen Space-Overlay渲染模式下，场景中的UI被渲染在屏幕上（此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面。）

Screen Space-Camera渲染模式

Screen Space-Camera渲染模式类似于Overlay模式。但在这种渲染模式下，画布被放置在指定相机前的一个给定的距离上，通过指定的相机UI被呈现出来，Camera Setting会影响到UI的实现。

World Space渲染模式

在World Space 渲染模式下，呈现的UI好像是3D场景中的一个Plane（平面）对象。与上面两种不同，Plane不需要面向镜头，可以是面向你喜欢的任意方向。

好了,休息一下, 如果大家对.NET比较有兴趣的话 , 可以一起加群一起探讨一起交流

295383988

GUI图形用户界面设计注意事项

　　软件设计，当然不能局限于算法、代码的设计，界面的设计也同样重要。作为一个全面的编程人员，关心用户体验，也是我们应有的责任与义务。

　　JavaGUI中，有着图形类与工具类等等，图形类包括了容器类与组件类，工具类又包括颜色类、字体类等，现在开发中，图形类使用javax.swing包下的以J开头的类，其他使用java.awt包下的类即可。

　　容器本质也是一种组件，只不过它被设计来放置其他具体的组件。

　　设置图形用户界面首先要有一个窗体JFrame类型对象，如果是自定义的窗体，那么它也要继承（extents）JFrame类，此时自定义和窗体具有JFrame所具有的特性。

　　我们可以在窗体类的构造中：设置窗体标题setTitle(),设置大小setSize()等等,如果要网窗体中添加东西（内容），我们不能直接添加，而是要获得窗体的内容面板，用getContentPane()方法获得，并用一个Container类型的引用（设为c）接收。此时可以让c调用add(参)方法往其中添加组件和其他的面板。

　　面板类型为JPanel,我们自定义的面板要继承JPanel类，此时自定义面板具有JPanel的特性。因为自定义面板本省就是一种内容面板，我们不需要像窗体那样获取内容面板，可以直接在器构造方法中设置大小、背景颜色等，并可以直接调用它的add(参)方法添加组件和其他的面板。

　　组件分类比较多，常用的有按钮JButton、标签Jlabel、文本框JTextField等等。我们的组件可以定义为面板的属性， 在面板的构造中实例化，设置位置和大小后，放到面板的add(参)方法的参数位置即可完成组件的添加。

　　通过组件的添加我们可以发现，一个组件（包括面板扥容器）的生成离不开三步：

　　1.实例化new

 　　2.设置位置和大小setBounds(位置横x，位置纵y,水平大小w,垂直大小h)

　　3.往容器（面板）中添加 面板.add(本组件的引用)

　　这里应该注意的是，任何原点以容器的左上角点为基准，设置位置和大小时，先水平后垂直。

　　我们会发现，所有的组件（和子容器）一个个设置位置会比较麻烦，java为我们提供了一些布局(Layout)方式，让我们可以根据需求使用布局来减少我们的工作量。常用的布局有：1.空布局null  2.边界布局（BorderLayout） 3.网格布局（GridLayout）4.流布局（FlowLayout）等等。

　　空布局：在我们添加组件时，组件大小和位置需要自己设置，即为上文说的比较麻烦的三步做法。

　　流布局：在我们添加组件时，默认往面板的第一行添加，而且加入的组件位于面板的中间位置；且有多个组件时，按照自左向右，自上而下的顺序加入，各组件的位置整体居中（类似WORD中的居中对齐）。且组件大小由组件的内容决定。

　　边界布局：此布局将面板分为东西南北中，且南北为贯通，在我们添加组件时，默认往面板的第中部添加，而且加入的组件若仍然位于面板的中间位置则会覆盖；且有多个组件时，应该设置其加入的方位，还是一样，同一个方位多个组件会覆盖。且组件大小由组件的内容决定。

　　网格布局：此布局将面板均分分为我们定义的网格数（横m*纵n），在我们添加组件时，默认往面板的左上角第一个添加，且有多个组件时，他们按照自左向右，自上而下的顺序加入，且组件大小由网格的大小决定。若组件的数量比我们预设的网格数多或者少，能够容纳的情况下，网格布局会保证行不变，自动调节列数（增多或者减少）。

　　这样我们具备了一系列GUI设计的手段，接下来，可以愉快地设计美观的界面了哟~