From 1269e8519873635280857678729d5f1209e714a0 Mon Sep 17 00:00:00 2001 From: zhl Date: Mon, 12 Oct 2020 14:02:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=90=E5=B8=A7=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E4=BD=8D=E7=BD=AE=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 458 ++++++++++++++++------------- run.bat | 4 +- src/DragDele.ts | 107 ++++--- src/Main.ts | 39 ++- src/game/animation/AniRender.ts | 35 ++- src/game/animation/UnitResource.ts | 8 + 6 files changed, 388 insertions(+), 263 deletions(-) diff --git a/index.html b/index.html index b8c5ce0..acd5f0c 100644 --- a/index.html +++ b/index.html @@ -3,22 +3,23 @@ 特效查看及修改TOOL - - - - - - + + + + + + - - + + - + var xhr = new XMLHttpRequest(); + xhr.open('GET', './manifest.json?v=' + Math.random(), true); + xhr.addEventListener('load', function () { + var manifest = JSON.parse(xhr.response); + var list = manifest.initial.concat(manifest.game); + loadScript(list, function () { + /** + * { + * "renderMode":, //Engine rendering mode, "canvas" or "webgl" + * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio + * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false + * "calculateCanvasScaleFactor": //a function return canvas scale factor + * } + **/ + egret.runEgret({ + renderMode: 'webgl', audioType: 0, calculateCanvasScaleFactor: function (context) { + var backingStore = context.backingStorePixelRatio || + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + return (window.devicePixelRatio || 1) / backingStore; + } + }); + }); + }); + xhr.send(null); + -
-
-
- + +
+
- - - - - - - - - -
动作方向帧执行时间(单位：毫秒)事件
- - + + + 动作 + 方向 + 帧 + 执行时间(单位：毫秒) + 事件 + + + - -
- 是否为循环动画
- x偏移:
- y偏移:
- 保存偏移 撤销偏移
-
- 保存数据到文件 -
-
- + function accept() { + if (endEditing()) { + $('#dg').datagrid('acceptChanges'); + } + } - \ No newline at end of file + function reject() { + $('#dg').datagrid('rejectChanges'); + editIndex = undefined; + } + function setSwitchEnable() { + $('#frameEdit').switchbutton('enable'); + $('#frameEdit').switchbutton('reset'); + frameEdit = false; + $('.panel-header').removeClass('red'); + } + function setSwitchDisable() { + $('#frameEdit').switchbutton('disable'); + } + function frameEditChange(e) { + frameEdit = e; + if (e) { + $('.panel-header').addClass('red'); + window['onStartFrameMode'] && window['onStartFrameMode'](); + } else { + $('.panel-header').removeClass('red'); + window['onStopFrameMode'] && window['onStopFrameMode'](); + } + } + $(document).ready(function () { + $('#frameEdit').switchbutton('disable'); + // $('#frameEdit').switchbutton('check'); + }); + + + + + + + + diff --git a/run.bat b/run.bat index 87c5e54..3994c62 100644 --- a/run.bat +++ b/run.bat @@ -1,2 +1,2 @@ -start /b node web.js -electron app \ No newline at end of file +#start /b node web.js +electron app diff --git a/src/DragDele.ts b/src/DragDele.ts index e03ac89..964fead 100644 --- a/src/DragDele.ts +++ b/src/DragDele.ts @@ -1,91 +1,104 @@ module junyou.tools { - /** - * 拖拽代理 - * @author 3tion - * - */ - export class DragDele extends egret.Sprite { + /** + * 拖拽代理 + * @author 3tion + * + */ + export class DragDele extends egret.Sprite { private ox: number; private oy: number; private lx: number; private ly: number; - + private _offsetChange = this.offsetChange.bind(this); - private touching:boolean; - - public aniInfo:junyou.game.AniInfo; + private touching: boolean; + + public aniInfo: junyou.game.AniInfo; public constructor() { super(); let g = this.graphics; - g.beginFill(0,0); - g.drawRect(-1000,-1000,2000,2000); + g.beginFill(0, 0); + g.drawRect(-1000, -1000, 2000, 2000); g.endFill(); this.touchEnabled = true; - this.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.tb,this); - $(document).ready(()=>{ - $("#ox")["numberspinner"]({ onChange: this._offsetChange }); - $("#oy")["numberspinner"]({ onChange: this._offsetChange }); - $("#btnCancelOffset").on("click",this.cancelHandler.bind(this)); - $("#btnSaveOffset").on("click",this.saveHandler.bind(this)); + this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.tb, this); + $(document).ready(() => { + $("#ox")["numberspinner"]({onChange: this._offsetChange}); + $("#oy")["numberspinner"]({onChange: this._offsetChange}); + $("#btnCancelOffset").on("click", this.cancelHandler.bind(this)); + $("#btnSaveOffset").on("click", this.saveHandler.bind(this)); }); } - - private saveHandler(){ + + //TODO:: 暂时只编辑单个动画, 如果同时编辑多个, 则需要先判断key + private saveHandler() { let dx = this.ox - this.x; let dy = this.oy - this.y; let aniInfo = this.aniInfo; let res = aniInfo.getResource(); let datas = res._datas; - for( let key in datas){ + for (let key in datas) { let texes = datas[key]; - for(let texarr of texes){ - for(let tex of texarr){ - tex.tx += dx; - tex.ty += dy; + for (let texarr of texes) { + for (let i = 0; i < texarr.length; i++) { + let fdata = texarr[i]; + if ((junyou.frameMode && junyou.currentFrame != i)) { + continue; + } + fdata.tx += dx; + fdata.ty += dy; } } } // 处理原始数据 DSW let rawData = aniInfo.rawData[1]; // let rawData2 = aniInfo.rawData[0]; - for(let action in rawData) { + for (let action in rawData) { let actData = rawData[action]; - for(let d = 0,len = actData.length;d < len;d++) { + for (let d = 0, len = actData.length; d < len; d++) { let dirData: any[] = actData[d]; - for(let f = 0,flen = dirData.length;f < flen;f++) { + for (let f = 0, flen = dirData.length; f < flen; f++) { let fdata = dirData[f]; - fdata[2] += dx; - fdata[3] += dy; + if ((junyou.frameMode && junyou.currentFrame != f)) { + continue; + } + fdata[2] += dx; + fdata[3] += dy; } } } this.cancelHandler(); } - - private cancelHandler(){ + public resetPosition() { + this.cancelHandler(); + } + private cancelHandler() { this.x = this.ox; this.y = this.oy; - $("#ox")["numberspinner"]("setValue",0); - $("#oy")["numberspinner"]("setValue",0); + $("#ox")["numberspinner"]("setValue", 0); + $("#oy")["numberspinner"]("setValue", 0); } - + private offsetChange() { - if(!this.touching){ + if (!this.touching) { var ox = +$("#ox").val(); var oy = +$("#oy").val(); this.x = this.ox + ox; this.y = this.oy + oy; + if (junyou.frameMode) { + window['refreshCurrentFrame'] && window['refreshCurrentFrame'](); + } } } private tb(e: egret.TouchEvent) { this.lx = e.stageX; this.ly = e.stageY; - this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.tm,this); - this.stage.addEventListener(egret.TouchEvent.TOUCH_END,this.te,this); + this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.tm, this); + this.stage.addEventListener(egret.TouchEvent.TOUCH_END, this.te, this); this.touching = true; } @@ -94,28 +107,28 @@ module junyou.tools { let ny = e.stageY; let dx = nx - this.lx; let dy = ny - this.ly; - if(dx * dx + dy * dy > 10) { + if (dx * dx + dy * dy > 10) { this.lx = nx; this.ly = ny; this.x += dx; - this.y += dy; + this.y += dy; } } private te(e: egret.TouchEvent) { - this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,this.tm,this); - this.stage.removeEventListener(egret.TouchEvent.TOUCH_END,this.te,this); - $("#ox")["numberspinner"]("setValue",this.x - this.ox); - $("#oy")["numberspinner"]("setValue",this.y - this.oy); + this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.tm, this); + this.stage.removeEventListener(egret.TouchEvent.TOUCH_END, this.te, this); + $("#ox")["numberspinner"]("setValue", this.x - this.ox); + $("#oy")["numberspinner"]("setValue", this.y - this.oy); this.touching = false; } - - public setStartPoint(sx: number,sy: number) { + + public setStartPoint(sx: number, sy: number) { this.ox = sx; this.oy = sy; this.x = sx; this.y = sy; } - } + } } diff --git a/src/Main.ts b/src/Main.ts index 146c1d9..b92cd3e 100644 --- a/src/Main.ts +++ b/src/Main.ts @@ -1,5 +1,9 @@ import jgame = junyou.game; +module junyou { + export var frameMode = false; + export var currentFrame = 0; +} class Main extends egret.DisplayObjectContainer { protected currentRender: jgame.AniRender; @@ -12,15 +16,46 @@ class Main extends egret.DisplayObjectContainer { private dataFile: string; + public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); window["saveCallback"] = this.saveCallback; + let self = this; + window["frameClicked"] = function (index) { + self.frameClicked(index); + }; + window['onStartFrameMode'] = function () { + self.onStartFrameMode(); + }; + window['onStopFrameMode'] = function() { + self.onStopFrameMode(); + } + window['refreshCurrentFrame'] = function() { + self.refreshCurrentFrame(); + } $(document).ready(() => { $("#btnSave").on("click", this.saveCallback.bind(this)); }); } - + private onStartFrameMode() { + junyou.frameMode = true; + this.currentRender.pause(); + } + private onStopFrameMode() { + junyou.frameMode = false; + junyou.currentFrame = 0; + this.currentRender.play(); + } + private frameClicked(frameIndex:number) { + console.log('frameClicked', frameIndex); + junyou.currentFrame = frameIndex; + this.dragDele.resetPosition(); + this.currentRender.renderFrameIndex(frameIndex); + } + private refreshCurrentFrame() { + this.currentRender.renderFrameIndex(junyou.currentFrame); + } private saveCallback() { let pst = this.cPst; let frames = pst.frames; @@ -90,6 +125,7 @@ class Main extends egret.DisplayObjectContainer { e.preventDefault(); let goted = this.checkFile(e.dataTransfer.files); if (goted) { // 一定是 Electron 环境才能取到值 + window['setSwitchEnable'] && window['setSwitchEnable'](); // 加载数据 let require = window["nodeRequire"]; let path = require("path"); @@ -99,6 +135,7 @@ class Main extends egret.DisplayObjectContainer { let rawData = JSON.parse(str); if (goted.pstData) { let pstStr = fs.readFileSync(goted.pstData, "utf8"); + let pstData = JSON.parse(pstStr); } let aniRender = new jgame.AniRender(); let pst = new jgame.AniInfo(); diff --git a/src/game/animation/AniRender.ts b/src/game/animation/AniRender.ts index 5b02d69..8fefc7b 100644 --- a/src/game/animation/AniRender.ts +++ b/src/game/animation/AniRender.ts @@ -6,29 +6,29 @@ module junyou.game { * */ export class AniRender extends BaseRender implements IRecyclable{ - + protected _guid:number; - + /** * 特效标识 */ public get guid(): number { return this._guid; } - + /** * 显示对象 */ public display:ResourceBitmap; - + public _aniInfo: AniInfo; - + public constructor() { super(); // ani动画的动作固定值0 this.a = 0; } - + protected render(e:Event){ var aniInfo = this._aniInfo; var actionInfo = aniInfo.actionInfo; @@ -36,35 +36,42 @@ module junyou.game { this.doRender(actionInfo); } } - + renderFrameIndex(index: number) { + let aniInfo = this._aniInfo; + let actionInfo = aniInfo.actionInfo; + let frames = actionInfo.frames; + if (index < frames.length) { + this.renderFrame(frames[index], Date.now()); + } + } renderFrame(frame: FrameInfo,now: number) { this.f = frame.f; this.display.draw(this,now); } - + public play(){ this.display.addEventListener(Event.ENTER_FRAME,this.render,this); } - + public pause(){ this.display.removeEventListener(Event.ENTER_FRAME,this.render,this); } - public onRecycle(){ + public onRecycle(){ this.display.removeEventListener(Event.ENTER_FRAME,this.render,this); this._aniInfo = null; this._guid = NaN; } - + public onSpawn(){ this.f = 0; this._playSpeed = 1; } - + private static guid = 1; - + private static _pool:RecyclablePool=new RecyclablePool(AniRender); - + public static getAni(uri:string,display:ResourceBitmap = null){ var aniInfo: AniInfo = DataLocator.getData(ConfigKey.ANI)[uri]; if(aniInfo){ diff --git a/src/game/animation/UnitResource.ts b/src/game/animation/UnitResource.ts index 47f9c9b..4bfe399 100644 --- a/src/game/animation/UnitResource.ts +++ b/src/game/animation/UnitResource.ts @@ -11,6 +11,14 @@ module junyou.game { texture.ty = data[3] || 0; var width: number = data[4]; var height: number = data[5]; + if(data.length > 6) { + width = data[2]; + height = data[3]; + + texture.tx = data[6] / 2 - data[4]; + texture.ty = data[7] / 2 - data[5]; + texture.$initData(sx, sy, width, height, 0, 0, width, height, width, height); + } texture.$initData(sx,sy,width,height,0,0,width,height,width,height); return texture; }