setRequestAnimationFrame

2018-02-04 15:33:09 +08:00 · 2018-02-04 15:33:09 +08:00 · 46fc674b86
commit 46fc674b86
parent a24fc1db38
5 changed files with 146 additions and 38 deletions
--- a/docs/api.md
+++ b/docs/api.md
@ -148,7 +148,6 @@ core.addGlobalAnimate // 添加一个全局动画
 core.removeGlobalAnimate // 删除一个或所有全局动画
 core.setGlobalAnimate // 设置全局动画的显示效果
 core.syncGlobalAnimate // 同步所有的全局动画效果
-core.setBoxAnimate // 显示UI层某个box的动画（如怪物手册中怪物的动画）
 core.drawBoxAnimate // 绘制UI层的box动画
 core.updateCheckBlock // 更新领域、夹击、阻击的伤害地图
 core.checkBlock // 检查并执行领域、夹击、阻击事件
--- a/libs/core.js
+++ b/libs/core.js
@ -28,14 +28,26 @@ function core() {
        'turnHeroTimeout': null,
    }
    this.interval = {
-        'twoAnimate': null,
-        'fourAnimate': null,
-        'boxAnimate': null,
+        //'twoAnimate': null,
+        //'fourAnimate': null,
+        //'boxAnimate': null,
+        //'twoTime': null,
+        //'fourTime': null,
+        //'boxTime': null,
+        //'globalAnimate': false,
        'heroMoveTriggerInterval': null,
        'heroMoveInterval': null,
        "tipAnimate": null,
        'openDoorAnimate': null
    }
+    this.animateFrame = {
+        'background': null,
+        'globalAnimate': false,
+        'twoTime': null,
+        'fourTime': null,
+        'boxTime': null,
+        'speed': null,
+    }
    this.musicStatus = {
        'audioContext': null, // WebAudioContext
        'startDirectly': false, // 是否直接播放（加载）音乐
@ -79,7 +91,7 @@ function core() {
        'lockControl': false,

        // 勇士移动状态
-        'heroMoving': false,
+        'heroMoving': 0,
        'heroStop': true,

        // 自动寻路相关
@ -268,10 +280,116 @@ core.prototype.init = function (dom, statusBar, canvas, images, pngs, bgms, soun
        // 设置勇士高度
        core.material.icons.hero.height = core.material.images.hero.height/4;

+        core.setRequestAnimationFrame();
+
        core.showStartAnimate();
    });
 }

