diff --git a/_server/blockly/MotaAction.g4 b/_server/blockly/MotaAction.g4 index 48850a17..d6e6efbe 100644 --- a/_server/blockly/MotaAction.g4 +++ b/_server/blockly/MotaAction.g4 @@ -802,7 +802,7 @@ return code; */; viberate_s - : '画面震动' '时间' Int '异步' Bool Newline + : '画面震动' '时间' Int '不等待执行完毕' Bool Newline /* viberate_s @@ -817,7 +817,7 @@ return code; */; animate_s - : '显示动画' IdString '位置' EvalString? '异步' Bool Newline + : '显示动画' IdString '位置' EvalString? '不等待执行完毕' Bool Newline /* animate_s @@ -867,7 +867,7 @@ return code; */; animateImage_0_s - : '图片淡入' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '异步' Bool Newline + : '图片淡入' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '不等待执行完毕' Bool Newline /* animateImage_0_s @@ -881,7 +881,7 @@ return code; */; animateImage_1_s - : '图片淡出' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '异步' Bool Newline + : '图片淡出' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '不等待执行完毕' Bool Newline /* animateImage_1_s @@ -921,7 +921,7 @@ return code; moveImage_0_s : '图片移动' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL - '终点像素位置' 'x' PosString 'y' PosString '移动时间' Int '异步' Bool Newline + '终点像素位置' 'x' PosString 'y' PosString '移动时间' Int '不等待执行完毕' Bool Newline /* moveImage_0_s @@ -935,7 +935,7 @@ return code; */; setFg_0_s - : '更改画面色调' Number ',' Number ',' Number ',' Number '动画时间' Int? '异步' Bool Newline + : '更改画面色调' Number ',' Number ',' Number ',' Number '动画时间' Int? '不等待执行完毕' Bool Newline /* setFg_0_s @@ -959,7 +959,7 @@ return code; */; setFg_1_s - : '恢复画面色调' '动画时间' Int? '异步' Bool Newline + : '恢复画面色调' '动画时间' Int? '不等待执行完毕' Bool Newline /* setFg_1_s @@ -1110,7 +1110,7 @@ return code; */; setVolume_s - : '设置音量' Int '渐变时间' Int? '异步' Bool Newline + : '设置音量' Int '渐变时间' Int? '不等待执行完毕' Bool Newline /* setVolume_s diff --git a/_server/editor.js b/_server/editor.js index 3bb981c8..3f8c17db 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..c40f254c 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -59,7 +59,10 @@ maps.prototype.initBlock = function (x, y, id) { var tmp = {'x': x, 'y': y, 'id': id}; if (disable!=null) tmp.disable = disable; - if (id in this.blocksInfo) tmp.event = JSON.parse(JSON.stringify(this.blocksInfo[id])); + if (id==17) { + tmp.event = {"cls": "terrains", "id": "airwall", "noPass": true}; + } + else if (id in this.blocksInfo) tmp.event = JSON.parse(JSON.stringify(this.blocksInfo[id])); else { var tilesetOffset = core.icons.getTilesetOffset(id); if (tilesetOffset != null) { @@ -338,9 +341,13 @@ maps.prototype.canMoveDirectly = function (destX,destY) { } maps.prototype.drawBlock = function (block, animate, dx, dy) { + // none：空地；17：空气墙 + if (block.event.id=='none' || block.id==17) return; + var cls = block.event.cls, height = block.event.height || 32; var image, x, y; + if (cls == 'tileset') { var offset = core.icons.getTilesetOffset(block.event.id); if (offset == null) return; @@ -393,7 +400,7 @@ maps.prototype.drawBgFgMap = function (floorId, canvas, name) { for (var y = 0; y < height; y++) { if (name=='bg') canvas.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32); - if (arr[y][x]>0) { + if (arr[y][x]>0 && arr[y][x]!=17) { var block = core.maps.initBlock(x, y, arr[y][x]); if (core.isset(block.event)) { var id = block.event.id, cls = block.event.cls; @@ -492,7 +499,7 @@ maps.prototype.drawMap = function (mapName, callback) { if (block.event.cls == 'autotile') { core.drawAutotile(core.canvas.event, mapArray, block, 32, 0, 0); } - else if (block.event.id!='none') { + else { core.drawBlock(block); core.addGlobalAnimate(block); } @@ -1180,6 +1187,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 +1231,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 +1256,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/libs/ui.js b/libs/ui.js index afa4fb39..d728c1a1 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -2057,7 +2057,7 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente } } else { - if (block.event.id!='none') { + if (block.event.id!='none' && block.id!=17) { var blockIcon = core.material.icons[block.event.cls][block.event.id]; var blockImage = core.material.images[block.event.cls]; var height = block.event.height || 32; 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 增加背景层和前景层的图块绘制，多层图块可叠加 背景层/前景层图块的显示、隐藏、修改等事件