Terrain performance

gfx.js

@@ -106,7 +106,7 @@ export function drawParagraph(ctx, text, x, y, w, h, color) {
 
 export function loop(fn) {
   (function looped() {
-    requestAnimationFrame(looped);
     fn();
+    requestAnimationFrame(looped);
   })();
 }

main.js

@@ -4,8 +4,8 @@ import {key} from './input.js';
 import {clamp, deg2rad, parable, randomInt, vec, wrap} from './math.js';
 import {createSky} from './sky.js';
 import {audio, createOsc} from './sound.js';
-import {clipTerrain, collapseTerrain, createTerrain, isTerrain, landHeight, closestLand} from './terrain.js';
-import {drawExplosion, WEAPON_TYPES, EXPLOSION_TYPES} from './weapons.js';
+import {collapseTerrain, createTerrain, isTerrain, landHeight, closestLand} from './terrain.js';
+import {WEAPON_TYPES, EXPLOSION_TYPES} from './weapons.js';
 
 
 let state = 'start-turn';
@@ -14,13 +14,13 @@ let currentPlayer = 0;
 let projectile = null;
 let prevProjectile = null;
 let explosion = null;
-let fadeCount = 0;
 let wind = 0;
 
 // Init layers
 const sky = createSky(W, H);
 const terrain = createTerrain(W, H);
 const projectiles = createCanvas(W, H);
+const prevProjectiles = createCanvas(W, H);
 const foreground = createCanvas(W, H);
 
 for (let c of [sky, terrain, projectiles, foreground]) {
@@ -77,11 +77,7 @@ function update() {
 
   else if (state === 'fire') {
     prevProjectile = {...projectile};
-
-    if (fadeCount++ === 1) {
-      fadeProjectiles(1);
-      fadeCount = 0;
-    }
+    fadeProjectiles(5);
 
     for (let i=0; i<PROJECTILE_ITERATIONS_PER_FRAME; i++) {
       const {weapon, ox, oy, a, p, t} = projectile;
@@ -92,7 +88,7 @@ function update() {
       projectile.y = Math.floor(y);
       projectile.osc.frequency.setValueAtTime(f, audio.currentTime);
 
-      if (y > H || isTerrain(terrain, x, y)) {
+      if (y > H || isTerrain(terrain, projectile.x, projectile.y)) {
         projectile.osc.stop();
         const explosionSpec = weapon.explosion;
         const explosionType = EXPLOSION_TYPES[explosionSpec.type];
@@ -108,6 +104,7 @@ function update() {
     const explosionType = EXPLOSION_TYPES[weapon.explosion.type];
 
     if (!explosionType.update(explosion)) {
+      explosionType.clip(explosion, terrain);
       for (let player of players) {
         if (player.energy > 0) {
           player.energy -= explosionType.damage(explosion, player) || 0;
@@ -180,16 +177,18 @@ function drawProjectile() {
 }
 
 function fadeProjectiles(amount) {
-  const imageData = projectiles.getImageData(0, 0, W, H);
-  for (let i=0; i<imageData.data.length; i+=4) imageData.data[i+3] -= amount;
+  // This leaves traces during rendering. Zeno's paradox :(
+  prevProjectiles.globalAlpha = 1 - (amount / 255);
+  prevProjectiles.clearRect(0, 0, W, H);
+  prevProjectiles.drawImage(projectiles.canvas, 0, 0, W, H);
   projectiles.clearRect(0, 0, W, H);
-  projectiles.putImageData(imageData, 0, 0);
+  projectiles.drawImage(prevProjectiles.canvas, 0, 0, W, H);
 }
 
 function drawExplosions() {
   const {weapon} = projectile;
   const explosionType = EXPLOSION_TYPES[weapon.explosion.type];
-  explosionType.draw(explosion, foreground, terrain);
+  explosionType.draw(explosion, foreground);
 }
 
 function drawStatus() {

math.js

@@ -1,9 +1,9 @@
 
-export function coords(width, i) {
-  return [i%width, Math.floor(i/width)];
+export function index2coords(width, i) {
+  return [i % width, Math.floor(i/width)];
 }
 
-export function index(width, x, y) {
+export function coords2index(width, x, y) {
   return y * width + x;
 }
 

terrain.js

@@ -1,4 +1,12 @@
 import {createCanvas, drawRect, clipCanvas, plot} from './gfx.js';
+import {coords2index} from './math.js';
+
+let cachedImageData;
+
+function cacheImageData(ctx) {
+  const {width, height} = ctx.canvas;
+  cachedImageData = ctx.getImageData(0, 0, width, height);
+}
 
 export function createTerrain(width, height) {
   const terrain = createCanvas(width, height);
@@ -12,6 +20,7 @@ export function generateTerrain(ctx) {
     const h = Math.round(120 + 30 * Math.sin(x/25));
     drawRect(ctx, x, height-h, 1, h, 'burlywood');
   }
+  cacheImageData(ctx);
 }
 
 export function collapseTerrain(ctx, ox, r) {
@@ -30,30 +39,33 @@ export function collapseTerrain(ctx, ox, r) {
     ctx.clearRect(left+x, 0, 1, height);
     drawRect(ctx, left+x, height-land, 1, land, 'burlywood');
   }
+
+  cacheImageData(ctx);
 }
 
 export function isTerrain(ctx, x, y) {
-  const imageData = ctx.getImageData(x, y, 1, 1);
-  return imageData.data[3] > 0;
+  const index = coords2index(ctx.canvas.width, x, y) * 4;
+  return cachedImageData.data[index+3] > 0;
 }
 
 export function closestLand(ctx, x, y) {
-  const {height} = ctx.canvas;
-  const imageData = ctx.getImageData(x, 0, 1, height);
+  const {width, height} = ctx.canvas;
   for (let i=y; i<height; i++) {
-    if (imageData.data[i*4+3] !== 0) return i;
+    const index = coords2index(width, x, i) * 4;
+    if (cachedImageData.data[index+3] !== 0) return i;
   }
   return height-1;
 }
 
 export function landHeight(ctx, x) {
-  const {height} = ctx.canvas;
-  const imageData = ctx.getImageData(x, 0, 1, height);
-  for (let y=height-1; y>=0; y--) {
-    if (imageData.data[y*4+3] === 0) return y;
+  const {width, height} = ctx.canvas;
+  for (let i=height-1; i>=0; i--) {
+    const index = coords2index(width, x, i) * 4;
+    if (cachedImageData.data[index+3] === 0) return i;
   }
 }
 
 export function clipTerrain(ctx, fn) {
-  return clipCanvas(ctx, fn);
+  clipCanvas(ctx, fn);
+  cacheImageData(ctx);
 }

weapons.js

@@ -25,9 +25,12 @@ export const EXPLOSION_TYPES = {
     update(explosion) {
       return ++explosion.cr < explosion.r;
     },
-    draw(explosion, foreground, terrain) {
+    draw(explosion, foreground) {
       const {x, y, cr} = explosion;
       drawExplosion(foreground, x, y, cr);
+    },
+    clip(explosion, terrain) {
+      const {x, y, cr} = explosion;
       clipTerrain(terrain, (ctx) => drawExplosion(ctx, x, y, cr));
     },
     damage(explosion, player) {
@@ -44,9 +47,12 @@ export const EXPLOSION_TYPES = {
     update(explosion) {
       return ++explosion.cr < explosion.r;
     },
-    draw(explosion, foreground, terrain) {
+    draw(explosion, foreground) {
       const {x, y, cr} = explosion;
       drawExplosion(foreground, x, y, cr);
+    },
+    clip(explosion, terrain) {
+      const {x, y, cr} = explosion;
       drawExplosion(terrain, x, y, cr);
     },
     damage(explosion, player) {}