Merge Generated Sprites: Code Snippet

[phreaknation]

This is hastily thrown together code that I created as a solution for an idea that I have. I have texture gen data in objects and I wanted to merge various layers together. Reason being is if I create a number of various  objects I wanted them to be placed on buttons later on. I plan on making a some code to replace various parts of the textures so that I can on the fly generate generated textures. This is handy for button and things of that nature which is why I created it. I decided to throw it out there in case anyone needed something like this or wanted to improve on the code. Also here is a working example of it on jsfiddle.

Screenshot
 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { create: create });


// taken from my code and striped out useless parts
var gameScale = 2
var sprite = (function() {
  'use strict';

  var sprite = {
    creature: {},
    misc: {},
    object: {},
    structure: {},
    tile: {},
    vehicle: {},
  };

  sprite.misc.buttonBackground = {
    size: [16, 16],
    data: [
      '0000000000000000',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0000000000000000'
    ],
  };

  sprite.object.table = {
    size: [6, 3],
    thumbOffset: [5, 8],
    data: [
      '666666',
      '.6..6.',
      '.6..6.'
    ],
    thumbData: [
      '666666',
      '.6..6.',
      '.6..6.'
    ],
  };

  sprite.mergeData = function mergeData(bgData, fgData, xOffset, yOffset) {
    var bgDimensions = sprite.getDimensions(bgData);
    var fgDimensions = sprite.getDimensions(fgData);
    var size = sprite.getMaxDimensions(bgDimensions, fgDimensions);
    var newData = [];
    _.times(size[1], function(y) {
      var row = '';
      _.times(size[0], function(x) {
        var s = '.';
        if (yOffset || xOffset) {
          if (y >= yOffset || x >= xOffset) {
            if (fgData[y - yOffset] && fgData[y - yOffset][x - xOffset])  {

              s = fgData[y - yOffset][x - xOffset];
            }
          }
        } else {
          if (fgData[y] && fgData[y][x])  {
            s = fgData[y][x];
          }
        }

        if (s == '.' && bgData[y] && bgData[y][x])  {
          s = bgData[y][x];
        }
        row += s;
      });
      newData.push(row);
    });

    return newData;
  };

  sprite.makeTexture = function makeTexture(name, data) {
    console.info('Loading sprite `%s`.', name);
    return game.create.texture(
          name,
          data,
          gameScale,
          gameScale
        );
  };

  sprite.getDimensions = function getDimensions(spriteData) {
    if (_.isArray(spriteData)) {
      var y = spriteData.length;
      var x = 0;
      var count = 0;
      _.each(spriteData, function (row) {
        if (row.length > x) x = row.length;
      });
      count = x * y;
      return [x, y, count];
    }
    return false;
  };

  sprite.getMaxDimensions = function getMaxDimensions(a, b) {
    if (!_.isArray(a) || !_.isArray(b)) return false;
    var x = Math.max(a[0], b[0]);
    var y = Math.max(a[1], b[1]);
    return [x, y];
  };

  return sprite;
})();

function create() {
    game.stage.backgroundColor = '#2d2d2d';

    // manually placed variables from itterated code;
    var groupKey = 'object';
    var structKey = 'table';
    var col = 0;
    var row = 0;

    var name = groupKey + '_' + structKey;
    var baseLeft = 100 + ((col * 16) * gameScale) + 2;
    var baseTop = 100 + ((row * 16) * gameScale) + 2;

    var bgData = sprite.misc.buttonBackground.data;
    var fg =sprite[groupKey][structKey];
    var fgData = fg.thumbData;

    var newData;
    if (_.isUndefined(fg.thumbOffset)) {
      newData = sprite.mergeData(bgData, fgData);
    } else {
      newData = sprite.mergeData(bgData, fgData, fg.thumbOffset[0], fg.thumbOffset[1]);
    }
    var btnName = 'btn_' + name;
    var newTexture = sprite.makeTexture(btnName, newData);


    var objButton = game.add.sprite(
      baseLeft,
      baseTop,
      btnName);
    objButton.name = name;
    objButton.inputEnabled = true;
    objButton.input.useHandCursor = true;
}

 

Edited January 14, 2017 by phreaknation
Updated Title