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

我们的热更新脚本在实际使用中,当然也要支持常用的第三方组件,例如这里介绍一个非常实用的第三方UI库:FairyGUI.

什么是FairyGUI

这里照搬FaiyGUI官网的介绍:

重新定义 UI 制作流程,全可视化,零代码,是一款同时适用于程序员、设计师和游戏策划的UI制作工具。 配合FairyGUI-SDK,在各个游戏引擎都能得到高效的渲染表现,独特的FairyBatching技术可自动优化复杂界面的DC数量。

我们这里自然是使用它的Unity组件啦。

我们这篇文章的主旨并非是介绍如何使用FairyGUI制作界面,而是如果让FairyGUI制作的界面可以被我们的热更脚本驱动。

因此,这里我们可以先跳过FairyGUI的编辑器,直接下载它提供的Unity Demo,来进行热更新的改造演示。

在这里下载FairyGUI的Unity组件

导入FairyGUI

  1. 新建一个新的Unity工程。
  2. 将FairyGUI的package导入进来。
  3. 进入 Assets->FairyGUI->Examples->Scenes。这里展示了FairyGUI的全部Demo。

我们这一次先演示最简单的热更新处理,因此本次先选用一个不需要在脚本中继承和扩展FairyGUI的组件的例子。

我们选择Example 23,2D图像滤镜Demo。

准备热更新

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

场景分析:

  • 场景中的UIPanel物件,上面承载了UI界面。
  • UIPanel物件上有FilterMain.cs脚本,里面控制了UI的逻辑。
  • 现在我们尝试将此场景的逻辑改为通过ActionScript3脚本热更新。

操作步骤:

  1. 移除FilterMain.cs。我们将在ActionScript3中操作逻辑。
  2. UIPanel物件下的 UIPanel (Script)设置为禁用状态。我们将在AS3解释器初始化完成后,重新启用它。
  3. 进入Assets->ASRuntimePlayer,将 AS3Player预设和AS3StartupProgress预设拖到场景上。
  4. 将AS3Player物件下的Action Script Start Up 脚本组件的Document Class 设置为Filter。

现在我们将C#脚本的内容移植到ActionScript3脚本中。

原Demo在Start 方法中,将UI上的滑块事件添加了一个处理程序,然后在处理程序中更改UI元素的滤镜参数。见代码:

void Start()
    {
        _mainView = this.GetComponent<UIPanel>().ui;

        BlurFilter blurFilter = new BlurFilter();
        blurFilter.blurSize = 2;
        _mainView.GetChild("n21").filter = blurFilter;

        _s0 = _mainView.GetChild("s0").asSlider;
        _s1 = _mainView.GetChild("s1").asSlider;
        _s2 = _mainView.GetChild("s2").asSlider;
        _s3 = _mainView.GetChild("s3").asSlider;
        _s4 = _mainView.GetChild("s4").asSlider;

        _s0.value = 100;
        _s1.value = 100;
        _s2.value = 100;
        _s3.value = 200;
        _s4.value = 20;

        _s0.onChanged.Add(__sliderChanged);
        _s1.onChanged.Add(__sliderChanged);
        _s2.onChanged.Add(__sliderChanged);
        _s3.onChanged.Add(__sliderChanged);
        _s4.onChanged.Add(__sliderChanged);
    }

    void __sliderChanged(EventContext context)
    {
        int cnt = _mainView.numChildren;
        for (int i = 0; i < cnt; i++)
        {
            GObject obj = _mainView.GetChildAt(i);
            if (obj.filter is ColorFilter)
            {
                ColorFilter filter = (ColorFilter)obj.filter;
                filter.Reset();
                filter.AdjustBrightness((float)(_s0.value - 100) / 100f);
                filter.AdjustContrast((float)(_s1.value - 100) / 100f);
                filter.AdjustSaturation((float)(_s2.value - 100) / 100f);
                filter.AdjustHue((float)(_s3.value - 100) / 100f);
            }
            else if (obj.filter is BlurFilter)
            {
                BlurFilter filter = (BlurFilter)obj.filter;
                filter.blurSize = (float)_s4.value / 100;
            }
        }
    }

现在我们将这个逻辑脚本改写为ActionScript3热更新脚本:

  1. 打开热更新项目,新建Filter类。
  2.  将如下代码复制到Filter类中。
package 
{
    /**
     * ...
     * @author 
     */
    public class Filter 
    {
        
        public function Filter() 
        {
            
        }
        
    }

}

import fairygui.BlurFilter;
import fairygui.ColorFilter;
import fairygui.EventContext;
import fairygui.GComponent;
import fairygui.GObject;
import fairygui.GSlider;
import fairygui.Stage;
import fairygui.UIPackage;
import fairygui.UIPanel;
import unityengine.Application;
import unityengine.GameObject;
import unityengine.MonoBehaviour;
class FilterMain extends MonoBehaviour
{
    var _mainView:GComponent;
    var _s0:GSlider;
    var _s1:GSlider;
    var _s2:GSlider;
    var _s3:GSlider;
    var _s4:GSlider;

