1 var jaws = (function(jaws) { 2 3 4 /** 5 * @class Cut out invidual frames (images) from a larger spritesheet-image. "Field Summary" contains options for the SpriteSheet()-constructor. 6 * 7 * @property {image|image} Image/canvas or asset-string to cut up smaller images from 8 * @property {string} orientation How to cut out invidual images from spritesheet, either "right" or "down" 9 * @property {array} frame_size width and height of invidual frames in spritesheet 10 * @property {array} frames all single frames cut out from image 11 * @property {integer} offset vertical or horizontal offset to start cutting from 12 * @property {int} scale_image Scale the sprite sheet by this factor before cutting out the frames. frame_size is automatically re-sized too 13 * 14 */ 15 jaws.SpriteSheet = function SpriteSheet(options) { 16 if( !(this instanceof arguments.callee) ) return new arguments.callee( options ); 17 18 jaws.parseOptions(this, options, this.default_options); 19 20 /* Detect framesize from filename, example: droid_10x16.png means each frame is 10px high and 16px wide */ 21 if(jaws.isString(this.image) && !options.frame_size) { 22 var regexp = new RegExp("_(\\d+)x(\\d+)", "g"); 23 var sizes = regexp.exec(this.image) 24 this.frame_size = [] 25 this.frame_size[0] = parseInt(sizes[1]) 26 this.frame_size[1] = parseInt(sizes[2]) 27 } 28 29 this.image = jaws.isDrawable(this.image) ? this.image : jaws.assets.data[this.image] 30 if(this.scale_image) { 31 var image = (jaws.isDrawable(this.image) ? this.image : jaws.assets.get(this.image)) 32 this.frame_size[0] *= this.scale_image 33 this.frame_size[1] *= this.scale_image 34 this.image = jaws.retroScaleImage(image, this.scale_image) 35 } 36 37 var index = 0 38 this.frames = [] 39 40 // Cut out tiles from Top -> Bottom 41 if(this.orientation == "down") { 42 for(var x=this.offset; x < this.image.width; x += this.frame_size[0]) { 43 for(var y=0; y < this.image.height; y += this.frame_size[1]) { 44 this.frames.push( cutImage(this.image, x, y, this.frame_size[0], this.frame_size[1]) ) 45 } 46 } 47 } 48 // Cut out tiles from Left -> Right 49 else { 50 for(var y=this.offset; y < this.image.height; y += this.frame_size[1]) { 51 for(var x=0; x < this.image.width; x += this.frame_size[0]) { 52 this.frames.push( cutImage(this.image, x, y, this.frame_size[0], this.frame_size[1]) ) 53 } 54 } 55 } 56 } 57 58 jaws.SpriteSheet.prototype.default_options = { 59 image: null, 60 orientation: "down", 61 frame_size: [32,32], 62 offset: 0, 63 scale_image: null 64 } 65 66 /** @private 67 * Cut out a rectangular piece of a an image, returns as canvas-element 68 */ 69 function cutImage(image, x, y, width, height) { 70 var cut = document.createElement("canvas") 71 cut.width = width 72 cut.height = height 73 74 var ctx = cut.getContext("2d") 75 ctx.drawImage(image, x, y, width, height, 0, 0, cut.width, cut.height) 76 77 return cut 78 }; 79 80 jaws.SpriteSheet.prototype.toString = function() { return "[SpriteSheet " + this.frames.length + " frames]" } 81 82 return jaws; 83 })(jaws || {}); 84 85