/* * 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