jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

canvas:image

Browse Source
This commit is contained in:
oc 2018-10-16 23:41:26 +08:00
parent fbc7214811
commit 8ad043ad6c
6 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/personalization.md
View File

@ -17,6 +17,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
- fg：前景层；绘制前景图层素材fgmap，和前景贴图
- damage：显伤层；主要用来绘制怪物显伤和领域显伤
- animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。
- image：图片层；主要用来绘制显示图片
- weather：天气层；主要用来绘制天气（雨/雪）
- route：路线层；主要用来绘制勇士的行走路线图，也用来绘制图块的淡入/淡出效果，图块的移动等。
- curtain：色调层；用来控制当前楼层的画面色调

1
editor-mobile.html
View File

@ -409,6 +409,7 @@
<!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>

1
editor.html
View File

@ -395,6 +395,7 @@
<!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>

1
index.html
View File

@ -122,6 +122,7 @@
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='image' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>

13
libs/events.js
View File

@ -132,8 +132,9 @@ events.prototype.gameOver = function (ending, fromReplay, norank) {
// 清空图片和天气
core.clearMap('animate');
core.dom.gif2.innerHTML = "";
core.clearMap('image');
core.clearMap('weather')
core.dom.gif2.innerHTML = "";
core.animateFrame.weather.type = null;
core.animateFrame.weather.level = 0;
core.animateFrame.weather.nodes = [];
@ -587,10 +588,10 @@ events.prototype.doAction = function() {
break;
case "showImage": // 显示图片
if (core.isset(data.loc) && core.isset(core.material.images.images[data.name])) {
core.canvas.animate.drawImage(core.material.images.images[data.name],
core.canvas.image.drawImage(core.material.images.images[data.name],
core.calValue(data.loc[0]), core.calValue(data.loc[1]));
}
else core.clearMap('animate');
else core.clearMap('image');
this.doAction();
break;
case "animateImage": // 淡入淡出图片
@ -1369,7 +1370,7 @@ events.prototype.animateImage = function (type, image, loc, time, keep, callback
if (type == 'hide') opacityVal = 1;
if (type == 'hide' && keep) {
core.clearMap('animate');
core.clearMap('image');
}
core.setOpacity('data', opacityVal);
@ -1383,7 +1384,7 @@ events.prototype.animateImage = function (type, image, loc, time, keep, callback
if (opacityVal >=1 || opacityVal<=0) {
clearInterval(animate);
if (type == 'show' && keep)
core.canvas.animate.drawImage(image, x, y);
core.canvas.image.drawImage(image, x, y);
core.clearMap('data');
core.setOpacity('data', 1);
core.status.replay.animate=false;
@ -1399,7 +1400,7 @@ events.prototype.moveImage = function (image, from, to, time, keep, callback) {
core.setAlpha('data', 1);
core.setOpacity('data', 1);
if (keep) core.clearMap('animate');
if (keep) core.clearMap('image');
core.status.replay.animate=true;
var fromX = core.calValue(from[0]), fromY = core.calValue(from[1]),

4
styles.css
View File

@ -285,6 +285,10 @@ p#name {
z-index: 70;
}
#image {
z-index: 75;
}
#weather {
z-index: 80;
}