diff --git a/_server/editor.js b/_server/editor.js index 937d5dd0..07b714ba 100644 --- a/_server/editor.js +++ b/_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; id50 && 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'); diff --git a/libs/core.js b/libs/core.js index 0c8ec1c2..a4157709 100644 --- a/libs/core.js +++ b/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 = {}; } diff --git a/libs/maps.js b/libs/maps.js index 8c6157aa..71e9cd30 100644 --- a/libs/maps.js +++ b/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 ratio = animate.ratio; - var centerX = 32*x+16, centerY = 32*y+16; - var index=0; - + var animate = core.material.animates[name], centerX = 32*x+16, centerY = 32*y+16; // 播放音效 core.playSound(animate.se); - var draw = function (index) { - core.clearMap('animate'); - - var frame = animate.frames[index]; - 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'); - } - }) + // 异步绘制：使用requestAnimationFrame进行绘制 + if (!core.isset(callback)) { + core.status.animateObjs.push({"animate": animate, "centerX": centerX, "centerY": centerY, "index": 0}); + return; } - 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); } diff --git a/更新说明.txt b/更新说明.txt index 64e7c28e..be127ade 100644 --- a/更新说明.txt +++ b/更新说明.txt @@ -1,4 +1,17 @@ -HTML5魔塔样板V2.4.1 +HTML5魔塔样板V2.4.2 + +允许导入tilesets直接使用，无需PS和注册 +tilesets的素材允许以矩形方式整体绘制 +增加了透明块的支持 +装备允许按照百分比增加属性 +多动画的同时播放 +修复了打开存读档页面时闪屏的问题 +修复了cannotMove仍然能轻按和瞬移的问题 +所有已知Bug修复，部分代码重构和细节优化 + +----------------------------------------------------------------------- + +HTML5魔塔样板V2.4.1 增加背景层和前景层的图块绘制，多层图块可叠加 背景层/前景层图块的显示、隐藏、修改等事件