Muliple Animations

_server/editor.js

@@ -114,7 +114,10 @@ editor.prototype.idsInit = function (maps, icons) {
         var img = core.material.images.tilesets[imgName];
         var width = Math.floor(img.width/32), height = Math.floor(img.height/32);
         if(img.width%32 || img.height%32){
-            alert(imgName+'的长或宽不是32的整数倍, 请修改后刷新页面')
+            alert(imgName+'的长或宽不是32的整数倍, 请修改后刷新页面');
+        }
+        if(img.width*img.height > 32*32*1000){
+            alert(imgName+'上的图块数量超过了1000，请修改后刷新页面');
         }
         for (var id=startOffset; id<startOffset+width*height;id++) {
             var x = (id-startOffset)%width, y = parseInt((id-startOffset)/width);

libs/control.js

@@ -56,6 +56,7 @@ control.prototype.setRequestAnimationFrame = function () {
 
         core.animateFrame.globalTime = core.animateFrame.globalTime||timestamp;
         core.animateFrame.boxTime = core.animateFrame.boxTime||timestamp;
+        core.animateFrame.animateTime = core.animateFrame.animateTime||timestamp;
         core.animateFrame.moveTime = core.animateFrame.moveTime||timestamp;
         core.animateFrame.weather.time = core.animateFrame.weather.time||timestamp;
 
@@ -88,6 +89,18 @@ control.prototype.setRequestAnimationFrame = function () {
             core.animateFrame.boxTime = timestamp;
         }
 
+        // Animate
+        if (timestamp-core.animateFrame.animateTime>50 && core.isset(core.status.animateObjs) && core.status.animateObjs.length>0) {
+            core.clearMap('animate');
+            core.status.animateObjs = core.status.animateObjs.filter(function (obj) {
+                return obj.index < obj.animate.frames.length;
+            })
+            core.status.animateObjs.forEach(function (obj) {
+                core.maps.drawAnimateFrame(obj.animate, obj.centerX, obj.centerY, obj.index++);
+            })
+            core.animateFrame.animateTime = timestamp;
+        }
+
         // Hero move
         if (timestamp-core.animateFrame.moveTime>16 && core.isset(core.status.heroMoving) && core.status.heroMoving>0) {
             var x=core.getHeroLoc('x'), y=core.getHeroLoc('y'), direction = core.getHeroLoc('direction');

libs/core.js

@@ -31,6 +31,7 @@ function core() {
         'globalAnimate': false,
         'globalTime': null,
         'boxTime': null,
+        'animateTime': null,
         'moveTime': null,
         'speed': null,
         'weather': {
@@ -157,6 +158,7 @@ function core() {
         // 动画
         'globalAnimateObjs': [],
         'boxAnimateObjs': [],
+        'animateObjs': [],
     };
     this.status = {};
 }

libs/maps.js

@@ -1180,6 +1180,35 @@ maps.prototype.drawBoxAnimate = function () {
     }
 }
 
+////// 绘制动画的某一帧 //////
+maps.prototype.drawAnimateFrame = function (animate, centerX, centerY, index) {
+    var frame = animate.frames[index];
+    var ratio = animate.ratio;
+    frame.forEach(function (t) {
+        var image = animate.images[t.index];
+        if (!core.isset(image)) return;
+        var realWidth = image.width * ratio * t.zoom / 100;
+        var realHeight = image.height * ratio * t.zoom / 100;
+        core.setAlpha('animate', t.opacity / 255);
+
+        var cx = centerX+t.x, cy=centerY+t.y;
+
+        if (!t.mirror && !t.angle) {
+            core.canvas.animate.drawImage(image, cx-realWidth/2 - core.bigmap.offsetX, cy-realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
+        }
+        else {
+            core.saveCanvas('animate');
+            core.canvas.animate.translate(cx,cy);
+            if (t.angle)
+                core.canvas.animate.rotate(-t.angle*Math.PI/180);
+            if (t.mirror)
+                core.canvas.animate.scale(-1,1);
+            core.canvas.animate.drawImage(image, -realWidth/2 - core.bigmap.offsetX, -realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
+            core.loadCanvas('animate');
+        }
+    })
+}
+
 ////// 绘制动画 //////
 maps.prototype.drawAnimate = function (name, x, y, callback) {
 
@@ -1195,49 +1224,22 @@ maps.prototype.drawAnimate = function (name, x, y, callback) {
         return;
     }
 
-    // 清空animate层
     clearInterval(core.interval.animateInterval);
-    core.clearMap('animate');
 
     // 开始绘制
-    var animate = core.material.animates[name];
+    var animate = core.material.animates[name], centerX = 32*x+16, centerY = 32*y+16;
-    var ratio = animate.ratio;
-    var centerX = 32*x+16, centerY = 32*y+16;
-    var index=0;
-
     // 播放音效
     core.playSound(animate.se);
 
-    var draw = function (index) {
+    // 异步绘制：使用requestAnimationFrame进行绘制
-        core.clearMap('animate');
+    if (!core.isset(callback)) {
-
+        core.status.animateObjs.push({"animate": animate, "centerX": centerX, "centerY": centerY, "index": 0});
-        var frame = animate.frames[index];
+        return;
-        frame.forEach(function (t) {
-            var image = animate.images[t.index];
-            if (!core.isset(image)) return;
-            var realWidth = image.width * ratio * t.zoom / 100;
-            var realHeight = image.height * ratio * t.zoom / 100;
-            core.setAlpha('animate', t.opacity / 255);
-
-            var cx = centerX+t.x, cy=centerY+t.y;
-
-            if (!t.mirror && !t.angle) {
-                core.canvas.animate.drawImage(image, cx-realWidth/2 - core.bigmap.offsetX, cy-realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
-            }
-            else {
-                core.saveCanvas('animate');
-                core.canvas.animate.translate(cx,cy);
-                if (t.angle)
-                    core.canvas.animate.rotate(-t.angle*Math.PI/180);
-                if (t.mirror)
-                    core.canvas.animate.scale(-1,1);
-                core.canvas.animate.drawImage(image, -realWidth/2 - core.bigmap.offsetX, -realHeight/2 - core.bigmap.offsetY, realWidth, realHeight);
-                core.loadCanvas('animate');
-            }
-        })
     }
 
-    draw(index++);
+    var index=0;
+    core.clearMap('animate');
+    core.maps.drawAnimateFrame(animate, centerX, centerY, index++);
 
     core.interval.animateInterval = setInterval(function (t) {
         if (index == animate.frames.length) {
@@ -1247,7 +1249,8 @@ maps.prototype.drawAnimate = function (name, x, y, callback) {
             if (core.isset(callback)) callback();
             return;
         }
-        draw(index++);
+        core.clearMap('animate');
+        core.maps.drawAnimateFrame(animate, centerX, centerY, index++);
     }, 50);
 }
 

更新说明.txt

@@ -1,4 +1,17 @@
-HTML5魔塔样板V2.4.1
+HTML5魔塔样板V2.4.2
+
+允许导入tilesets直接使用，无需PS和注册
+tilesets的素材允许以矩形方式整体绘制
+增加了透明块的支持
+装备允许按照百分比增加属性
+多动画的同时播放
+修复了打开存读档页面时闪屏的问题
+修复了cannotMove仍然能轻按和瞬移的问题
+所有已知Bug修复，部分代码重构和细节优化
+
+-----------------------------------------------------------------------
+
+HTML5魔塔样板V2.4.1
 
 增加背景层和前景层的图块绘制，多层图块可叠加
 背景层/前景层图块的显示、隐藏、修改等事件