From 07bcfafe270a3097bebb1848e35101d297512c0a Mon Sep 17 00:00:00 2001 From: tocque <364004564@qq.com> Date: Thu, 13 Dec 2018 20:02:03 +0900 Subject: [PATCH] dynamic canvas --- _server/blockly/MotaAction.g4 | 122 +++++++--------- _server/editor_blockly.js | 9 +- docs/event.md | 65 +++++---- index.html | 2 +- libs/actions.js | 2 + libs/control.js | 23 ++- libs/core.js | 33 +++++ libs/events.js | 258 +++++++++++++++++++++------------- libs/maps.js | 62 ++++++-- libs/ui.js | 150 ++++++++++++++++---- main.js | 4 +- project/data.js | 24 +++- styles.css | 34 ++--- 13 files changed, 529 insertions(+), 259 deletions(-) diff --git a/_server/blockly/MotaAction.g4 b/_server/blockly/MotaAction.g4 index 09bde8b4..89175f71 100644 --- a/_server/blockly/MotaAction.g4 +++ b/_server/blockly/MotaAction.g4 @@ -260,13 +260,12 @@ action | unfollow_s | animate_s | vibrate_s - | showImage_0_s - | showImage_1_s - | animateImage_0_s - | animateImage_1_s + | showImage_s + | hideImage_s + | showTextImage_s + | animateImage_s | showGif_0_s | showGif_1_s - | moveImage_0_s | setFg_0_s | setFg_1_s | setWeather_s @@ -1019,58 +1018,49 @@ var code = '{"type": "animate", "name": "'+IdString_0+'"'+EvalString_0+async+'}, return code; */; -showImage_0_s - : '显示图片' EvalString '起点像素位置' 'x' PosString 'y' PosString Newline +showImage_s + : '显示图片' '图片编号' Int '图片' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL + '放大率 : x' Int '% y' Int '% 透明度' Int '时间' Int '不等待执行完毕' Bool Newline -/* showImage_0_s +/* showImage_s tooltip : showImage：显示图片 helpUrl : https://h5mota.com/games/template/docs/#/event?id=showimage%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87 -default : ["bg.jpg","0","0"] +default : [1,"bg.jpg","0","0",100,100,100,0,false] colour : this.printColor -var code = '{"type": "showImage", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+']},\n'; +if(Int_3<0 || Int_3>100) throw new Error('透明度的值在0~100之间'); +var async = Bool_0?', "async": true':''; +var code = '{"type": "showImage", "code": '+Int_0+', "image": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "dw": '+Int_1+', "dh": '+Int_2+', "opacity": '+Int_3+', "time": '+Int_4+async+'},\n'; return code; */; -showImage_1_s - : '清除所有图片' Newline +showTextImage_s + : '显示图片化文本' '图片编号' Int '文本' EvalString BGNL + '起点像素位置' 'x' PosString 'y' PosString '透明度' Int '时间' Int '不等待执行完毕' Bool Newline -/* showImage_1_s -tooltip : showImage：清除所有显示的图片 +/* showTextImage_s +tooltip : showTextImage：显示图片化文本 helpUrl : https://h5mota.com/games/template/docs/#/event?id=showimage%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87 colour : this.printColor -var code = '{"type": "showImage"},\n'; +default : [1,"可以使用setText事件来控制字体、颜色、大小、偏移量等","0","0",100,0,false] +if(Int_1<0 || Int_1>100) throw new Error('透明度的值在0~100之间'); +var async = Bool_0?', "async": true':''; +var code = '{"type": "showTextImage", "code": '+Int_0+', "text": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "opacity": '+Int_1+', "time": '+Int_2+async+'},\n'; return code; */; -animateImage_0_s - : '图片淡入' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '保留图片' Bool '不等待执行完毕' Bool Newline +hideImage_s + : '清除图片' '图片编号' Int '时间' Int '不等待执行完毕' Bool Newline -/* animateImage_0_s -tooltip : animageImage：图片淡入 -helpUrl : https://h5mota.com/games/template/docs/#/event?id=animateimage%EF%BC%9A%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA -default : ["bg.jpg","0","0",500,true,false] +/* hideImage_s +tooltip : hideImage：清除图片 +helpUrl : https://h5mota.com/games/template/docs/#/event?id=showimage%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87 colour : this.printColor -var keep = Bool_0?', "keep": true':''; -var async = Bool_1?', "async": true':''; -var code = '{"type": "animateImage", "action": "show", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+keep+async+'},\n'; -return code; -*/; - -animateImage_1_s - : '图片淡出' EvalString '起点像素位置' 'x' PosString 'y' PosString '动画时间' Int '清除图片' Bool '不等待执行完毕' Bool Newline - - -/* animateImage_1_s -tooltip : animageImage：图片淡出 -helpUrl : https://h5mota.com/games/template/docs/#/event?id=animateimage%EF%BC%9A%E5%9B%BE%E7%89%87%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA -default : ["bg.jpg","0","0",500,true,false] -colour : this.printColor -var keep = Bool_0?', "keep": true':''; -var async = Bool_1?', "async": true':''; -var code = '{"type": "animateImage", "action": "hide", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+keep+async+'},\n'; +default : [1,0,false] +var async = Bool_0?', "async": true':''; +var code = '{"type": "hideImage", "code": '+Int_0+', "time": '+Int_1+async+'},\n'; return code; */; @@ -1099,19 +1089,22 @@ var code = '{"type": "showGif"},\n'; return code; */; -moveImage_0_s - : '图片移动' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL - '终点像素位置' 'x' PosString 'y' PosString '移动时间' Int '保留图片' Bool '不等待执行完毕' Bool Newline +animateImage_s + : '图片移动' '编号' Int '终点像素位置' 'x' PosString? 'y' PosString? BGNL + '透明度' PosString? '移动时间' Int '不等待执行完毕' Bool Newline -/* moveImage_0_s -tooltip : moveImage：图片移动 +/* animateImage_s +tooltip : animateImage：图片移动 helpUrl : https://h5mota.com/games/template/docs/#/event?id=moveimage%EF%BC%9A%E5%9B%BE%E7%89%87%E7%A7%BB%E5%8A%A8 -default : ["bg.jpg","0","0","0","0",500,true,false] +default : [1,"0","0",100,500,false] colour : this.printColor -var keep = Bool_0?', "keep": true':''; -var async = Bool_1?', "async": true':''; -var code = '{"type": "moveImage", "name": "'+EvalString_0+'", "from": ['+PosString_0+','+PosString_1+'], "to": ['+PosString_2+','+PosString_3+'], "time": '+Int_0+keep+async+'},\n'; +var toloc = ''; +if (PosString_0 && PosString_1) + toloc = ', "to": ['+PosString_0+','+PosString_1+']' +PosString_2 = (PosString_2) ? (', "opacity": '+PosString_2):''; +var async = Bool_0?', "async": true':''; +var code = '{"type": "animateImage", "code": '+Int_0+toloc+PosString_2+',"time": '+Int_1+async+'},\n'; return code; */; @@ -2076,22 +2069,20 @@ ActionParser.prototype.parseAction = function() { this.next = MotaActionBlocks['vibrate_s'].xmlText([data.time||0, data.async||false, this.next]); break; case "showImage": // 显示图片 - if(this.isset(data.name)){ - this.next = MotaActionBlocks['showImage_0_s'].xmlText([ - data.name,data.loc[0],data.loc[1],this.next]); - } else { - this.next = MotaActionBlocks['showImage_1_s'].xmlText([ - this.next]); - } + this.next = MotaActionBlocks['showImage_s'].xmlText([ + data.code,data.image,data.loc[0],data.loc[1],data.dw||100,data.dw||100,data.opacity||100,data.time||0,data.async||false,this.next]); break; - case "animateImage": // 显示图片 - if(data.action == 'show'){ - this.next = MotaActionBlocks['animateImage_0_s'].xmlText([ - data.name,data.loc[0],data.loc[1],data.time||0,data.keep||false,data.async||false,this.next]); - } else if (data.action == 'hide') { - this.next = MotaActionBlocks['animateImage_1_s'].xmlText([ - data.name,data.loc[0],data.loc[1],data.time||0,data.keep||false,data.async||false,this.next]); - } + case "hideImage": // 清除图片 + this.next = MotaActionBlocks['hideImage_s'].xmlText([ + data.code,data.time||0,data.async||false,this.next]); + break; + case "showTextImage": // 显示图片化文本 + this.next = MotaActionBlocks['showTextImage_s'].xmlText([ + data.code,this.EvalString(data.text),data.loc[0],data.loc[1],data.opacity||100,data.time||0,data.async||false,this.next]); + break; + case "animateImage": // 移动图片 + this.next = MotaActionBlocks['animateImage_s'].xmlText([ + data.code, data.to[0], data.to[1], data.opacity, data.time||0, data.async||false, this.next]); break; case "showGif": // 显示动图 if(this.isset(data.name)){ @@ -2102,11 +2093,6 @@ ActionParser.prototype.parseAction = function() { this.next]); } break; - case "moveImage": // 移动图片 - this.next = MotaActionBlocks['moveImage_0_s'].xmlText([ - data.name, data.from[0], data.from[1], data.to[0], data.to[1], data.time||0, data.keep||false, data.async||false, this.next - ]); - break; case "setFg": // 颜色渐变 if(this.isset(data.color)){ var alpha = data.color[3]; diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index 864fb7fd..dcabfcf4 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -62,13 +62,12 @@ editor_blockly = function () { MotaActionBlocks['autoText_s'].xmlText(), MotaActionBlocks['scrollText_s'].xmlText(), MotaActionBlocks['setText_s'].xmlText(), - MotaActionBlocks['showImage_0_s'].xmlText(), - MotaActionBlocks['animateImage_0_s'].xmlText(), - MotaActionBlocks['animateImage_1_s'].xmlText(), - MotaActionBlocks['showImage_1_s'].xmlText(), + MotaActionBlocks['showImage_s'].xmlText(), + MotaActionBlocks['hideImage_s'].xmlText(), + MotaActionBlocks['showTextImage_s'].xmlText(), + MotaActionBlocks['animateImage_s'].xmlText(), MotaActionBlocks['showGif_0_s'].xmlText(), MotaActionBlocks['showGif_1_s'].xmlText(), - MotaActionBlocks['moveImage_0_s'].xmlText(), MotaActionBlocks['tip_s'].xmlText(), MotaActionBlocks['win_s'].xmlText(), MotaActionBlocks['lose_s'].xmlText(), diff --git a/docs/event.md b/docs/event.md index 328c1900..9f09a82e 100644 --- a/docs/event.md +++ b/docs/event.md @@ -939,48 +939,58 @@ loc可忽略，如果忽略则显示为事件当前点。 ``` js "x,y": [ // 实际执行的事件列表 - {"type": "showImage", "name": "bg.jpg", "loc": [231,297]}, // 在(231,297)显示bg.jpg - {"type": "showImage", "name": "1.png", "loc": [109,167]}, // 在(109,167)显示1.png - {"type": "showImage"} // 如果不指定name则清除所有图片。 + {"type": "showImage", "code": 1, "image": "bg.jpg", "loc": [231,297], "dw": 100, "dy" : 100, "opacity": 100, "time" : 0}, // 在(231,297)显示bg.jpg + {"type": "showImage", "code": 12, "image": "1.png", "loc": [209,267], "dw": 100, "dy" : 100, "opacity": 50, "time" : 1000}, // 在(209,267)渐变显示1.png，渐变时间为1000毫秒，完成时透明度为0.5，这张图片将遮盖上一张 + {"type": "showImage", "code": 8, "image": "hero.png", "loc": [349,367], "dw": 50, "dy" : 50, "opacity": 100, "time" : 0}, // 在(209,267)渐变显示hero.png,大小为原图片的一半，渐变时间为1000毫秒,这张图片将被上一张遮盖 ] ``` -name为图片名。**请确保图片在data.js中的images中被定义过。** +code为图片编号，如果两张图片重叠，编号较大的显示在上。建议编号取1~50之间的数。 + +image为图片名。**请确保图片在data.js中的images中被定义过。** loc为图片左上角坐标，以像素为单位进行计算。 -如果不指定name则清除所有显示的图片。 +dw和dh为图片的横向、纵向放大率，默认值为100，即不进行缩放。 -调用show/hide/move/animate等几个事件同样会清除所有显示的图片。 +opacity为图片透明度,默认值为100，即不透明。 -### animateImage：图片淡入淡出 +time为渐变时间，默认值为0，即不渐变直接显示。 -我们还可以使用 `{"type": "animateImage"}` 来造成显示图片的淡入淡出效果。 +### showTextImage：显示图片 + +我们可以使用 `{"type": "showTextImage"}` 以图片的方式显示文本。 ``` js "x,y": [ // 实际执行的事件列表 - {"type": "animateImage", "action": "show", "name": "bg.jpg", "loc": [231,297], "time": 500, "keep": true}, // 在(231,297)淡入bg.jpg，动画时间500ms - {"type": "animateImage", "action": "hide", "name": "1.png", "loc": [109,167], "time": 300, "async": true}, // 在(109,167)淡出1.png，动画时间300ms，异步执行 + {"type": "showTextImage", "code": 1, "text": "第一排\n第二排\n\n空行后的一排", "loc": [231,297], "opacity": 1, "time" : 0}, // 在(231,297)显示"第一排\n第二排\n\n空行后的一排" ] ``` -action为淡入还是淡出，`show`为淡入，`hide`会淡出。 +code为图片编号，如果两张图片重叠，编号较大的显示在上。建议编号取1~50之间的数。 -name为图片名。**请确保图片在data.js中的images中被定义过。** +text为要显示的文本。默认行宽为416。 loc为图片左上角坐标，以像素为单位进行计算。 -time为淡入淡出的时间，如果是0则忽略此项。 +opacity为图片透明度。 -keep可选，如果为true则在淡入图片后立刻调用showImage以保留图片，在淡出图片前先清除再动画。 +time为渐变时间，默认值为0，即不渐变直接显示。 -async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。 +### hideImage：清除图片 -如果多张图片的淡入淡出可以采用以下方式（仅供参考）： +我们可以使用 `{"type": "hideImage"}` 来清除一张图片。 -假设我现在已经有了`1.jpg`显示在屏幕上： -- 淡入显示`2.png`：调用`animateImage`淡入图片，然后立刻调用`showImage`显示图片。 -- 淡出`1.png`：清除所有图片，`showImage`显示`2.png`，然后调用`animateImage`淡出`1.jpg` +``` js +"x,y": [ // 实际执行的事件列表 + {"type": "hideImage", "code": 1, "time" : 0}, // 使1号图片消失 + {"type": "hideImage", "code": 12, "time" : 1000}, // 使12号图片渐变消失，时间为1000毫秒 +] +``` + +time为渐变时间，默认值为0，即不渐变直接消除。 + +code为显示图片时输入的图片编号。 ### showGif：显示动图 @@ -999,26 +1009,27 @@ loc为动图左上角坐标，以像素为单位进行计算。 如果不指定name则清除所有显示的动图。 -### moveImage：图片移动 +### animateImage：图片移动 -我们可以使用 `{"type": "moveImage"}` 来造成图片移动效果。 +我们可以使用 `{"type": "animateImage"}` 来造成图片移动，淡入淡出等效果。 ``` js "x,y": [ // 实际执行的事件列表 - {"type": "moveImage", "name": "bg.jpg", "from": [231,297], "to": [22,333], "time": 500, "keep": true, "async": true}, + {"type": "animateImage", "code": 1, "to": [22,333], "opacity": 1, "time": 1000}, + // 将1号图片移动到(22,333)，动画时间为1000ms + {"type": "animateImage", "code": 12, "opacity": 0.5, "time": 500}, // 将二号图片的透明度变为0.5，动画时间500ms + {"type": "animateImage", "code": 1, "to": [109,167], "opacity": 0, "time": 300, "async": true}, // 将1号图片移动到(109,167)，透明度设为0（不可见），动画时间300ms，异步执行 ] ``` -name为图片名。**请确保图片在data.js中的images中被定义过。** +image为图片名。**请确保图片在data.js中的images中被定义过。** -from为起点图片左上角坐标，以像素为单位进行计算。 +to为终点图片左上角坐标，以像素为单位进行计算，不填写则视为当前图片位置。 -to为终点图片左上角坐标，以像素为单位进行计算。 +opacity为完成时图片透明度，移动过程中逐渐变化。 time为总移动的时间。 -keep可选，如果为true则在移动结束后立刻调用showImage以保留图片。 - async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。 ### setFg：更改画面色调 diff --git a/index.html b/index.html index 8fe217e5..c31e434a 100644 --- a/index.html +++ b/index.html @@ -143,9 +143,9 @@ - 此浏览器不支持HTML5 +
diff --git a/libs/actions.js b/libs/actions.js index 55212e0b..499e551f 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -1893,9 +1893,11 @@ actions.prototype.clickSettings = function (x,y) { core.ui.drawKeyBoard(); break; case 2: + core.clearLastEvent(); core.ui.drawMaps(); break; case 3: + core.clearLastEvent(); core.ui.drawPaint(); break; case 4: diff --git a/libs/control.js b/libs/control.js index f3ae58b9..9edbda74 100644 --- a/libs/control.js +++ b/libs/control.js @@ -57,6 +57,7 @@ control.prototype.setRequestAnimationFrame = function () { core.animateFrame.globalTime = core.animateFrame.globalTime||timestamp; core.animateFrame.boxTime = core.animateFrame.boxTime||timestamp; + core.animateFrame.selectorTime = core.animateFrame.selectorTime||timestamp; core.animateFrame.animateTime = core.animateFrame.animateTime||timestamp; core.animateFrame.moveTime = core.animateFrame.moveTime||timestamp; core.animateFrame.lastLegTime = core.animateFrame.lastLegTime||timestamp; @@ -110,6 +111,19 @@ control.prototype.setRequestAnimationFrame = function () { core.animateFrame.boxTime = timestamp; } + // selectorTime + if (timestamp-core.animateFrame.selectorTime>20 && core.isset(core.dymCanvas.selector)) { + var opac = parseFloat(core.dymCanvas.selector.canvas.style.opacity); + if (core.getFlag("seleUp", true)) + opac += 0.02; + else + opac -= 0.02; + if (opac > 0.9 || opac < 0.6) + core.setFlag("seleUp", !core.getFlag("seleUp", true)) + core.setOpacity("selector", opac); + core.animateFrame.selectorTime = timestamp; + } + // Animate if (timestamp-core.animateFrame.animateTime>50 && core.isset(core.status.animateObjs) && core.status.animateObjs.length>0) { core.clearMap('animate'); @@ -3356,5 +3370,12 @@ control.prototype.domRenderer = function(){ core.canvas[cn].canvas.style.height = core.bigmap.height*32*core.domStyle.scale + "px"; }); } - + // 动态canvas + for (var i = 0; i < core.dymCanvas._list.length; i++) { + var spirit = core.dymCanvas._list[i]; + core.dymCanvas[spirit.id].canvas.style.width = core.dymCanvas[spirit.id].canvas.width * core.domStyle.scale + "px"; + core.dymCanvas[spirit.id].canvas.style.height = core.dymCanvas[spirit.id].canvas.height * core.domStyle.scale + "px"; + core.dymCanvas[spirit.id].canvas.style.left = spirit.style.left * core.domStyle.scale + "px"; + core.dymCanvas[spirit.id].canvas.style.top = spirit.style.top * core.domStyle.scale + "px" + } } \ No newline at end of file diff --git a/libs/core.js b/libs/core.js index 901b664c..3c332ee8 100644 --- a/libs/core.js +++ b/libs/core.js @@ -188,6 +188,9 @@ function core() { 'animateObjs': [], }; this.status = {}; + this.dymCanvas = { + "_list": [] + }; } /////////// 系统事件相关 /////////// @@ -688,6 +691,31 @@ core.prototype.setFillStyle = function (map, style) { core.ui.setFillStyle(map, style); } +////// canvas创建 ////// +core.prototype.createCanvas = function (name, x, y, width, height, z) { + core.ui.createCanvas(name, x, y, width, height, z); +} + +////// canvas查找 ////// +core.prototype.findCanvas = function (name) { + return core.ui.findCanvas(name); +} + +////// canvas重定位 ////// +core.prototype.relocateCanvas = function (name, x, y) { + core.ui.relocateCanvas(name, x, y); +} + +////// canvas重置 ////// +core.prototype.resizeCanvas = function (name, width, height) { + core.ui.resizeCanvas(name, width, height); +} + +////// canvas删除 ////// +core.prototype.deleteCanvas = function (name) { + core.ui.deleteCanvas(name); +} + core.prototype.drawBlock = function (block, animate, dx, dy) { core.maps.drawBlock(block, animate, dx, dy); } @@ -1092,6 +1120,11 @@ core.prototype.closePanel = function () { core.ui.closePanel(); } +////// 一般清除事件 ////// +core.prototype.clearLastEvent = function () { + core.ui.clearLastEvent(); +} + ////// 更改播放状态 ////// core.prototype.triggerReplay = function () { core.control.triggerReplay(); diff --git a/libs/events.js b/libs/events.js index e8166ec8..0548fe7c 100644 --- a/libs/events.js +++ b/libs/events.js @@ -363,8 +363,7 @@ events.prototype.doAction = function() { clearInterval(core.status.event.interval); core.status.event.interval = null; - core.clearMap('ui'); - core.setAlpha('ui', 1.0); + core.clearLastEvent(); // 事件处理完毕 if (core.status.event.data.list.length==0) { @@ -720,29 +719,50 @@ events.prototype.doAction = function() { this.doAction(); break; case "showImage": // 显示图片 - if (!core.isset(data.loc)) data.loc=[]; - core.events.showImage(data.name, data.loc[0], data.loc[1]); - this.doAction(); - break; - case "animateImage": // 淡入淡出图片 - if (core.status.replay.replaying) { // 正在播放录像 + if (!core.isset(data.loc)) data.loc=[0, 0]; + if (core.status.replay.replaying) { + data.time = 0; + } + var image = core.material.images.images[data.image]; + if (data.async || data.time == 0) { + core.events.showImage(data.code, image, data.loc[0], data.loc[1], data.dw, data.dh, data.opacity, data.time); this.doAction(); } else { - if (core.isset(data.loc) && core.isset(core.material.images.images[data.name]) && (data.action=="show" || data.action=="hide")) { - if (data.async) { - core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, data.keep); - this.doAction(); - } - else { - core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, data.keep, function() { - core.events.doAction(); - }); - } - } - else { - this.doAction(); - } + core.events.showImage(data.code, image, data.loc[0], data.loc[1], data.dw, data.dh, data.opacity, data.time, function () { + core.events.doAction(); + }); + } + break; + case "showTextImage": // 显示图片化文本 + if (!core.isset(data.loc)) data.loc=[0, 0]; + if (core.status.replay.replaying) { + data.time = 0; + } + var content = core.replaceText(data.text); + var image = core.events.textImage(content); + if (data.async || data.time == 0) { + core.events.showImage(data.code, image, data.loc[0], data.loc[1], 100, 100, data.opacity, data.time); + this.doAction(); + } + else { + core.events.showImage(data.code, image, data.loc[0], data.loc[1], 100, 100, data.opacity, data.time, function() { + core.events.doAction(); + }); + } + break; + case "hideImage": // 隐藏图片 + if (core.status.replay.replaying) { + data.time = 0; + } + if (data.async || data.time == 0) { + core.events.hideImage(data.code, data.time); + this.doAction(); + } + else { + core.events.hideImage(data.code, data.time, function () { + core.events.doAction(); + }); } break; case "showGif": // 显示动图 @@ -761,24 +781,19 @@ events.prototype.doAction = function() { } this.doAction(); break; - case "moveImage": // 图片移动 + case "animateImage": // 图片移动 if (core.status.replay.replaying) { // 正在播放录像 this.doAction(); } else { - if (core.isset(data.from) && core.isset(data.to) && core.isset(core.material.images.images[data.name])) { - if (data.async) { - core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, data.keep); - this.doAction(); - } - else { - core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, data.keep, function() { - core.events.doAction(); - }); - } + if (data.async) { + core.events.animateImage(data.code, data.to, data.opacity, data.time); + this.doAction(); } else { - this.doAction(); + core.events.animateImage(data.code, data.to, data.opacity, data.time, function() { + core.events.doAction(); + }); } } break; @@ -1545,91 +1560,146 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback }, 25); } -////// 绘制图片 ////// -events.prototype.showImage = function (name, x, y) { - if (core.isset(name) && core.isset(x) && core.isset(y) && core.isset(core.material.images.images[name])) { - core.canvas.image.drawImage(core.material.images.images[name], x, y); +////// 显示图片 ////// +events.prototype.showImage = function (code, image, x, y, dw, dh, opacityVal, time, callback) { + dw /= 100, dh /= 100, opacityVal /= 100; + var zIndex = code + 100; + var name = "image"+ zIndex; + if (core.findCanvas(name) != -1) { + core.relocateCanvas(name, x, y); + core.resizeCanvas(name, image.width * dw, image.height * dh); + core.dymCanvas[name].style.zIndex = zIndex; + } + else + core.createCanvas(name, x, y, image.width * dw, image.height * dh, zIndex); + core.dymCanvas[name].drawImage(image, 0, 0, image.width * dw, image.height * dh); + if (time == 0) + core.setOpacity(name, opacityVal); + else { + clearInterval(core.interval.tipAnimate); + var opac = 0; + core.setOpacity(name, 0); + var animate = setInterval(function () { + opac += opacityVal/20; + core.setOpacity(name, opac); + if (opac >= opacityVal) { + delete core.animateFrame.asyncId[animate]; + clearInterval(animate); + core.setOpacity(name, opacityVal); + if (core.isset(callback)) callback(); + } + }, time/20); + + core.animateFrame.asyncId[animate] = true; } - else core.clearMap('image'); } -////// 图片淡入/淡出 ////// -events.prototype.animateImage = function (type, image, loc, time, keep, callback) { - time = time||0; - if ((type!='show' && type!='hide') || time<=0) { - if (core.isset(callback)) callback(); +////// 隐藏图片 ////// +events.prototype.hideImage = function (code, time, callback) { + var name = "image"+ (code+100); + if (!core.isset(core.dymCanvas[name])) { + console.log(code+"号图片不存在") return; } + if (time == 0) + core.deleteCanvas(name); + else { + clearInterval(core.interval.tipAnimate); + var opacityVal = parseFloat(core.dymCanvas[name].canvas.style.opacity); + var opac = opacityVal; + var animate = setInterval(function () { + opac -= opacityVal/20; + core.setOpacity(name, opac); + if (opac < 0) { + delete core.animateFrame.asyncId[animate]; + clearInterval(animate); + core.deleteCanvas(name); + if (core.isset(callback)) callback(); + } + }, time/20); - clearInterval(core.interval.tipAnimate); - - var alpha = 0; - if (type == 'hide') alpha = 1; - - var x = core.calValue(loc[0]), y = core.calValue(loc[1]); - - if (type == 'hide' && keep) { - core.clearMap('image', x, y, image.width, image.height); + core.animateFrame.asyncId[animate] = true; } - core.setAlpha('data', alpha); - core.canvas.data.drawImage(image, x, y); - core.setAlpha('data', 1); +} - // core.status.replay.animate=true; - var animate = setInterval(function () { - if (type=='show') alpha += 0.1; - else alpha -= 0.1; - core.clearMap('data', x, y, image.width, image.height); - if (alpha >=1 || alpha<=0) { - delete core.animateFrame.asyncId[animate]; - clearInterval(animate); - if (type == 'show' && keep) - core.canvas.image.drawImage(image, x, y); - core.setAlpha('data', 1); - if (core.isset(callback)) callback(); - } - else { - core.setAlpha('data', alpha); - core.canvas.data.drawImage(image, x, y); - core.setAlpha('data', 1); - } - }, time / 10); +////// 文本图片化 ////// +events.prototype.textImage = function (content) { + content = content || ""; - core.animateFrame.asyncId[animate] = true; + // 获得颜色的盒子等信息 + var textAttribute = core.status.textAttribute || core.initStatus.textAttribute; + var textfont = textAttribute.textfont || 16; + var offset = textAttribute.offset || 15; + var textColor = core.arrayToRGBA(textAttribute.text); + + var font = textfont+"px "+core.status.globalAttribute.font; + if (textAttribute.bold) font = "bold "+font; + var contents = core.splitLines('ui', content), lines = contents.length; + + // 计算总高度，按1.2倍行距计算 + var width = 416, height = textfont * 1.4 * lines; + var tempCanvas = core.bigmap.tempCanvas; + tempCanvas.canvas.width = width; + tempCanvas.canvas.height = height; + tempCanvas.clearRect(0, 0, width, height); + tempCanvas.font = font; + tempCanvas.fillStyle = textColor; + + // 全部绘制 + var currH = textfont; + for (var i = 0; i < lines; ++i) { + var text = contents[i]; + tempCanvas.fillText(text, offset, currH); + currH += 1.4 * textfont; + } + + return tempCanvas.canvas; } ////// 移动图片 ////// -events.prototype.moveImage = function (image, from, to, time, keep, callback) { +events.prototype.animateImage = function (code, to, opacityVal, time, callback) { time = time || 1000; clearInterval(core.interval.tipAnimate); - core.setAlpha('data', 1); - - var width = image.width, height = image.height; // core.status.replay.animate=true; - var fromX = core.calValue(from[0]), fromY = core.calValue(from[1]), - toX = core.calValue(to[0]), toY = core.calValue(to[1]); + var name = "image"+ (code+100), index = core.findCanvas(name); + if (index == -1) { + console.log(code+"号图片不存在") + return; + } + var fromX = core.dymCanvas._list[index].style.left, + fromY = core.dymCanvas._list[index].style.top, + preX = fromX, preY = fromY; + if (core.isset(to)) + var toX = core.calValue(to[0]), toY = core.calValue(to[1]); + else + var toX = fromX, toY = fromY; - if (keep) core.clearMap('image', fromX, fromY, width, height); - - var step = 0, preX = fromX, preY = fromY; + var step = 0; var per_time = 10, steps = parseInt(time / per_time); - var drawImage = function () { + var preOpac = parseFloat(core.dymCanvas[name].canvas.style.opacity), opacStep; + if (core.isset(opacityVal)) { + opacityVal /= 100; + opacStep = (opacityVal - preOpac) / steps; + } + else + opacStep = 0; + + var moveStep = function () { + preOpac += opacStep; + core.setOpacity(name, preOpac); preX = parseInt(fromX + (toX-fromX)*step/steps); preY = parseInt(fromY + (toY-fromY)*step/steps); - core.canvas.data.drawImage(image, preX, preY); + core.relocateCanvas(name, preX, preY); } - - drawImage(); var animate = setInterval(function () { - core.clearMap('data', preX, preY, width, height); step++; - if (step <= steps) - drawImage(); - else { + moveStep(); + if (step > steps) { + if (core.isset(opacityVal)) + core.setOpacity(name, opacityVal); delete core.animateFrame.asyncId[animate]; clearInterval(animate); - if (keep) core.canvas.image.drawImage(image, toX, toY); if (core.isset(callback)) callback(); } }, per_time); diff --git a/libs/maps.js b/libs/maps.js index 2c9c5f83..87977043 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -811,10 +811,10 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) { faceIds = block.event.faceIds||{}; } - var alpha = 1; - core.setAlpha('route', alpha); - core.canvas.route.drawImage(image, bx * 32, by * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height); - + var alpha = 1, name = 'move'+x+'_'+y; + core.createCanvas(name, block.x, block.y * 32 +32 - height, 32, height, 45); + core.dymCanvas[name].textAlign = 'left'; + core.dymCanvas[name].drawImage(image, bx * 32, by * height, 32, height, 0, 0, 32, height); // 要运行的轨迹：将steps展开 var moveSteps=[]; steps.forEach(function (e) { @@ -861,22 +861,23 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) { if (moveSteps.length==0) { if (keep) alpha=0; else alpha -= 0.06; - core.clearMap('route', nowX, nowY-height+32, 32, height); if (alpha<=0) { delete core.animateFrame.asyncId[animate]; clearInterval(animate); + core.deleteCanvas(name); // 不消失 if (keep) { core.setBlock(id, nowX/32, nowY/32); core.showBlock(nowX/32, nowY/32); } - core.setAlpha('route',1); + else { + if (block.event.cls == 'enemys' || block.event.cls == 'enemy48') + core.clearMap('damage', nowX, nowY, 32, 32); + } if (core.isset(callback)) callback(); } else { - core.setAlpha('route', alpha); - core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, nowX, nowY-height+32, 32, height); - core.setAlpha('route', 1); + core.dymCanvas[name].canvas.style.opacity = alpha; } } else { @@ -892,12 +893,49 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) { } } - core.clearMap('route', nowX, nowY-height+32, 32, height); step++; nowX+=scan[direction].x*2; nowY+=scan[direction].y*2; - // 绘制 - core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, nowX, nowY-height+32, 32, height); + // 移动 + core.relocateCanvas(name, nowX, nowY-height+32); + core.dymCanvas[name].drawImage(image, animateCurrent * 32, by * height, 32, height, 0, 0, 32, height); + // 显伤绘制 + if ((block.event.cls == 'enemys' || block.event.cls == 'enemy48') && core.hasItem('book')) { + // 鉴于移动过程中可能的主角状态改变，每次重新计算 + var damage = core.enemys.getDamage(block.event.id, x, y); + var color = '#000000'; + + if (damage == null) { + damage = "???"; + color = '#FF0000'; + } + else { + if (damage <= 0) color = '#00FF00'; + else if (damage < core.status.hero.hp / 3) color = '#FFFFFF'; + else if (damage < core.status.hero.hp * 2 / 3) color = '#FFFF00'; + else if (damage < core.status.hero.hp) color = '#FF7F00'; + else color = '#FF0000'; + + damage = core.formatBigNumber(damage); + if (core.enemys.hasSpecial(core.material.enemys[block.event.id], 19)) + damage += "+"; + if (core.enemys.hasSpecial(core.material.enemys[block.event.id], 21)) + damage += "-"; + if (core.enemys.hasSpecial(core.material.enemys[block.event.id], 11)) + damage += "^"; + } + // 清空上一次 + core.clearMap('damage', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32); + + core.setFillStyle('damage', '#000000'); + core.canvas.damage.fillText(damage, nowX + 5, nowY + 30); + core.canvas.damage.fillText(damage, nowX + 3, nowY + 30); + core.canvas.damage.fillText(damage, nowX + 5, nowY + 32); + core.canvas.damage.fillText(damage, nowX + 3, nowY + 32); + + core.setFillStyle('damage', color); + core.canvas.damage.fillText(damage, nowX + 4, nowY + 31); + } if (step==16) { // 该移动完毕，继续 step=0; diff --git a/libs/ui.js b/libs/ui.js index a620dfb6..3a08b4e7 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -151,7 +151,14 @@ ui.prototype.setOpacity = function (map, opacity) { core.canvas[m].canvas.style.opacity = opacity; } } - else core.canvas[map].canvas.style.opacity = opacity; + else if (core.isset(core.canvas[map])) { + core.canvas[map].canvas.style.opacity = opacity; + } + else if (core.isset(core.dymCanvas[map])) { + core.dymCanvas[map].canvas.style.opacity = opacity; + } + else + console.log("未找到"+map); } ////// 设置某个canvas的绘制属性（如颜色等） ////// @@ -161,9 +168,14 @@ ui.prototype.setFillStyle = function (map, style) { core.canvas[m].fillStyle = style; } } - else { + else if (core.isset(core.canvas[map])) { core.canvas[map].fillStyle = style; } + else if (core.isset(core.dymCanvas[map])) { + core.dymCanvas[map].fillStyle = style; +} + else + console.log("未找到"+map); } @@ -174,8 +186,7 @@ ui.prototype.setFillStyle = function (map, style) { ui.prototype.closePanel = function () { core.status.boxAnimateObjs = []; clearInterval(core.status.event.interval); - core.clearMap('ui'); - core.setAlpha('ui', 1.0); + core.clearLastEvent(); core.unLockControl(); core.status.event.data = null; core.status.event.id = null; @@ -184,6 +195,14 @@ ui.prototype.closePanel = function () { core.status.event.interval = null; } +////// 一般清除事件 ////// +ui.prototype.clearLastEvent = function () { + if (core.isset(core.dymCanvas.selector)) + core.deleteCanvas("selector"); + core.clearMap('ui'); + core.setAlpha('ui', 1); +} + ////// 左上角绘制一段提示 ////// ui.prototype.drawTip = function (text, itemIcon) { var textX, textY, width, height, hide = false, alpha = 0; @@ -351,21 +370,28 @@ ui.prototype.getTitleAndIcon = function (content) { } // 绘制选择光标 -ui.prototype.drawWindowSelector = function(background,canvas,x,y,w,h) { - var dstImage = core.canvas[canvas]; - +ui.prototype.drawWindowSelector = function(background,x,y,w,h) { + if (core.isset(core.dymCanvas.selector)) { + core.relocateCanvas("selector", x, y); + core.resizeCanvas("selector", w, h); + } + else { + core.ui.createCanvas("selector", x, y, w, h, 165); + } + core.setOpacity("selector", 0.8); + var dstImage = core.dymCanvas.selector; // back - dstImage.drawImage(background,130,66,28,28,x+2,y+2,w-4,h-4); + dstImage.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4); // corner - dstImage.drawImage(background,128,64,2,2,x,y,2,2); - dstImage.drawImage(background,158,64,2,2,x+w-2,y,2,2); - dstImage.drawImage(background,128,94,2,2,x,y+h-2,2,2); - dstImage.drawImage(background,158,94,2,2,x+w-2,y+h-2,2,2); + dstImage.drawImage(background, 128, 64, 2, 2, 0, 0, 2, 2); + dstImage.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2); + dstImage.drawImage(background, 128, 94, 2, 2, 0,h-2, 2, 2); + dstImage.drawImage(background, 158, 94, 2, 2,w-2,h-2, 2, 2); // border - dstImage.drawImage(background,130,64,28,2,x+2,y,w-4,2); - dstImage.drawImage(background,130,94,28,2,x+2,y+h-2,w-4,2); - dstImage.drawImage(background,128,66,2,28,x,y+2,2,h-4); - dstImage.drawImage(background,158,66,2,28,x+w-2,y+2,2,h-4); + dstImage.drawImage(background, 130, 64, 28, 2, 2, 0,w-4, 2); + dstImage.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2); + dstImage.drawImage(background, 128, 66, 2, 28, 0, 2, 2,h-4); + dstImage.drawImage(background, 158, 66, 2, 28,w-2, 2, 2,h-4); } // 绘制皮肤 @@ -502,7 +528,7 @@ ui.prototype.drawTextBox = function(content, showAll) { content = core.replaceText(content); core.status.boxAnimateObjs = []; - core.clearMap('ui'); + core.clearLastEvent(); // drawImage content = content.replace(/(\f|\\f)\[(.*?)]/g, function (text, sympol, str) { @@ -909,7 +935,7 @@ ui.prototype.drawChoices = function(content, choices) { while (core.status.event.selection>=choices.length) core.status.event.selection-=choices.length; var len = core.canvas.ui.measureText(core.replaceText(choices[core.status.event.selection].text || choices[core.status.event.selection])).width; if (isWindowSkin) - this.drawWindowSelector(background, 'ui' ,208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28); + this.drawWindowSelector(background, 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28); else core.strokeRect('ui', 208-len/2-5, choice_top + 32 * core.status.event.selection - 20, len+10, 28, "#FFD700", 2); } @@ -927,8 +953,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) { if (!core.isset(core.status.event.selection) || core.status.event.selection>1) core.status.event.selection=1; if (core.status.event.selection<0) core.status.event.selection=0; - core.clearMap('ui'); - core.setAlpha('ui', 1); + core.clearLastEvent(); core.setFillStyle('ui', core.material.groundPattern); var globalFont = core.status.globalAttribute.font; core.setFont('ui', "bold 19px "+globalFont); @@ -1322,8 +1347,7 @@ ui.prototype.drawWaiting = function(text) { core.lockControl(); core.status.event.id = 'waiting'; - core.clearMap('ui'); - core.setAlpha('ui', 1); + core.clearLastEvent(); core.setFillStyle('ui', core.material.groundPattern); var globalFont = core.status.globalAttribute.font; @@ -1444,8 +1468,7 @@ ui.prototype.drawBook = function (index) { clearInterval(core.interval.tipAnimate); core.clearMap('data'); - core.clearMap('ui'); - core.setAlpha('ui', 1); + core.clearLastEvent(); core.setFillStyle('ui', core.material.groundPattern); core.fillRect('ui', 0, 0, 416, 416); @@ -1759,8 +1782,7 @@ ui.prototype.drawMaps = function (index, x, y) { if (!core.isset(index)) { core.status.event.data = null; - core.clearMap('ui'); - core.setAlpha('ui', 1); + core.clearLastEvent(); core.clearMap('animate'); core.fillRect('animate', 0, 0, 416, 416, 'rgba(0,0,0,0.4)'); @@ -2414,7 +2436,7 @@ ui.prototype.drawKeyBoard = function () { core.lockControl(); core.status.event.id = 'keyBoard'; - core.clearMap('ui'); + core.clearLastEvent(); var left = 16, top = 48, right = 416 - 2 * left, bottom = 416 - 2 * top; core.fillRect('ui', left, top, right, bottom, core.material.groundPattern); @@ -2664,7 +2686,7 @@ ui.prototype.drawPaint = function () { core.status.event.id = 'paint'; core.status.event.data = {"x": null, "y": null, "erase": false}; - core.clearMap('ui'); + core.clearLastEvent(); core.clearMap('route'); core.setAlpha('route', 1); @@ -2718,3 +2740,75 @@ ui.prototype.drawHelp = function () { ]); } +////// 动态canvas ////// + +////// canvas创建 ////// +ui.prototype.createCanvas = function (name, x, y, width, height, z) { + var newCanvas = document.createElement("CANVAS"); + newCanvas.id = name; + newCanvas.style.display = 'block'; + newCanvas.width = width; + newCanvas.height = height; + newCanvas.style.width = width * core.domStyle.scale + 'px'; + newCanvas.style.height = height * core.domStyle.scale + 'px'; + newCanvas.style.left = x * core.domStyle.scale + 'px'; + newCanvas.style.top = y * core.domStyle.scale + 'px'; + newCanvas.style.zIndex = z; + newCanvas.style.position = 'absolute'; + core.dymCanvas[name] = newCanvas.getContext('2d'); + core.dom.dymCanvas.appendChild(newCanvas); + core.dymCanvas._list.push({ + "id": name, + "style": { + "left": x, + "top": y, + } + }); +} + +////// canvas查找 ////// +ui.prototype.findCanvas = function (name) { + var index = 0; + while (index < core.dymCanvas._list.length && core.dymCanvas._list[index].id != name) index++; + if (index == core.dymCanvas._list.length) { + return -1; + } + return index; +} + +////// canvas重定位 ////// +ui.prototype.relocateCanvas = function (name, x, y) { + var index = core.findCanvas(name); + if (core.isset(x)) { + core.dymCanvas[name].canvas.style.left = x * core.domStyle.scale + 'px'; + core.dymCanvas._list[index].style.left = x; + } + if (core.isset(y)) { + core.dymCanvas[name].canvas.style.top = y * core.domStyle.scale + 'px'; + core.dymCanvas._list[index].style.top = y; + } +} + +////// canvas重置 ////// +ui.prototype.resizeCanvas = function (name, width, height) { + var dstCanvas = core.dymCanvas[name].canvas; + if (core.isset(width)) { + dstCanvas.width = width; + dstCanvas.style.width = width * core.domStyle.scale + 'px'; + } + if (core.isset(height)) { + dstCanvas.height = height; + dstCanvas.style.height = height * core.domStyle.scale + 'px'; + } +} +////// canvas删除 ////// +ui.prototype.deleteCanvas = function (name) { + var index = core.findCanvas(name); + if (index == -1) { + console.error("未找到"+name); + } + var obj = core.dom.dymCanvas.removeChild(core.dom.dymCanvas.childNodes[index]); + obj = null; + core.dymCanvas[name] = null; + core.dymCanvas._list.splice(index,1); +} diff --git a/main.js b/main.js index 0ea10df4..80ea5f7d 100644 --- a/main.js +++ b/main.js @@ -68,7 +68,9 @@ function main() { 'debuffCol': document.getElementById('debuffCol'), 'skillCol': document.getElementById('skillCol'), 'hard': document.getElementById('hard'), - 'statusCanvas': document.getElementById('statusCanvas') + 'statusCanvas': document.getElementById('statusCanvas'), + 'dymCanvas': document.getElementById('dymCanvas'), + 'dym': document.getElementsByClassName('dym'), }; this.mode = 'play'; this.loadList = [ diff --git a/project/data.js b/project/data.js index 9498941c..e65bf7bd 100644 --- a/project/data.js +++ b/project/data.js @@ -110,11 +110,16 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = }, { "type": "showImage", - "name": "bg.jpg", + "code": 1, + "image": "bg.jpg", "loc": [ 0, 0 - ] + ], + "dw": 100, + "dh": 100, + "opacity": 100, + "time": 0 }, { "type": "comment", @@ -163,7 +168,9 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = ] }, { - "type": "showImage" + "type": "hideImage", + "code": 1, + "time": 0 }, { "type": "comment", @@ -179,7 +186,9 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "function": "function(){\ncore.control.checkBgm()\n}" }, { - "type": "showImage" + "type": "hideImage", + "code": 1, + "time": 0 }, { "type": "comment", @@ -202,6 +211,11 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "type": "function", "function": "function(){\ncore.control.checkBgm()\n}" }, + { + "type": "hideImage", + "code": 1, + "time": 0 + }, { "type": "comment", "text": "这段代码会结束事件，选择录像文件，播放录像或重新开始" @@ -339,7 +353,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "hatred": 2, "moveSpeed": 100, "animateSpeed": 300, - "floorChangeTime": 800, + "floorChangeTime": 800 }, "flags": { "enableFloor": true, diff --git a/styles.css b/styles.css index 4e3d174b..6a967fd3 100644 --- a/styles.css +++ b/styles.css @@ -21,7 +21,7 @@ position: fixed; top: 10px; left: 10px; - z-index: 320; + z-index: 370; } #startPanel { @@ -32,7 +32,7 @@ left: 0; background-color: #fff; overflow: hidden; - z-index: 250; + z-index: 300; } #startTop { @@ -42,7 +42,7 @@ top: 0; left: 0; background-color: #000; - z-index: 300; + z-index: 350; } #startTopProgressBar { @@ -77,12 +77,12 @@ height: 100%; width: auto; transform:translate(-50%,-50%); - z-index: 210; + z-index: 260; } #startLogo { position: absolute; - z-index: 240; + z-index: 290; left: 0; right: 0; margin-left: auto; @@ -95,7 +95,7 @@ #startTitle { position: absolute; - z-index: 230; + z-index: 280; } #startButtonGroup { @@ -106,7 +106,7 @@ background-color: #000; opacity: 0.85; display: none; - z-index: 260; + z-index: 310; bottom: 0; margin-bottom: 7%; } @@ -142,7 +142,7 @@ display: none; color: #fff; background-color: #000; - z-index: 180; + z-index: 230; } #logoLabel { @@ -170,7 +170,7 @@ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background: url(project/images/ground.png) repeat; - z-index: 135; + z-index: 185; display: none; } #statusBar .status{ @@ -200,7 +200,7 @@ #toolBar { position: absolute; background: url(project/images/ground.png) repeat; - z-index: 160; + z-index: 210; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -255,7 +255,7 @@ p#name { position: absolute; background: #000000; overflow: hidden; - z-index: 135; + z-index: 185; } #bg { @@ -298,16 +298,16 @@ p#name { z-index: 100; } -#image { - z-index: 105; -} - #ui { - z-index: 110; + z-index: 160; } #data { - z-index: 120; + z-index: 170; +} + +#dymCanvas { + position: absolute; } .clearfix:before,