☰

TagPro Tile Pattern

Tints every other floor tile a slightly different shade.| Greasemonkey 4.1: ✕ Tampermonkey 4.4: ✔

  1. // ==UserScript== 
  2. // @name          TagPro Tile Pattern
  3. // @namespace     http://www.reddit.com/u/snaps_/
  4. // @description   Tints every other floor tile a slightly different shade.| Greasemonkey 4.1: ✕ Tampermonkey 4.4: ✔ 
  5. // @include       http://tagpro-*.koalabeast.com:* 
  6. // @include       http://tangent.jukejuice.com:* 
  7. // @include       http://tagpro-test.koalabeast.com/game
  8. // @include       http://*.newcompte.fr:* 
  9. // @license       GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html 
  10. // @author        snaps
  11. // @version       0.1.2
  12. // ==/UserScript==
  13.  
  14. /* User-Defined Variables */
  15.  
  16. // The color to tint the floor tiles.
  17. var TINT_COLOR = "#663300";
  18.  
  19. // How much to tint the floor tiles. Should be a number from 0 to 1.
  20. // In practice try values from 0.05 to 1 in increments of .2 to start,
  21. // then smaller amounts to hone in on what you like.
  22. var OPACITY = 0.05;
  23.  
  24. /* End of User-Defined Variables */
  25.  
  26.  
  27. /**
  28.  * Executes `fn` when the relevant parts of the `tagpro` object have
  29.  * been initialized.
  30.  * @param {Function} fn - The function to execute.
  31.  */
  32. function waitForInitialized(fn) {
  33.   if (!tagpro || !tagpro.tiles || !tagpro.tiles.draw || !tagpro.renderer) {
  34.     setTimeout(function() {
  35.       waitForInitialized(fn);
  36.     }, 10);
  37.   } else {
  38.     // Only override if we load early enough.
  39.     if (!tagpro.renderer.layers.backgroundDrawn) {
  40.       fn();
  41.     }
  42.   }
  43. }
  44.  
  45. waitForInitialized(function() {
  46.   var stdDraw = tagpro.tiles.draw;
  47.   // ids of the tiles we're interested in changing.
  48.   var floorTiles = [2, 11, 12, 17, 18];
  49.   var prefix = "__tinted__";
  50.  
  51.   /**
  52.    * Set tint of a given canvas element.
  53.    * @param {HTMLElement} image - Canvas element holding the image to tint.
  54.    * @param {string} [color="#000000"] - Color string to tint the tiles, like "#FF0000".
  55.    * @param {number} [opacity="0.01"] - How much to preserve the original image.
  56.    */
  57.   var setTint = function(image, color, opacity) {
  58.     // Adapted from: http://stackoverflow.com/a/4231508/1698058
  59.     var tint = document.createElement("canvas");
  60.     tint.width = image.width;
  61.     tint.height = image.height;
  62.  
  63.     var tintCtx = tint.getContext("2d");
  64.     tintCtx.fillStyle = color || "#000000";
  65.     tintCtx.fillRect(0, 0, tint.width, tint.height);
  66.     tintCtx.globalCompositeOperation = "destination-atop";
  67.     tintCtx.drawImage(image, 0, 0);
  68.  
  69.     var imageCtx = image.getContext("2d");
  70.     imageCtx.globalAlpha = opacity || 0.01;
  71.     imageCtx.drawImage(tint, 0, 0);
  72.   }
  73.  
  74.   /**
  75.    * Creates the tinted texture for the tile of the given id and sets
  76.    * the relevant values such that the returned value will function in
  77.    * the original `tagpro.tiles.draw` function.
  78.    * @param {(number|string)} tileId - The original id of the tile to set information for.
  79.    * @return {string} - The new id to use for the tile.
  80.    */
  81.   var setTintedTexture = function(tileId) {
  82.     var originalTileId = tileId;
  83.     tileId = prefix + originalTileId;
  84.     if (!tagpro.tiles[tileId] || !PIXI.TextureCache[tileId]) {
  85.       var tile = tagpro.tiles[originalTileId];
  86.       tagpro.tiles[tileId] = tile;
  87.  
  88.       var spread = tile.spread || 0;
  89.       var elt = document.createElement("canvas");
  90.       elt.width = tile.size || 40;
  91.       elt.height = tile.size || 40;
  92.  
  93.       var ctx = elt.getContext("2d");
  94.       var sx = tile.x * 40 - spread;
  95.       var sy = tile.y * 40 - spread;
  96.       var size = (tile.size || 40) + spread * 2;
  97.       ctx.drawImage(tagpro.tiles.image, sx, sy, size, size, 0, 0, size, size);
  98.       setTint(elt, TINT_COLOR, OPACITY);
  99.       PIXI.TextureCache[tileId] = PIXI.Texture.fromCanvas(elt);
  100.     }
  101.     return tileId;
  102.   }
  103.  
  104.   // Override `tagpro.tiles.draw`.
  105.   tagpro.tiles.draw = function() {
  106.     // Only make changes when drawing background tiles.
  107.     if (tagpro.tiles.draw.caller === tagpro.tiles.drawLayers) {
  108.       var loc = arguments[2];
  109.       
  110.       var floorTile = floorTiles.indexOf(arguments[1]) !== -1;
  111.       if (loc && !(typeof arguments[1] == "object") && floorTile) {
  112.         var arrayLoc = {
  113.           x: Math.floor(loc.x / 40),
  114.           y: Math.floor(loc.y / 40)
  115.         };
  116.         if ((arrayLoc.x % 2 == 0 && arrayLoc.y % 2 == 0) ||
  117.             (arrayLoc.x % 2 == 1 && arrayLoc.y % 2 == 1)) {
  118.           arguments[1] = setTintedTexture(arguments[1]);
  119.         }
  120.       }
  121.     }
  122.     return stdDraw.apply(null, arguments);
  123.   }
  124. });