开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:1906

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 3798|回复: 17

[碧俐千仞] Unity3D热更新LuaFramework入门实战(5)——UGUI

[复制链接]  [移动端链接]
排名
17323
昨日变化
12

27

主题

182

帖子

700

积分

Rank: 9Rank: 9Rank: 9

UID
53741
好友
31
蛮牛币
1960
威望
0
注册时间
2014-11-6
在线时间
111 小时
最后登录
2017-10-19

专栏作家

发表于 2016-9-17 00:17:06 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x

界面系统在游戏中占据重要地位。游戏界面是否友好,很大程度上决定了玩家的体验;界面开发是否便利,也影响着游戏的开发进度。 的UGUI系统,使用户可以“可视化地”开发界面,那么怎样用Lua去调用UGUI呢?
知乎 @罗培羽

1、显示UI界面

下面演示如何显示一个UI界面。由于UI界面也是一种资源,使用第二篇“资源热更新”的方法即可。这个例子中,制作一个含有按钮的界面,然后组成名为Panel1的UI预设,存放到Tank目录下。
Unity3D热更新LuaFramework入门实战5274.png
图:Panel1

前面(第二篇)已在Packager类HandleExampleBundle方法中添加了一句“AddBuildMap("tank" + AppConst.ExtName, "*.prefab", "Assets/Tank");”(当然也可以添加到其他地方),它会把Tank目录下的所有预设打包成名为tank的资源包。故而点击“Build xxx Resource”后,Panel1也会被打包到tank资源包中。

修改Lua入口函数Main.lua中的Main方法,在加载资源后把panel1放到Canvas下(需要在场景中添加画布),然后调整它的位置和大小。

--主入口函数。从这里开始lua逻辑
function Main()
        LuaHelper = LuaFramework.LuaHelper;
       resMgr = LuaHelper.GetResManager();
       resMgr:LoadPrefab('tank', { 'Panel1' }, OnLoadFinish);
end

--加载完成后的回调--
function OnLoadFinish(objs)
       --显示面板
       go = UnityEngine.GameObject.Instantiate(objs[0]);
       local parent = UnityEngine.GameObject.Find("Canvas")
       go.transform:SetParent(parent.transform);
       go.transform.localScale = Vector3.one;
       go.transform.localPosition = Vector3.zero;
end

运行游戏,即可看到加载出来的界面。

Unity3D热更新LuaFramework入门实战51053.png
图:加载出来的界面

2、事件响应

c#中可以使用事件监听的方法给UI组件添加事件。例如,添加按钮点击事件的方法如下:
Button btn = go.GetComponent<Button> ();
btn.onClick.AddListener
(
       delegate()
       {
              this.OnClick(go)
       }
);

然而在LuaFramework的API中,没能找到合适的方法,只能根据第三篇中“自定义API”的方法,自己编写一套了。编写UIEvent类,它包含用于添加监听事件的AddButtonClick和清除监听事件的ClearButtonClick方法,代码如下所示(完成后记得要“修改CustomSetting”和“生成wrap文件”)。
using UnityEngine;
using System.Collections;
using LuaInterface;
using UnityEngine.UI;

public class UIEvent
{
       //添加监听
       public static void AddButtonClick(GameObject go, LuaFunction luafunc)
       {
              if (go == null || luafunc == null)
                     return;

              Button btn = go.GetComponent<Button> ();
              if (btn == null)
                     return;

              btn.onClick.AddListener
              (
                     delegate()
                     {
                            luafunc.Call(go);
                     }
              );
       }

       //清除监听
       public static void ClearButtonClick(GameObject go)
       {
              if (go == null)
                     return;
              Button btn = go.GetComponent<Button> ();
              if (btn == null)
                     return;
              btn.onClick.RemoveAllListeners();
              }
       }
}

接下来测试下这套API,修改Main.lua,代码如下:
--主入口函数。从这里开始lua逻辑
function Main()
      
end

