纳金网

标题: Daikon Forge GUI Library 使用教程 I [打印本页]

作者: 艾西格亚 时间: 2014-2-14 22:28
标题: Daikon Forge GUI Library 使用教程 I
Daikon Forge GUI Library 使用教程 I

Daikon Forge GUI Library(以下简称DFGUI)是一款功能完善的GUI制作插件，
这个插件提供了非常强悍的功能来让开发者创建游戏中的使用界面，也是国内外Unity论坛里面经常被提到的一个重量级工具，在接下来的教程里面，我们将快速的介绍DFGUI的基本用法与操作方式，目前DFGUI的最新版本为 v1.0.14 hotfix2, 下载位置：
http://www.narkii.com/club/thread-314322-1.html

安装DFGUI之后需要做的第一个事情是先新增Layer,如图所示，使用Edit > Project Settings >Tags and Layers新增一个GUI的图层，注意，除了Layer 31之外的图层皆可使用。

接着选择Game Object >Daikon Forge > UI Wizard，这是一个UI导引设置的功能，NGUI插件也提供了类似的工具。

在UI Layer选择刚才新增的GUI图层，其他的设置暂时保存不变，按下Create即可创建出基本的GUI。

选择创建出来的UI Root，在Inspector设置里面找到Default and Materials，接着在Default Altas的图集设置里面选择资源内的TechBlue Skin，Default Font则是选择OpenSansSemibold14的字体。

如图所示，这是DFGUI安装后的资源里面提供的几种案例图集。

接着我们需要增加几个GUI的组件，在UI Root的物件内按下右键选择Add Control > Label，在视图内即可增加一个标签的组件。

DFGUI提供了一个很贴心的设计，当我们按下Alt键的时候，在组件的两边会出现对应的像素，并且可以使用右键选择Guide来增加参考线，这个操作与一般2D绘图软件提供的Guide功能相同，主要就是用来对齐某些组件。

现在我们尝试在Label里面输入一些文字，在文字输入较多时就需要勾选Auto Height与Word Wrap这两个选项，这样才能呈现出文字的正确排列。

如图所示，Label在使用了Auto Height与Word Wrap选项后的文字显示效果。

接着新增一个Containers > Panel，在添加组件的时候可以很轻易的通过蓝色的小点来调整其外形，如果要继续添加Panel的组件则是按下右键，配合Alt键可以显示出单位，使用这些小功能方便我们很快的进行GUI内容的设置。

现在对Panel的外观进行调整，在Background的栏位里面选择frame-basic-opaque后，Panel的背景填上了深蓝色的效果，如图所示：

接着在Panel里面按下右键新增一个Button，这时我们并无法看到按钮的内容，是因为还没有进行按钮的皮肤设置。

在Button里面的设置找到Images，然后分别在Normal、Focus、Hover、Pressed与Disabled选出按钮的图片样式，这里我们参考的是TechBlue Skin的图集内容。

如图所示，这个是Button在设置Images与文字内容后所呈现的效果。

此外，在Anchor里面勾选定位的方式可以让Button锁定，无论Panel的大小如何调整也能自动的进行对齐，例如我们选择的是Right与Bottom的右下角定位方式。

设置了Anchor的定位方式后，现在去调整Panel的大小就能看到Button被锁定在右下角的位置。

回到Label的组件，我们将Label的内容更换为www.narkii.com，如图所示，看似很平常的一段文字。

通过勾选Text Effects里面的Draw Gradient启用文字渐变，分别设置顶部与底部的颜色后，文字表面即可看到渐变效果。

另一个功能是可以在整段文字里面设计出不同的颜色，勾选Formatting > Process Markup选项，然后在Text的部分输入颜色的代码，如图所示：

这样在Label的文字显示上就能看到不一样的效果。

更多的技术交流与分享请加入：
Unity论坛专属交流群 - 218689657
3dsMax论坛专属交流群 - 284146304

作者: Chubbaz 时间: 2014-2-15 02:01
Good, thanks for this tutorial.

作者: ku 时间: 2014-2-15 10:03
教程才是纳金网的实力

作者: may 时间: 2014-2-15 11:54
不错的教程，谢谢

作者: hariboot 时间: 2014-2-15 15:27
很不错的入门资料

作者: ZackD 时间: 2014-2-16 14:45
这个不错，谢谢！

作者: 王者再临 时间: 2014-2-17 13:51
很不错的工具啊

作者: xx232 时间: 2014-3-25 22:43
有没有谁能说下这个和ngui的优劣

作者: Lau_Chingliang 时间: 2014-4-16 13:29
看起来貌似比NGUI简洁

作者: tangqizuse 时间: 2014-4-16 14:50
谢谢分享

作者: u甲 时间: 2014-6-1 23:21

好贴啊

作者: jianjinggy 时间: 2014-6-8 01:19
谢谢分享

欢迎光临纳金网 (http://go.narkii.com/club/)