青瓷qici - H5小游戏抽奖机 4 运行脚本编写

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了青瓷qici - H5小游戏抽奖机 4 运行脚本编写相关的知识，希望对你有一定的参考价值。

hello，小伙伴们，我们来继续编写相关的程序。

前几章我们已经基本把界面等问题搞定了，现在我们就来写脚本让整个流程统一起来。

看看我们现在有了什么？一个界面还有他的层次结构

青瓷界面绑定UI.js创建

化成关系图如下，我们调整一下，因为背景应该上面抽出一层，作为公共背景，让这个背景来控制自己到底显示高亮还是暗黑

调整完毕后，我们来划分需要编写的逻辑，前面最高控制整个程序的是UIRoot我们为他创建一个脚本。下面每个脚本控制一个效果。

好的，我们来动手写程序。可以看到我们当前的目录结构如下，Script中啥也木有。为了少些点代码，我们在界面中创建JS脚本，会附带生成一些我们需要的UI关联参数。

创建完成，qici编辑器会自动为我们生成js后缀的js文件，以及为我们的文件创建ID文件，也就是 js.meta 关联界面就是通过这个meta文件，所以版本管理的时候记得加上。

为了查看方便，在资源目录下方有个拉条，可以调整缩放比例，为了看全名字，一般调成最小列表形式。

文件都建好了，添加版本管理。我们可以忽略Build文件夹，理论上Temp文件夹也可以忽略，不过以免有时候忘记保存，还是加上Temp比较好，在我们编辑的时候Temp会临时保存我们的工作场景。资源文件会生成两个文件，分别是bin ， bin.meta 系统帮我们进行了预处理。

-----------------------------------------------------------------

青瓷脚本设置UI节点关联

创建脚本，设置本脚本需要管理哪些子元素

UIRoot的脚本设置。设置它名下管理5个Node节点元素。

Bg脚本设置，名下管理两个UINode节点

烟火节点的脚本，设置名下管理5个烟火节点。更好的方案是设置成节点数组，由外部设置数组长度和内容，而不必每个设置。

获奖节点的脚本，设置名下管理两个节点，分别是快速掉落奖励节点，和最终展示奖品节点

最后还有我们的拉杆节点，管理下属球节点和棍子节点。

写好了切回编辑器，在非运行模式下回加载修改的js，转转转，等一下。

在编辑器运行模式下要切回编辑模式，还要等一会，等后台自动加载修改，进入转转转界面。

青瓷UI元素绑定脚本

UIRoot节点，我们采取拖拽的方式，吧RootUI.js文件从项目资源窗口中，Script文件夹下，托转到节点上。点击UIRoot节点，在属性中就能看到已经绑定的脚本。

我们把我们脚本需要管理的几个Node节点拖拽关联到UIRoot的脚本之上，最终结果如下图。

第二步，绑定子元素对应的脚本，

我们对background节点点击，在属性最下面添加脚本，并如图一步步选择对应的脚本。

选择成功后对元素进行绑定

下面分别绑定拉杆，烟火和奖品，还有分享界面

青瓷如何在编辑器快速调试

既然已经开始写脚本了，那么调试肯定很频繁了。怎么比较快地调试呢？

在编辑器，不用改变UI的情况下，进入运行模式。修改代码之后，点菜单工程，刷新场景，

马上就能加载新的js脚本。编辑器会为我们的新代码加入时间后缀。如果要设断点就进入新的文件吧。

青瓷脚本调用前台资源、其他附属脚本、效果

首先给我们的背景管理脚本增加两个操作，显示和消失暗黑的背景。

这里用var self = this;是一个比较好的选择，方便到时候函数中各种回调、方法里面直接调用本self中的元素。

另外脚本中对界面绑定的node对象操作，需要self.gameObject获取。

第二步，我们给烟火书写调用脚本。

我们预先排好了烟火的位置不是为了让它一起烧的，所以在函数里头通过外部指定燃放多少个烟火，把我们指定烟火随机截取出来，加入延时进行燃放。

烟火是粒子系统的元素，本身就有借口reset/start/delay。因此代码如下设置。

为了快速调试，我们为这个元素增加一个onClick方法。在编辑窗口运行的情况下，点击刷新场景，加载我们刚才编写好的代码。

点击我们加载好刚才代码的节点，firework。在他的属性中激活点击事件的捕获。

来，见证奇迹的时刻。

青瓷Nodes数组元素传入绑定

前面我们烟火的绑定是一个一个对应的，事实上我们在内部还是作为数组处理，如果直接传入就是数组那不是更爽？

我们来动动手术。吧我们写了的
fireworks_0_Node: qc.Serializer.NODE,

转换成。

fireworksNode: qc.Serializer.NODES,//烟花对象数组

然后在界面上重新绑定一下。啊~世界清净了

青瓷TweenPosition实现滚动效果

前面我们已经把遮罩部分做了。忘了回去翻前面的帖子(╯‵□′)╯︵┻━┻

笑

来来来，我们坐下来继续好好谈。

现在界面显示是酱紫的，其实上面覆盖了两个图像。

我们定义脚本中，先设定取值范围，因为我们的奖品设置关联的素材是雪碧图，所以我们可以直接通过切换frame名称得到对应的图。

我们现在吧frame名称写下来，以便后面从数组和对象里面获取。

唤醒的时候加载下落的脚本，注意下文中获取对象脚本的方式。

// Called when the script instance is being loaded.
RewardUI.prototype.awake = function() {
var self = this;

    if (self.fastImageNode) {
        self.fastPosition = self.fastImageNode.getScript("qc.TweenPosition");
        self.fastFilterGroup = self.fastImageNode.getScript("qc.FilterGroup");
        self.fastBlurX = self.fastFilterGroup.filters[0];
        self.fastImageNode.visible = false;
    };

    if (self.lastImageNode) {
        self.lastPosition = self.lastImageNode.getScript("qc.TweenPosition");
        self.fastImageNode.frame = self.default;
        self.lastImageNode.visible = true;
    };
};