--加载完成后的回调--
function OnLoadFinish(objs)
       --显示面板
      
       --事件处理
       local btn = go.transform:FindChild("Button").gameObject
       UIEvent.AddButtonClick(btn, OnClick)
end

function OnClick()
       print("触发按钮事件")
end
运行游戏,点击按钮,OnClick方法即被调用。

Unity3D热更新LuaFramework入门实战52331.png

图:按钮的事件响应

读者可以使用相似的方法监听其他UI组件,这里就只演示按钮事件了。

3、界面管理器

LuaFramework提供了一套简单的(不完善的)界面管理器,具体代码请参见PanelManager类。PanelManager类的CreatePanel方法完成异步加载资源,在加载完成后,会设置面板的大小和位置,然后调用回调函数。与上面用lua加载界面的方法完全一样。
Unity3D热更新LuaFramework入门实战52520.png
图:PanelManager的CreatePanel方法

LuaFramework会给每个界面添加名为LuaBehaviour的组件,它拥有用于添加按钮监听的AddClick方法,相关代码如下,与UIEvent的AddButtonClick方法相似。

Unity3D热更新LuaFramework入门实战52649.png

图:LuaBehaviour的AddClick方法

在LuaFramework的PureMVC架构中,如果要添加一个界面,需要编写对应的Controller、View,以及修改3个框架自带的lua文件,比较繁琐。因此在实际项目中有必要重写PanelManager,由它实现界面的加载及事件处理。

广告时间:
《Unity3D网络游戏实战》的第五章“代码分离的界面系统”介绍了一套通用UI系统的实现方法,有兴趣的读者可以看看。
Unity3D热更新LuaFramework入门实战52865.png
《Unity3D网络游戏实战》界面系统

《专访仙剑同人游戏团队:这是我们的“心愿”》新浪游戏对心愿团队的采访稿,说出游戏开发过程中悲欢离合。http://games.sina.com.cn/zl/duanpian/2014-10-31/1146130.shtml





回复

使用道具 举报

5熟悉之中
567/1000
排名
3367
昨日变化
1

1

主题

82

帖子

567

积分

Rank: 5Rank: 5

UID
7999
好友
8
蛮牛币
1167
威望
0
注册时间
2013-11-14
在线时间
146 小时
最后登录
2017-9-13
发表于 2016-9-18 09:32:53 | 显示全部楼层
谢谢楼主分享!先学习了!!!
[发帖际遇]: zfairll 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

3偶尔光临
254/300
排名
7048
昨日变化
3

1

主题

40

帖子

254

积分

Rank: 3Rank: 3Rank: 3

UID
8217
好友
0
蛮牛币
531
威望
0
注册时间
2013-11-16
在线时间
77 小时
最后登录
2017-9-29
QQ
发表于 2016-9-18 09:47:23 | 显示全部楼层
表示已经看过luaframework里面的东东

回复 支持 反对

使用道具 举报

7日久生情
2017/5000
排名
584
昨日变化

1

主题

531

帖子

2017

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
111260
好友
0
蛮牛币
7310
威望
0
注册时间
2015-6-30
在线时间
343 小时
最后登录
2017-10-17
发表于 2016-9-18 12:02:11 | 显示全部楼层

谢谢楼主分享!先学习了!!!

回复 支持 反对

使用道具 举报

7日久生情
2017/5000
排名
584
昨日变化

1

主题

531

帖子

2017

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
111260
好友
0
蛮牛币
7310
威望
0
注册时间
2015-6-30
在线时间
343 小时
最后登录
2017-10-17
发表于 2016-9-18 12:03:30 | 显示全部楼层
罗老师你好!

回复

使用道具 举报

7日久生情
2017/5000
排名
584
昨日变化

1

主题

531

帖子

2017

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
111260
好友
0
蛮牛币
7310
威望
0
注册时间
2015-6-30
在线时间
343 小时
最后登录
2017-10-17
发表于 2016-9-18 12:03:52 | 显示全部楼层
罗老师你好!

回复

使用道具 举报

排名
51807
昨日变化
16

1

主题

6

帖子

9

积分

Rank: 1

