/*
* SpriteSheetUtils
* Visit http://createjs.com/ for documentation, updates and examples.
*
* Copyright (c) 2010 gskinner.com, inc.
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
// namespace:
this.createjs = this.createjs||{};
(function() {
// constructor:
/**
* The SpriteSheetUtils class is a collection of static methods for working with {{#crossLink "SpriteSheet"}}{{/crossLink}}s.
* A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For
* example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across
* by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated.
* @class SpriteSheetUtils
* @static
**/
var SpriteSheetUtils = function() {
throw "SpriteSheetUtils cannot be instantiated";
}
/**
* @property _workingCanvas
* @static
* @type HTMLCanvasElement | Object
* @protected
*/
SpriteSheetUtils._workingCanvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");
/**
* @property _workingContext
* @static
* @type CanvasRenderingContext2D
* @protected
*/
SpriteSheetUtils._workingContext = SpriteSheetUtils._workingCanvas.getContext("2d");
// public static methods:
/**
* This is an experimental method, and may be buggy. Please report issues.
* Extends the existing sprite sheet by flipping the original frames horizontally, vertically, or both,
* and adding appropriate animation & frame data. The flipped animations will have a suffix added to their names
* (_h, _v, _hv as appropriate). Make sure the sprite sheet images are fully loaded before using this method.
*
* For example:
* SpriteSheetUtils.addFlippedFrames(mySpriteSheet, true, true);
* The above would add frames that are flipped horizontally AND frames that are flipped vertically.
*
* Note that you can also flip any display object by setting its scaleX or scaleY to a negative value. On some
* browsers (especially those without hardware accelerated canvas) this can result in slightly degraded performance,
* which is why addFlippedFrames is available.
* @method addFlippedFrames
* @static
* @param {SpriteSheet} spriteSheet
* @param {Boolean} horizontal If true, horizontally flipped frames will be added.
* @param {Boolean} vertical If true, vertically flipped frames will be added.
* @param {Boolean} both If true, frames that are flipped both horizontally and vertically will be added.
**/
SpriteSheetUtils.addFlippedFrames = function(spriteSheet, horizontal, vertical, both) {
if (!horizontal && !vertical && !both) { return; }
var count = 0;
if (horizontal) { SpriteSheetUtils._flip(spriteSheet,++count,true,false); }
if (vertical) { SpriteSheetUtils._flip(spriteSheet,++count,false,true); }
if (both) { SpriteSheetUtils._flip(spriteSheet,++count,true,true); }
}
/**
* Returns a single frame of the specified sprite sheet as a new PNG image.
*
* Note that in almost all cases it is better to display a single frame using a paused instance of BitmapAnimation,
* than it is to slice out a frame using this method and display it with a Bitmap instance. You can also crop an
* image using the sourceRect
property of {{#crossLink "Bitmap"}}{{/crossLink}}. This method may cause
* cross-domain issues since it accesses pixels directly on the canvas.
* @method extractFrame
* @static
* @param {Image} spriteSheet The SpriteSheet instance to extract a frame from.
* @param {Number|String} frame The frame number or animation name to extract. If an animation
* name is specified, only the first frame of the animation will be extracted.
* @return {Image} a single frame of the specified sprite sheet as a new PNG image.
*/
SpriteSheetUtils.extractFrame = function(spriteSheet, frame) {
if (isNaN(frame)) {
frame = spriteSheet.getAnimation(frame).frames[0];
}
var data = spriteSheet.getFrame(frame);
if (!data) { return null; }
var r = data.rect;
var canvas = SpriteSheetUtils._workingCanvas;
canvas.width = r.width;
canvas.height = r.height;
SpriteSheetUtils._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);
var img = new Image();
img.src = canvas.toDataURL("image/png");
return img;
}
/**
* 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 Optional. 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 Bitmap or SpriteSheet.
*/
SpriteSheetUtils.mergeAlpha = function(rgbImage, alphaImage, canvas) {
if (!canvas) { canvas = createjs.createCanvas?createjs.createCanvas():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;
}
// private static methods:
SpriteSheetUtils._flip = function(spriteSheet, count, h, v) {
var imgs = spriteSheet._images;
var canvas = SpriteSheetUtils._workingCanvas;
var ctx = SpriteSheetUtils._workingContext;
var il = imgs.length/count;
for (var i=0;i