Skip to content

(译)DF-GUI快速入门(Tutorial – Getting Started)

(译)DF-GUI快速入门(Tutorial – Getting Started) published on (译)DF-GUI快速入门(Tutorial – Getting Started)有92条评论

翻译说明:采用英文-中文对照方式,以免翻译水平低劣,觉得翻译的不好的请勿喷,看原文就可以了。还有我当前下载的是1.0.15版本,所以翻译内容和原文有些出入。比如,某些菜单选项位置变更了。

官方原文地址:点击这里跳转 DF-GUI In this tutorial, we’ll be covering how to use the UI Wizard to create a new GUI in your scene. The following steps assume that you are starting from scratch with a new empty scene. 

在本教程中,我们将讲述在你的场景中如何使用UI向导创建一个新的GUI。接下来的步骤我们假定你是从一个新的空白场景开始建立GUI。 

The first thing that needs to be done is to set up a layer just for your user interface.  Open up the TagManager panel (Edit → Project Settings → Tags) and add a new “GUI” layer. All of your UI elements will reside on this layer. 

第一件事情是需要为GUI设置一个专用的层。打开标签管理面板(Edit → Project Settings → Tags and Layers)然后在用户自定义层中任选一个空白层命名为“GUI”。后面你需要将所有的UI元素都将关联到这一次层。

add-layer

Next, go to Assets → Daikon Forge → UI Wizard

下一步,点击GameObject → Daikon Forge → UI Wizard.

guiwizard-menu

This will cause the following wizard to pop up: 这个操作将弹出向导对话框:

image02

Let’s go through what each option does.

  • UI Layer is the layer your UI will reside on. Pick the GUI layer you just created.
  • Orthographic, if checked, means your UI will be displayed in 2D. Uncheck this if you need your UI to display in 3D.
  • Pixel Perfect, if checked, means your UI will perfectly map to screen pixels (for instance, text usually requires pixel perfect rendering, otherwise it will appear blurry or fuzzy). So a 100 pixel wide sprite will always be exactly 100 pixels wide on any screen (on larger resolutions it will appear smaller)

接下来我们对每一个选项进行简单的说明。

  • UI Layer 是你GUI对象关联层。你可以点击它并在下拉框中选择之前你创建的”GUI”层。
  • Orthographic 正交投影,选中此选项意味着你的UI将以2D方式显示。不选则将UI显示在3D环境中。
  • Pixel Perfect 像素完美匹配,选中的话表示你的UI将完美的匹配当前屏幕像素(举个例子,文本通常需要相熟完美匹配,否则将会出现模糊或毛边的情况)。所以100个像素宽的精灵总是以100个像素的宽显示在任何分辨率的屏幕上(在较大分辨率的屏幕上图片会看起来比较小)。

Additionally there are a number of options concerning input:

  • Use Joystick determines whether the UI will process joystick or gamepad input.
  • Joystick Click Button is used to generate click events. While a GUI element has focus, pressing this button will have the same effect as using the left mouse button.
  • Horizontal Axis and Vertical Axis are used to generate arrow key events. This way, your UI controls can listen for arrow key events to navigate the current selection, and joystick input will automatically work.  If a custom axis is specified, the names must match an axis defined in the Edit -> Project Settings -> Input Settings.

接下来还有一些关于输入相关的选项:

  • Use Joystick 使用摇杆勾选后UI将处理来自摇杆或手柄的输入。
  • Joystick Click Button 摇杆确定按钮 是用来产生点击事件的。当某个GUI元素是焦点时,按下你在此设置的按钮时会产生和用鼠标左键点击此GUI元素一样的效果。
  • Horizontal Axis and Vertical Axis 水平轴 和 垂直轴 是用来产生方向键事件的。这样你的UI控件就能监听来自摇杆或手柄的操作,比如用摇杆选中某个选项。如果指定了自定义的轴,那么这个自定义轴的名字必须和你Edit -> Project Settings -> Input里的设置完全相同。

After configuring these, simply press the Create button to create your starting user interface hierarchy. 

完成以上设置后,点击Create按钮创建你的用户界面。 

You will now have a new UI Root game object in your scene, with a UI Camera child object. 

现在你会在Unity3D的层级面板(Hierarchy)发现你的刚刚创建的 UI Root 游戏对象,它带有一个名为 UI Camera 的子对象。

dfgui-new-scene

