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