增加逐帧调整位置的功能

2020-10-12 14:02:04 +08:00 · 2020-10-12 14:02:04 +08:00 · 1269e85198
commit 1269e85198
parent 0ab075ebd1
6 changed files with 388 additions and 263 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@

 <head>
    <script>
-        if(typeof window.require==="function"){
+      if (typeof window.require === 'function') {
        // 重命名 Electron 提供的 require
        window.nodeRequire = require;
        delete window.require;
@ -13,7 +13,8 @@
    </script>
    <meta charset="utf-8">
    <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="full-screen" content="true"/>
    <meta name="screen-orientation" content="portrait"/>
@ -28,8 +29,14 @@
            margin: 0;
            height: 100%;
        }
+        .red {
+            background-color: red!important;
+        }
+        .red .panel-title{
+            color: white!important;
+        }
    </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"/>
    <script src="libs/jquery.min.js"></script>
    <script src="libs/easyui/jquery.easyui.min.js"></script>
@ -44,8 +51,7 @@
        loaded++;
        if (loaded >= list.length) {
          callback();
-                    }
-                    else {
+        } else {
          loadNext();
        }
      })
@ -67,7 +73,7 @@

  var xhr = new XMLHttpRequest();
  xhr.open('GET', './manifest.json?v=' + Math.random(), true);
-        xhr.addEventListener("load", function () {
+  xhr.addEventListener('load', function () {
    var manifest = JSON.parse(xhr.response);
    var list = manifest.initial.concat(manifest.game);
    loadScript(list, function () {
@ -79,7 +85,8 @@
       * "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 ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
@ -87,7 +94,8 @@
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
          return (window.devicePixelRatio || 1) / backingStore;
-                }});
+        }
+      });
    });
  });
  xhr.send(null);
@ -110,7 +118,10 @@
                singleSelect: true,
                toolbar: '#tb',
                method: 'get',
+                striped: true,
+                rownumbers: true,
                onClickCell: onClickCell,
+                onClickRow: onClickRow,
                onEndEdit: onEndEdit
                ">
        <thead>
@ -125,15 +136,38 @@
    </table>

    <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-remove',plain:true" 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>
+        <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-remove',plain:true"
+           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 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;
  var editIndex = undefined;
+  frameEdit = false;

  function endEditing() {
    if (editIndex == undefined) {
@ -149,6 +183,10 @@
  }

  function onClickCell(index, field) {
+    if (frameEdit) {
+      endEditing();
+      return;
+    }
    if (editIndex != index) {
      if (endEditing()) {
        $('#dg').datagrid('selectRow', index)
@ -169,14 +207,19 @@
    }
  }

+  function onClickRow(index, data) {
+    if (!frameEdit) return;
+    window.frameClicked && window.frameClicked(index);
+  }
+
  function onEndEdit(index, row) {
    var ed = $(this).datagrid('getEditor', {
      index: index,
      field: 'e'
    });
    var tb = $(ed.target);
-                    var value = tb.textbox("getValue") || "";
-                    tb.textbox("setValue",value.trim());
+    var value = tb.textbox('getValue') || '';
+    tb.textbox('setValue', value.trim());
  }

  function append() {
@ -184,10 +227,10 @@
      var row = $('#dg').datagrid('getSelected');
      var idx = -1;
      if (row) {
-                            idx = $('#dg').datagrid("getRowIndex", row);
+        idx = $('#dg').datagrid('getRowIndex', row);
      }
      if (idx > -1) {
-                            $('#dg').datagrid("insertRow", {
+        $('#dg').datagrid('insertRow', {
          index: idx,
          row: {
            a: 0,
@ -227,17 +270,34 @@
    $('#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');
+  });
+
+
+

 </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>

 </html>
--- a/run.bat
+++ b/run.bat
@ -1,2 +1,2 @@
-start /b node web.js
+#start /b node web.js
 electron app
--- a/src/DragDele.ts
+++ b/src/DragDele.ts
@ -33,6 +33,7 @@ module junyou.tools {
            });
        }

+        //TODO:: 暂时只编辑单个动画, 如果同时编辑多个, 则需要先判断key
        private saveHandler() {
            let dx = this.ox - this.x;
            let dy = this.oy - this.y;
@ -42,9 +43,13 @@ module junyou.tools {
            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 i = 0; i < texarr.length; i++) {
+                        let fdata = texarr[i];
+                        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];
                    for (let f = 0, flen = dirData.length; f < flen; f++) {
                        let fdata = dirData[f];
+                        if ((junyou.frameMode && junyou.currentFrame != f)) {
+                            continue;
+                        }
                        fdata[2] += dx;
                        fdata[3] += dy;
                    }
@ -64,7 +72,9 @@ module junyou.tools {
            }
            this.cancelHandler();
        }
-        
+        public resetPosition() {
+            this.cancelHandler();
+        }
        private cancelHandler() {
            this.x = this.ox;
            this.y = this.oy;
@ -78,6 +88,9 @@ module junyou.tools {
                var oy = +$("#oy").val();
                this.x = this.ox + ox;
                this.y = this.oy + oy;
+                if (junyou.frameMode) {
+                    window['refreshCurrentFrame'] && window['refreshCurrentFrame']();
+                }
            }
        }

--- 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();
--- a/src/game/animation/AniRender.ts
+++ b/src/game/animation/AniRender.ts
@ -36,7 +36,14 @@ 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);
--- 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;
    }