phreaknation Posted January 14, 2017 Share Posted January 14, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts