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

110
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,7 +13,8 @@
</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"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/> <meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/> <meta name="screen-orientation" content="portrait"/>
@ -28,8 +29,14 @@
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>
@ -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,7 +94,8 @@
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);
@ -110,7 +118,10 @@
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>
<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"> <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)
@ -169,14 +207,19 @@
} }
} }
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> </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/>
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/>
<a id="btnSave" href="#" data-options="iconCls:'icon-save'" class="easyui-linkbutton">保存数据到文件</a>
</div>
</div>
</body> </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

21
src/DragDele.ts
View File

@ -33,6 +33,7 @@ module junyou.tools {
}); });
} }
//TODO:: 暂时只编辑单个动画, 如果同时编辑多个, 则需要先判断key
private saveHandler() { 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;
@ -42,9 +43,13 @@ module junyou.tools {
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;
} }
} }
} }
@ -57,6 +62,9 @@ module junyou.tools {
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,7 +72,9 @@ module junyou.tools {
} }
this.cancelHandler(); this.cancelHandler();
} }
public resetPosition() {
this.cancelHandler();
}
private cancelHandler() { private cancelHandler() {
this.x = this.ox; this.x = this.ox;
this.y = this.oy; this.y = this.oy;
@ -78,6 +88,9 @@ module junyou.tools {
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']();
}
} }
} }

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;
} }