File:ColorAlphaTask.js
/**
* @module Core
* @namespace springroll
*/
(function()
{
var Task = include('springroll.Task');
/**
* Internal class for loading an image that has been split into an alpha channel image and a
* RGB only color image.
* @class ColorAlphaTask
* @extends springroll.Task
* @constructor
* @private
* @param {Object} asset The data properties
* @param {String} asset.color The source path to the color image
* @param {String} asset.alpha The source path to the alpha image
* @param {Boolean} [asset.cache=false] If we should cache the result
* @param {String} [asset.id] Id of asset
* @param {Function} [asset.complete] The event to call when done
* @param {Object} [asset.sizes=null] Define if certain sizes are not supported
*/
var ColorAlphaTask = function(asset)
{
Task.call(this, asset, asset.color);
/**
* The atlas color source path
* @property {String} color
*/
this.color = this.filter(asset.color);
/**
* The atlas alpha source path
* @property {String} alpha
*/
this.alpha = this.filter(asset.alpha);
};
// Reference to prototype
var p = Task.extend(ColorAlphaTask);
/**
* Test if we should run this task
* @method test
* @static
* @param {Object} asset The asset to check
* @return {Boolean} If the asset is compatible with this asset
*/
ColorAlphaTask.test = function(asset)
{
return !!asset.color && !!asset.alpha;
};
/**
* Start the task
* @method start
* @param {Function} callback Callback when finished
*/
p.start = function(callback)
{
this.load(
{
_alpha: this.alpha,
_color: this.color
},
function(results)
{
callback(ColorAlphaTask.mergeAlpha(
results._color,
results._alpha
));
results._color.src = results._alpha.src = "";
}
);
};
/**
* Pulled from EaselJS's SpriteSheetUtils.
* Merges the rgb channels of one image with the alpha channel of another. This can be used to
* combine a compressed JPEG image containing color data with a PNG32 monochromatic image
* containing alpha data. With certain types of images (those with detail that lend itself to
* JPEG compression) this can provide significant file size savings versus a single RGBA PNG32.
* This method is very fast (generally on the order of 1-2 ms to run).
* @method mergeAlpha
* @static
* @param {Image} rbgImage The image (or canvas) containing the RGB channels to use.
* @param {Image} alphaImage The image (or canvas) containing the alpha channel to use.
* @param {Canvas} [canvas] If specified, this canvas will be used and returned. If not, a new
* canvas will be created.
* @return {Canvas} A canvas with the combined image data. This can be used as a source for a
* Texture.
*/
ColorAlphaTask.mergeAlpha = function(rgbImage, alphaImage, canvas)
{
if (!canvas)
{
canvas = document.createElement("canvas");
}
canvas.width = Math.max(alphaImage.width, rgbImage.width);
canvas.height = Math.max(alphaImage.height, rgbImage.height);
var ctx = canvas.getContext("2d");
ctx.save();
ctx.drawImage(rgbImage, 0, 0);
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(alphaImage, 0, 0);
ctx.restore();
return canvas;
};
// Assign to namespace
namespace('springroll').ColorAlphaTask = ColorAlphaTask;
}());