debug1
debug2
debug3
debug4
debug5

USAGE:

sp10 = new jSprite({
	spriteSheet: "./images/sheet7.png",
	container: "htmlID",
	columns: 8,
	rows: 4,
	widthOffset: 0,
	startFrame: 17,
	length: 8,
	timing: 75,
	autoStart: true,
	repeat: true,
	onComplete: function,
	onProgress: function,
	onComplete: function,
	onRepeat: function,
	onStop: function
});

Parameters:

Name Type Info
spriteSheet String REQUIRED The path to the sprite sheet image
container String REQUIRED ID of html element to use for the sprite
columns Number REQUIRED The number of columns your sprite sheet has
rows Number REQUIRED The number of rows your sprite sheet has
timing Number REQUIRED The delay in ms between each frame
widthOffset Number If the sprite is not quite divisible by it's no of columns then you can adjust it with the widthOffset
startFrame Number The number of which frame you would like to start on
length Number The number of frames you would like to play from the start frame (do not exceed max length)
repeat Boolean Do you want the sprite animation to repeat, yes = true, no = false, default = true
onStart function Function callback for when start is called
onStop function Function callback for when stop is called
onProgress function Function called for each frame setp of the sprite
onRepeat function Function callback for when sprite animation repeats
onComplete function Function callback for when sprite animation is complete

Available methods:

Name Info
start() Starts/resumes the sprite animation
stop() Stops the sprite animation
restart() Restarts the sprite animation from start

Example 1

sp1 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 2

sp2 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "sp2",
columns: 8,
rows: 10,
widthOffset: 0,
timing: 120,
repeat: true,
autoStart: true,
onStart: function(){},
onStop: function(){},
onProgress: function(){},
onRepeat: function(){},
onComplete: function(){}
});

Example 3

sp3 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 4

sp4 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

No repeat example 5

sp5 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 6

sp6 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 7

sp7 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 8

sp8 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 9

sp9 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 10

sp10 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 11

sp11 = new jSprite({
spriteSheet: "./sprite_sheet.png",
container: "elementId",
columns: 6,
rows: 6,
timing: 100,
autoStart: true,
repeat: true
});

Example 12

This is a 9 x 4 grid, this shows you how you can play a different animation on each row.


Start:
Length: