new b5.ImageAtlas(name, bitmap, x, y, w, h, ox, oy){b5.ImageAtlas}
An ImageAtlas object (also known as an Image Brush) represents a b5.Bitmap and a collection of sub images within that bitmap. Generally an ImageAtlas should be added to either a b5.Scene or the global b5.App's resources so that it can be managed by them. Image atlases are used by b5.Actor's to create frame based bitmap animations.
Example showing how to create a bitmap animation and attach it to an Actor
actor.atlas = new ImageAtlas("sheep", new Bitmap("sheep", "images/sheep.png", true));
actor.atlas.addFrame(0,0,86,89,0,0); // Add frame 1 to the atlas
actor.atlas.addFrame(86,0,86,89,0,0); // Add frame 2 to the atlas
actor.frame = 0; // Set initial animation frame
actor.frame_speed = 0.5; // Set animation playback speedExample showing how to automatically generate animation frames
var atlas = new ImageAtlas("car_anim", new Bitmap("car_anims", "images/car_anims.png", true));
atlas.generate(0, 0, 64, 32, 10, 2);You can also add collection of animations to a brush which can be played back on an actor that uses the brush, e.g.:
actor.atlas = new ImageAtlas("sheep", new Bitmap("sheep", "images/sheep.png", true));
actor.atlas.addFrame(0,0,32,32,0,0); // Add frame 1 to the atlas
actor.atlas.addFrame(32,0,32,32,0,0); // Add frame 2 to the atlas
actor.atlas.addFrame(64,0,32,32,0,0); // Add frame 3 to the atlas
actor.atlas.addFrame(96,0,32,32,0,0); // Add frame 4 to the atlas
actor.atlas.addFrame(128,0,32,32,0,0); // Add frame 5 to the atlas
actor.atlas.addFrame(160,0,32,32,0,0); // Add frame 6 to the atlas
actor.atlas.addAnim("walk", [0, 1, 2, 3], 10);
actor.atlas.addAnim("idle", [4, 5], 10);
actor.playAnim("walk");For a complete overview of Resources see Booty5 Resources Overview
| Name | Type | Description |
|---|---|---|
name |
string |
Name of image atlas resource |
bitmap |
b5.Bitmap |
Bitmap that contains frames |
x |
number |
X pixel coordinate of top left hand corner of frame to add |
y |
number |
Y pixel coordinate of top left hand corner of frame to add |
w |
number |
Width of frame in pixels |
h |
number |
Height of frame in pixels |
ox |
number |
Offset of the frame on the x-axis |
oy |
number |
Offset of the frame on the y-axis |
Properties:
| Name | Type | Description |
|---|---|---|
frames |
Array.<object> | Array of atlas frame objects in the form {x, y, w, h} (internal) |
parent |
b5.App | b5.Scene | Parent resource manager (internal) |
name |
string | Name of this image atlas resource |
bitmap |
b5.Bitmap | The bitmap object that images will be used asa source for sub images |
Returns:
| Type | Description |
|---|---|
| b5.ImageAtlas | The created ImageAtlas |
Methods
-
addAnim(name, indices, speed)
resource/imageAtlas.js, line 118 -
Adds the specified animation to the atlas
Name Type Description namestring Name of the animation to add
indicesarray Array of frame indices
speednumber Speed at which to play the animation in frames per second
-
addFrame(sx, sy, sw, sh, ox, oy)
resource/imageAtlas.js, line 83 -
Adds the specified atlas frame
Name Type Description sxnumber X pixel coordinate of top left hand corner of frame to add
synumber Y pixel coordinate of top left hand corner of frame to add
swnumber Width of frame in pixels
shnumber Height of frame in pixels
oxnumber Offset of the frame on the x-axis
oynumber Offset of the frame on the y-axis
-
destroy()
resource/imageAtlas.js, line 166 -
Removes the atlas from the scene / app and destroys it
-
generate(start_x, start_y, frame_w, frame_h, count_x, count_y, total)
resource/imageAtlas.js, line 143 -
Generates multiple atlas frames, working from left to right, top to bottom
Name Type Description start_xnumber X pixel coordinate of top left hand corner of start point
start_ynumber Y pixel coordinate of top left hand corner of start point
frame_wnumber Width of each frame in pixels
frame_hnumber Height of each frame in pixels
count_xnumber Total frames to generate across the image
count_ynumber Total frames to generate down the image
totalnumber Optional parameter that can be used to limit total number of generated frames
-
getAnim(index){Object}
resource/imageAtlas.js, line 128 -
Returns the specified animation
Name Type Description indexnumer Atlas frame index
Returns:
Type Description Object The atlas frame -
getFrame(index){Object}
resource/imageAtlas.js, line 97 -
Returns the atlas frame at the specified index
Name Type Description indexnumber Atlas frame index
Returns:
Type Description Object The atlas frame -
getMaxFrames(){Number}
resource/imageAtlas.js, line 106 -
Returns total number of atlas frames int this atlas image
Returns:
Type Description Number Total number of frames in the atlas image