Sprites

Sprites are graphical objects that can be animated in the game using the API.

Sprites typically have an appearance (color, texture), have geometry (location, sizes) and can have physical properties (mass, elasticity, friction). See Sprite Parameters for the full list of available properties.

The standard Sprite types are:

Circle

Circle

A Circle is defined by its location (x,y) and radius. LineWidth, stroke and fill are appearance properties. With physical properties, a Circle is a moving and colliding shape. Use scene.addCircle to create one.

UB.scene.addCircle(0,{
	x: 100,
	y: 100,
	radius: 40,
	fill: "#0FF",
	stroke: "#FF6",
	lineWidth: 4
});

more Sprites

LineSegment

LineSegment

A LineSegment is defined by two locations a and b and a thickness. Fill is the only appearance property. With physical properties, a LineSegment is a moving and colliding shape. Use scene.addLineSegment to create one.

UB.scene.addLineSegment(0,{
	ax: 10,
	ay: 10,
	bx: 100,
	by: 100,
	thickness: 4,
	fill: "#FF6"
});

more Sprites

Polyline (Polygon)

Polyline

A Polyline is defined by its location (x,y) and a number of relative coordinates. These coordinates are defined relative to the location and must be in clockwise order. The shape of the polyline must be concave. LineWidth, stroke and fill are appearance properties. If the fill property is set then the shape appears as a polygon. With physical properties, a Polyline is a moving and colliding shape. Use scene.addPolyline to create one.

UB.scene.addPolyline(0,{
	x: 100,
	y: 100,
	points: [[0,0],[100,100],[100,0],[0,100]],
	fill: "#0FF",
	stroke: "#FF6",
	lineWidth: 4
});

The property points must be an array of 2-element arrays containing numbers representing the x and y relative coordinates.

more Sprites

Rectangle

Rectangle

A Rectangle is defined by its location (x,y) and dimension (width, height). LineWidth, stroke and fill are appearance properties. With physical properties, a Rectangle is a moving and colliding shape. Use scene.addRectangle to create one.

UB.scene.addRectangle(0,{
	x: 100,
	y: 100,
	width : 80,
	height: 60,
	fill  : "#0FF",
	stroke: "#FF6",
	lineWidth: 4
});

more Sprites

Text

Text

A Text is defined by its location (x,y) and font information. Use scene.addText to create one.

UB.scene.addText(0,{
	x: 100,
	y: 100,
	font : "italic bold 24px Georgia",
	text : "High score"
});

more Sprites

Trapezium

Trapezium

A Trapezium is defined by its location (x,y) and height; the width is computed from the height using the fixed angles of 60 degrees (~ 2.3 * height). LineWidth, stroke and fill are appearance properties. With physical properties, a Trapezium is a moving and colliding shape. Use scene.addTrapezium to create one.

UB.scene.addTrapezium(0,{
	x: 100,
	y: 100,
	height: 60,
	fill: "#0FF",
	stroke: "#FF6",
	lineWidth: 4
});

more Sprites

Triangle

Triangle

A Triangle is defined by its location (x,y) and radius. LineWidth, stroke and fill are appearance properties. With physical properties, a Triangle is a moving and colliding shape. Use game.addTriangle to create one.

UB.scene.addTriangle(0,{
	x: 100,
	y: 100,
	radius: 40,
	fill: "#0FF",
	stroke: "#FF6",
	lineWidth: 4
});

more Sprites