首先找到Laya编辑器目录

mac地址 /Applications/LayaAirIDE_beta.app/Contents/Resources/app/out/vs/layaEditor/
window 点击启动图标右键菜单找到根目录后 /Resources/app/out/vs/layaEditor/

使用vscode打开全目录搜索 SpineSkeletonPlayer

可以看到有SpineSkeletonPlayer类但是未实现

在LayaEditor下打开 renders文件夹并新建 spine目录

在spine目录下拖入 laya.spine.js 和 spine-core-4.0.js

并打开 laya.spine.js目录注释掉 SpineSkeleton类注册

在LayaEditor下找到 editor.max.js 脚本

依次打开 h5/renders/uiviewer
打开 editor.max.js 文件
搜索字段

TimeTraceTool.traceMsg(“IFrame excuteJsFile”)

4. 追加注册刚刚拖进来的 spine.core库和spine4.0库

   //注册spine库JSExecuteTool.excuteJsFile(laya.ide.managers.FileManager.getPath(rendersPath, "spine/spine-core-4.0.js"));JSExecuteTool.excuteJsFile(laya.ide.managers.FileManager.getPath(rendersPath, "spine/laya.spine.js"));

在layaEditor/renders 目录下打开 laya.editorUI.xml

找到 SkeletonPlayer 组件布局描述并 copy一份下来

稍作修改

<SpineSkeletonPlayer className="laya.editorUI.SpineSkeletonPlayer" skinLabel="url" icon="Laya.Skeleton" extension="skel" groups="公用,Spine,常用,节点,旋转及缩放" drag="3"><prop name="var" tips="声明一个唯一的名称，用来引用当前组件，方便在代码中调用此组件" type="string" default="" group="公用" /><prop name="name" tips="组件名称" type="string" default="" group="公用" /><prop name="x" tips="X轴坐标" type="number" default="" group="宽高及位置" /><prop name="y" tips="Y轴坐标" type="number" default="" group="宽高及位置" /><prop name="width" tips="宽度" type="number" default="" group="宽高及位置" /><prop name="height" tips="高度" type="number" default="" group="宽高及位置" /><prop name="alpha" tips="透明度" type="number" default="" /><prop name="mouseEnabled" tips="是否接收鼠标" type="bool" default="Auto" /><prop name="scaleX" tips="水平缩放，默认为1" type="number" default="" /><prop name="scaleY" tips="垂直缩放，默认为1" type="number" default="" /><prop name="visible" tips="是否显示，默认为true" type="bool" default="true" /><prop name="rotation" tips="旋转的角度" type="number" default="" /><prop name="url" tips="骨骼动画文件" type="string" accept="res" acceptTypes="skel" default=""  group="Spine"/><prop name="animationName" tips="动画名称" type="option" option="" default="" group="Spine"/><prop name="loop" tips="循环播放" type="bool" default="false" group="Spine"/><prop name="skinName" tips="皮肤名" type="option" option="" default="" group="Spine"/><prop name="startFrameTime" tips="开始时间(秒)" type="number" minChange="0.1" min="0" default="0" group="Spine"/><prop name="timeScale" tips="时间缩放" type="number" minChange="0.1" min="0" default="1" group="Spine"/></SpineSkeletonPlayer>

打开layaEditor/renders/editorui2.0/laya.editorUI.js 脚本实现 SpineSkeletonPlayer类

/***骨骼动画播放器*///class laya.editorUI.SkeletonPlayer extends laya.ani.bone.Skeletonclass SpineSkeletonPlayer extends Laya.Sprite {constructor() {super();this._mMBounds = null;this._comXml = null;this.template = new Laya.SpineTemplet(Laya.SpineVersion.v4_0);this.size(100, 100);}//获取xml数据get comXml() {return this._comXml;}//当界面变动时 xml数据会刷新set comXml(value) {this._comXml = value;}get url() {return this._$get_url;}//加载spineset url(path) {path = ResFileManager.getIDEResPath(path);if (!FileManager.exists(path)) {var image;image = new Image();image.skin = "loseskin.png";this.addChild(image);return;}Loader$1.clearRes(path);this.template.loadAni(path);this.template.on(Laya.Event.COMPLETE, this, this.onLoadComplete)}onLoadComplete() {let inst = this.template.buildArmature();if (!inst) return;//添加到当前节点this.inst = inst;this.addChild(inst);//获取骨骼数据const data = inst.skeleton.data;const clips = data.animations;const skins = data.skins;const props = this._comXml.props || {};const options = this._comXml.options || {};//获取动画和皮肤名称列表let animationNames = clips.map(v => v.name);let skinNames = skins.map(v => v.name);options.animationName = animationNames.join(",");options.skinName = skinNames.join(",");//设置皮肤，动画，循环，开始播放时间，结束播放时间，播放速度props.skinName = skinNames.indexOf(props.skinName) != -1 ? props.skinName : skinNames[0];props.animationName = animationNames.indexOf(props.animationName) != -1 ? props.animationName : animationNames[0];props.isLoop = !!props.isLoop;props.startTime = props.startTime || 0;props.endTime = props.endTime != void 0 ? endTime.endTime : void 0;props.timeScale = props.timeScale != void 0 ? props.timeScale : 1.0;props.skinName && inst.skeleton.setSkinByName(props.skinName);if (props.animationName) {inst.playbackRate(props.timeScale);inst.play(props.animationName, props.isLoop, false, props.startTime);}this.comXml.props = props;this._comXml.options = options;}removeSelf() {super.removeSelf();this.removeChildren();if (this.inst) {this.inst.destroy();this.inst = null;}this.template = null;}_getBoundPointsM(ifRotate) {(ifRotate === void 0) && (ifRotate = false);if (this._width > 0 && this._height > 0 && !this.autoSize) {if (!this._mMBounds) {this._mMBounds = new Rectangle();}this._mMBounds.setTo(0, 0, this._width, this._height);return this._mMBounds._getBoundPoints();}return super._getBoundPointsM.call(this, ifRotate);}}__class(SpineSkeletonPlayer, 'laya.editorUI.SpineSkeletonPlayer', Laya.Sprite);

