CocosPlugin/cocos-animator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:界面拉伸适配. add:支持cocos animation,spine,dragonbones等文件导入.

Browse Source
This commit is contained in:
YipLee
2021-01-22 00:02:49 +08:00
parent c4f716c8e9
commit c232a91a41
23 changed files with 2590 additions and 2028 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
animator-editor/assets/script/common/cmpt/ResizeArea.ts
View File

@@ -1,4 +1,6 @@
import Setting from "../../editor/Setting";
import Events, { EventName } from "../util/Events";
import Tool from "../util/Tool";
const { ccclass, property } = cc._decorator;
@@ -36,7 +38,7 @@ export default class ResizeArea extends cc.Component {
this.Target.updateAlignment();
Events.emit(EventName.RESIZE, this.Target.node);
this.updateWidget(this.Target.node);
Setting.save();
}
private onTouchStart(event: cc.Event.EventTouch) {
@@ -61,12 +63,4 @@ export default class ResizeArea extends cc.Component {
private onMouseLeave(event: cc.Event.EventMouse) {
this._canvas.style.cursor = 'default ';
}
private updateWidget(node: cc.Node) {
node.children.forEach((c) => {
let widget = c.getComponent(cc.Widget);
widget && widget.updateAlignment();
this.updateWidget(c);
});
}
}

16
animator-editor/assets/script/common/util/Tool.ts
View File

@@ -105,4 +105,20 @@ export default class Tool {
arr.splice(idx, 1);
return true
}
/**
* 递归遍历所有子节点并更新widget组件
* @param node 目标节点，需遍历其子节点
* @param ignoreList 忽略节点，这些节点的子节点跳过遍历
*/
public static updateWidget(node: cc.Node, ...ignoreList: cc.Node[]) {
node.children.forEach((c) => {
let widget = c.getComponent(cc.Widget);
widget && widget.updateAlignment();
if (this.arrayHas(ignoreList, c)) {
return;
}
this.updateWidget(c, ...ignoreList);
});
}
}

35
animator-editor/assets/script/editor/Editor.ts
View File

