Egret社区

[教程文档] Lakeshore 插件开发 - 2. 组件编辑器部分的开发

2016-11-2 17:38
36201
本帖最后由 flep 于 2016-11-3 09:31 编辑

组件编辑器部分的开发
Lakeshore组件的开发包括二个大的方面:
1. 可视化编辑器部分的开发
2. 运行层部分的开发
本节主要讲解第一个大方面,可视化编辑器部分的开发
2、组件插件IDE4485.png
上图为15个场景组件
下图为8个非场景组件
2、组件插件IDE4509.png
其中,场景组件是需要添加到场景中才可以使用的,在同一个场景中可以添加多个场景组件。而非场景组件是不需要手动添加到场景中,可以直接引用,相当于默认就存在于场景中。
在讲解如何自定义一个插件之前,我们首先来分析一下IDE插件的配置和结构。
回到Egret Wing 3里,查看Egret Wing 3左侧的插件包文件结构,依次展开src/runtime/plugins/displayobject/locales/zh_CN/,找到strings.json文件,如下图:
2、组件插件IDE4746.png
strings.json文件用于配置插件,它决定了插件在IDE上的显示样式和内容,但不涉及到任何运行层的逻辑。
下面我们来分析一下strings.json文件的结构。
每一个组件插件配置文件都需要命名为strings.json。
strings.json包含4个大部分,如下:
{
“component”:{},
“conditions”:{},
“actions”:{},
“expressions”:{}
}

1. component - 组件
这里以displayobject 组件的strings.json为例:
"component": {
        "type": "1",
        "plugin": "AIDisplayObject",
        "name": "DisplayObject",
        "label": "显示对象",
        "inherit": "AIObject",
        "icon": "",
        "sceneIcon": "",
        "family": "",
        "insertType": "",
    "renderUpdate": "",
"renderRemember": "",
"renderType": "",
"priority": "",
        "version": "1.0",
        "dependencies": [],
        "author": "lakeshore",
        "toogle": true,
        "description": "此组件作为精灵的基类,可提供精灵的一些条件与动作,不作为IDE组件显示",
        "help": "",
        "homepage": "http://www.egret.com/products/lakeshore.html",
        "repository": {
            "type": "git",
            "url": "https://github.com/egret-labs/lakeshore-extensions.git"
        },
        "properties": [],
        "specials": []
    }
