Class: ImageAtlas

b5. ImageAtlas

b5.ImageAtlas

new b5.ImageAtlas(name, bitmap, x, y, w, h, ox, oy){b5.ImageAtlas}

resource/imageAtlas.js, line 59

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 speed

Example 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
name string

Name of the animation to add

indices array

Array of frame indices

speed number

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
sx number

X pixel coordinate of top left hand corner of frame to add

sy number

Y pixel coordinate of top left hand corner of frame to add

sw number

Width of frame in pixels

sh 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

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_x number

X pixel coordinate of top left hand corner of start point

start_y number

Y pixel coordinate of top left hand corner of start point

frame_w number

Width of each frame in pixels

frame_h number

Height of each frame in pixels

count_x number

Total frames to generate across the image

count_y number

Total frames to generate down the image

total number

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
index numer

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
index number

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