Class jaws.Sprite

A basic but powerfull sprite for all your onscreen-game objects. "Field Summary" contains options for the Sprite()-constructor.

Defined in: sprite.js

Class Summary
Constructor Attributes	Constructor Name and Description
	jaws.Sprite(options)

Field Summary
Field Attributes	Field Name and Description
	alpha Transparency 0=fully transparent, 1=no transperency
	anchor String stating how to anchor the sprite to canvas, @see Sprite#anchor ("top_left", "center" etc)
	angle Angle in degrees (0-360)
	color If set, draws a rectangle of dimensions rect() with specified color or gradient (linear or radial)
	flipped Flip sprite horizontally, usefull for sidescrollers
	image Image/canvas or string pointing to an asset ("player.png")
	scale_image Scale the sprite by this factor
	x Horizontal position (0 = furthest left)
	y Vertical position (0 = top)

Method Summary

Method Attributes	Method Name and Description
	asCanvas() Returns sprite as a canvas
	asCanvasContext() Returns sprite as a canvas context.
	attributes() returns Sprites state/properties as a pure object
	draw() Draw sprite on active canvas
	flip() Flips image vertically, usefull for sidescrollers when player is walking left/right
	move(x, y) Modify x/y
	moveTo(x, y) Set x/y
<static>	jaws.Sprite.parse(objects) Load/creates sprites from given data Argument could either be - an array of Sprite objects - an array of JSON objects - a JSON.stringified string representing an array of JSON objects
	rect() Returns a jaws.Rect() perfectly surrouning sprite.
	resize(width, height) Resize sprite by adding width
	resizeTo(width, height) Resize sprite to exact width/height
	rotate(value) Rotate sprite by value degrees
	rotateTo(value) Force an rotation-angle on sprite
	scaleAll(value) scale sprite by given factor.
	scaleHeight(value) scale sprite vertically by scale_factor.
	scaleImage(factor) Scales image using hard block borders.
	scaleTo(value) set scale factor.
	scaleWidth(value) scale sprite horizontally by scale_factor.
	setAnchor(value) The sprites anchor could be describe as "the part of the sprite will be placed at x/y" or "when rotating, what point of the of the sprite will it rotate round"
	setBottom(value) Position sprites bottom on the y-axis
	setHeight(value) Set new height.
	setImage(value) Sets image from image/canvas or asset-string ("foo.png") If asset isn't previously loaded setImage() will try to load it.
	setLeft(value) Position sprites left side on the x-axis
	setRight(value) Position sprites right side on the x-axis
	setTop(value) Position sprites top on the y-axis
	setWidth(value) Set new width.
	setX(value) Sets x
	setY(value) Sets y
	stepToWhile(target_x, target_y, continueStep) Steps 1 pixel towards the given X/Y.
	stepWhile(vx, vy, continueStep) Moves with given vx/vy velocoties by stepping 1 pixel at the time.
	toJSON() returns a JSON-string representing the state of the Sprite.

Class Detail

jaws.Sprite(options)

// create new sprite at top left of the screen, will use jaws.assets.get("foo.png")
new Sprite({image: "foo.png", x: 0, y: 0}) 

// sets anchor to "center" on creation
new Sprite({image: "topdownspaceship.png", anchor: "center"})

Parameters:
options

Field Detail

{int} alpha

Transparency 0=fully transparent, 1=no transperency

{string} anchor

String stating how to anchor the sprite to canvas, @see Sprite#anchor ("top_left", "center" etc)

{int} angle

Angle in degrees (0-360)

{string|gradient} color

If set, draws a rectangle of dimensions rect() with specified color or gradient (linear or radial)

{bool} flipped

Flip sprite horizontally, usefull for sidescrollers

{image} image

Image/canvas or string pointing to an asset ("player.png")

{int} scale_image

Scale the sprite by this factor

{int} x

Horizontal position (0 = furthest left)

{int} y

Vertical position (0 = top)

Method Detail

