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

首先找到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 脚本

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

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.Skeleton
	class 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;
		}

		//加载spine
		set 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