Note that the UI Root object has two custom components assigned to it, an Input Manager and a GUI Manager. We will look at the Input Manager first: 

观察 UI Root 对象,它带有2个自定义组件,一个是输入管理器Input Manager)另一个是GUI管理器GUI Manager)。接下来我们将介绍输入管理器:

image01

The Input Manager specifies how DF-GUI will process user input. You’ll see some familiar settings here that you specified in the GUI Wizard, namely the Use Joystick, Joystick Click Button, Horizontal Axis, and Vertical Axis options

在DF-GUI系统中输入管理器决定了如何处理用户的输入。这里你将看到一些你在GUI向导中设置过的选项,比如 使用摇杆摇杆确定按钮水平轴 和 垂直轴 

In addition, we have:

  • Use Touch – This will enable touch support on mobile devices, including multi-touch support.
  • Axis Polling Interval – This controls the interval at which it polls the Horizontal and Vertical axes to generate arrow key events.
  • Retain Focus – This determines what happens when you click on nothing. If Retain Focus is enabled, the last focused control will continue to retain focus. Otherwise, the control will lose focus.

除此以外我们还看到一些新的设置项:

  • Use Touch 触摸控制 – 选中此选项将开启对移动设备的触摸控制支持,当然对多点触摸的支持是必须的。
  • Axis Polling Interval 轴轮询间隔 – 这个设置是控制以多少时间(目前单位是秒)间隔来轮流产生水平轴和垂直轴的方向键事件。
  • Retain Focus 保留焦点 – 如果你在屏幕上点击了一个什么都没有的位置,这个选项将决定是否保留上一个UI元素的焦点状态。如果没有勾选此设置,那么上一个元素将丢失焦点。

Below that is the GUI Manager component, which is responsible for rendering your user interface. It contains settings that determine how your controls are rendered, default options, and design-time options. 

接下来我们看看GUI管理器组件,它主要包含一些UI的呈现相关的设置。例如:渲染设置、默认纹理材质设置、分辨率设置等。 image00 

Let’s take a look at these settings:

  • Render Mode is whether the UI is rendered in Orthographic or Perspective. This is the same as the Orthographic checkbox in the UI Wizard.
  • Pixel Perfect determines whether controls map perfectly to screen pixels. This is the same as the Pixel Perfect checkbox in the UI Wizard.
  • Default Atlas is the texture atlas assigned to new controls by default. Texture atlases are used to keep draw calls low, and will be covered in another tutorial.
  • Default Font is the font assigned to new labels by default. Fonts contain the necessary data to render text, and will be covered in another tutorial.
  • Merge Materials causes the GUI Manager to attempt to sort controls by material to reduce draw calls. For instance, if you have a sprite from atlas A as the background, a sprite from atlas B on top of that, and another sprite from atlas A at the very front, DFGUI will generate three draw calls (background, middle, foreground) in order to ensure correct render order. However, you can force DFGUI to back the background and foreground together into one draw call rather than two, but this can cause render order issues.
  • Generate Normals causes the GUI Manager to generate normals for each vertex. This is used by shaders that require normals, such as shaders that use lighting.
  • Screen Width and Screen Height control the size of the design canvas. For instance, if you want to design your UI at 640×480 you can enter that here and click Apply. The UI will still properly display on all screen resolutions, however. You can also click Use Build Settings to copy the default display resolution from the build settings.
  • Show Wireframe shows the wireframe mesh of your UI.
  • Show Rulers shows ruler markings at the edge of the UI canvas. This is used to aid in UI design.
  • Snap To Grid snaps UI controls to the grid. This is used to aid in UI design.
  • Show Grid displays the grid used for grid snapping.
  • Grid Size controls the size of the grid cells used for grid snapping.
  • Show Safe Area displays a rectangle around the edges of your UI. This is used when designing UIs for display on TVs which may crop some percent of the image border.
  • Safe % is the percentage used for the safe zone. Use this to display different safe zones (5% – 10% should suffice for nearly all cases)
  • Force Refresh causes an immediate redraw of the entire UI. If something doesn’t appear to be updating, you can select Force Refresh to force a redraw.