asCanvas()

Returns sprite as a canvas
asCanvasContext()

Returns sprite as a canvas context. For certain browsers, a canvas context is faster to work with then a pure image.
attributes()

returns Sprites state/properties as a pure object
draw()

Draw sprite on active canvas
flip()

Flips image vertically, usefull for sidescrollers when player is walking left/right
move(x, y)

Modify x/y

Parameters:

x

y
moveTo(x, y)

Set x/y

Parameters:

x

y
<static> jaws.Sprite.parse(objects)

Load/creates sprites from given data Argument could either be - an array of Sprite objects - an array of JSON objects - a JSON.stringified string representing an array of JSON objects

Parameters:

objects

Returns:

Array of created sprite
rect()

Returns a jaws.Rect() perfectly surrouning sprite. Also cache rect in this.cached_rect.
resize(width, height)

Resize sprite by adding width

Parameters:

width

height
resizeTo(width, height)

Resize sprite to exact width/height

Parameters:

width

height
rotate(value)

Rotate sprite by value degrees

Parameters:

value
rotateTo(value)

Force an rotation-angle on sprite

Parameters:

value
scaleAll(value)

scale sprite by given factor. 1=don't scale. <1 = scale down. 1>: scale up. Modifies width/height.

Parameters:

value
scaleHeight(value)

scale sprite vertically by scale_factor. Modifies height.

Parameters:

value
scaleImage(factor)

Scales image using hard block borders. Useful for that cute, blocky retro-feeling. Depends on gfx.js beeing loaded.

Parameters:

factor
scaleTo(value)

set scale factor. ie. 2 means a doubling if sprite in both directions.

Parameters:

value
scaleWidth(value)

scale sprite horizontally by scale_factor. Modifies width.

Parameters:

value
setAnchor(value)

The sprites anchor could be describe as "the part of the sprite will be placed at x/y" or "when rotating, what point of the of the sprite will it rotate round"
```
For example, a topdown shooter could use setAnchor("center") --> Place middle of the ship on x/y
.. and a sidescroller would probably use setAnchor("center_bottom") --> Place "feet" at x/y
```
Parameters:

value
setBottom(value)

Position sprites bottom on the y-axis

Parameters:

value
setHeight(value)

Set new height. Scales sprite.

Parameters:

value
setImage(value)

Sets image from image/canvas or asset-string ("foo.png") If asset isn't previously loaded setImage() will try to load it.

Parameters:

value
setLeft(value)

Position sprites left side on the x-axis

Parameters:

value
setRight(value)

Position sprites right side on the x-axis

Parameters:

value
setTop(value)

Position sprites top on the y-axis

Parameters:

value
setWidth(value)

Set new width. Scales sprite.

Parameters:

value
setX(value)

Sets x

Parameters:

value
setY(value)

Sets y

Parameters:

value
{object} stepToWhile(target_x, target_y, continueStep)

Steps 1 pixel towards the given X/Y. Horizontal and vertical steps are done separately between each callback. Exits when the continueStep-callback returns true for both vertical and horizontal steps or if target X/Y has been reached.

Parameters:

target_x

target_y

continueStep

Returns:

{object} Object with 2 x/y-properties indicating what plane we moved in when stepToWhile was stopped.
{object} stepWhile(vx, vy, continueStep)

Moves with given vx/vy velocoties by stepping 1 pixel at the time. Horizontal and vertical steps are done separately between each callback. Exits when the continueStep-callback returns true for both vertical and horizontal steps or if target X/Y has been reached.

Parameters:

vx

vy

continueStep

Returns:

{object} Object with 2 x/y-properties indicating what plane we moved in when stepWhile was stopped.
toJSON()

returns a JSON-string representing the state of the Sprite. Use this to serialize your sprites / game objects, maybe to save in local storage or on a server jaws.game_states.Edit uses this to export all edited objects.

Classes

Class jaws.Sprite

Method Summary

Class Detail

Field Detail

Method Detail