1) type
组件类型
0:非场景类型
非场景类型的组件全局中只能有一个,不能添加到场景,我们在添加条件与动作的时候可以直接使用。
1:场景类型
场景类型的组件可以在场景中添加多个,比如精灵组件,在场景中创建多个精灵。
2) plugin
插件类名
插件类名用于定义此插件在运行层时的名称。
一般情况下,一个插件只有一个runtime.ts文件,而一个runtimes.ts需要定义一个启动的类,类名为此插件的名称。例如我们查看movieclip插件下strings.json的plugin名为AIMovieClip,如图:
2、组件插件IDE6053.png
再打开movieclip插件下的runtime.ts文件,会发现会有一个启动的主类名,如图:
2、组件插件IDE6102.png
这两个类名必须一一对应,否则,到时候在Lakeshore运行的时候会报错。
3) name
插件名
插件本身的名字,暂时没有太多意义。
4) label
标签名
插件在Lakeshore中显示的组件名,如图:
2、组件插件IDE6203.png
5) inherit
插件继承关系
通常情况下,我们自定义的插件都需要继承内置的插件。如果是显示对象,一般继承自插件AIDisplayObject。如果是非显示对象,一般继承自AIObject。所谓显示对象就是在运行时可见的组件,否则为非显示对象,比如,动画、精灵、位图字体都是显示对象,而XML、JSON都是非显示对象。
这里为什么要建立继承关系呢?其实很简单,对于自定义的插件来讲,很多时候我们想直接使用系统内置的一些条件与动作,比如精灵条件里的: 2、组件插件IDE6429.png
我们不需要再重新写一遍这些条件,我们只需要继续自AIDisplayObject就可以直接利用displayobject组件下所包含的这些基础的条件与动作。因此,继承组件可以大大的除低自定义的条件与动作的编写。当然,你自己写的组件也可以继承你自已的组件,这里并没有限制。
6) icon
组件图标地址
在Lakeshore中,每个组件都有其对应的图标,例如动画组件:
2、组件插件IDE6611.png
一般的图标都放置在相应插件目录下的icons文件夹的根目录中,比如movieclip(动画)组件,如图:
2、组件插件IDE6666.png
每个组件的图标都需要两个png图片文件,如:
l mc.png
l mc_r.png
一个是非retina屏幕的图标,一个是retina屏幕的图标,其中retina屏幕下的图标文件名后面多一个”_r”。例如,movieclip的非retina屏图标名字为mc.png,retina屏的图标名字为mc_r.png。
地址为相对地址,所以这里为icons/mc.png。这里并不需要单独写retina屏下的地址,Lakeshore会智能的处理retina屏下的地址。
7) sceneIcon
组件添加在场景中后,默认显示的图标
在movieclip组件的icons文件夹下还有两个图标
l sceneMc.png
l sceneMc_r.png
这个图标是组件被添加到场景上后,显示的默认图标。比如,我们添加一个动画组件到场景中,它会在场景中默认显示如下图:
2、组件插件IDE7036.png
和组件图标相同,也是需要一个非retina屏版本,一个retina屏版本。
地址同样为相对地址。
8) family
组件所在的分组名称
这是一个很强大的功能,在同一个分组下,我们可以对组件进行类型切换。
2、组件插件IDE7138.png
比如movieclip组件的分组为displayobject(显示对象)
再打开按纽组件的strings.json文件,如下图:
2、组件插件IDE7205.png
按钮组件的分组名也为displayobject(显示对象)。同样,九宫格,精灵,瓦片平铺也同样如此。
同样的,位图文本组件bitmaptext,分组名变为了text,与文本组件textfield一样。还有些不需要进行类型切换的组件,如xml组件,其组为空“”。
一般原则是类似的组件可以编成一个分组,分组名任意,但注意不要和已经存在的分组名重复即可。
9) insertType
插件在场景工具栏中的显示类型
这里提供了三种常用的插入类型
l material
l text
l component
与Lakeshore中场景工具栏里对应,如下图:
2、组件插件IDE7476.png
分别对应关系为:
l 插入素材 - material
l 插入文字 - text
l 插入组件 - component
通常情况下,自定义的组件的插入类型都为component
10) insertSource
组件在IDE场景中渲染的字段类型
11) renderUpdate
组件在IDE场景中渲染的更新类型
12) renderRemember
组件在IDE场景组中需要记住的类型
13) renderType
组件在IDE场景中渲染类型
14) priority
组件窗口中的排序优先级
因为插件系统本身没有排序优先级,为了更好了将最常用的组件放在前面,我们需要给组件设置一个优先级,既priority值。值越小,显示越靠前。如图,精灵的优先级priority值为1,所以显示在第一个。骨骼的priority值为15,显示在最后,如下图:
2、组件插件IDE7828.png
15) version
组件版本
组件版本目前没有太多含义,为保留字段
16) dependencies
组件在运行层中所依懒的第三方库
通常情况下,我们不需要引入第三方库来进行自定义组件开发,因为在libs目录下的modules文件夹下已经内置了egret相关的基础库,如图:
2、组件插件IDE7963.png
但是有时候为了更方便快捷的进行自定义组件开发,我们不可能所有的代码都重新写。如果有现成优秀的第三方库,就可以节省很多开发周期。我们只需要引入进来即可以使用。比如,官方提供的龙骨库,dragonBones.js我们就可以直接引用,并开发龙骨组件来支持DragonBones制作的龙骨文件。打开dragonBones组件文件夹下的strings.json,可以发现依赖库的写法如图:
2、组件插件IDE8155.png
这里以libs为根目录,所有的第三方插件库都需要放在libs文件夹下,如图:
2、组件插件IDE8196.png
如果需要引入多个外部库,方式如下:
"dependencies": [
    {
         "src": "xxx/xxx/xxx.js",
         "srcRelease": "xxx/xxx/xxx.js"
    },
{
         "src": "yyy/yyy/yyy.js",
         "srcRelease": "yyy/yyy/yyy.js"
    }
]
17) author
作者名
这里可以注明插件作者信息
18) toogle
组件是否在Lakeshore中启用的开关
有时候插件可能还未编写完成,不希望在Lakeshore中显示并启用,这里设置为false,就可以关闭了,否则设置为true。
19) description
组件在Lakeshore中的说明描述
20) help
组件帮助文档的地址
通常一个插件需要有相关的教程文档说明,这样使用的时候会很方便。这里可以输入插件教程文档地址。如果没有,可以为空。
21) repository
插件仓地址,可以为空
22) Properties
组件所包含的基础属性列表
通常场景组件的基础属性,如下图所示:
2、组件插件IDE8688.png
每一个属性都具备如下结构
{
                "name": "name",
                "label": "名称",
                "prepare": "",
                "value": "",
                "valueType": "string",
                "restrict": "0-9a-zA-Z\u4e00-\u9fa5",
                "editType": "inputText",
                "description": "当前实例类型名称,这也就是说,多个实例可能会有相同的名字,而同一类型实例会具备相同的自定义属性与行为"
            }