+////// 设置requestAnimationFrame //////
+core.prototype.setRequestAnimationFrame = function () {
+
+    (function() {
+        var lastTime = 0;
+        var vendors = ['webkit', 'moz'];
+        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
+                window[vendors[x] + 'CancelRequestAnimationFrame'];
+        }
+
+        if (!window.requestAnimationFrame) {
+            window.requestAnimationFrame = function(callback, element) {
+                var currTime = new Date().getTime();
+                var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
+                var id = window.setTimeout(function() {
+                    callback(currTime + timeToCall);
+                }, timeToCall);
+                lastTime = currTime + timeToCall;
+                return id;
+            };
+        }
+        if (!window.cancelAnimationFrame) {
+            window.cancelAnimationFrame = function(id) {
+                clearTimeout(id);
+            };
+        }
+    }());
+
+    core.animateFrame.speed = core.values.animateSpeed;
+    core.animateFrame.background = core.canvas.ui.createPattern(core.material.ground, "repeat");
+
+    var scan = {
+        'up': {'x': 0, 'y': -1},
+        'left': {'x': -1, 'y': 0},
+        'down': {'x': 0, 'y': 1},
+        'right': {'x': 1, 'y': 0}
+    };
+    
+    var draw = function(timestamp) {
+
+        core.animateFrame.twoTime = core.animateFrame.twoTime||timestamp;
+        core.animateFrame.fourTime = core.animateFrame.fourTime||timestamp;
+        core.animateFrame.boxTime = core.animateFrame.boxTime||timestamp;
+
+        // Global Animate
+        if (core.animateFrame.globalAnimate && core.isPlaying()) {
+
+            if (timestamp-core.animateFrame.twoTime>core.animateFrame.speed && core.isset(core.status.twoAnimateObjs)) {
+
+                for (var a = 0; a < core.status.twoAnimateObjs.length; a++) {
+                    var obj = core.status.twoAnimateObjs[a];
+                    obj.status = (obj.status+1)%2;
+                    core.canvas.event.clearRect(obj.x, obj.y, 32, 32);
+                    core.canvas.event.drawImage(obj.image, obj.status * 32, obj.loc * 32, 32, 32, obj.x, obj.y, 32, 32);
+                }
+
+                core.animateFrame.twoTime = timestamp;
+            }
+
+            if (timestamp-core.animateFrame.fourTime>core.animateFrame.speed/2 && core.isset(core.status.fourAnimateObjs)) {
+                for (var a = 0; a < core.status.fourAnimateObjs.length; a++) {
+                    var obj=core.status.fourAnimateObjs[a];
+                    obj.status = (obj.status+1)%4;
+                    core.canvas.event.clearRect(obj.x, obj.y, 32, 32);
+                    core.canvas.event.drawImage(obj.image, obj.status * 32, obj.loc * 32, 32, 32, obj.x, obj.y, 32, 32);
+                }
+                // fourtime = timestamp % fourDelta;
+                core.animateFrame.fourTime = timestamp;
+            }
+
+        }
+
+        // Box
+        if (timestamp-core.animateFrame.boxTime>core.animateFrame.speed && core.isset(core.status.boxAnimateObjs) && core.status.boxAnimateObjs.length>0) {
+            core.drawBoxAnimate();
+            core.animateFrame.boxTime = timestamp;
+        }
+
+        // Hero move
+        if (core.status.heroMoving>0) {
+            var x=core.getHeroLoc('x'), y=core.getHeroLoc('y'), direction = core.getHeroLoc('direction');
+            if (core.status.heroMoving<=4) {
+                core.drawHero(direction, x, y, 'leftFoot', 4*core.status.heroMoving*scan[direction].x, 4*core.status.heroMoving*scan[direction].y);
+            }
+            else if (core.status.heroMoving<=8) {
+                core.drawHero(direction, x, y, 'rightFoot', 4*core.status.heroMoving*scan[direction].x, 4*core.status.heroMoving*scan[direction].y);
+            }
+        }
+
+        window.requestAnimationFrame(draw);
+
+    }
+
+    window.requestAnimationFrame(draw);
+
+
+
+
+}
+
+
+
 ////// 显示游戏开始界面 //////
 core.prototype.showStartAnimate = function (callback) {
    core.dom.startPanel.style.opacity=1;
@ -1555,11 +1673,11 @@ core.prototype.setAutoHeroMove = function (steps) {

 ////// 设置行走的效果动画 //////
 core.prototype.setHeroMoveInterval = function (direction, x, y, callback) {
-    if (core.status.heroMoving) {
+    if (core.status.heroMoving>0) {
        return;
    }
-    core.status.heroMoving = true;
-    var moveStep = 0;
+    // core.status.heroMoving = true;
+    // var moveStep = 0;
    var scan = {
        'up': {'x': 0, 'y': -1},
        'left': {'x': -1, 'y': 0},
@ -1567,22 +1685,25 @@ core.prototype.setHeroMoveInterval = function (direction, x, y, callback) {
        'right': {'x': 1, 'y': 0}
    };
    core.interval.heroMoveInterval = window.setInterval(function () {
-        moveStep++;
+        core.status.heroMoving++;
+        /*
        if (moveStep<=4) {
            core.drawHero(direction, x, y, 'leftFoot', 4*moveStep*scan[direction].x, 4*moveStep*scan[direction].y);
        }
-        else if (moveStep<=8) {
+        else if (moveStep<8) {
            core.drawHero(direction, x, y, 'rightFoot', 4*moveStep*scan[direction].x, 4*moveStep*scan[direction].y);
        }
-        if (moveStep==8) {
+        */
+        if (core.status.heroMoving==8) {
            core.setHeroLoc('x', x+scan[direction].x);
            core.setHeroLoc('y', y+scan[direction].y);
            core.moveOneStep();
+            core.clearMap('hero', 0, 0, 416, 416);
            core.drawHero(direction, core.getHeroLoc('x'), core.getHeroLoc('y'), 'stop');
            //if (core.status.heroStop)
            //    core.drawHero(direction, core.getHeroLoc('x'), core.getHeroLoc('y'), 'stop');
            clearInterval(core.interval.heroMoveInterval);
-            core.status.heroMoving = false;
+            core.status.heroMoving = 0;
            if (core.isset(callback)) callback();
        }
    }, 12.5 / core.status.replay.speed);
@ -2785,6 +2906,7 @@ core.prototype.removeGlobalAnimate = function (x, y, all) {

 ////// 设置全局动画的显示效果 //////
 core.prototype.setGlobalAnimate = function (speed) {
+    /*
    clearInterval(core.interval.twoAnimate);
    clearInterval(core.interval.fourAnimate);
    var animateClose = false;
@ -2810,6 +2932,10 @@ core.prototype.setGlobalAnimate = function (speed) {
            animateClose = false;
        }
    }, speed / 2);
+    */
+    core.syncGlobalAnimate();
+    core.animateFrame.speed = speed;
+    core.animateFrame.globalAnimate = true;
 }

 ////// 同步所有的全局动画效果 //////
@ -2822,25 +2948,13 @@ core.prototype.syncGlobalAnimate = function () {
    })
 }

-////// 显示UI层某个box的动画 //////
-core.prototype.setBoxAnimate = function () {
-    clearInterval(core.interval.boxAnimate);
-    if (core.status.boxAnimateObjs.length > 0) {
-        var background = core.canvas.ui.createPattern(core.material.ground, "repeat");
-        core.drawBoxAnimate(background);
-        core.interval.boxAnimate = setInterval(function () {
-            core.drawBoxAnimate(background);
-        }, core.values.animateSpeed);
-    }
-}
-
 ////// 绘制UI层的box动画 //////
-core.prototype.drawBoxAnimate = function (background) {
+core.prototype.drawBoxAnimate = function () {
    for (var a = 0; a < core.status.boxAnimateObjs.length; a++) {
        var obj = core.status.boxAnimateObjs[a];
-        obj.status = obj.status == 0 ? 1 : 0;
+        obj.status = ((obj.status||0)+1)%2;
        core.clearMap('ui', obj.bgx, obj.bgy, obj.bgsize, obj.bgsize);
-        core.fillRect('ui', obj.bgx, obj.bgy, obj.bgsize, obj.bgsize, background);
+        core.fillRect('ui', obj.bgx, obj.bgy, obj.bgsize, obj.bgsize, core.animateFrame.background);
        core.canvas.ui.drawImage(obj.image, obj.status * 32, obj.icon * 32,
            32, 32, obj.x, obj.y, 32, 32);
    }
--- a/libs/events.js
+++ b/libs/events.js
@ -254,7 +254,7 @@ events.prototype.doEvents = function (list, x, y, callback) {
 ////// 执行当前自定义事件列表中的下一个事件 //////
 events.prototype.doAction = function() {
    // 清空boxAnimate和UI层
-    clearInterval(core.interval.boxAnimate);
+    core.status.boxAnimateObjs = [];
    core.clearMap('ui', 0, 0, 416, 416);
    core.setAlpha('ui', 1.0);

@ -1152,7 +1152,6 @@ events.prototype.clickShop = function(x,y) {
            }

            core.status.boxAnimateObjs = [];
-            core.setBoxAnimate();
            if (core.status.event.data.fromList)
                core.ui.drawQuickShop();
            else core.ui.closePanel();
@ -1182,7 +1181,6 @@ events.prototype.keyUpShop = function (keycode) {
        }

        core.status.boxAnimateObjs = [];
-        core.setBoxAnimate();

        if (core.status.event.data.fromList)
            core.ui.drawQuickShop();
--- a/libs/ui.js
+++ b/libs/ui.js
@ -15,7 +15,6 @@ main.instance.ui = new ui();
 ////// 结束一切事件和绘制，关闭UI窗口，返回游戏进程 //////
 ui.prototype.closePanel = function () {
    core.status.boxAnimateObjs = [];
-    core.setBoxAnimate();
    core.clearMap('ui', 0, 0, 416, 416);
    core.setAlpha('ui', 1.0);
    core.unLockControl();
@ -86,7 +85,6 @@ ui.prototype.drawTextBox = function(content) {
    core.setAlpha('ui', 1);
    core.strokeRect('ui', left - 1, top - 1, right + 1, bottom + 1, '#FFFFFF', 2);
    core.status.boxAnimateObjs = [];
-    core.setBoxAnimate();

    // 名称
    core.canvas.ui.textAlign = "left";
@ -114,7 +112,7 @@ ui.prototype.drawTextBox = function(content) {
                    'bgx': left + 15, 'bgy': top + 40, 'bgsize': 32,
                    'image': image, 'x': left + 15, 'y': top + 40, 'icon': icon
                });
-                core.setBoxAnimate();
+                core.drawBoxAnimate();
            }
        }
    }
@ -237,7 +235,7 @@ ui.prototype.drawChoices = function(content, choices) {
                        'bgx': left + 15, 'bgy': top + 30, 'bgsize': 32,
                        'image': image, 'x': left + 15, 'y': top + 30, 'icon': icon
                    });
-                    core.setBoxAnimate();
+                    core.drawBoxAnimate();
                }
            }
        }
@ -442,7 +440,6 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
    core.setAlpha('data', 1);
    core.setOpacity('data', 1);
    core.status.boxAnimateObjs = [];
-    core.setBoxAnimate();

    var margin = 35;
    var boxWidth = 40;
@ -473,7 +470,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
        'bgx': left + right - margin - 40, 'bgy': top+margin, 'bgsize': boxWidth,
        'image': core.material.images.enemys, 'x': left + right - margin - 40 + (boxWidth-32)/2, 'y': top + margin + (boxWidth-32)/2, 'icon': core.material.icons.enemys[monsterId]
    });
-    core.setBoxAnimate();
+    core.drawBoxAnimate();

    var lineWidth = 80;

@ -636,7 +633,6 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
            // 战斗结束
            clearInterval(battleInterval);
            core.status.boxAnimateObjs = [];
-            core.setBoxAnimate();
            core.clearMap('ui', 0, 0, 416, 416);
            core.setAlpha('ui', 1.0);
            core.clearMap('data', 0, 0, 416, 416);
@ -863,7 +859,7 @@ ui.prototype.drawBook = function (index) {
        }

    }
-    core.setBoxAnimate();
+    core.drawBoxAnimate();
    this.drawPagination(page, totalPage);
 }

--- a/更新说明.txt
+++ b/更新说明.txt
@ -6,6 +6,7 @@
 未成功打怪和开门则不自动存档。
 重新支持楼梯穿透。
 支持多结局，成绩将分开统计。
+重构勇士行走过程和事件检测，大幅提升性能。
 修复所有已知Bug。

 -----------------------------------------------------------------------