Properties

Controller Properties

For the local scene displayed on the controller.

name default description
background.fill #000 color of the background. Default is black. Only applicable if image is not set.
background.image image filename of the background. Default is no image. If set then the fill color is ignored.

Player Properties

For player output edge

name default description
edge.stroke #0FF color of the edge (line inbetween touches).
edge.touch.stroke #0FF color of the touch border.
edge.touch.fill #000 color of the touch.
edge.touch.texture image filename (PNG with Alpha, JPEG)
edge.touch.radius 15 radius of the touch.
edge.lineWidth 1 border linewidth of the touch.

For player output disc

name default description
disc.mass 0.1
disc.friction 1
disc.elasticity 1
disc.lineWidth 2 border linewidth of the disc.
disc.stroke #0FF
disc.fill #000
disc.texture image filename (PNG with Alpha, JPEG)
disc.radius 15

Scene Properties

name default description
gravity.x 0 horizontal (along x-axis) force of gravity in m/s2. Positive means to the right of the world.
gravity.y 0 vertical (along y-axis) force of gravity in m/s2. Positive means to the bottom of the world.
viewport.width 1920 width of the world. May match the width of a cinema view.
viewport.height 1080 height of the world. May match the height of a cinema view.
background.fill #000 color of the background. Default is black. Only applicable if image is not set.
background.image local image filename or remote url of the background. Default is no image. If set then the fill color is ignored. The image must be in PNG or JPEG format.

Example: changing a setting

UB.scene.set("gravity.y",200);

UB.scene.set("background.fill", "#222");

UB.scene.set("background.image", "images/mybackground.png");

Example: getting the game dimension

/**
Initialze global variables with the current width and height of the cinema.
**/
var W = UB.scene.get("viewport.width");
var H = UB.scene.get("viewport.height");

Sprite properties

Location and orientation

name type description
x num* position x-coordinate
y num position y-coordinate
angle num angle in degrees
id integer if set then do not wait for the actual id to be returned. (optimization)

*num = integer or float number

Motion

name type description
vx num velocity along x-axis
vy num velocity along y-axis
vangle num angular velocity (clockwise is positive)

Geometry

name type description
radius num radius of Circle or Triangle
width num width of Rectangle or Trapezium
height num height of Rectangle or Trapezium (its height is computed if width is given)
ax num x-coordinate of one end of LineSegment
ay num y-coordinate of one end of LineSegment
bx num x-coordinate of the other end of LineSegment
by num y-coordinate of the other end of LineSegment
thickness num thickness and cap radius of LineSegment

Physics

name type description
static boolean if true then forces do not affect its position or orientation. Default is false.
mass num weight of the object in kg. Must be > 0.
elasticity num physical property of the object. Value must be in [0..1]. Default is 1.0 (if mass is set).
friction num physical property of the object. Value must be in [0..1]. Default is 1.0 (if mass is set).

Appearance

name type description
stroke string HTML color for drawing lines. Use the RGBA format, see below. If empty then stroke is removed from the sprite when updating the appearance.
fill string HTML color for painting inside. Use the RGBA format, see below. If empty then fill is removed from the sprite when updating the appearance.
lineWidth int sprites can have a border painted using the stroke value.
texture string Reference to an PNG or JPEG image asset. For Circle and Rectangle only. Can be a relative path inside your project or a full http url. If empty then texture is removed from the sprite when updating the appearance.

Text

name type description
text string plain text to display. Cannot have multiple lines.
font string simplified HTML font description. e.g italic bold 24px Georgia

See also Text properties

RGBA for colors

RGBA describes a color in the components Red,Green,Blue and Alpha. Each component is notated in Hexadecimal. Examples of valid colors are:

example color description
#F00 red This is the short notation.
#FF00FF purple This is the normal notation. No alpha
#00FF000F green Alpha value is 127 with means half transparent. Opaque = 1.

Text properties

Location and orientation

name type description
x num x-coordinate of its position
y num y-coordinate of its position

Appearance

name type description
fill string HTML color for painting inside. Use the RGBA format.
font string simplified HTML font description. e.g italic bold 24px Georgia. If the font name is composed of several words then use the contracted version. E.g. to use a 64 pixel family “OCR A Std”, one specifies “64px OCRAStd”.

Content

name type description
text string plain text to display. Cannot have multiple lines.