用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 使用FairyGUI

Posted 2020-11-05 ashei

上次讲解了FairyGUI的最简单的热更新办法，并对其中一个Demo进行了修改并做成了热更新的方式。

这次我们来一个更加复杂一些的情况：Emoji.

FairyGUI的   Example 04 - Emoji

场景是一个聊天对话框。玩家可以输入文本和表情，对面的机器人还会回复一句话。回复的对话中还附带一个表情。

Demo分析

FairyGUI的这个Demo展示了如下技巧：

• 继承UBBParser ,在Demo中使用自定义的表情。
• 编写了一个MonoBehaviour,管理所有的逻辑。
  1. 动态添加UI项目的各按钮的点击事件
  2. 保存对话内容
  3. 根据对话的类型（发送方和接收方），可以给对话项提供不同的展示资源
  4. 脚本中解析表情，并展示出来。
  5. 当对话条数超过一定数目时，会自动从头部移除最早的对话。

修改为热更新

本次热更新的尝试目标，所有逻辑全部移动到热更新代码中执行。

1. 首先我们将这个场景另存为F_Emoji。
2. 导入ActionScript3 虚拟机的unity插件包，并生成热更新项目。如果您不知道怎么操作，可以查看这里
3. ActionScript3插件包已更新，请下载最新的插件包  v0.96f6 以及以后版本。

 现在准备工作已完成。

我们将场景中的UIPanel直接删除。我们全部使用脚本来创建这个Panel。

1. 进入Assets->ASRuntimePlayer,将 AS3Player预设和AS3StartupProgress预设拖到场景上。
2. 将AS3Player物件下的Action Script Start Up 脚本组件的Document Class 设置为EmojiTest。
   (这一步的作用表示指示脚本解释器启动时，具体创建一个哪种类型的实例)
3. 现在打开热更新项目，新建一个 EmojiTest 的类。

现在我们首先来说明，如何使用热更新脚本来创建UIPanel。

根据FairyGUI的说明，要从脚本创建UIPanel,则一定要先注册UI所在的包，否则会提示创建失败

原C# Demo中，注册代码是在Awake事件中，并且设计时就拖动到场景上的，而我们这里需要热更新，我们可以选择在EmojiTest的构造函数中，或者直接在包外代码中写入注册代码，如下：

//务必先加入package
UIPackage.addPackage______("UI/Emoji");

var go:GameObject = new GameObject("uip");

var uip:UIPanel = go.addComponent(UIPanel) as UIPanel;

uip.gameObject.layer = LayerMask.nameToLayer("UI");
uip.packageName = "Emoji";
uip.componentName = "Main";

将上面的代码写到包外代码中。点击编译,然后在Unity中点击播放：

如图，这里的uip物体就是通过热更新脚本创建的，然后FairyGUI根据我们配置的package和componet，创建了对话的UI。

编写热更新逻辑

现在我们来编写热更新逻辑。但是这次有些不同，我们需要对UBBParser这个类进行一些修改。

FairyGUI的Demo中，为了解析UBB表情，定义了EmojiParser ,继承自UBBParser。并且EmojiParser中，访问了基类的受保护的对象handlers。

然而，我们的ActionScript3脚本如果继承C#类库，是无非直接访问受保护的字段的。因此，我们需要先在Unity工程中，将UBBParser的handlers改为public的成员.

修改完成后,待Unity重新编译项目后，在热更新项目中，使用 bat/CreateUnityAPI.bat 这个批处理文件重新生成一下ActionScript3的API代码。

 

确保以上步骤完成后，我们着手将C#代码改写为ActionScript3代码.

我们同样可以将逻辑继承自MonoBehaviour,并且也创建一个继承UBBParser的类，由于handlers字段已改为公开成员，因此可以在脚本中访问。

package 
{
    /**
     * ...
     * @author 
     */
    public class EmojiTest 
    {
        
        public function EmojiTest() 
        {
            
        }
        
    }

}
import fairygui.Emoji;
import fairygui.EventContext;
import fairygui.FitScreen;
import fairygui.GButton;
import fairygui.GComponent;
import fairygui.GList;
import fairygui.GObject;
import fairygui.GRichTextField;
import fairygui.GRoot;
import fairygui.GTextInput;
import fairygui.ScrollBarDisplayType;
import fairygui.UIConfig;
import fairygui.UIPackage;
import fairygui.UIPanel;
import fairygui.utils.UBBParser;
import system.Char;
import system._Object_;
import system.collections.generic.Dictionary_Of_UInt32_Emoji;
import unityengine.Application;
import unityengine.GameObject;
import unityengine.KeyCode;
import unityengine.LayerMask;
import unityengine.MonoBehaviour;
import unityengine.Random;