@@ -1,7 +1,9 @@
import Tool from "../common/util/Tool";
import FsmCtr from "./fsm/FsmCtr";
import InspectorCtr from "./inspector/InspectorCtr";
import Menu from "./menu/Menu";
import ParamCtr from "./parameters/ParamCtr";
import Setting from "./Setting";
const { ccclass, property } = cc._decorator;
@@ -9,7 +11,7 @@ const { ccclass, property } = cc._decorator;
export default class Editor extends cc.Component {
@property(FsmCtr) Fsm: FsmCtr = null;
@property(InspectorCtr) Inspector: InspectorCtr = null;
@property(ParamCtr) ParamCtr: ParamCtr = null;
@property(ParamCtr) Parameters: ParamCtr = null;
@property(Menu) Menu: Menu = null;
public static Inst: Editor = null;
@@ -18,6 +20,15 @@ export default class Editor extends cc.Component {
private _keySet: Set<cc.macro.KEY> = new Set();
protected onLoad() {
// 初始化界面宽度
Setting.read();
this.Inspector.node.width = Setting.inspectorWidth;
this.Inspector.getComponent(cc.Widget).updateAlignment();
Tool.updateWidget(this.Inspector.node);
this.Parameters.node.width = Setting.parametersWidth;
this.Parameters.getComponent(cc.Widget).updateAlignment();
Tool.updateWidget(this.Parameters.node);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
}
@@ -33,8 +44,8 @@ export default class Editor extends cc.Component {
switch (event.keyCode) {
case cc.macro.KEY.s:
if (this._keySet.has(cc.macro.KEY.ctrl)) {
// 保存工程文件
this.saveProject();
// 导出工程文件
this.exportProject();
}
break;
case cc.macro.KEY.e:
@@ -56,15 +67,15 @@ export default class Editor extends cc.Component {
this._keySet.delete(event.keyCode);
}
private saveProject() {
private exportProject() {
let data: any = this.Fsm.exportProject();
data.parameters = this.ParamCtr.export();
data.parameters = this.Parameters.export();
this.save('animator.json', data);
}
private exportRuntimeData() {
let data: any = this.Fsm.exportRuntimeData();
data.parameters = this.ParamCtr.export();
data.parameters = this.Parameters.export();
this.save('runtimeData.json', data);
}
@@ -83,16 +94,4 @@ export default class Editor extends cc.Component {
// 移除
document.body.removeChild(eleLink);
}
/**
* 导入工程文件
*/
public importProject(data: any) {
if (!data.hasOwnProperty('animator')) {
return;
}
this.ParamCtr.import(data.parameters);
this.Fsm.importProject(data);
}
}

45
animator-editor/assets/script/editor/Setting.ts Normal file
View File

@@ -0,0 +1,45 @@
import Editor from "./Editor";
/**
* 本地设置
*/
export default class Setting {
private static _inspectorWidth: number = 400;
public static get inspectorWidth() { return this._inspectorWidth; }
private static _parametersWidth: number = 300;
public static get parametersWidth() { return this._parametersWidth; }
/**
* 初始化读取数据
*/
public static read() {
let str = cc.sys.localStorage.getItem('setting');
if (!str) {
return;
}
let data = JSON.parse(str);
if (!data) {
return;
}
if (data.inspectorWidth) {
this._inspectorWidth = data.inspectorWidth;
}
if (data.parametersWidth) {
this._parametersWidth = data.parametersWidth;
}
}
/**
* 保存数据
*/
public static save() {
this._inspectorWidth = Editor.Inst.Inspector.node.width;
this._parametersWidth = Editor.Inst.Parameters.node.width;
let data = {
inspectorWidth: this._inspectorWidth,
parametersWidth: this._parametersWidth
};
cc.sys.localStorage.setItem('setting', JSON.stringify(data));
}
}

9
animator-editor/assets/script/editor/Setting.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "e82bc412-96df-4bfc-a190-2cb173908cbd",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

454
animator-editor/assets/script/editor/fsm/FsmCtr.ts
View File

@@ -1,4 +1,5 @@
import Events, { EventName, preloadEvent } from "../../common/util/Events";
import Tool from "../../common/util/Tool";
import { ANIMATOR_VERSION } from "../../constant/BaseConst";
import Condition from "../data/Condition";
import State from "../data/State";
@@ -58,210 +59,6 @@ export default class FsmCtr extends cc.Component {
}
}
//#region import and export
private importTransitions(transitionsData: any[], state: State, stateMap: Map<string, State>, paramMap: Map<string, ParamItem>) {
transitionsData.forEach((e) => {
let toState: State = stateMap.get(e.toState);
let transition: Transition = state.addTransition(toState);
transition.hasExitTime = e.hasExitTime;
e.conditions.forEach((cData) => {
let paramItem = paramMap.get(cData.param);
let condition: Condition = transition.addCondition(paramItem);
condition.value = cData.value;
condition.logic = cData.logic;
});
});
}
private importSubState(upData: any, upMachine: StateMachine, stateDataMap: Map<string, any>, stateMap: Map<string, State>, paramMap: Map<string, ParamItem>) {
upData.subStates.forEach((name: string) => {
let state = new State(upMachine, false);
stateMap.set(name, state);
let data = stateDataMap.get(name);
state.setPosition(data.position[0], data.position[1]);
state.name = data.state;
state.motion = data.motion;
state.speed = data.speed;
state.multiplierParam = paramMap.get(data.multiplier) || null;
state.loop = data.loop;
upMachine.add(state);
});
}
private importSubMachine(upData: any, upMachine: StateMachine, subMachineDataMap: Map<string, any>, subMachineMap: Map<string, StateMachine>, stateDataMap: Map<string, any>, stateMap: Map<string, State>, paramMap: Map<string, ParamItem>) {
upData.subStateMachines.forEach((name: string) => {
let stateMachine = new StateMachine(upMachine);
subMachineMap.set(name, stateMachine);
let data = subMachineDataMap.get(name);
stateMachine.setLayerPos(data.layerPos[0], data.layerPos[1]);
stateMachine.setLayerScale(data.layerScale);
stateMachine.setAnyStatePos(data.anyStatePos[0], data.anyStatePos[1]);
stateMachine.name = data.name;
stateMachine.setPosition(data.position[0], data.position[1]);
stateMachine.setUpStateMachinePos(data.upStateMachinePos[0], data.upStateMachinePos[1]);
upMachine.add(stateMachine);
this.importSubState(data, stateMachine, stateDataMap, stateMap, paramMap);
this.importSubMachine(data, stateMachine, subMachineDataMap, subMachineMap, stateDataMap, stateMap, paramMap);
});
}
private exportAllSubMachine(arr: any[], stateMachine: StateMachine) {
stateMachine.subStateMachines.forEach((sub) => {
let data = {
layerPos: [sub.layerPos.x, sub.layerPos.y],
layerScale: sub.layerScale,
anyStatePos: [sub.anyStatePos.x, sub.anyStatePos.y],
name: sub.name,
position: [sub.position.x, sub.position.y],
upStateMachine: sub.upStateMachine.name,
upStateMachinePos: [sub.upStateMachinePos.x, sub.upStateMachinePos.y],
subStates: [],
subStateMachines: [],
}
sub.subStates.forEach((e) => {
data.subStates.push(e.name);
});
sub.subStateMachines.forEach((e) => {
data.subStateMachines.push(e.name);
});
arr.push(data);
this.exportAllSubMachine(arr, sub);
});
}
private exportAllState(arr: any[], stateMachine: StateMachine, isRuntimeData: boolean = false) {
stateMachine.subStates.forEach((e) => {
let data = null;
if (isRuntimeData) {
data = {
state: e.name,
motion: e.motion,
speed: e.speed,
multiplier: e.getMultiplierName(),
loop: e.loop,
transitions: e.getAllTransitionData()
}
} else {
data = {
position: [e.position.x, e.position.y],
upStateMachine: e.upStateMachine.name,
state: e.name,
motion: e.motion,
speed: e.speed,
multiplier: e.getMultiplierName(),
loop: e.loop,
transitions: e.getAllTransitionData()
}
}
arr.push(data);
});
stateMachine.subStateMachines.forEach((sub) => {
this.exportAllState(arr, sub);
});
}
/**
* 导入工程数据
*/
public importProject(data: any) {
let paramMap: Map<string, ParamItem> = Editor.Inst.ParamCtr.getParamMap();
let mainStateMachineData = data.mainStateMachine;
let subStateMachinesData = data.subStateMachines;
let defaultStateData: string = data.defaultState;
let anyStateData = data.anyState;
let statesData = data.states;
let stateDataMap: Map<string, any> = new Map();
statesData.forEach((e: any) => { stateDataMap.set(e.state, e); });
let stateMap: Map<string, State> = new Map();
let subMachineDataMap: Map<string, any> = new Map();
subStateMachinesData.forEach((e: any) => { subMachineDataMap.set(e.name, e) });
let subMachineMap: Map<string, StateMachine> = new Map();
let main = this.MachineLayer.mainStateMachine;
main.setLayerPos(mainStateMachineData.layerPos[0], mainStateMachineData.layerPos[1]);
main.setLayerScale(mainStateMachineData.layerScale);
main.setAnyStatePos(mainStateMachineData.anyStatePos[0], mainStateMachineData.anyStatePos[1]);
this.importSubState(mainStateMachineData, main, stateDataMap, stateMap, paramMap);
this.importSubMachine(mainStateMachineData, main, subMachineDataMap, subMachineMap, stateDataMap, stateMap, paramMap);
if (stateMap.has(defaultStateData))
this.MachineLayer.defaultState = stateMap.get(defaultStateData);
this.importTransitions(anyStateData.transitions, this.MachineLayer.anyState.state, stateMap, paramMap);
statesData.forEach((e: any) => {
let state: State = stateMap.get(e.state);
if (!state) {
cc.error('error');
}
this.importTransitions(e.transitions, state, stateMap, paramMap);
});
this.MachineLayer.setCurStateMachine();
}
/**
* 导出工程数据
*/
public exportProject() {
let main = this.MachineLayer.mainStateMachine;
let animator = ANIMATOR_VERSION;
let mainStateMachine = {
layerPos: [main.layerPos.x, main.layerPos.y],
layerScale: main.layerScale,
anyStatePos: [main.anyStatePos.x, main.anyStatePos.y],
subStates: [],
subStateMachines: [],
};
main.subStates.forEach((e) => {
mainStateMachine.subStates.push(e.name);
});
main.subStateMachines.forEach((e) => {
mainStateMachine.subStateMachines.push(e.name);
});
let subStateMachines = [];
this.exportAllSubMachine(subStateMachines, main);
let defaultState: string = this.MachineLayer.defaultState ? this.MachineLayer.defaultState.name : '';
let anyState = {
transitions: this.MachineLayer.anyState.state.getAllTransitionData()
};
let states = [];
this.exportAllState(states, main);
return {
animator: animator,
mainStateMachine: mainStateMachine,
subStateMachines: subStateMachines,
defaultState: defaultState,
anyState: anyState,
states: states
};
}
/**
* 导出runtime数据
*/
public exportRuntimeData() {
let main = this.MachineLayer.mainStateMachine;
let defaultState: string = this.MachineLayer.defaultState ? this.MachineLayer.defaultState.name : '';
let anyState = {
transitions: this.MachineLayer.anyState.state.getAllTransitionData()
};
let states = [];
this.exportAllState(states, main, true);
return {
defaultState: defaultState,
anyState: anyState,
states: states
};
}
//#endregion
/**
* 按下鼠标左键的处理
*/
@@ -604,4 +401,253 @@ export default class FsmCtr extends cc.Component {
this.setCurStateMachine(stateMachine);
}
//#endregion
//#region import and export
private importTransitions(transitionsData: any[], state: State, stateMap: Map<string, State>, paramMap: Map<string, ParamItem>) {
transitionsData.forEach((e) => {
let toState: State = stateMap.get(e.toState);
let transition: Transition = state.addTransition(toState);
transition.hasExitTime = e.hasExitTime;
e.conditions.forEach((cData) => {
let paramItem = paramMap.get(cData.param);
let condition: Condition = transition.addCondition(paramItem);
condition.value = cData.value;
condition.logic = cData.logic;
});
});
}
private importSubState(upData: any, upMachine: StateMachine, stateDataMap: Map<string, any>, stateMap: Map<string, State>, paramMap: Map<string, ParamItem>) {
upData.subStates.forEach((name: string) => {
let state = new State(upMachine, false);
stateMap.set(name, state);
let data = stateDataMap.get(name);
state.setPosition(data.position[0], data.position[1]);
state.name = data.state;
state.motion = data.motion;
state.speed = data.speed;
state.multiplierParam = paramMap.get(data.multiplier) || null;
state.loop = data.loop;
upMachine.add(state);
});
}
private importSubMachine(upData: any, upMachine: StateMachine, subMachineDataMap: Map<string, any>, subMachineMap: Map<string, StateMachine>, stateDataMap: Map<string, any>, stateMap: Map<string, State>, paramMap: Map<string, ParamItem>) {
upData.subStateMachines.forEach((name: string) => {
let stateMachine = new StateMachine(upMachine);
subMachineMap.set(name, stateMachine);
let data = subMachineDataMap.get(name);
stateMachine.setLayerPos(data.layerPos[0], data.layerPos[1]);
stateMachine.setLayerScale(data.layerScale);
stateMachine.setAnyStatePos(data.anyStatePos[0], data.anyStatePos[1]);
stateMachine.name = data.name;
stateMachine.setPosition(data.position[0], data.position[1]);
stateMachine.setUpStateMachinePos(data.upStateMachinePos[0], data.upStateMachinePos[1]);
upMachine.add(stateMachine);
this.importSubState(data, stateMachine, stateDataMap, stateMap, paramMap);
this.importSubMachine(data, stateMachine, subMachineDataMap, subMachineMap, stateDataMap, stateMap, paramMap);
});
}
private exportAllSubMachine(arr: any[], stateMachine: StateMachine) {
stateMachine.subStateMachines.forEach((sub) => {
let data = {
layerPos: [sub.layerPos.x, sub.layerPos.y],
layerScale: sub.layerScale,
anyStatePos: [sub.anyStatePos.x, sub.anyStatePos.y],
name: sub.name,
position: [sub.position.x, sub.position.y],
upStateMachine: sub.upStateMachine.name,
upStateMachinePos: [sub.upStateMachinePos.x, sub.upStateMachinePos.y],
subStates: [],
subStateMachines: [],
}
sub.subStates.forEach((e) => {
data.subStates.push(e.name);
});
sub.subStateMachines.forEach((e) => {
data.subStateMachines.push(e.name);
});
arr.push(data);
this.exportAllSubMachine(arr, sub);
});
}
private exportAllState(arr: any[], stateMachine: StateMachine, isRuntimeData: boolean = false) {
stateMachine.subStates.forEach((e) => {
let data = null;
if (isRuntimeData) {
data = {
state: e.name,
motion: e.motion,
speed: e.speed,
multiplier: e.getMultiplierName(),
loop: e.loop,
transitions: e.getAllTransitionData()
}
} else {
data = {
position: [e.position.x, e.position.y],
upStateMachine: e.upStateMachine.name,
state: e.name,
motion: e.motion,
speed: e.speed,
multiplier: e.getMultiplierName(),
loop: e.loop,
transitions: e.getAllTransitionData()
}
}
arr.push(data);
});
stateMachine.subStateMachines.forEach((sub) => {
this.exportAllState(arr, sub);
});
}
/**
* 导入工程数据
*/
public importProject(data: any) {
let paramMap: Map<string, ParamItem> = Editor.Inst.Parameters.getParamMap();
let mainStateMachineData = data.mainStateMachine;
let subStateMachinesData = data.subStateMachines;
let defaultStateData: string = data.defaultState;
let anyStateData = data.anyState;
let statesData = data.states;
let stateDataMap: Map<string, any> = new Map();
statesData.forEach((e: any) => { stateDataMap.set(e.state, e); });
let stateMap: Map<string, State> = new Map();
let subMachineDataMap: Map<string, any> = new Map();
subStateMachinesData.forEach((e: any) => { subMachineDataMap.set(e.name, e) });
let subMachineMap: Map<string, StateMachine> = new Map();
let main = this.MachineLayer.mainStateMachine;
main.setLayerPos(mainStateMachineData.layerPos[0], mainStateMachineData.layerPos[1]);
main.setLayerScale(mainStateMachineData.layerScale);
main.setAnyStatePos(mainStateMachineData.anyStatePos[0], mainStateMachineData.anyStatePos[1]);
this.importSubState(mainStateMachineData, main, stateDataMap, stateMap, paramMap);
this.importSubMachine(mainStateMachineData, main, subMachineDataMap, subMachineMap, stateDataMap, stateMap, paramMap);
if (stateMap.has(defaultStateData))
this.MachineLayer.defaultState = stateMap.get(defaultStateData);
this.importTransitions(anyStateData.transitions, this.MachineLayer.anyState.state, stateMap, paramMap);
statesData.forEach((e: any) => {
let state: State = stateMap.get(e.state);
if (!state) {
cc.error('error');
}
this.importTransitions(e.transitions, state, stateMap, paramMap);
});
this.MachineLayer.setCurStateMachine();
}
/**
* 导入cocos animation文件
*/
public importAnim(animData: any) {
let x = Tool.randFloat(-this.MachineLayer.node.x - 100, -this.MachineLayer.node.x + 100);
let y = Tool.randFloat(-this.MachineLayer.node.y - 100, -this.MachineLayer.node.y + 100);
let unitState = this.MachineLayer.createState(cc.v2(x, y));
let state: State = unitState.state;
state.name = animData._name;
state.motion = animData._name;
state.speed = animData.speed;
state.loop = animData.wrapMode === cc.WrapMode.Loop;
}
/**
* 导入spine json文件
*/
public improtSpine(spineData: any) {
for (let name in spineData.animations) {
let x = Tool.randFloat(-this.MachineLayer.node.x - 100, -this.MachineLayer.node.x + 100);
let y = Tool.randFloat(-this.MachineLayer.node.y - 100, -this.MachineLayer.node.y + 100);
let unitState = this.MachineLayer.createState(cc.v2(x, y));
let state: State = unitState.state;
state.name = name;
state.motion = name;
}
}
/**
* 导入dragonbones json文件
*/
public importDragonBones(data: any) {
data.armature.forEach((e) => {
e.animation.forEach((anim) => {
let x = Tool.randFloat(-this.MachineLayer.node.x - 100, -this.MachineLayer.node.x + 100);
let y = Tool.randFloat(-this.MachineLayer.node.y - 100, -this.MachineLayer.node.y + 100);
let unitState = this.MachineLayer.createState(cc.v2(x, y));
let state: State = unitState.state;
state.name = anim.name;
state.motion = anim.name;
state.loop = anim.playTimes === 0;
});
});
}
/**
* 导出工程数据
*/
public exportProject() {
let main = this.MachineLayer.mainStateMachine;
let animator = ANIMATOR_VERSION;
let mainStateMachine = {
layerPos: [main.layerPos.x, main.layerPos.y],
layerScale: main.layerScale,
anyStatePos: [main.anyStatePos.x, main.anyStatePos.y],
subStates: [],
subStateMachines: [],
};
main.subStates.forEach((e) => {
mainStateMachine.subStates.push(e.name);
});
main.subStateMachines.forEach((e) => {
mainStateMachine.subStateMachines.push(e.name);
});
let subStateMachines = [];
this.exportAllSubMachine(subStateMachines, main);
let defaultState: string = this.MachineLayer.defaultState ? this.MachineLayer.defaultState.name : '';
let anyState = {
transitions: this.MachineLayer.anyState.state.getAllTransitionData()
};
let states = [];
this.exportAllState(states, main);
return {
animator: animator,
mainStateMachine: mainStateMachine,
subStateMachines: subStateMachines,
defaultState: defaultState,
anyState: anyState,
states: states
};
}
/**
* 导出runtime数据
*/
public exportRuntimeData() {
let main = this.MachineLayer.mainStateMachine;
let defaultState: string = this.MachineLayer.defaultState ? this.MachineLayer.defaultState.name : '';
let anyState = {
transitions: this.MachineLayer.anyState.state.getAllTransitionData()
};
let states = [];
this.exportAllState(states, main, true);
return {
defaultState: defaultState,
anyState: anyState,
states: states
};
}
//#endregion
}

13
animator-editor/assets/script/editor/fsm/MachineLayer.ts
View File

@@ -12,6 +12,9 @@ import UnitStateMachine from "./UnitStateMachine";
const { ccclass, property } = cc._decorator;
/** 状态机视图界面边长 */
const LEN = 9000;
@ccclass
export default class MachineLayer extends cc.Component {
@property(cc.Node) Grid: cc.Node = null;
@@ -36,11 +39,11 @@ export default class MachineLayer extends cc.Component {
private _upUnit: UnitStateMachine = null;
protected onLoad() {
this.node.setContentSize(6750, 6750);
this.Grid.setContentSize(6750, 6750);
this.node.setContentSize(LEN, LEN);
this.Grid.setContentSize(LEN, LEN);
this._mainStateMachine = new StateMachine(null);
this._curStateMachine = this._mainStateMachine;
this._anyState = this.createState(cc.v2(-360, 300), true);
this._anyState = this.createState(cc.v2(-300, 300), true);
this._curStateMachine.setAnyStatePos(this._anyState.node.position);
this.NavBar.refreshBar([this._mainStateMachine]);
@@ -121,7 +124,7 @@ export default class MachineLayer extends cc.Component {
node.destroy();
}
// 生成状态机、状态、连线节点
// 生成状态、状态机节点
let stateMap: Map<State, UnitState> = new Map();
let machineMap: Map<StateMachine, UnitStateMachine> = new Map();
this._upUnit && machineMap.set(stateMachine.upStateMachine, this._upUnit);
@@ -154,7 +157,7 @@ export default class MachineLayer extends cc.Component {
}
machineMap.set(e, unitStateMachine);
});
// 生成连线节点
let stateKeys = stateMap.keys();
for (let i = 0; i < stateMap.size; i++) {
let state: State = stateKeys.next().value;

5
animator-editor/assets/script/editor/fsm/NavBar.ts
View File

@@ -18,6 +18,7 @@ export default class NavBar extends cc.Component {
protected onLoad() {
this._widget = this.getComponent(cc.Widget);
this._contentWidget = this.Content.getComponent(cc.Widget);
this.onEventResize();
Events.targetOn(this);
}
@@ -43,8 +44,8 @@ export default class NavBar extends cc.Component {
}
@preloadEvent(EventName.RESIZE)
private onEventResize(node: cc.Node) {
this._widget.left = Editor.Inst.ParamCtr.node.width;
private onEventResize(node?: cc.Node) {
this._widget.left = Editor.Inst.Parameters.node.width;
this._widget.right = Editor.Inst.Inspector.node.width;
this._widget.updateAlignment();
this._contentWidget.updateAlignment();

5
animator-editor/assets/script/editor/inspector/ConditionItem.ts
View File

@@ -128,15 +128,14 @@ export default class ConditionItem extends cc.Component implements RecycleNode {
private onClickParamSelect(event: cc.Event) {
let target: cc.Node = event.target;
let worldPos: cc.Vec2 = target.parent.convertToWorldSpaceAR(target.position.sub(cc.v2(0, 0)));
Events.emit(EventName.SHOW_PARAM_SELECT, worldPos, 30, this);
Events.emit(EventName.SHOW_PARAM_SELECT, target, this);
this._hasInit && Events.emit(EventName.CONDITION_SELECT, this);
}
private onClickLogicSelect(event: cc.Event) {
let target: cc.Node = event.target;
let worldPos: cc.Vec2 = target.parent.convertToWorldSpaceAR(target.position.sub(cc.v2(0, 0)));
Events.emit(EventName.SHOW_LOGIC, worldPos, 30, this);
Events.emit(EventName.SHOW_LOGIC, worldPos, target.height, this);
this._hasInit && Events.emit(EventName.CONDITION_SELECT, this);
}

16
animator-editor/assets/script/editor/inspector/InspectorCtr.ts
View File

@@ -2,6 +2,7 @@ import DragList from "../../common/cmpt/DragList";
import Events, { EventName, preloadEvent } from "../../common/util/Events";
import RecyclePool from "../../common/util/RecyclePool";
import Res from "../../common/util/Res";
import Tool from "../../common/util/Tool";
import { ResUrl } from "../../constant/ResUrl";
import Transition from "../data/Transition";
import Editor from "../Editor";
@@ -129,6 +130,7 @@ export default class InspectorCtr extends cc.Component {
let prefab = Res.getLoaded(ResUrl.PREFAB.TRANSITION_ITEM);
let node: cc.Node = RecyclePool.get(TransitionItem) || cc.instantiate(prefab);
node.width = this.TransitionList.node.width;
Tool.updateWidget(node);
return node;
}
@@ -141,6 +143,7 @@ export default class InspectorCtr extends cc.Component {
let prefab = Res.getLoaded(ResUrl.PREFAB.CONDITION_ITEM);
let node: cc.Node = RecyclePool.get(ConditionItem) || cc.instantiate(prefab);
node.width = this.ConditionList.node.width;
Tool.updateWidget(node);
return node;
}
@@ -300,10 +303,7 @@ export default class InspectorCtr extends cc.Component {
if (!(this._unit instanceof UnitState)) {
return;
}
let target = event.target;
let worldPos = target.parent.convertToWorldSpaceAR(target.position);
worldPos.y -= target.height / 2;
Events.emit(EventName.SHOW_MULTIPLIER, worldPos);
Events.emit(EventName.SHOW_MULTIPLIER, event.target);
}
private onClickDeleteTransition() {
@@ -338,11 +338,11 @@ export default class InspectorCtr extends cc.Component {
if (!this._transitionItem) {
return;
}
if (Editor.Inst.ParamCtr.ParamContent.childrenCount <= 0) {
if (Editor.Inst.Parameters.ParamContent.childrenCount <= 0) {
return;
}
let paramItem: ParamItem = Editor.Inst.ParamCtr.ParamContent.children[0].getComponent(ParamItem);
let paramItem: ParamItem = Editor.Inst.Parameters.ParamContent.children[0].getComponent(ParamItem);
let data = this._transitionItem.transition.addCondition(paramItem);
let node = this.getConditionItem();
this.ConditionList.node.addChild(node);
@@ -463,17 +463,21 @@ export default class InspectorCtr extends cc.Component {
if (node !== this.node) {
return;
}
Tool.updateWidget(this.node, this.TransitionList.node, this.ConditionList.node);
if (!this.TransitionInfo.active) {
return;
}
this.TransitionList.node.children.forEach((e) => {
e.width = this.TransitionList.node.width;
Tool.updateWidget(e);
});
if (!this.ConditionInfo.active) {
return;
}
this.ConditionList.node.children.forEach((e) => {
e.width = this.ConditionList.node.width;
Tool.updateWidget(e);
});
}
//#endregion

40
animator-editor/assets/script/editor/menu/Menu.ts
View File

@@ -1,6 +1,7 @@
import Events, { EventName, preloadEvent } from "../../common/util/Events";
import RecyclePool from "../../common/util/RecyclePool";
import Res from "../../common/util/Res";
import Tool from "../../common/util/Tool";
import { ParamType } from "../../constant/BaseConst";
import { ResUrl } from "../../constant/ResUrl";
import State from "../data/State";
@@ -134,7 +135,13 @@ export default class Menu extends cc.Component {
let num = cc.misc.clampf(this.LineToSubList.content.childrenCount, 1, 10);
this.LineToSubList.node.height = 40 * num + 20;
this.LineToSubList.content.parent.height = 40 * num + 20;
this.LineToSubList.node.getChildByName('scrollBar').getComponent(cc.Widget).updateAlignment();
if (this.LineToSubList.content.childrenCount > 10) {
this.LineToSubList.node.getChildByName('scrollBar').active = true;
this.LineToSubList.node.getChildByName('scrollBar').getComponent(cc.Widget).updateAlignment();
} else {
this.LineToSubList.node.getChildByName('scrollBar').active = false;
}
// 设置坐标
let pos = this.node.convertToNodeSpaceAR(worldPos);
let x = pos.x;
@@ -143,9 +150,11 @@ export default class Menu extends cc.Component {
}
@preloadEvent(EventName.SHOW_MULTIPLIER)
private onEventShowMultiplierSelect(worldPos: cc.Vec2) {
private onEventShowMultiplierSelect(target: cc.Node) {
this.show(this.MultiplierList.node);
let worldPos = target.parent.convertToWorldSpaceAR(target.position);
worldPos.y -= target.height / 2;
this.MultiplierList.node.position = this.node.convertToNodeSpaceAR(worldPos);
for (let i = this.MultiplierList.content.childrenCount - 1; i >= 0; i--) {
RecyclePool.put(MultiplierItem, this.MultiplierList.content.children[i]);
@@ -153,19 +162,24 @@ export default class Menu extends cc.Component {
let node: cc.Node = RecyclePool.get(MultiplierItem) || cc.instantiate(Res.getLoaded(ResUrl.PREFAB.MULTIPLIER_ITEM));
this.MultiplierList.content.addChild(node);
node.getComponent(MultiplierItem).onInit();
Editor.Inst.ParamCtr.ParamContent.children.forEach((e) => {
node.width = target.width;
Editor.Inst.Parameters.ParamContent.children.forEach((e) => {
let paramItem = e.getComponent(ParamItem);
if (paramItem.type !== ParamType.NUMBER) {
return;
}
let node: cc.Node = RecyclePool.get(MultiplierItem) || cc.instantiate(Res.getLoaded(ResUrl.PREFAB.MULTIPLIER_ITEM));
node = RecyclePool.get(MultiplierItem) || cc.instantiate(Res.getLoaded(ResUrl.PREFAB.MULTIPLIER_ITEM));
this.MultiplierList.content.addChild(node);
node.getComponent(MultiplierItem).onInit(paramItem);
node.width = target.width;
});
let num = cc.misc.clampf(this.MultiplierList.content.childrenCount, 1, 10);
this.MultiplierList.node.height = 40 * num + 20;
this.MultiplierList.content.parent.height = 40 * num + 20;
this.MultiplierList.node.getChildByName('scrollBar').getComponent(cc.Widget).updateAlignment();
this.MultiplierList.node.width = target.width;
Tool.updateWidget(this.MultiplierList.node);
this.MultiplierList.node.getChildByName('scrollBar').active = this.MultiplierList.content.childrenCount > 10;
}
@preloadEvent(EventName.SHOW_PARAM_ADD)
@@ -176,27 +190,31 @@ export default class Menu extends cc.Component {
}
@preloadEvent(EventName.SHOW_PARAM_SELECT)
private onEventShowParamSelect(worldPos: cc.Vec2, targetHeight: number, conditionItem: ConditionItem) {
private onEventShowParamSelect(target: cc.Node, conditionItem: ConditionItem) {
this.show(this.ParamSelect.node);
let worldPos: cc.Vec2 = target.parent.convertToWorldSpaceAR(target.position.sub(cc.v2(0, 0)));
for (let i = this.ParamSelect.content.childrenCount - 1; i >= 0; i--) {
RecyclePool.put(ParamSelectItem, this.ParamSelect.content.children[i]);
}
// 生成item
Editor.Inst.ParamCtr.ParamContent.children.forEach((e) => {
Editor.Inst.Parameters.ParamContent.children.forEach((e) => {
let node: cc.Node = RecyclePool.get(ParamSelectItem) || cc.instantiate(Res.getLoaded(ResUrl.PREFAB.PARAM_SELECT_ITEM));
this.ParamSelect.content.addChild(node);
node.getComponent(ParamSelectItem).onInit(e.getComponent(ParamItem), conditionItem);
node.width = target.width;
});
let num = cc.misc.clampf(this.ParamSelect.content.childrenCount, 1, 10);
this.ParamSelect.node.height = 40 * num + 10;
this.ParamSelect.content.parent.height = 40 * num + 10;
this.ParamSelect.node.getChildByName('scrollBar').getComponent(cc.Widget).updateAlignment();
if (worldPos.y - targetHeight / 2 - this.ParamSelect.node.height > 0) {
this.ParamSelect.node.position = this.node.convertToNodeSpaceAR(cc.v2(worldPos.x, worldPos.y - targetHeight / 2));
this.ParamSelect.node.width = target.width;
Tool.updateWidget(this.ParamSelect.node);
this.ParamSelect.node.getChildByName('scrollBar').active = this.ParamSelect.content.childrenCount > 10;
if (worldPos.y - target.height / 2 - this.ParamSelect.node.height > 0) {
this.ParamSelect.node.position = this.node.convertToNodeSpaceAR(cc.v2(worldPos.x, worldPos.y - target.height / 2));
} else {
this.ParamSelect.node.position = this.node.convertToNodeSpaceAR(cc.v2(worldPos.x, worldPos.y + targetHeight / 2 + this.ParamSelect.node.height));
this.ParamSelect.node.position = this.node.convertToNodeSpaceAR(cc.v2(worldPos.x, worldPos.y + target.height / 2 + this.ParamSelect.node.height));
}
}

5
animator-editor/assets/script/editor/parameters/ParamCtr.ts
View File

@@ -1,6 +1,7 @@
import Events, { EventName, preloadEvent } from "../../common/util/Events";
import RecyclePool from "../../common/util/RecyclePool";
import Res from "../../common/util/Res";
import Tool from "../../common/util/Tool";
import { ParameterData } from "../../constant/BaseConst";
import { ResUrl } from "../../constant/ResUrl";
import ParamItem from "./ParamItem";
@@ -73,6 +74,7 @@ export default class ParamCtr extends cc.Component {
let prefab = Res.getLoaded(ResUrl.PREFAB.PARAM_ITEM);
let node: cc.Node = RecyclePool.get(ParamItem) || cc.instantiate(prefab);
node.width = this.ParamContent.width;
Tool.updateWidget(node);
return node;
}
@@ -146,8 +148,11 @@ export default class ParamCtr extends cc.Component {
if (node !== this.node) {
return;
}
Tool.updateWidget(this.node, this.ParamContent);
this.ParamContent.children.forEach((e) => {
e.width = this.ParamContent.width;
Tool.updateWidget(e);
});
}
}

2
animator-editor/assets/script/editor/parameters/ParamItem.ts
View File

@@ -89,7 +89,7 @@ export default class ParamItem extends cc.Component implements RecycleNode {
return;
}
this.NameEdit.string = Editor.Inst.ParamCtr.getParamName(this, this.NameEdit.string);
this.NameEdit.string = Editor.Inst.Parameters.getParamName(this, this.NameEdit.string);
this.paramName = this.NameEdit.string;
}

72
animator-editor/assets/script/scene/Main.ts
View File

@@ -6,7 +6,7 @@ const { ccclass, property } = cc._decorator;
@ccclass
export default class Main extends cc.Component {
private _editorNode: cc.Node = null;
private _editor: Editor = null;
protected onLoad() {
cc.debug.setDisplayStats(false);
@@ -22,17 +22,16 @@ export default class Main extends cc.Component {
this.dragOn();
}
private resetEditor(): Editor {
if (this._editorNode) {
this._editorNode.getComponent(Editor).Fsm.MachineLayer.clear();
this._editorNode.removeFromParent();
this._editorNode.destroy();
private resetEditor() {
if (this._editor) {
this._editor.Fsm.MachineLayer.clear();
this._editor.node.removeFromParent();
this._editor.node.destroy();
}
this._editorNode = cc.instantiate(Res.getLoaded(ResUrl.PREFAB.EDITOR));
this.node.addChild(this._editorNode);
let editor = this._editorNode.getComponent(Editor);
Editor.Inst = editor;
return editor;
let node = cc.instantiate(Res.getLoaded(ResUrl.PREFAB.EDITOR));
this._editor = node.getComponent(Editor);
Editor.Inst = this._editor;
this.node.addChild(node);
}
/**
@@ -63,25 +62,58 @@ export default class Main extends cc.Component {
e.stopPropagation();
// 处理拖拽文件的逻辑
let files = e.dataTransfer.files;
let reg = /\.json$/;
if (!reg.test(files[0].name)) {
return;
}
this.readProject(files[0]);
this.readFiles(files);
}, false);
}
/**
* 读取工程文件
* 文件读取
*/
private readProject(file: File) {
private readFiles(files: FileList) {
for (let i = 0; i < files.length; i++) {
let file: File = files[i];
if (/\.json$/.test(file.name)) {
this.readJson(file);
} else if (/\.anim$/.test(file.name)) {
this.readAnim(file);
}
}
}
/**
* 读取.json文件
*/
private readJson(file: File) {
let fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = () => {
cc.log(fileReader.result);
let data: any = JSON.parse(fileReader.result as string);
if (data.animator) {
// 读取状态机工程文件
this.resetEditor();
this._editor.Parameters.import(data.parameters);
this._editor.Fsm.importProject(data);
} else if (data.skeleton && data.animations) {
// 读取spine文件
this._editor.Fsm.improtSpine(data);
} else if (data.armature) {
// 读取龙骨文件
this._editor.Fsm.importDragonBones(data);
}
};
}
let editor = this.resetEditor();
editor.importProject(JSON.parse(fileReader.result as string));
/**
* 读取cocos .anim文件
*/
private readAnim(file: File) {
let fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = () => {
cc.log(fileReader.result);
let data: any = JSON.parse(fileReader.result as string);
this._editor.Fsm.importAnim(data);
};
}
}