我们来大概看一下有哪些设置:

  • Render Mode 渲染模式 指定你的UI是以正交方式渲染还是透视方式渲染,换句话说就是以2D方式还是3D方式。这个选项同等于UI向导中的正交投影(Orthographic )复选框。
  • Pixel Perfect 像素完美 决定是否完美的将UI映射到屏幕像素。这个选项等同于UI向导中的像素完美(Pixel Perfect)复选框。
  • Default Atlas 默认图集 是你设置一个纹理图集为默认值后,每当你创建一个新的控件这个图集将自动的赋值给新创建的控件。纹理图集主要目的是用于降低绘图次数(draw calls),对于它的详细说明将在另一个教程中来讲述。(这里达秀想补充说明一下,其实Unity3D 的draw calls其实主要的一个计算标准是来自于底层的贴图切换。众所周知DirextX或OpenGL在渲染时,如果每渲染一帧贴图切换得越多,那么绘制效率就越低,这个在显存越低的显卡上体现的越明显,draw calls数量的高低其实就是这一事实的真实写照。后面提到的合并材质,其实也是这个原理。)
  • Default Font 默认字体 是表示当你创建新的标签(Labels)时自动选用的字体。字体包含了渲染文本所必须的数据,对于字体我们也将在另一个教程中来讲述。
  • Merge Materials 合并材质 选项使GUI管理器试图通过材质的排序来降低draw calls的次数。举个例子来说,如果你的背景来自于图集A,一个精灵来自于图集B并且绘制在背景上,同时还在最上面绘制了另一个精灵它来之于图集A,一般情况下DFGUI系统将按顺序绘制三次(顺序是背景绘制、图集B精灵的绘制,图集A精灵的绘制)。但是你可以通过此选项强制DFGUI系统合并第一次和第三次的绘制将他们合并为一个(达秀注:这样就减少了一次切换纹理的过程),但这样有可能照成渲染顺序出现问题,导致画面看起来不是你期望的那样。
  • Generate Normals 生成法线 使GUI管理器为每一个顶点生成法线。它主要用于一些实用着色器(shaders)的情况,比如UI对于光源的不同反应。(达秀废话:这样可以是你的UI看起来很炫,NGUI也支持这种效果
  • Screen Width and Screen Height 屏幕宽度 和 屏幕高度 控制设计期画布的尺寸。举例来说,如果你预想的UI宽高为640×480像素那你可以在这里输入这两个值,然后点击应用按钮。UI会正常显示在所有屏幕分辨率下。你还可以点击使用编译设置 复制默认的分辨率设置到这里。
  • Show Wireframe 显示线框 表示将你的UI显示为线框图。
  • Show Rulers 显示标尺 选项会在你的UI画布周围显示标尺,在你设计UI时它会灰常灰常滴有用喔。
  • Snap To Grid 贴靠到网格 这个不用翻译了吧,就是你拖动空间的时候自动会往网格上贴靠。方便UI的位置布局的调整,但有时很烦。
  • Show Grid 显示网格 就是显示网格咯,对于上个选项的补充,让你看得到设计网格.
  • Grid Size 网格尺寸 控制网格的单元格大小,还是对上面两个选项的补充。
  • Show Safe Area 显示安全区域 用矩形显示UI的边界范围。This is used when designing UIs for display on TVs which may crop some percent of the image border.(达秀注:这句不理解也没遇到过这种情况,游戏UI用于显示在电视上的时候?PS3? XBOX360?
  • Safe % 安全百分比 is the percentage used for the safe zone. Use this to display different safe zones (5% – 10% should suffice for nearly all cases)(达秀注:这个应该是对上一个的补充,估计一般也用不到,除非你做的是PS3 XBOX360的游戏才用得到吧,如果有人用过麻烦给我说下到底神马状况下用的,在此先谢过
  • Force Refresh 强制刷新 如果某些应该显示东西没有被更新,使用这个设置立即强制重绘整个UI。

In the next tutorial, we’ll take a look at some basic controls – sprites, labels, and buttons. 

OK,这个教程就基本结束了。接下来的教程中我们会看到一些基础控件,比如 精灵、文本标签、还有按钮等。

原创文章,转载请注明: 转载自游戏无界·达秀的黑暗空间

本文链接地址: (译)DF-GUI快速入门(Tutorial – Getting Started)

本站作品除特殊申明外均为原创,采用知识共享署名-非商业性使用-禁止演绎 3.0 Unported许可协议进行许可。如果需转载请保持文章完整性和标明原文出处,禁止商业用途。

  1. Pingback: Homer

  2. Pingback: Gary