//在脚本中继承UBBParser。逻辑照搬C# Demo
//给每个表情提供一个handler,这个handler处理此表情的资源。
class EmojiParser extends UBBParser
{
    private static var  _instance:EmojiParser;
    public static function get inst():EmojiParser
    {        
        if (_instance == null)
            _instance = new EmojiParser();
        return _instance;
        
    }

    private static var TAGS:Vector.<String> =Vector.<String>([
         "88","am","bs","bz","ch","cool","dhq","dn","fd","gz","han","hx","hxiao","hxiu" ]);
    public function EmojiParser ()
    {
        for each (var ss in TAGS)
        {
            this.handlers[":"+ss] = OnTag_Emoji;
        }
    }

    private function OnTag_Emoji( tagName:String,  end:Boolean,  attr:String):String
    {
        return "<img src=\'" + UIPackage.getItemURL("Emoji", tagName.substr(1).toLowerCase()) + "\'/>";
    }
}

/**
 * 对话消息,不必多说
 */
class Message
{
    public var sender:String;
    public var senderIcon:String;
    public var msg:String;
    public var fromMe:Boolean;
}

/**
 * 将Demo中的逻辑用热更新脚本改写。
 * 我们同样可以继承自MonoBehaviour
 */
class EmojiMain extends MonoBehaviour
{
    var _mainView:GComponent;
    var _list:GList;
    var _input1:GTextInput;
    var _input2:GTextInput;
    var _emojiSelectUI1:GComponent;
    var _emojiSelectUI2:GComponent;

    
    var _messages:Vector.<Message>;

    var _emojies:Dictionary_Of_UInt32_Emoji;

    function Awake()
    {
        //UIPackage.AddPackage("UI/Emoji");

        UIConfig.verticalScrollBar = "ui://Emoji/ScrollBar_VT";
        UIConfig.defaultScrollBarDisplay = ScrollBarDisplayType.Auto;
    }

    function Start()
    {
        Application.targetFrameRate = 60;
        
        _messages = new Vector.<Message>();

        _mainView = UIPanel( this.getComponent(UIPanel)).ui;

        _list = _mainView.getChild("list").asList;
        _list.setVirtual();
        _list.itemProvider = GetListItemResource;
        _list.itemRenderer = RenderListItem;

        //给按钮添加处理事件。
        _input1 = _mainView.getChild("input1").asTextInput;
        _input1.onKeyDown.add(__inputKeyDown1);

        _input2 = _mainView.getChild("input2").asTextInput;
        _input2.onKeyDown.add(__inputKeyDown2);

        //作为demo，这里只添加了部分表情素材
        _emojies = new Dictionary_Of_UInt32_Emoji();
        for (var i:uint = 0x1f600; i < 0x1f637; i++)
        {
            var url:String = UIPackage.getItemURL("Emoji", i.toString(16));
            if (url != null)
                _emojies.add(i,  Emoji.constructor_(url));
        }
        _input2.emojies = _emojies;

        _mainView.getChild("btnSend1").onClick.add(__clickSendBtn1);
        _mainView.getChild("btnSend2").onClick.add(__clickSendBtn2);

        //添加发送表情按钮的事件
        _mainView.getChild("btnEmoji1").onClick.add(__clickEmojiBtn1);
        _mainView.getChild("btnEmoji2").onClick.add(__clickEmojiBtn2);

        _emojiSelectUI1 = UIPackage.createObject("Emoji", "EmojiSelectUI").asCom;
        _emojiSelectUI1.fairyBatching = true;
        _emojiSelectUI1.getChild("list").asList.onClickItem.add(__clickEmoji1);

        _emojiSelectUI2 = UIPackage.createObject("Emoji", "EmojiSelectUI_ios").asCom;
        _emojiSelectUI2.fairyBatching = true;
        _emojiSelectUI2.getChild("list").asList.onClickItem.add(__clickEmoji2);
    }

    function AddMsg(sender:String,  senderIcon:String,  msg:String,  fromMe:Boolean):void
    {
        var isScrollBottom:Boolean = _list.scrollPane.isBottomMost;

        var newMessage:Message = new Message();
        newMessage.sender = sender;
        newMessage.senderIcon = senderIcon;
        newMessage.msg = msg;
        newMessage.fromMe = fromMe;
        _messages.push(newMessage);

        if (newMessage.fromMe)
        {
            if (_messages.length == 1 || Random.range(0, 1) < 0.5)
            {
                var replyMessage:Message = new Message();
                replyMessage.sender = "FairyGUI";
                replyMessage.senderIcon = "r1";
                replyMessage.msg = "Today is a good day. " + Char.convertFromUtf32( 0x0001f600 ).toString();
                replyMessage.fromMe = false;
                _messages.push(replyMessage);
            }
        }

        if (_messages.length > 100)
        {
            _messages.splice(0, _messages.length - 100);
        }
            //_messages.RemoveRange(0, _messages.Count - 100);

        _list.numItems = _messages.length;

        if (isScrollBottom)
            _list.scrollPane.scrollBottom();
    }

    function GetListItemResource( index:int):String
    {
        var msg: Message= _messages[index];
        if (msg.fromMe)
            return "ui://Emoji/chatRight";
        else
            return "ui://Emoji/chatLeft";
    }

    function RenderListItem( index:int,  obj:GObject):void
    {
        var item:GButton = GButton(obj);
        var msg:Message= _messages[index];
        if (!msg.fromMe)
            item.getChild("name").text = msg.sender;
        item.icon = UIPackage.getItemURL("Emoji", msg.senderIcon);


        //Recaculate the text width
        var tf:GRichTextField = item.getChild("msg").asRichTextField;
        tf.emojies = _emojies;
        tf.width = tf.initWidth;
        tf.text = EmojiParser.inst.parse(msg.msg);
        tf.width = tf.textWidth;
        
    }

    function __clickSendBtn1( context:EventContext):void
    {
        var msg:String = _input1.text;
        if (msg.length == 0)
            return;

        AddMsg("Unity", "r0", msg, true);
        _input1.text = "";
    }

    function __clickSendBtn2( context:EventContext):void
    {
        var msg:String = _input2.text;
        if (msg.length == 0)
            return;

        AddMsg("Unity", "r0", msg, true);
        _input2.text = "";
    }

    function __clickEmojiBtn1( context:EventContext):void
    {
        GRoot.inst.showPopup__(_emojiSelectUI1, GObject(context.sender), _Object_( false));
    }

    function __clickEmojiBtn2( context:EventContext):void
    {
        GRoot.inst.showPopup__(_emojiSelectUI2, GObject(context.sender), _Object_( false));
    }

    function __clickEmoji1( context:EventContext):void
    {
        var item:GButton= GButton(context.data);
        _input1.replaceSelection("[:" + item.text + "]");
    }

    function __clickEmoji2( context:EventContext):void
    {
        var item:GButton = GButton(context.data);
        _input2.replaceSelection(Char.convertFromUtf32( parseInt(UIPackage.getItemByURL(item.icon).name,16) ));
    }

    function __inputKeyDown1( context:EventContext):void
    {
        if (context.inputEvent.keyCode == KeyCode.Return)
            _mainView.getChild("btnSend1").onClick.call();
    }

    function __inputKeyDown2( context:EventContext):void
    {
        if (context.inputEvent.keyCode == KeyCode.Return)
            _mainView.getChild("btnSend2").onClick.call();
    }

    
}



//务必先加入package
UIPackage.addPackage______("UI/Emoji");

var go:GameObject = new GameObject("uip");

var uip:UIPanel = go.addComponent(UIPanel) as UIPanel;

uip.gameObject.layer = LayerMask.nameToLayer("UI");
uip.packageName = "Emoji";
uip.componentName = "Main";

//将逻辑代码挂载到UIPanel上。
go.addComponent(EmojiMain);

可以将如上代码直接写到热更新脚本中，编译。

然后在Unity中点击播放，我们看到我们的热更已经生效！

 

 如此，我们即可完全使用热更代码处理FairyGUI的对话聊天模块。

打包到安卓手机

 您可以将这个场景导出到手机上测试。

当打包时，有可能会遇到脚本错误。这是因为FairyGUI的某些代码使用了宏编译，在windows状态下有这个类，而安卓状态下确没有。因此我们可以将这些类型配置到导出API的工具中，

声明它不导出。以这个案例而言，则是将如下配置写入genapi.config.xml的<notcreatetypes>配置节中:

     <item value="FairyGUI.CopyPastePatch"></item>
      

 

然后再次导出API,编译脚本，生成安卓包：

 

 

 如此我们就看到了手机上运行的效果。