a. name
属性名(固定)
b. label
Lakeshore中name属性的显示标签名
c. prepare
属性初始列表值,通常只有下拉列表中才有值
d. value
属性初始值
e. valueType
属性值类型,这里支持
i. string(字符串)
ii. number(数字)
iii. any (任意)
f. restrict
Lakeshore中输入时的限制字符,值“0-9a-zA-Z\u4e00-\u9fa5”表示只支持数字、大小写字母、中文等。如果值为空,则为不限制。具体限制规则将在其他章节中详细介绍。
g. editType
Lakeshore中编辑器类型,不同的编辑器类型呈现不同的ui效果,Lakeshore支持以下三种编辑器类型:
i. inputText ,如图,可进行文本输入
2、组件插件IDE9388.png
ii. text,如图,显示文本
2、组件插件IDE9403.png
iii. booleanSelect,如图,显示选布尔选择框
2、组件插件IDE9431.png
继承自AIDisplayObject的显示对象包括以下基本属性(名称固定):
l name - 名称
l uiGuid - GUID
l global - 全局
l visible - 可见
l x - X 轴坐标
l y - Y 轴坐标
l anchorX - X 锚点
l anchorY - Y 锚点
l width - 宽
l height - 高
l angle - 角度
l alpha - 透明度
通常我们自定义的插件可以直接拷贝sprite组件的基础属性。
23) specials
组件所包含的特有属性列表
精灵(sprite)的特有属性如图:
2、组件插件IDE9687.png
打开sprite组件下的strings.json文件,找到specials字段,可以看到下面有四个属性节点,分别为:
a. url - 图片源
b. enabled - 接受点击
c. collision - 参与碰撞
d. collisionData - 碰撞边缘编辑
special(特殊)属性结构如下:
{
                "name": "url",
                "label": "图片源",
                "prepare": "",
                "value": "",
                "valueType": "string",
                "restrict": "",
                "editType": "file",
                "fileFilter": "*.jpg;*.png",
                "description": "图片源"
}
其中name、label、prepare、value、valueType、restrict、description与基础属性一致,editType支持的类型比基础属性多,支持类型如下:
a. file
文件系统
2、组件插件IDE10252.png
b. inputText
文本输入 (与基础属性相同)
c. text
显示文本(与基础属性相同)
d. animation
动画编辑,打开动画编辑窗口
2、组件插件IDE10322.png
e. collisionData
碰撞边缘编辑
2、组件插件IDE10345.png
f. booleanSelect
布尔选择器
2、组件插件IDE10367.png
g. colorSelect
颜色选择器
2、组件插件IDE10387.png
h. customSelect
自定义列表选择器
2、组件插件IDE10411.png
i. fontSelect
字体选择器
2、组件插件IDE10430.png
2. conditions - 条件列表
每一个组件都可以有特有的条件或动作。所以,我们这里需要定义Lakeshore里,组件所有需要用到条件的列表,条件列表结构如下(sprite组件为例):
"conditions": {
        "name": "AISprite",
        "inherit": "AIDisplayObject",
        "features": [
            {
                "name": "其它",
                "conditions": [
                    {
                        "name": "当实例创建时",
                        "type": "OnCreatedEvent",
                        "callName": "onCreated",
                        "isTrigger": "true",
                        "toogle": "true",
                        "icon": "icons/conditions/OnCreatedEvent.png",
                        "description": "当实例创建时触发。",
                        "detailformat": "当实例创建时",
                        "properties": []
                    }
                ]
            },
            {
                "name": "网络",
                "conditions": [
                    {
                        "name": "当图片加载完毕",
                        "type": "OnResourceLoadedEvent",
                        "callName": "onResourceLoaded",
                        "isTrigger": "true",
                        "toogle": "true",
                        "icon": "icons/conditions/OnResourceLoadedEvent.png",
                        "description": "当图片加载完毕后触发。",
                        "detailformat": "当图片加载完毕时",
                        "properties": []
                    }
                ]
            }
        ]
}
1) name
名称
备用,暂时可以不用填写
2) Inherit
继承关系
备用,暂时可以不用写,因为条件默认继承关系已经在上面的component的inherit里指明了,这里可以不用写了。
3) features
类型特征
这里面显示的就是组件本身的具体条件列表了。有时候,一个组件可能存在着非常多的条件,可能多达几十个甚至更多。那么,将这些条件分成若干类,有利于更好的组织条件结构。类会有类型名来区分不同的类型。类型特征的结构为:
"features"[
{
    "name": "类型名1",
    "conditions": [
        {
              …………         
        }
    ]
},
{
    "name": "类型名2",
    "conditions": [
        {
             …………           
        },
{
             …………         
}
    ]
}
]
在Lakeshore中
2、组件插件IDE12325.png
红色框内的即为类型名,橙色框内的即为每个类型下面的条件列表。
下面来详细说明一下每个条件中的属性分别表示什么,以sprite组件的条件“当实例创建时”为例:
{
                        "name": "当实例创建时",
                        "type": "OnCreatedEvent",
                        "callName": "onCreated",
                        "isTrigger": "true",
                        "toogle": "true",
                        "icon": "icons/conditions/OnCreatedEvent.png",
                        "description": "当实例创建时触发。",
                        "detailformat": "当实例创建时",
                        "properties": []
}
a) name
条件在Lakeshore中的显示名称,如图:
2、组件插件IDE12880.png
b) type
条件类型
这里的条件类型为事件类名,与runtime.ts中定义的事件类名必须一致,后面在运行层的章节会详细讲解。
c) callName
条件调用函数名
条件在runtime.ts调用的函数名,与runtime.ts中调用的函数名必须一致,后面在运行层的章节会详细讲解。
d) isTrigger
是否为触发条件
从Lakeshore上我们可以直观的看到触发条件与非触发条件上的区别,如图:
2、组件插件IDE13080.png
触发条件在图标的左上角会有个蓝色的箭头,而非触发条件没有。关于触发条件与非触发条件我们将会在“Lakeshore事件表运行基制解密”的教程中进行详细讲解。
e) toogle
用于标记Lakeshore中是否显示此条件,如果为true,则显示,否则,不显示。
f) icon
条件在IDE中的图标,例如:
2、组件插件IDE13229.png
组件的条件图标放在相应组件插件的icons/conditions/目录下,icon引用的时候也是以此目录为根目录,例如:“icons/conditions/OnCreatedEvent.png”
g) description
条件描述说明
通常条件描述显示在选择条件后条件对话框的底边,如图:
2、组件插件IDE13375.png
h) detailformat
条件动态描述
通常为了在事件表中更好的展示条件的详细内容,我们需要在此定义条件的详细描述,如图:
2、组件插件IDE13439.png
红框中的“水平镜像”就是动态描述。对应的条件,我们可以从displayobject插件中的strings.json配置文件中找到,如图:
2、组件插件IDE13510.png
这里以特殊的“{数字索引}”标记来表达,查看“比较镜像状态”条件,我们会发现只有一个属性,因此,这里的数字索引从0开始,即{0},如果有多个属性,那么依次以{0}、{1}...{n}表示,记住:{}一定为英文输入法下的大括号,否则无法正常显示。这样设置之后,在事件表中将会动态的读取你选择的属性。
i) properties
条件中的属性列表
通常有三种类型的属性列表
i. 条件无属性
即properties里的数据为空,如图:
2、组件插件IDE13722.png
ii. 条件为普通属性
即没有预设默认值的属性,如图:
2、组件插件IDE13748.png
所谓没有预设默认值的属性,即属性列表中prepare为空。这样,在Lakeshore中的表现为:
2、组件插件IDE13799.png
iii. 条件为带有预设默认值的属性
2、组件插件IDE13815.png
这样在IDE中的表现为:
2、组件插件IDE13830.png
对于条件中属性的选择呈现方式在Lakeshore里支持以下几种情况:
①. 默认为文本输入,即properties属性值里没有editType字段并且prepare中没有值,那么样式如下:
2、组件插件IDE13924.png
②. editType:instance - 实例选择,如下图:
2、组件插件IDE13956.png
在IDE中呈现的效果为:
2、组件插件IDE13971.png
这样会智能的添加实例选择按纽。
③. editType:variable - 自定义变量选择
2、组件插件IDE14017.png
在Lakeshore中呈现的效果为:
2、组件插件IDE14038.png
④. editType:globalVariable - 全局变量选择
2、组件插件IDE14073.png
在IDE中的显现的效果为:
2、组件插件IDE14089.png
⑤. editType:scene - 场景选择,如图:
2、组件插件IDE14117.png
注意,此图为跳转场景的动作,条件与动作是一样。在IDE中的效果为:
2、组件插件IDE14153.png
这里也会动态的显示所有已创建的场景。
⑥. editType:DBArmature - 骨架列表
2、组件插件IDE14201.png
这里可以动态的呈现一个龙骨组件里所存在的骨架。
⑦. editType:DBAnimation 龙骨骨骼动画列表
2、组件插件IDE14257.png
可动态的呈现某个骨架下的所有动画列表,如图:
2、组件插件IDE14282.png
3. actions - 动作列表
动作列表与条件列表基本一样,下面只介绍动作列表与条件列表不同的部分,如下:
2、组件插件IDE14338.png
1) name
与条件列表中一样,呈现在Lakeshore中的图标名
2) type
在runtime.ts中执行该动作所使用的函数名,必须与rumtime.ts中所调用的函数名一致
其它属性与条件列表中类型,不再解释。
4. expressions - 表达式列表
为了更方便的在Lakeshore中输写表达式,需要在插件配置表中填写支持的表达式,下面以function插件为例来说明表达式,如图:
2、组件插件IDE14534.png
表达式属性列表结构如下:
{
                        "name": "param",
                        "type": "method",
                        "params": [
                            {
                                "value": "''",
                                "valueType": "string",
                                "restrict": "",
                                "description": "函数名"
                            },
                            {
                                "value": "0",
                                "valueType": "number",
                                "restrict": "",
                                "description": "参数索引"
                            }
                        ],
                        "returnType": "any",
                        "description": "获取某个参数的值"
}
1) name
表达式呈现在Lakeshore中的输入提示名称,如图:
2、组件插件IDE15354.png
2) type
调用类型
Lakeshore支持三种表达式调用类型
a. method
方法
如果类型为method,那么,在表达式输入确定的时候,会自动填上(),如图:
2、组件插件IDE15436.png
b. property
属性
c. getter
getter 属性
3) params
方法中所带的参数信息
另外,对于方法来讲,可能带有多个参数,因此,params会定义method所带的详细参数,params中每个参数详细信息如下:
{
                                        "value": "''",
                                        "valueType": "string",
                                        "restrict": "",
                                        "description": "函数名"
}
a. value
参数中的初始值。
b. valueType
参数的值类型
c. Restrict
备用
d. Desciption
参数描述
4) returntype
表达式返回类型,支持number、string、any
5) description
输入表达式时在Lakeshore中的提示信息,如图:
2、组件插件IDE15899.png
至此,与Lakeshore有关的strings.json文件结构便讲解完毕了。
对于插件核心,有几点要注意:
一、显示对象插件继承自AIDisplayObject
二、非显示对象插件继承自AIObject
三、detailformat 信息里的用引文用大括号{}来记录信息
如果已经掌握了上述相关的插件方面的知识,应该可以很轻松的写出Lakeshore组件相关的插件了。但是,插件系统最核心还是运行层runtime.ts相关的插件编写,因为只有完成了运行层插件的开发,开发的组件插件才算完整,才能够通过Lakeshore进行运行,下一个章节将详细讲解运行层插件开发方面的内容。

分享到 :
0 人收藏

1 个回复

倒序浏览
yjtx  官方团队 | 2016-11-3 15:41:10
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部