Added Loader.SpriteSheet, now using a new config object rather than a bunch of arguments.

This commit is contained in:
Richard Davey 2017-02-04 05:36:06 +00:00
parent 426e5af447
commit 7c06670f90
8 changed files with 67 additions and 17 deletions

View file

@ -1,4 +1,4 @@
var CHECKSUM = {
build: '618b02c0-e81b-11e6-ac0a-578aa8c24501'
build: '9a80e320-ea9a-11e6-9ca7-bb7438e31195'
};
module.exports = CHECKSUM;

View file

@ -10,10 +10,6 @@ var BaseLoader = function ()
// To finish the loader ...
//
// 3) Progress update
// 4) JSON loader
// 5) XML Loader
// 6) Multi File support (atlas + data)
// 7) Atlas Loader
this.events = new EventDispatcher();

View file

@ -4,7 +4,7 @@ var XHRLoader = require('./XHRLoader');
var XHRSettings = require('./XHRSettings');
var MergeXHRSettings = require('./MergeXHRSettings');
var File = function (type, key, url, responseType, xhrSettings)
var File = function (type, key, url, responseType, xhrSettings, config)
{
// file type (image, json, etc) for sorting within the Loader
this.type = type;
@ -41,6 +41,9 @@ var File = function (type, key, url, responseType, xhrSettings)
// The actual processed file data
this.data = undefined;
// A config object that can be used by file types to store transitional data
this.config = config || {};
// Multipart file? (i.e. an atlas and its json together)
this.linkFile = undefined;
this.linkType = '';

View file

@ -2,7 +2,7 @@
var CONST = require('../const');
var File = require('../File');
var ImageFile = function (key, url, path, xhrSettings)
var ImageFile = function (key, url, path, xhrSettings, options)
{
if (path === undefined) { path = ''; }
@ -20,7 +20,7 @@ var ImageFile = function (key, url, path, xhrSettings)
url = path.concat(url);
}
File.call(this, 'image', key, url, 'blob', xhrSettings);
File.call(this, 'image', key, url, 'blob', xhrSettings, options);
};
ImageFile.prototype = Object.create(File.prototype);

View file

@ -0,0 +1,15 @@
var ImageFile = require('./ImageFile.js');
// config can include: frameWidth, frameHeight, startFrame, endFrame, margin, spacing
var SpriteSheet = function (key, url, config, path, xhrSettings)
{
var image = new ImageFile(key, url, path, xhrSettings, config);
// Override the File type
image.type = 'spritesheet';
return image;
};
module.exports = SpriteSheet;

View file

@ -9,6 +9,7 @@ var BinaryFile = require('../../loader/filetypes/BinaryFile');
var GLSLFile = require('../../loader/filetypes/GLSLFile');
var TextFile = require('../../loader/filetypes/TextFile');
var AtlasJSONFile = require('../../loader/filetypes/AtlasJSONFile');
var SpriteSheet = require('../../loader/filetypes/SpriteSheet');
var Loader = function (state)
{
@ -68,6 +69,14 @@ Loader.prototype.glsl = function (key, url, xhrSettings)
return this.addFile(file);
};
// config can include: frameWidth, frameHeight, startFrame, endFrame, margin, spacing
Loader.prototype.spritesheet = function (key, url, config, xhrSettings)
{
var file = new SpriteSheet(key, url, config, this.path, xhrSettings);
return this.addFile(file);
};
Loader.prototype.atlas = function (key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings)
{
// Returns an object with two properties: 'texture' and 'data'
@ -210,6 +219,10 @@ Loader.prototype.processCallback = function ()
}
break;
case 'spritesheet':
textures.addSpriteSheet(file.key, file.data, file.config);
break;
case 'json':
cache.json.add(file.key, file.data);
break;

View file

@ -99,19 +99,31 @@ TextureManager.prototype = {
return texture;
},
addSpriteSheet: function (key, source, frameWidth, frameHeight, startFrame, endFrame, margin, spacing)
/**
* [addSpriteSheet description]
* @param {[type]} key [description]
* @param {[type]} source [description]
* @param {[type]} config [description]
* @param {number} config.frameWidth - The fixed width of each frame.
* @param {number} [config.frameHeight] - The fixed height of each frame. If not set it will use the frameWidth as the height.
* @param {number} [config.startFrame=0] - Skip a number of frames. Useful when there are multiple sprite sheets in one Texture.
* @param {number} [config.endFrame=-1] - The total number of frames to extract from the Sprite Sheet. The default value of -1 means "extract all frames".
* @param {number} [config.margin=0] - If the frames have been drawn with a margin, specify the amount here.
* @param {number} [config.spacing=0] - If the frames have been drawn with spacing between them, specify the amount here.
*/
addSpriteSheet: function (key, source, config)
{
var texture = this.create(key, source);
var width = texture.source[0].width;
var height = texture.source[0].height;
Parser.SpriteSheet(texture, 0, 0, 0, width, height, frameWidth, frameHeight, startFrame, endFrame, margin, spacing);
Parser.SpriteSheet(texture, 0, 0, 0, width, height, config);
return texture;
},
addSpriteSheetFromAtlas: function (key, atlasKey, atlasFrame, frameWidth, frameHeight, startFrame, endFrame, margin, spacing)
addSpriteSheetFromAtlas: function (key, atlasKey, atlasFrame, config)
{
var atlas = this.get(atlasKey);
var sheet = atlas.get(atlasFrame);
@ -120,7 +132,7 @@ TextureManager.prototype = {
{
var texture = this.create(key, sheet.source.image);
Parser.SpriteSheet(texture, 0, sheet.cutX, sheet.cutY, sheet.cutWidth, sheet.cutHeight, frameWidth, frameHeight, startFrame, endFrame, margin, spacing);
Parser.SpriteSheet(texture, 0, sheet.cutX, sheet.cutY, sheet.cutWidth, sheet.cutHeight, config);
return texture;
}

View file

@ -4,6 +4,8 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var GetObjectValue = require('../../utils/GetObjectValue');
/**
* Parse a Sprite Sheet and extracts the frame data from it.
*
@ -19,12 +21,21 @@
* @param {number} [spacing=0] - If the frames have been drawn with spacing between them, specify the amount here.
* @return {Phaser.FrameData} A FrameData object containing the parsed frames.
*/
var SpriteSheetTextureParser = function (texture, sourceIndex, x, y, width, height, frameWidth, frameHeight, startFrame, endFrame, margin, spacing)
var SpriteSheetTextureParser = function (texture, sourceIndex, x, y, width, height, config)
{
if (startFrame === undefined) { startFrame = 0; }
if (endFrame === undefined) { endFrame = -1; }
if (margin === undefined) { margin = 0; }
if (spacing === undefined) { spacing = 0; }
var frameWidth = GetObjectValue(config, 'frameWidth', null);
var frameHeight = GetObjectValue(config, 'frameHeight', frameWidth);
// If missing we can't proceed
if (frameWidth === null)
{
throw new Error('TextureManager.SpriteSheetTextureParser: Invalid frameWidth given.');
}
var startFrame = GetObjectValue(config, 'startFrame', 0);
var endFrame = GetObjectValue(config, 'endFrame', -1);
var margin = GetObjectValue(config, 'margin', 0);
var spacing = GetObjectValue(config, 'spacing', 0);
var row = Math.floor((width - margin) / (frameWidth + spacing));
var column = Math.floor((height - margin) / (frameHeight + spacing));