    function Awake()
    {
        Application.targetFrameRate = 60;
        
        UIPackage.addPackage______("UI/Filter");
    }

    function Start()
    {
        _mainView = UIPanel(this.getComponent(UIPanel)).ui;

        var blurFilter:BlurFilter= new BlurFilter();
        blurFilter.blurSize = 2;
        _mainView.getChild("n21").filter = blurFilter;

        _s0 = _mainView.getChild("s0").asSlider;
        _s1 = _mainView.getChild("s1").asSlider;
        _s2 = _mainView.getChild("s2").asSlider;
        _s3 = _mainView.getChild("s3").asSlider;
        _s4 = _mainView.getChild("s4").asSlider;

        _s0.value = 100;
        _s1.value = 100;
        _s2.value = 100;
        _s3.value = 200;
        _s4.value = 20;

        _s0.onChanged.add(__sliderChanged);
        _s1.onChanged.add(__sliderChanged);
        _s2.onChanged.add(__sliderChanged);
        _s3.onChanged.add(__sliderChanged);
        _s4.onChanged.add(__sliderChanged);
    }

    function __sliderChanged(context:EventContext):void
    {
        var cnt:int = _mainView.numChildren;
        for (var i:int = 0; i < cnt; i++)
        {
            var obj:GObject = _mainView.getChildAt(i);
            if (obj.filter is ColorFilter)
            {
                var filter1:ColorFilter= ColorFilter(obj.filter);
                filter1.reset();
                filter1.adjustBrightness((_s0.value - 100) / 100);
                filter1.adjustContrast((_s1.value - 100) / 100);
                filter1.adjustSaturation((_s2.value - 100) / 100);
                filter1.adjustHue((_s3.value - 100) / 100);
            }
            else if (obj.filter is BlurFilter)
            {
                var filter2:BlurFilter = BlurFilter(obj.filter);
                filter2.blurSize = _s4.value / 100;
            }
        }
    }

}


MonoBehaviour( GameObject.find("UIPanel").getComponent(UIPanel)).enabled = true;
GameObject.find("UIPanel").addComponent(FilterMain);
  1. 我们看到as3的代码和C#基本改动不大,几乎直接拷贝复制再改改即可。关注最后两行:我们在包外代码中激活了UIPanel,并挂载了脚本中定义的FilterMain类。
  2. 点击编译。
  3. 在unity中点击播放。我们看到脚本已成功生效。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏马洪彪

Java生成条码二维码

一、概述 可用barcode4j或zxing等第三方库,推荐zxing。 barcode4j资料链接:http://barcode4j.sourceforge....

4228
来自专栏学海无涯

iOS开发之登录与访客

自我革命——发现问题 在开发中,一直有这样一种情境:App的未注册用户可以使用部分功能(访客视图),一旦需要使用一些核心功能或者获取个性化、差异化的服务时,就需...

2897
来自专栏崔庆才的专栏

腾讯云主机上测试BootStrap4编译FlexBox

最近在开发一个移动端适配的网站,使用了materi-ui框架,基于React。使用materi-ui时,已经内置了许多样式,但是bootstrap的一些多余样式...

1970
来自专栏滕先生的博客

iOS 本地推送概念步骤:属性:点击通知跳到指定控制器界面快捷回复功能(iOS 8以后可用), category 属性的使用方法

3026
来自专栏文大师的新世界

7. 偷用Swiper简改

看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:

643
来自专栏技术小讲堂

Singal Page App:使用Knockout和RequireJS创建高度模块化的单页应用引擎背景知识文档结构服务端API准备Require配置与系统配置模块中的工作模块间的工作烂图赏鉴代码送上

开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,...

2686
来自专栏DeveWork

CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别

写 CSS 时候经常遇到要为弹窗浮层这些进行 class 命名的情况,之前对于Dialog, Modal, Popup, Flash,Tooltip等这类命名一...

2176
来自专栏Flutter入门

Flutter入门三部曲(1) - 基础认识

看到整体的架构图,它是由dart完成上层的framework,然后由通过skia来完成图形的绘制。

310
来自专栏谈补锅

解读AppIcon图标设置置信息和App内存警告临界值

  前面有同学问到了iOS内存警告临界值和工程项目里AppIcon的一些配置信息,相信对刚入行的同学来说,可能都会碰到类似的问题,记录一下供后来者查询。

902
来自专栏禁心尽力

后台模板管理系统___左侧菜单数据的异步加载

 对于搞Java的我来说,前端JS我是有点愚冻,今天在我的博客地盘我就悄悄发布一篇没有技术含量的文章,这次怎么说我也是完完整整的把公司后台管理系统的菜单异步加...

2569

扫码关注云+社区