UID
169082
好友
0
蛮牛币
4
威望
0
注册时间
2016-9-18
在线时间
1 小时
最后登录
2016-9-19
发表于 2016-9-18 18:14:17 | 显示全部楼层
我需要蛮牛币

回复

使用道具 举报

排名
20581
昨日变化
21

0

主题

47

帖子

74

积分

Rank: 2Rank: 2

UID
169092
好友
0
蛮牛币
151
威望
0
注册时间
2016-9-18
在线时间
13 小时
最后登录
2017-9-24
发表于 2016-9-18 19:31:08 | 显示全部楼层
感谢分享!!

回复

使用道具 举报

排名
17323
昨日变化
12

27

主题

182

帖子

700

积分

Rank: 9Rank: 9Rank: 9

UID
53741
好友
31
蛮牛币
1960
威望
0
注册时间
2014-11-6
在线时间
111 小时
最后登录
2017-10-19

专栏作家

 楼主| 发表于 2016-9-20 09:27:56 | 显示全部楼层

你好你好

回复 支持 反对

使用道具 举报

排名
17323
昨日变化
12

27

主题

182

帖子

700

积分

Rank: 9Rank: 9Rank: 9

UID
53741
好友
31
蛮牛币
1960
威望
0
注册时间
2014-11-6
在线时间
111 小时
最后登录
2017-10-19

专栏作家

 楼主| 发表于 2016-9-20 09:28:02 | 显示全部楼层

你好你好

回复 支持 反对

使用道具 举报

排名
17323
昨日变化
12

27

主题

182

帖子

700

积分

Rank: 9Rank: 9Rank: 9

UID
53741
好友
31
蛮牛币
1960
威望
0
注册时间
2014-11-6
在线时间
111 小时
最后登录
2017-10-19

专栏作家

 楼主| 发表于 2016-9-20 09:28:08 | 显示全部楼层

你好你好

回复 支持 反对

使用道具 举报

排名
17323
昨日变化
12

27

主题

182

帖子

700

积分

Rank: 9Rank: 9Rank: 9

UID
53741
好友
31
蛮牛币
1960
威望
0
注册时间
2014-11-6
在线时间
111 小时
最后登录
2017-10-19

专栏作家

 楼主| 发表于 2016-9-20 09:28:08 | 显示全部楼层

你好你好

回复 支持 反对

使用道具 举报

5熟悉之中
667/1000
排名
6830
昨日变化
2

2

主题

101

帖子

667

积分

Rank: 5Rank: 5

UID
107980
好友
0
蛮牛币
78
威望
0
注册时间
2015-6-13
在线时间
424 小时
最后登录
2017-10-19
发表于 2016-11-25 14:34:16 | 显示全部楼层
go.transform:SetParent(parent.transform)
报错了,[string "Main.lua"]:31: field or property SetParent does not exist
是找不到这个方法吗?需要引入什么库吗?但是Transform不是已经加载到里面了吗?

回复 支持 反对

使用道具 举报

5熟悉之中
620/1000
排名
6210
昨日变化
50

3

主题

102

帖子

620

积分

Rank: 5Rank: 5

UID
138025
好友
1
蛮牛币
201
威望
0
注册时间
2016-3-1
在线时间
349 小时
最后登录
2017-10-19
发表于 2017-1-4 15:54:16 | 显示全部楼层
求问,要怎么改 text.text里面值,还有image又要怎么改,能提示一下吗?
[发帖际遇]: Eagle---3 被钱袋砸中进医院,看病花了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

5熟悉之中
620/1000
排名
6210
昨日变化
50

3

主题

102

帖子

620

积分

Rank: 5Rank: 5

UID
138025
好友
1
蛮牛币
201
威望
0
注册时间
2016-3-1
在线时间
349 小时
最后登录
2017-10-19
发表于 2017-1-4 15:59:45 | 显示全部楼层
yangxuan0261 发表于 2016-9-18 09:47
表示已经看过luaframework里面的东东

在哪里的?是自己看源码还是别人写的博客?

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表