Big changes for sprites. We generate a cache of textures for each emo…

…ji/image when creating the canvas. Trying to process the same pixels/vertices in a single frame render doesn't work, so we need to have the main `draw` function skip rendering squares with sprites, which need their own pass with the custom texture. We render each item type/texture in a separate pass from the main draw. Emojis are rendered in an HTML5 2D canvas, so the emoji image map is no longer needed, and they can no longer be referenced by name.

dlgr/griduniverse/game_config.yml

@@ -72,7 +72,7 @@ items:
     calories: 3
     crossable: true
     interactive: false
-    item_count: 4
+    item_count: 50
     maturation_speed: 0.2
     maturation_threshold: 0.5
     n_uses: 1
@@ -82,7 +82,7 @@ items:
     portable: true
     respawn: true
     limit_quantity: true
-    sprite: "image:/static/images/food.png"
+    sprite: "image:sprites/food.png"
 
   # One Hour, One Life items
   - crossable: true
@@ -92,7 +92,7 @@ items:
     portable: true
     spawn_rate: 0.15
     item_count: 100
-    sprite: "emoji:carrot"
+    sprite: "emoji:🥕"
 
   - crossable: true
     interactive: true
@@ -101,7 +101,7 @@ items:
     portable: true
     spawn_rate: 0.05
     item_count: 50
-    sprite: "emoji:◽"
+    sprite: "image:https://github.githubassets.com/images/icons/emoji/unicode/1faa8.png?v8"
 
   - crossable: true
     interactive: true
@@ -110,7 +110,7 @@ items:
     portable: false
     spawn_rate: 0
     item_count: 20
-    sprite: "emoji:⚪"
+    sprite: "emoji:🗿"
 
   - crossable: true
     interactive: true
@@ -120,7 +120,7 @@ items:
     portable: false
     spawn_rate: 0.1
     item_count: 50
-    sprite: "emoji:deciduous_tree"
+    sprite: "emoji:🌳"
 
   - crossable: true
     interactive: true
@@ -129,7 +129,7 @@ items:
     portable: true
     spawn_rate: 0.05
     item_count: 20
-    sprite: "emoji:rock"
+    sprite: "emoji:💎"
 
   - calories: 5
     crossable: true
@@ -140,7 +140,7 @@ items:
     portable: true
     spawn_rate: 0
     item_count: 0
-    sprite: "emoji:carrot"
+    sprite: "emoji:🥕"
 
   - calories: 3
     crossable: true
@@ -151,7 +151,7 @@ items:
     portable: true
     spawn_rate: 0
     item_count: 0
-    sprite: "color:#8E44AD"
+    sprite: "emoji:🫐"
 
   - crossable: false
     interactive: true
@@ -161,7 +161,7 @@ items:
     portable: false
     spawn_rate: 0
     item_count: 0
-    sprite: "color:#9B59B6"
+    sprite: "emoji:🌴"
 
 transitions:
   - actor_start: stone

dlgr/griduniverse/static/scripts/demo.js

@@ -14,7 +14,6 @@ var Identicon = require('./util/identicon');
 var _ = require('lodash');
 var md5 = require('./util/md5');
 var itemlib = require ("./items");
-var isnumber = require("is-number");
 
 function coordsToIdx(x, y, columns) {
   return y * columns + x;
@@ -75,7 +74,7 @@ class Section {
     if (x >= this.left && x < this.left + this.columns) {
       if (y >= this.top && y < this.top + this.rows) {
         this.data[this.gridCoordsToSectionIdx(x, y)] = color;
-        if (! _.isUndefined(texture)){
+        if (! _.isNil(texture)) {
           this.textures[this.gridCoordsToSectionIdx(x, y)] = texture;
         }
         background[coordsToIdx(x, y, settings.columns)] = color;
@@ -119,6 +118,7 @@ var pixels = grid(initialSection.data, initialSection.textures, {
   padding: settings.padding,
   background: [0.1, 0.1, 0.1],
   item_config: settings.item_config,
+  sprites_url: settings.sprites_url,
   formatted: true
 });
 
@@ -588,30 +588,6 @@ document.body.style.background = "#ffffff";
 
 var startTime = performance.now();
 
-const getItemCoords = function(x, y) {
-  grid = []
-  var size = isnumber(settings.block_size) ? settings.block_size : 10;
-  var padding = isnumber(settings.padding) ? settings.padding : 2;
-  var rows = settings.window_rows;
-  var columns = settings.window_columns;
-  var width = columns * size + (columns + 1) * padding;
-  var height = rows * size + (rows + 1) * padding;
-  var aspect = width / height;
-  size = 2 * size / width;
-  padding = 2 * padding / width;
-  var x = -1 + aspect * (x * (padding + size) + padding);
-  var y = 1 - (y * (padding + size) + padding);
-  grid.push([ y, x ]);
-  var x_next = x + size - padding;
-  grid.push([ y, x_next ]);
-  var y_next = y - size + padding;
-  grid.push([ y_next, x ]);
-  grid.push([ y_next, x ]);
-  grid.push([ y, x_next ]);
-  grid.push([ y_next, x_next ]);
-  return grid
-}
-
 pixels.frame(function() {
   // Update the background.
   var ego = players.ego(),
@@ -635,14 +611,11 @@ pixels.frame(function() {
         gridItems.remove(position);
       }
     } else {
-      section.plot(position[1], position[0], item.color);
-      if (item.itemId in pixels.itemImages) {
-        try {
-          pixels.itemImages[item.itemId]({"position": getItemCoords(position[0], position[1])});
-        } catch(error) {
-          // Command not ready yet.
-        }
+      var texture = undefined;
+      if (item.item_id in pixels.itemTextures) {
+        texture = item.item_id;
       }
+      section.plot(position[1], position[0], item.color, texture);
     }
   }
 
@@ -1130,7 +1103,6 @@ function onGameStateChange(msg) {
 
   // Update gridItems
   if (! _.isNil(state.items)) {
-    pixels.generateItemImages();
     gridItems = new itemlib.GridItems();
     for (j = 0; j < state.items.length; j++) {