SpritePlayer

Kind: global class
Npmpackage:

SpritePlayer
- new SpritePlayer(arg)
- .onComplete : function
- .onLoop : function
- .sprite : Graphic.Sprite
- .loop : boolean | number
- .frame : number
- .targetFrame : number
- .speed : number
- .play()
- .pause()
- .stop()
- .clear()
- .render()
- .reverse()
- .forward()

new SpritePlayer(arg)

SpritePlayer is an image sequence player. This can be used as a stand alone player or can be used with other systems such as CanvasDrawer.

Import from ad-animation

Param	Type	Description
arg	`object`	See the example below to see all of the properties of this object.

Example

import { SpritePlayer } from 'ad-animation'

// Placed in Main
T.myPlayer = new SpritePlayer({
	id: 'my-sprite-player',
	target: T,
	css: {
		x: 10,
		y: 15,
		width: 160,
		height: 160,
		backgroundColor: '#cccccc'
	},
	source: '_output_128x64_30f',
	sprite: {
		frameWidth: 128,
		frameHeight: 64,
		frameNumber: 30
		//transformOrigin: { x: 0.5, y: 0.5 }
		//scale : 2
	},
	// autoPlay : false,
	loop: false, // 4
	frame: 0,
	speed: 8,
	// targetFrame: 14,
	onComplete: function() {
	},
	onLoop: function() {
	}
})

// in Animation
View.main.myPlayer.play()

// example of roll over/out
Gesture.add(View.main, GestureEvent.OVER, () => {
	const p = View.main.myPlayer
	p.forward()
	p.play()
}

Gesture.add(View.main, GestureEvent.OUT, () => {
	const p = View.main.myPlayer
	p.reverse()
	p.play()
}

// example of using chunks of animation
function playChunk(frame, targetFrame) {
	const p = View.main.myPlayer
	p.frame = frame
	p.targetFrame = targetFrame 
	p.play()
}

playChunk(0, 10) 
playChunk(10, 20)
playChunk(20, null) // set to null will revert to the last frame
</codeblock>

SpritePlayer.onComplete : `function`

A callback for when the Sprite is finished.

Kind: static property of SpritePlayer

SpritePlayer.onLoop : `function`

A callback for when the Sprite loops. NOTE: this will fire the same time as onComplete on the final loop

Kind: static property of SpritePlayer

SpritePlayer.sprite : `Graphic.Sprite`

Direct access to the sprite object, which is used to manipulate the drawing within the canvas.

Kind: static property of SpritePlayer
Example

TweenLite.to(myPlayer.sprite, 3, { x:180, y:240, alpha:.2, scale:1, rotation:270 })

SpritePlayer.loop : `boolean` | `number`

A boolean to toggle if the Sprite will continuously play or a number to set the number of times it will loop. NOTE: a number is the count of REPEATS, so setting loop = 2 will play a total of 3 times. Setting loop = 0 is the same as loop = false. Setting loop = -1 is the same as loop = true.

Kind: static property of SpritePlayer
Example

console.log(myPlayer.loop)
myPlayer.loop = true

SpritePlayer.frame : `number`

A number representing the current frame displayed. Setting this will jump to that frame and render.

Kind: static property of SpritePlayer
Example

console.log(myPlayer.frame)
myPlayer.frame = 7

SpritePlayer.targetFrame : `number`

A number representing the frame the animation should treat as the end frame of the current direction of play. This will NOT render or play; it is simply setting the target value.

Kind: static property of SpritePlayer
Example

console.log(myPlayer.frame)
myPlayer.targetFrame = 7
myPlayer.play()

SpritePlayer.speed : `number`

A number representing the FrameRate, only applies when used as a stand alone player.

Kind: static property of SpritePlayer
Example

console.log(myPlayer.speed)
myPlayer.speed = 18