import {Sprite} from 'penvas/src/sprite.js'

public class | source

Sprite

Extends:

EventEmitter → Model → Sprite

The class to use sprite image You can add animations

Example:

const image = loader.get('my-sprite'); // see Loader documentation
const animation = [{ frames: [9, 10, 11, 12], name: 'walk', loop: true }];
let sprite = new Sprite(10, 10, 20, 20, image, animation);

sprite.play('walk');
sprite.render();

Static Method Summary

Static Public Methods
public static	deserialize(data: Object): Sprite

Constructor Summary

Public Constructor
public	constructor(x: number, y: number, tileWidth: number, tileHeight: number, image: Image, animations: Array<Object>, hitbox: Object)

Member Summary

Public Members
public	animations: Array<Object>
public	currentAnimation: number
public	currentFrame: number
public	frame: Object
public	frames: Object
public	image: Image
public	stopped: boolean
public	time: number

Method Summary

Public Methods
public	play(animation: String) Play animation
public	render(ctx: RenderingContext, drawer: Drawer) Render the sprite
public	reset() Reset animation
public	serialize(): Object
public	step(dt: number)
public	stop() Stop animation

Inherited Summary

From class EventEmitter
protected	registered: Array List of registers
public	dispatch(event: String, args: mixed) Dispatch event
public	on(event: String, callback: function, context: mixed) Listen event

From class Model
public static	deserialize(data: Object): Model
public get	hitbox: Object: {"x": , "y": , "width": , "height": , "radius": *}
public set	hitbox(hitbox: Object): *
public get	x: number: *
public set	x: *
public get	y: number: *
public set	y: *
public	collision: boolean
public	height: number
public	parent: {}
public	width: number
public	render(ctx: RenderingContext, drawer: Drawer)
public	serialize(): Object
public	step(dt: number)

Static Public Methods

public static deserialize(data: Object): Sprite source

Override:

Model#deserialize

Params:

Name	Type	Attribute	Description
data	Object
data.x	number
data.y	number
data.width	number
data.height	number
data.hitbox	Object
data.collision	boolean
data.image	Image
data.animations	Object
data.time	number
data.stopped	boolean
data.frame	Object
data.currentAnimation	number
data.currentFrame	number

Return:

Sprite

Public Constructors

public constructor(x: number, y: number, tileWidth: number, tileHeight: number, image: Image, animations: Array<Object>, hitbox: Object) source

Override:

Model#constructor

Params:

Name	Type	Attribute	Description
x	number
y	number
tileWidth	number		width tile
tileHeight	number		height tile
image	Image
animations	Array<Object>		list of animations
hitbox	Object	optional default: {}
hitbox.x	number	optional
hitbox.y	number	optional
hitbox.width	number	optional
hitbox.height	number	optional

Example:

new Sprite(0, 0, 20, 20, image, [{ frames: [9, 10, 11, 12], name: 'walk', loop: true, flip: false }]);

Public Members

public animations: Array<Object> source

public currentAnimation: number source

public currentFrame: number source

public frame: Object source

public frames: Object source

public image: Image source

public stopped: boolean source

public time: number source

Public Methods

public play(animation: String) source

Play animation

Params:

Name	Type	Attribute	Description
animation	String

public render(ctx: RenderingContext, drawer: Drawer) source

Render the sprite

Override:

Model#render

Params:

Name	Type	Attribute	Description
ctx	RenderingContext	optional default: null
drawer	Drawer	optional default: null

public reset() source

Reset animation

public serialize(): Object source

Override:

Model#serialize

Return:

Object

Return Properties:

Name	Type	Attribute	Description
x	number
y	number
width	number
height	number
hitbox	Object
image	Image
animations	Object
time	number
stopped	boolean
frame	Object
currentAnimation	number
currentFrame	number

public step(dt: number) source

Override:

Model#step

Params:

Name	Type	Attribute	Description
dt	number		Delta between two frames

public stop() source

Stop animation