Interaction

Most games are created to interact with. Players will use their mobile device to control what is happening in the game. Input is received from the controller. The controller will display feedback. The game receives these input events. The cinema will display feedback and the game can respond to these events.

Controller Inputs

Inputs

name touch count description
draw 1 free drawing of shapes such as Circle, Triangle and Rectangle.
edge 2 moves an edge with two circles for each finger.
touch 1 send touch events for one finger only. No draw feedback.
disc 1 moves a disc when touching using one finger.
drag 1 lets you drag and drop shapes (one at a time).

A script can enable an input event generation:

UB.controller(playerID).enableInput("draw");

touch

Event names

A script can enable, listen to and handle the touchEnd the event:

UB.controller(playerID).enableInput("touch");

function handleTouchEnd(event) {
	console.log(event.data.playerID);
}

UB.game.on("touchEnd", handleTouchEnd);

Example event:

{
	"name": "touchEnd",
	"data":{
		"playerID": 0,
		"x" : 20,
		"y" : 24
	}
}

drag

Event names

In your script enable, listen to and handle the dragStart event:

UB.controller(playerID).enableInput("drag");

function handleDragStart(event) {
	console.log(event.data.spriteID);
}	
UB.game.on("dragStart", handleDragStart);	

Example event:

{
	"name": "dragStart",
	"data":{
		"playerID": 0,
		"type": "Circle",
		"layer": 0,
		"spriteID": 42,
		"x" : 80,
		"y" : 33
	}
}

draw

A gesture event is generated when the player draws any of the supported types.

Event names
Gesture type

touch strokes

Data types

Example script:

UB.controller(playerID).enableInput("draw");		
UB.game.on("gesture", function(event) {
	console.log(event.data.type);
	var x = (event.data.left + event.data.right) / 2;
	var y = (event.data.top + event.data.bottom) / 2;
	var w = (event.data.right - event.data.left);
	var h = (event.data.bottom - event.data.top);	
});

Example event:

{
	"name": "gesture",
	"data":{
		"playerID": 1,
		"type": "rectangle",
		"left" : 228,
		"right" : 374,
		"top" : 455,
		"bottom" : 599
	}
}

sprite

The sprite event is generated when the player touches and releases a Sprite. It can be used for GUI elements on the controller, e.g. for menus or other actions.

Event names

Example script:

UB.controller(playerID).enableInput("sprite");		
UB.game.on("spriteReleased", function(event) {
	console.log(event.data.spriteID);	
});

Example event:

{
	"name": "spriteReleased",
	"data":{
		"playerID": 1,
		"type": "Circle",
		"layer": 0,
		"spriteID": 42,
		"x" : 80,
		"y" : 33
	}
}

Game Events

join and leave

These events are triggered when a player or cinema joins or leaves.

In your script, you can enable, listen to and handle the playerJoined the event:

function handlePlayerJoined(event) {
	console.log(event.data.playerID);
}

UB.game.on("playerJoined", handlePlayerJoined);	

Example event

{
	"name":"playerJoined", 
	"data":{"playerID":1}
}

Player Outputs

Outputs

name touch count description
edge 2 moves an edge with two circles for each finger.
disc 1 moves a disc when touching using one finger.
swipe 1 tracks touch movements which are translated to up/down/left/right events.
touch 1 send touch events for one finger only. No draw feedback.

edge

The edge output motion requires two touches. If the player sends two touch events then the game will show 2 circles connected with an edge. The edge sprite will have physical properties such that it can be used to apply forces to other physical sprites. See edge properties

Example

UB.player(playerID).enableOutput("edge");

disc

The disc output motion requires a single touch. If the player send one touch event then the game will show 1 circle sprite, the disc. The disc sprite will have physical properties such that it can be used to apply forces to other physical sprites. See disc properties

Example

UB.player(playerID).enableOutput("disc");

swipe

The swipe output motion requires a single touch. A gesture by the player is translated into one of the swipe events. Event names are:

In your script, you can enable, listen to and handle the swipeUp the event:

UB.player(playerID).enableOutput("swipe");
function handleSwipeUp(event) {
	console.log(event.data.playerID);
}
UB.game.on("swipeUp", handleSwipeUp);

Example event:

{"name":"swipeUp", 
"data": 
	{"playerID":1
	,"dx":-59
	,"dy":-74}
}

The dx and dy values indicate the displacement of the touch between the start and the end of the motion.

touch

The touch output motion requires a single touch. Every state change produces it own event. Event names are:

In your script, you can enable, listen to and handle the touchMoved the event:

UB.player(playerID).enableOutput("touch");	
function handleTouchMove(event) {
	console.log(event.data.playerID);
}	
UB.game.on("touchMove", handleTouchMove);

Example event:

{"name":"touchMove", 
"data": 
	{"playerID":1
	,"x":455
	,"y":483}
}