Egret社区

[教程文档] 修改和增加组件的经验

2017-12-7 18:08
2063
本帖最后由 vv有问题 于 2017-12-7 19:24 编辑


更详细的文档说明 参考地址:http://bbs.egret.com/thread-23619-1-1.html

最近根据开发需要,写了一个ls的进入cd时的组件,效果图如下:

cd.gif

过程大概就是可视化编辑器的json编写,运行层的逻辑编写。


0.准备
先用wing打开Lakeshore安装文件夹下的plugins文件夹。

cd1.png

而我只是简单的新增一个行为,所以在behaviors文件夹下操作。

1.可视化编辑

首先,照葫芦画瓢,仿照其他行为,创建icons和locales文件夹,用来放图标和配置文件。

cd2.png

1)行为列表
cd3.png
(最后 ls里的可视化编辑界面)

在locales文件夹下创建zh_CN文件夹(en_US对应英文),新建并打开strings.json

仿照其他行为的json的写法:

cd4.png

需要注意的几个属性:
group和priority表示此行为在行为列表上的位置,
type,该行为的类型,
inherit,这里是继承BaseBehavior,
icon就是图标了,
description,对该组件的描述

properties,几个属性的设置

与下图对应着看,

cd5.png

value作为默认值,
valueType表示该属性的类型,(原本想给颜色一个颜色选择器的编辑界面的,不知为啥valueType值为colorSelect时不能用了)




2)条件列表

添加了此行为的目标在达到某条件时的触发判断。

cd7.png
(最后 ls里的可视化编辑界面)

对照下图,

cd6.png

features给这组条件分个类出来,
type是该条件的类型,
callName是条件调用的函数名,
isTrigger,表示该条件是一次性触发条件还是持续性触发条件,
有时候可能要传参数,则在properties里写




3)动作列表

达到某些条件时,做的一些操作

cd8.png
(最后 ls里的可视化编辑界面)

对照下图:

cd9.png

type为调用的函数名,
toogle表示是否启用,




2.运行层逻辑

这里也是仿照其他行为来写,在cd文件夹下新建一个runtime.ts文件

cd10.png

这里的类名与编辑层的相对应,行为的类和条件的类,

先看看定义了的一些属性,

cd11.png

onCreate好像是实例化后就会执行(我就理解为初始化了),

cd12.png

官方原本有个tick(帧执行)函数的(试了一下不好用),这里就用了个计时器,定义在上文,
(用这个计时器也有问题,时间不准,希望有大神能帮忙改进一下~~)
原本的每帧执行一次,这里就40ms执行一次,判断是否转完一圈和更新扇形图形,

cd13.png

this.dispatchEvent(new ls.TriggerEvent(ls.TriggerEvent.TRIGGER, this.endCD));
这一句很重要,用来触发达成条件,

接下来就是条件部分,
与上文结合来看,当转完了一圈就触发了这个结束的条件,才返回true,然后就可以做相应的动作了。

cd14.png

类型需和配置文件里的相对应。


动作部分,

cd17.png

函数名与配置文件要对应,做一些对应的操作



最后是读写JSON和克隆了,

注意类型一致,一般基本属性就OK,

cd16.png


3.如何给别人使用该组件

写好上面后,编译,在bin-debug文件夹下有编译好的js文件,
要使用该组件的话,需要配置文件和js文件,

简单的说(就两个地方,安装目录下):
(1)Lakeshore\plugins\bin-debug\runtime\behaviors 文件夹下替换或新增对应的js文件。
(2)Lakeshore\plugins\src\runtime\behaviors 文件夹下替换或新增对应的配置文件。

复杂来说:
1)如果可视化编辑界面有改变

他人需在 Lakeshore\plugins\src\runtime\behaviors 文件夹下新增或替换配置文件,不编译的话ts可以不用,编译了就需要ts文件

cd18.png

2)对应的js文件从bin-debug里找

项目需要的js文件也会从debug里取

cd19.png

如果没有编译的话,要在bin-debug所在的文件夹下新增或替换对应的js文件(这时候不需要编译,因为编译会把debug里的js文件替换掉),

如果ts拷贝过来了,编译后,自然bin-debug里有对应的js文件,就可以忽略这一步(通常不推荐这样做,功能不喜欢、出错了,他人自己不会改回来的话,就很难受)


最后:

emmmmmmm...大致的开发过程就这样,这算是简单的功能实现了(希望dalao们改进下这算法,完成时间慢了)

有疑问欢迎~~






cd.zip

6.64 KB, 下载次数: 11, 下载积分: 银子 -1

参与人数 1威望 +3 银子 +100 贡献 +3 收起 理由
flep + 3 + 100 + 3 很给力!

查看全部评分

分享到 :
0 人收藏

3 个回复

倒序浏览
app小王子  社区管理员 | 2017-12-7 18:21:06
liuyueyanfeng  登堂入室 | 2017-12-7 18:33:12
不错,支持一下咱们的技术小哥哥
wuhaishengxxx  登堂入室 | 2017-12-7 20:39:42
那么巧我也做了个,不过是进度条的 pro.gif

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

vv有问题

登堂入室

积分: 24 帖子: 5 精华: 1

楼主热帖

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2016 Comsenz Inc.

返回顶部