刷新编辑器将spine文件拖入场景

小技巧如何打印调试LayaEditor

Laya编辑器扩展实现Spine可视化操作相关推荐

Unity3D使用经验总结编辑器扩展篇【转】
一个引擎,最重要的就是工具,工具除了提升开发速度,提供可视化操作环境以外,还带了容错功能. 它使得大家的工作局限在一定的范围内,比如一个变量的配置,或者是一些类型的选择. 使用编辑器,使得既使不太明白 ...
Unity编辑器扩展 UI控件篇
前摇 :认识编辑器扩展的必要性由于各种各样的原因,无论是移动端亦或是主机/PC端,进几年的发行的游戏体量是越来越大.通常来说大体量的游戏开发需要一套很成熟完善的工作流,亦或说有很强的工业化的能力,像 ...
Unity 编辑器扩展场景视图内控制对象
http://blog.csdn.net/akof1314/article/details/38129031 假设有一个敌人生成器类,其中有个属性range用来表示敌人生成的范围区域大小,那么可以用O ...
Unity3D Editor 编辑器扩展3 Editor脚本
Unity3D Editor 编辑器扩展3 Editor脚本环境:Unity2017.2 语言:C# 总起: 在编辑Unity项目的时候,总不可能避免的接触到Unity自身自带的Inspector参 ...
Unity 编辑器扩展菜单
Unity 编辑器扩展菜单目录 Unity 编辑器扩展菜单一.MenuItem 特性菜单栏扩展 1.创建多级菜单 2.创建可使用快捷键的菜单项 3.创建可被勾选的菜单项 4.检查菜单是否使用 5 ...
Unity 制作旋转门推拉门柜门抽屉点击自动开门效果开关门自动播放音效 (附带编辑器扩展代码)
简易的门制作对于一个新手来说,这个工具是最好的选择上一篇关于开关门的文章相对于复杂,感兴趣的可以查看上篇开关门制作优点挂载就能使用控制面板一看就懂(全是中文) 简单的调试就能获得自己想要的效 ...
Unity3D编辑器扩展--自定义创建圆锥体
前言这几天琢磨着开发个个人作品的时候,发现原来Unity3D官方没有提供圆锥体的创建功能,就自己做了个编辑器扩展.鉴于之前搜索Mesh编程的时候很少有博客把自己的算法讲清楚,这里我抛砖引玉,尽我所能 ...
Vim文本编辑器及文本处理常用操作
目录 vim编辑器介绍 vi编辑器 vim编辑器基本模式派生模式其他使用vim编辑器 vim编辑器命令格式 vim基础操作-打开文件 vim基础操作-移动光标 vim基础操作-数据操作 vim ...
Unity3D 编辑器扩展跳转显示指定目录
做编辑器扩展开发时,假如我们生成一个文件到Assets之外的目录,要查看它的时候,需要从系统路径一步步打开到那个目录. Unity给我们提供了一个API可以直接打开指定目录,类似Project窗口右键 ...

Laya编辑器扩展实现Spine可视化操作

首先找到Laya编辑器目录

在LayaEditor下打开 renders文件夹并新建 spine目录

在spine目录下拖入 laya.spine.js 和 spine-core-4.0.js

在LayaEditor下找到 editor.max.js 脚本

在layaEditor/renders 目录下打开 laya.editorUI.xml

打开layaEditor/renders/editorui2.0/laya.editorUI.js 脚本实现 SpineSkeletonPlayer类

刷新编辑器将spine文件拖入场景

小技巧如何打印调试LayaEditor

Laya编辑器扩展实现Spine可视化操作相关推荐

最新文章

热门文章

Laya编辑器扩展 实现Spine可视化操作

首先找到Laya编辑器目录

在LayaEditor下打开 renders文件夹 并新建 spine目录

在spine目录下 拖入 laya.spine.js 和 spine-core-4.0.js

在LayaEditor下找到 editor.max.js 脚本

在layaEditor/renders 目录下 打开 laya.editorUI.xml

打开layaEditor/renders/editorui2.0/laya.editorUI.js 脚本 实现 SpineSkeletonPlayer类

刷新编辑器 将spine文件拖入场景

小技巧 如何打印调试LayaEditor

Laya编辑器扩展 实现Spine可视化操作相关推荐

最新文章

热门文章

Laya编辑器扩展实现Spine可视化操作

在LayaEditor下打开 renders文件夹并新建 spine目录

在spine目录下拖入 laya.spine.js 和 spine-core-4.0.js

在layaEditor/renders 目录下打开 laya.editorUI.xml

打开layaEditor/renders/editorui2.0/laya.editorUI.js 脚本实现 SpineSkeletonPlayer类

刷新编辑器将spine文件拖入场景

小技巧如何打印调试LayaEditor

Laya编辑器扩展实现Spine可视化操作相关推荐