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

Weather dynamic canvas

Browse Source
This commit is contained in:
ckcz123 2018-12-18 14:57:48 +08:00
parent 399b86fcb3
commit 3063393a92
4 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
editor-mobile.html
View File

@ -440,7 +440,6 @@
<!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> --> <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='damage' 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='animate' 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='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas> <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas> <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>

1
editor.html
View File

@ -425,7 +425,6 @@
<!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> --> <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='damage' 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='animate' 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='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas> <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas> <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>

1
index.html
View File

@ -140,7 +140,6 @@
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='damage' 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='animate' 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='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas> <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas> <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>

38
libs/control.js
View File

@ -166,21 +166,22 @@ control.prototype.setRequestAnimationFrame = function () {
} }
// weather // weather
if (core.isPlaying() && timestamp-core.animateFrame.weather.time>30) { if (core.isPlaying() && timestamp-core.animateFrame.weather.time>30 && core.isset(core.dymCanvas.weather)) {
var ctx = core.dymCanvas.weather;
var ox = core.bigmap.offsetX, oy = core.bigmap.offsetY; var ox = core.bigmap.offsetX, oy = core.bigmap.offsetY;
if (core.animateFrame.weather.type == 'rain' && core.animateFrame.weather.level > 0) { if (core.animateFrame.weather.type == 'rain' && core.animateFrame.weather.level > 0) {
core.clearMap('weather'); core.clearMap('weather');
core.canvas.weather.strokeStyle = 'rgba(174,194,224,0.8)'; ctx.strokeStyle = 'rgba(174,194,224,0.8)';
core.canvas.weather.lineWidth = 1; ctx.lineWidth = 1;
core.canvas.weather.lineCap = 'round'; ctx.lineCap = 'round';
core.animateFrame.weather.nodes.forEach(function (p) { core.animateFrame.weather.nodes.forEach(function (p) {
core.canvas.weather.beginPath(); ctx.beginPath();
core.canvas.weather.moveTo(p.x-ox, p.y-oy); ctx.moveTo(p.x-ox, p.y-oy);
core.canvas.weather.lineTo(p.x + p.l * p.xs - ox, p.y + p.l * p.ys - oy); ctx.lineTo(p.x + p.l * p.xs - ox, p.y + p.l * p.ys - oy);
core.canvas.weather.stroke(); ctx.stroke();
p.x += p.xs; p.x += p.xs;
p.y += p.ys; p.y += p.ys;
@ -191,15 +192,14 @@ control.prototype.setRequestAnimationFrame = function () {
}) })
core.canvas.weather.fill(); ctx.fill();
} }
else if (core.animateFrame.weather.type == 'snow' && core.animateFrame.weather.level > 0) { else if (core.animateFrame.weather.type == 'snow' && core.animateFrame.weather.level > 0) {
core.clearMap('weather'); core.clearMap('weather');
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
core.canvas.weather.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.beginPath();
core.canvas.weather.beginPath();
if (!core.isset(core.animateFrame.weather.data)) if (!core.isset(core.animateFrame.weather.data))
core.animateFrame.weather.data = 0; core.animateFrame.weather.data = 0;
@ -207,8 +207,8 @@ control.prototype.setRequestAnimationFrame = function () {
var angle = core.animateFrame.weather.data; var angle = core.animateFrame.weather.data;
core.animateFrame.weather.nodes.forEach(function (p) { core.animateFrame.weather.nodes.forEach(function (p) {
core.canvas.weather.moveTo(p.x - ox, p.y - oy); ctx.moveTo(p.x - ox, p.y - oy);
core.canvas.weather.arc(p.x - ox, p.y - oy, p.r, 0, Math.PI * 2, true); ctx.arc(p.x - ox, p.y - oy, p.r, 0, Math.PI * 2, true);
// update // update
p.x += Math.sin(angle) * 2; p.x += Math.sin(angle) * 2;
@ -233,7 +233,7 @@ control.prototype.setRequestAnimationFrame = function () {
}) })
core.canvas.weather.fill(); ctx.fill();
} }
else if (core.animateFrame.weather.type == 'fog' && core.animateFrame.weather.level > 0) { else if (core.animateFrame.weather.type == 'fog' && core.animateFrame.weather.level > 0) {
@ -242,7 +242,7 @@ control.prototype.setRequestAnimationFrame = function () {
var w = 416, h = 416; var w = 416, h = 416;
core.setAlpha('weather', 0.5); core.setAlpha('weather', 0.5);
core.animateFrame.weather.nodes.forEach(function (p) { core.animateFrame.weather.nodes.forEach(function (p) {
core.canvas.weather.drawImage(core.animateFrame.weather.fog, p.x - ox, p.y - oy, w, h); ctx.drawImage(core.animateFrame.weather.fog, p.x - ox, p.y - oy, w, h);
p.x += p.xs; p.x += p.xs;
p.y += p.ys; p.y += p.ys;
@ -1364,7 +1364,8 @@ control.prototype.setWeather = function (type, level) {
// 非雨雪 // 非雨雪
if (type!='rain' && type!='snow' && type!='fog') { if (type!='rain' && type!='snow' && type!='fog') {
core.clearMap('weather') // core.clearMap('weather');
core.deleteCanvas('weather')
core.animateFrame.weather.type = null; core.animateFrame.weather.type = null;
core.animateFrame.weather.level = 0; core.animateFrame.weather.level = 0;
core.animateFrame.weather.nodes = []; core.animateFrame.weather.nodes = [];
@ -1383,10 +1384,9 @@ control.prototype.setWeather = function (type, level) {
level *= parseInt(20*core.bigmap.width*core.bigmap.height/169); level *= parseInt(20*core.bigmap.width*core.bigmap.height/169);
// 计算当前的宽高 // 计算当前的宽高
core.clearMap('weather') core.createCanvas('weather', 0, 0, 416, 416, 80);
core.animateFrame.weather.type = type; core.animateFrame.weather.type = type;
core.animateFrame.weather.level = level; core.animateFrame.weather.level = level;
core.animateFrame.weather.nodes = []; core.animateFrame.weather.nodes = [];
if (type == 'rain') { if (type == 'rain') {