用Ogre MyGUI实现一套完整的游戏界面及实现方法介绍

转载请注明出自http://www.mobilegamebase.com/

如下截图，是使用MyGUI实现的游戏界面，资源采用鹿鼎记的。无论效果还是效率都相当令人满意，而且除了中文显示外，我几乎没有修改MyGUI的代码，仅仅是通过修改skin配置文件就可以实现了。




解释下做法：
1.动画
分两种，贴图动画和位置移动，Alpha渐变等动画，这两种MyGUI都已经已经实现好了，可以通过StaticImage和Controller来使用。贴图动画没啥好说的。Controller可以做任意扩展（指定路径的移动，按钮闪烁等），而且扩展起来非常方便又不至于修改MyGUI。

2.自动拼接
比如说做一个图片拼成的Dialog，这个Dialog可以任意拉伸而图片不能变形，参考panel的skin再做个skin就可以了。一般来说一个panel由9个部分拼成，但是按钮往往由3个部分拼成，写skin的时候保留3个BasisSkin就可以了（我还在这里走了点弯路呢），再放一个EditClient作按钮上的文字。可以轻松任意扩展、组合来达到目的，这就是MyGUI skin的强大之处。

3.自己适应窗口
就是MyGUI的Align概念，比如子窗口在父窗口右上角，无论父窗口怎么拉伸，子窗口都在右上角，这样只要做一套UI，就可以适应任何分辨率。所以我的做法是每个主窗口（比如一个Dialog）都由一个PanlEmpty做其父窗口，游戏里载入时，把这个最上层的父窗口放大到全屏，这样就可以利用Align来把控件放置到合适的位置。当然要解决一个问题，当鼠标点击时，不选择这个最上层的窗口，这样鼠标事件就可以传递给游戏逻辑了。

4.Tooltip
Tooltip可以任意复杂，请参考MyGUI的ItemBox那个例子，要注意的一点是控件的NeedTooltip属性为true才能触发Tooltip。

5.中文显示和图文混排
毫无疑问中文显示你得自己实现，这个我在上一篇文章里就说过了。图文混排往往是做UI比较麻烦的地方，因为要管理的东西很多，不过使用MyGUI可以很轻松实现，仔细研究下Colour那个例子，它的做法是如果字符串中包含#后跟6位颜色值，解析的时候会记录下来，画的时候就使用这个颜色。这里扩展一下，我们可以使用#e后跟2位的数字，解析的时候碰到这种情况就创建一个StaticImage作为当前控件的子窗口，就可以实现表情动画了。而且这么做有个好处，当用Controller来使该控件作出一些效果的时候，表情也是同样的效果，一举两得。

6.图片按钮
MyGUI的基础功能。
7.任意风格的进度条
提供skin文件即可。
8.Icon拖拽

请参考例子ItemBox。

待补充……

我的UI编辑器，All in one，简洁，方便。