client/EffectTools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加逐帧调整位置的功能

Browse Source
This commit is contained in:
zhl 2020-10-12 14:02:04 +08:00
parent 0ab075ebd1
commit 1269e85198
6 changed files with 388 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script> <script>
if(typeof window.require==="function"){ if (typeof window.require === 'function') {
// 重命名 Electron 提供的 require // 重命名 Electron 提供的 require
window.nodeRequire = require; window.nodeRequire = require;
delete window.require; delete window.require;
@ -13,12 +13,13 @@
</script> </script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>特效查看及修改TOOL</title> <title>特效查看及修改TOOL</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="viewport"
<meta name="apple-mobile-web-app-capable" content="yes" /> content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="full-screen" content="true" /> <meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="screen-orientation" content="portrait" /> <meta name="full-screen" content="true"/>
<meta name="x5-fullscreen" content="true" /> <meta name="screen-orientation" content="portrait"/>
<meta name="360-fullscreen" content="true" /> <meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style> <style>
html, body { html, body {
-ms-touch-action: none; -ms-touch-action: none;
@ -28,15 +29,21 @@
margin: 0; margin: 0;
height: 100%; height: 100%;
} }
.red {
background-color: red!important;
}
.red .panel-title{
color: white!important;
}
</style> </style>
<link rel="stylesheet" type="text/css" href="libs/easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="libs/easyui/themes/material/easyui.css"/>
<link rel="stylesheet" type="text/css" href="libs/easyui/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="libs/easyui/themes/icon.css"/>
<script src="libs/jquery.min.js"></script> <script src="libs/jquery.min.js"></script>
<script src="libs/easyui/jquery.easyui.min.js"></script> <script src="libs/easyui/jquery.easyui.min.js"></script>
</head> </head>
<body> <body>
<script> <script>
var loadScript = function (list, callback) { var loadScript = function (list, callback) {
var loaded = 0; var loaded = 0;
var loadNext = function () { var loadNext = function () {
@ -44,8 +51,7 @@
loaded++; loaded++;
if (loaded >= list.length) { if (loaded >= list.length) {
callback(); callback();
} } else {
else {
loadNext(); loadNext();
} }
}) })
@ -67,7 +73,7 @@
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', './manifest.json?v=' + Math.random(), true); xhr.open('GET', './manifest.json?v=' + Math.random(), true);
xhr.addEventListener("load", function () { xhr.addEventListener('load', function () {
var manifest = JSON.parse(xhr.response); var manifest = JSON.parse(xhr.response);
var list = manifest.initial.concat(manifest.game); var list = manifest.initial.concat(manifest.game);
loadScript(list, function () { loadScript(list, function () {
@ -79,7 +85,8 @@
* "calculateCanvasScaleFactor": //a function return canvas scale factor * "calculateCanvasScaleFactor": //a function return canvas scale factor
* } * }
**/ **/
egret.runEgret({ renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor:function(context) { egret.runEgret({
renderMode: 'webgl', audioType: 0, calculateCanvasScaleFactor: function (context) {
var backingStore = context.backingStorePixelRatio || var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio || context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio || context.mozBackingStorePixelRatio ||
@ -87,13 +94,14 @@
context.oBackingStorePixelRatio || context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1; context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore; return (window.devicePixelRatio || 1) / backingStore;
}}); }
});
}); });
}); });
xhr.send(null); xhr.send(null);
</script> </script>
<div style="margin: auto;width: 50%;height: 100%;" class="egret-player" <div style="margin: auto;width: 50%;height: 100%;" class="egret-player"
data-entry-class="Main" data-entry-class="Main"
data-orientation="auto" data-orientation="auto"
data-scale-mode="noScale" data-scale-mode="noScale"
@ -103,14 +111,17 @@
data-multi-fingered="2" data-multi-fingered="2"
data-show-fps="false" data-show-log="false" data-show-fps="false" data-show-log="false"
data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div> </div>
<div style="margin: auto;width: 50%;height: 100%;float:right;background:#fcfcfc"> <div style="margin: auto;width: 50%;height: 100%;float:right;background:#fcfcfc">
<table id="dg" class="easyui-datagrid" title="编辑特效" style="width:700px;height:auto" data-options=" <table id="dg" class="easyui-datagrid" title="编辑特效" style="width:700px;height:auto" data-options="
iconCls: 'icon-edit', iconCls: 'icon-edit',
singleSelect: true, singleSelect: true,
toolbar: '#tb', toolbar: '#tb',
method: 'get', method: 'get',
striped: true,
rownumbers: true,
onClickCell: onClickCell, onClickCell: onClickCell,
onClickRow: onClickRow,
onEndEdit: onEndEdit onEndEdit: onEndEdit
"> ">
<thead> <thead>
@ -125,15 +136,38 @@
</table> </table>
<div id="tb" style="height:auto"> <div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">移除</a> onclick="append()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">应用改动</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">还原改动</a> onclick="removeit()">移除</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
onclick="accept()">应用改动</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true"
onclick="reject()">还原改动</a>
</div> </div>
<script type="text/javascript"> <div style="float:left">
<input type="checkbox" id="chkCircle" disabled="disabled"/> 是否为循环动画 <br/>
x偏移: <input id="ox" class="easyui-numberspinner" style="width:80px;" value="0"
data-options="min:-1000,max:1000,editable:true"><br/>
y偏移: <input id="oy" class="easyui-numberspinner" style="width:80px;" value="0"
data-options="min:-1000,max:1000,editable:true"><br/>
<a id="btnSaveOffset" href="#" class="easyui-linkbutton">保存偏移</a> <a id="btnCancelOffset" href="#"
class="easyui-linkbutton">撤销偏移</a><br/>
<br/>
逐帧编辑: <input id='frameEdit' class="easyui-switchbutton" data-options="
onText:'开启',
offText:'关闭',
onChange: frameEditChange
">
<br/><br/>
<a id="btnSave" href="#" data-options="iconCls:'icon-save'" class="easyui-linkbutton">保存数据到文件</a>
</div>
</div>
<script type="text/javascript">
saveCallback = null; saveCallback = null;
var editIndex = undefined; var editIndex = undefined;
frameEdit = false;
function endEditing() { function endEditing() {
if (editIndex == undefined) { if (editIndex == undefined) {
@ -149,6 +183,10 @@
} }
function onClickCell(index, field) { function onClickCell(index, field) {
if (frameEdit) {
endEditing();
return;
}
if (editIndex != index) { if (editIndex != index) {
if (endEditing()) { if (endEditing()) {
$('#dg').datagrid('selectRow', index) $('#dg').datagrid('selectRow', index)
@ -162,21 +200,26 @@
} }
editIndex = index; editIndex = index;
} else { } else {
setTimeout(function() { setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex); $('#dg').datagrid('selectRow', editIndex);
}, 0); }, 0);
} }
} }
} }
function onClickRow(index, data) {
if (!frameEdit) return;
window.frameClicked && window.frameClicked(index);
}
function onEndEdit(index, row) { function onEndEdit(index, row) {
var ed = $(this).datagrid('getEditor', { var ed = $(this).datagrid('getEditor', {
index: index, index: index,
field: 'e' field: 'e'
}); });
var tb = $(ed.target); var tb = $(ed.target);
var value = tb.textbox("getValue") || ""; var value = tb.textbox('getValue') || '';
tb.textbox("setValue",value.trim()); tb.textbox('setValue', value.trim());
} }
function append() { function append() {
@ -184,10 +227,10 @@
var row = $('#dg').datagrid('getSelected'); var row = $('#dg').datagrid('getSelected');
var idx = -1; var idx = -1;
if (row) { if (row) {
idx = $('#dg').datagrid("getRowIndex", row); idx = $('#dg').datagrid('getRowIndex', row);
} }
if (idx > -1) { if (idx > -1) {
$('#dg').datagrid("insertRow", { $('#dg').datagrid('insertRow', {
index: idx, index: idx,
row: { row: {
a: 0, a: 0,
@ -227,17 +270,34 @@
$('#dg').datagrid('rejectChanges'); $('#dg').datagrid('rejectChanges');
editIndex = undefined; 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');
});
</script>
<div style="float:left">
<input type="checkbox" id="chkCircle" disabled="disabled" /> 是否为循环动画 <br/>
x偏移: <input id="ox" class="easyui-numberspinner" style="width:80px;" value="0" data-options="min:-1000,max:1000,editable:true"><br/> </script>
y偏移: <input id="oy" class="easyui-numberspinner" style="width:80px;" value="0" data-options="min:-1000,max:1000,editable:true"><br/> </body>
<a id="btnSaveOffset" href="#" class="easyui-linkbutton">保存偏移</a> <a id="btnCancelOffset" href="#" class="easyui-linkbutton">撤销偏移</a><br/>
<br/>
<a id="btnSave" href="#" data-options="iconCls:'icon-save'" class="easyui-linkbutton">保存数据到文件</a>
</div>
</div>
</body>
</html> </html>

2
run.bat
View File

@ -1,2 +1,2 @@
start /b node web.js #start /b node web.js
electron app electron app

77
src/DragDele.ts
View File

@ -13,50 +13,58 @@ module junyou.tools {
private ly: number; private ly: number;
private _offsetChange = this.offsetChange.bind(this); private _offsetChange = this.offsetChange.bind(this);
private touching:boolean; private touching: boolean;
public aniInfo:junyou.game.AniInfo; public aniInfo: junyou.game.AniInfo;
public constructor() { public constructor() {
super(); super();
let g = this.graphics; let g = this.graphics;
g.beginFill(0,0); g.beginFill(0, 0);
g.drawRect(-1000,-1000,2000,2000); g.drawRect(-1000, -1000, 2000, 2000);
g.endFill(); g.endFill();
this.touchEnabled = true; this.touchEnabled = true;
this.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.tb,this); this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.tb, this);
$(document).ready(()=>{ $(document).ready(() => {
$("#ox")["numberspinner"]({ onChange: this._offsetChange }); $("#ox")["numberspinner"]({onChange: this._offsetChange});
$("#oy")["numberspinner"]({ onChange: this._offsetChange }); $("#oy")["numberspinner"]({onChange: this._offsetChange});
$("#btnCancelOffset").on("click",this.cancelHandler.bind(this)); $("#btnCancelOffset").on("click", this.cancelHandler.bind(this));
$("#btnSaveOffset").on("click",this.saveHandler.bind(this)); $("#btnSaveOffset").on("click", this.saveHandler.bind(this));
}); });
} }
private saveHandler(){ //TODO:: 暂时只编辑单个动画, 如果同时编辑多个, 则需要先判断key
private saveHandler() {
let dx = this.ox - this.x; let dx = this.ox - this.x;
let dy = this.oy - this.y; let dy = this.oy - this.y;
let aniInfo = this.aniInfo; let aniInfo = this.aniInfo;
let res = aniInfo.getResource(); let res = aniInfo.getResource();
let datas = res._datas; let datas = res._datas;
for( let key in datas){ for (let key in datas) {
let texes = datas[key]; let texes = datas[key];
for(let texarr of texes){ for (let texarr of texes) {
for(let tex of texarr){ for (let i = 0; i < texarr.length; i++) {
tex.tx += dx; let fdata = texarr[i];
tex.ty += dy; if ((junyou.frameMode && junyou.currentFrame != i)) {
continue;
}
fdata.tx += dx;
fdata.ty += dy;
} }
} }
} }
// 处理原始数据 DSW // 处理原始数据 DSW
let rawData = aniInfo.rawData[1]; let rawData = aniInfo.rawData[1];
// let rawData2 = aniInfo.rawData[0]; // let rawData2 = aniInfo.rawData[0];
for(let action in rawData) { for (let action in rawData) {
let actData = rawData[action]; 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]; 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]; let fdata = dirData[f];
if ((junyou.frameMode && junyou.currentFrame != f)) {
continue;
}
fdata[2] += dx; fdata[2] += dx;
fdata[3] += dy; fdata[3] += dy;
} }
@ -64,28 +72,33 @@ module junyou.tools {
} }
this.cancelHandler(); this.cancelHandler();
} }
public resetPosition() {
private cancelHandler(){ this.cancelHandler();
}
private cancelHandler() {
this.x = this.ox; this.x = this.ox;
this.y = this.oy; this.y = this.oy;
$("#ox")["numberspinner"]("setValue",0); $("#ox")["numberspinner"]("setValue", 0);
$("#oy")["numberspinner"]("setValue",0); $("#oy")["numberspinner"]("setValue", 0);
} }
private offsetChange() { private offsetChange() {
if(!this.touching){ if (!this.touching) {
var ox = +$("#ox").val(); var ox = +$("#ox").val();
var oy = +$("#oy").val(); var oy = +$("#oy").val();
this.x = this.ox + ox; this.x = this.ox + ox;
this.y = this.oy + oy; this.y = this.oy + oy;
if (junyou.frameMode) {
window['refreshCurrentFrame'] && window['refreshCurrentFrame']();
}
} }
} }
private tb(e: egret.TouchEvent) { private tb(e: egret.TouchEvent) {
this.lx = e.stageX; this.lx = e.stageX;
this.ly = e.stageY; this.ly = e.stageY;
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.tm,this); 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_END, this.te, this);
this.touching = true; this.touching = true;
} }
@ -94,7 +107,7 @@ module junyou.tools {
let ny = e.stageY; let ny = e.stageY;
let dx = nx - this.lx; let dx = nx - this.lx;
let dy = ny - this.ly; let dy = ny - this.ly;
if(dx * dx + dy * dy > 10) { if (dx * dx + dy * dy > 10) {
this.lx = nx; this.lx = nx;
this.ly = ny; this.ly = ny;
this.x += dx; this.x += dx;
@ -103,15 +116,15 @@ module junyou.tools {
} }
private te(e: egret.TouchEvent) { private te(e: egret.TouchEvent) {
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,this.tm,this); this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.tm, this);
this.stage.removeEventListener(egret.TouchEvent.TOUCH_END,this.te,this); this.stage.removeEventListener(egret.TouchEvent.TOUCH_END, this.te, this);
$("#ox")["numberspinner"]("setValue",this.x - this.ox); $("#ox")["numberspinner"]("setValue", this.x - this.ox);
$("#oy")["numberspinner"]("setValue",this.y - this.oy); $("#oy")["numberspinner"]("setValue", this.y - this.oy);
this.touching = false; this.touching = false;
} }
public setStartPoint(sx: number,sy: number) { public setStartPoint(sx: number, sy: number) {
this.ox = sx; this.ox = sx;
this.oy = sy; this.oy = sy;
this.x = sx; this.x = sx;

39
src/Main.ts
View File

@ -1,5 +1,9 @@
import jgame = junyou.game; import jgame = junyou.game;
module junyou {
export var frameMode = false;
export var currentFrame = 0;
}
class Main extends egret.DisplayObjectContainer { class Main extends egret.DisplayObjectContainer {
protected currentRender: jgame.AniRender; protected currentRender: jgame.AniRender;
@ -12,15 +16,46 @@ class Main extends egret.DisplayObjectContainer {
private dataFile: string; private dataFile: string;
public constructor() { public constructor() {
super(); super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
window["saveCallback"] = this.saveCallback; 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(() => { $(document).ready(() => {
$("#btnSave").on("click", this.saveCallback.bind(this)); $("#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() { private saveCallback() {
let pst = this.cPst; let pst = this.cPst;
let frames = pst.frames; let frames = pst.frames;
@ -90,6 +125,7 @@ class Main extends egret.DisplayObjectContainer {
e.preventDefault(); e.preventDefault();
let goted = this.checkFile(e.dataTransfer.files); let goted = this.checkFile(e.dataTransfer.files);
if (goted) { // 一定是 Electron 环境才能取到值 if (goted) { // 一定是 Electron 环境才能取到值
window['setSwitchEnable'] && window['setSwitchEnable']();
// 加载数据 // 加载数据
let require = window["nodeRequire"]; let require = window["nodeRequire"];
let path = require("path"); let path = require("path");
@ -99,6 +135,7 @@ class Main extends egret.DisplayObjectContainer {
let rawData = JSON.parse(str); let rawData = JSON.parse(str);
if (goted.pstData) { if (goted.pstData) {
let pstStr = fs.readFileSync(goted.pstData, "utf8"); let pstStr = fs.readFileSync(goted.pstData, "utf8");
let pstData = JSON.parse(pstStr);
} }
let aniRender = new jgame.AniRender(); let aniRender = new jgame.AniRender();
let pst = new jgame.AniInfo(); let pst = new jgame.AniInfo();

9
src/game/animation/AniRender.ts
View File

@ -36,7 +36,14 @@ module junyou.game {
this.doRender(actionInfo); 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) { renderFrame(frame: FrameInfo,now: number) {
this.f = frame.f; this.f = frame.f;
this.display.draw(this,now); this.display.draw(this,now);

8
src/game/animation/UnitResource.ts
View File

@ -11,6 +11,14 @@ module junyou.game {
texture.ty = data[3] || 0; texture.ty = data[3] || 0;
var width: number = data[4]; var width: number = data[4];
var height: number = data[5]; 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); texture.$initData(sx,sy,width,height,0,0,width,height,width,height);
return texture; return texture;
} }