touchdevelop api api board physics engine + graphics disclaimer: this document is provided...

touchdevelop api

apiboardphysics engine + graphics

Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and Windows Live are trademarks of the Microsoft group of companies. All other trademarks are property of their respective owners.

touchdevelop api

boardo sprite-basedo objects have speed, gravity,

friction (physics engine)o game loop (timer event)o touch events on sprites

☁ http://www.touchdevelop.com/Documents/gameboard.pdf

touchdevelop api

exampleso Missile defence

☁ http://touchdevelop.com/ecvs o BreakIt! (written by a user)

☁ http://touchdevelop.com/xkmz o … (many more games written by users)

touchdevelop api

coordinates and unitso positions are based on pixelso Windows Phone 7 platform

mandates 480x800 screen resolution

o origin (0, 0) is top left cornero extent (480,800) is just

outside of bottom right corner

X: 480 pixel

Y: (up to

) 800 p

ixel

(0,0)

(240,400)

(480,800)

touchdevelop api

coordinates and unitso sprite positions refer to center of

sprite (makes rotation easy)o speed measured in pixels/secondo acceleration measured in

pixels/second2

touchdevelop api

board apiso Media→create board

Creates a new game boardo typical use:

action main◳board := media→create full board

... create sprites ...

◳board→post to wall

event game loop... move objects around ...

◳board→update on wallImportant! Makes changes visible

touchdevelop api

board apiso Board→set background

Sets the background coloro Board→set background picture

Sets the background pictureo Board→set background camera

Sets the background camera

touchdevelop api

board apiso Board→create text

Create a new text sprite.o Board→create rectangle

Create a new rectangle sprite.

o Board→create ellipseCreate a new ellipse sprite.

o Board→create pictureCreate a new picture sprite.

o Board→create sprite setCreate a new collection for sprites.

o Board→create boundaryCreate walls around the board at the given distance.

o Board→create obstacleCreate a line obstacle with elasticity (from sticky to complete bounce)

o Board→create anchorCreate an anchor sprite.

o Board→create springCreate a spring between sprites

touchdevelop api

demo/exercise: static layoutvar board: Board

action main

◳board := media→create full board

◳board→create ellipse(20,20)

◳board→post to wall

run script to see static layout

X: 480 pixel

ellipse +(20,20)

☀ tip: always sketch on paper

Y: (up to

) 800 p

ixel

(0,0)

touchdevelop api

create ellipse

create ellipse(w, h)o w is width of

enclosing rectangle

o h is height

w

h

touchdevelop api

gravityo gravity is property of boardo Board→set gravity

sets the uniform acceleration vector for objects on the board to pixels/seconds2

o sprites are affected when Board→evolve is calledo typical use:

var p := senses→acceleration quick→scale(1000)

◳board→set gravity(p→x, p→y)

touchdevelop api

demo/exercise: gravityvar board: Board

action main

◳board := media→create full board

◳board→create ellipse(20,20)

◳board→post to wall

event game loop

var p := senses→acceleration quick→scale(1000)

◳board→set gravity(p→x, p→y)

◳board→evolve

◳board→update on wall

ellipse +(20,20)

tilt phone to change gravity

X: 480 pixel

Y: (up to

) 800 p

ixel

(0,0)

Important! Makes changes visible

Important! Moves things around according to speed/gravity/friction/…

touchdevelop api

obstacleso by default, board is open, has no boundary;

objects moving off the visual part of the board will simply continue moving away. Use Board→create boundary to create reflecting walls around the board

o use Board→create obstacle(x,y,w,h,elasticity) to create line obstacle with elasticity:

• 1 means the entire impulse is maintained

• 0 means full absorption of the impulse (a sprite will stick to the wall).

touchdevelop api

demo/exercise: boundaryvar board: Board

action main

◳board := media→create full board

◳board→create boundary(0)

◳board→create ellipse(20,20)

◳board→post to wall

event game loop

var p := senses→acceleration quick→scale(1000)

◳board→set gravity(p→x, p→y)

◳board→evolve

◳board→update on wall

ellipse +(20,20)

tilt phone to change gravity

X: 480 pixel

Y: (up to

) 800 p

ixel

(0,0)

Important! Makes changes visible

Important! Moves things around according to speed/gravity/friction/…

touchdevelop api

demo/exercise: obstaclevar board: Board

action main

◳board := media→create full board

◳board→create boundary(0)

◳board→create obstacle(100,100,50,50,1)

◳board→create ellipse(20,20)

◳board→post to wall

event game loop

var p := senses→acceleration quick→scale(1000)

◳board→set gravity(p→x, p→y)

◳board→evolve

◳board→update on wall

obstacle +(50,50)

ellipse +(20,20)

(100,100)

tilt phone to change gravity

X: 480 pixel

Y: (up to

) 800 p

ixel

(0,0)

Important! Makes changes visible

Important! Moves things around according to speed/gravity/friction/…

touchdevelop api

create obstacle

create obstacle(x, y, w, h, elasticity)

o (x, y) is upper left corner

o obstacle is a straight line

o (w, h) is size of bounding rectangle

w

h

(x, y)

obstacle

touchdevelop api

frictiono without friction, ball doesn’t slow downo set friction:

• default setting for entire board

• custom setting for each sprite

o “A friction is the fraction of the forward speed that is experienced as a backwards force.”• friction of 0 corresponds to no friction at all

• friction of 1 means the sprite will not move at all

o example: board→set friction(0.01)

touchdevelop api

demo/exercise: frictionvar board: Board

action main

◳board := media→create full board

◳board→create boundary(0)

◳board→create obstacle(100,100,50,50,1)

var ball := ◳board→create ellipse(20,20)

ball→set friction(0.05)

◳board→post to wall

(new code in bold)

obstacle +(50,50)

ellipse +(20,20)

(100,100)

X: 480 pixel

Y: (up to

) 800 p

ixel

(0,0)

touchdevelop api

springs, anchorso a spring lets 2 sprites accelerate towards each

other(without friction, those sprites will oscillate indefinitely)

o an anchor has infinite friction

touchdevelop api

demo/exercise: springs, anchorsaction main

◳board := media→create full boardvar sprite := board→create ellipse(20,20)var anchor := board→create anchor(10,10)sprite→move(100,0)◳board→create spring(sprite, anchor, 100)sprite→set speed y(100)◳board→post to wall

event gameloop()◳board→evolve◳board→update on wall

This code produces a sprite that will circle the center of the board

touchdevelop api

touch inputo add event handler, for example:event tap board: board(x, y)

if y > 400 then

phone→vibrate(0.05)

touchdevelop api

spriteso sprites are movable objects o use to visually represent parts of a

game, such as your space ship, a bullet, a monster, etc.

o create new sprites through the board API

o change its position, speed, etc

touchdevelop api

sprite propertieso position: x, y

• set x(x), set y(y), set pos(x, y)

o speed: speed x, speed y• set speed x(x), set speed y(y), set speed(x, y)

o acceleration: acc x, acc yo rotation (angular speed in degrees/second),

friction, width, height, color, text, elasticityo visibility: is visible/hide/showo opacity: 0 (transparent), to 1 (opaque)

touchdevelop api

exercises►add picture sprite

►add text sprite

touchdevelop api

sprite helper functionso s→move(x, y) same as

s→pos(s→x + x, s→y + y)

o s→move towards(s’, f) same ass→pos(s→x+f(s’→x-s→x)f, s→y+f(s’→y-s→y)f)

o s→speed towards(s’, f)puts sprite on a trajectory towards the other sprite with a speed vector of the given magnitude.

touchdevelop api

sprite overlapo Sprite→overlaps with

Do the sprites overlapo Sprite→overlap with

Returns the subset of sprites in the given set that overlap with sprite

touchdevelop api

sprite seto Board→create sprite set

Create a new collection for sprites.o add and remove sprites from set,

enumerate over sprites in set (“for each”), test if a sprite is in a given set, etc.

touchdevelop api

exampleso counter

☁ http://touchdevelop.com/cvby o break countdown

☁ http://touchdevelop.com/khida o turtle

☁ http://touchdevelop.com/neyh o maze

☁ http://touchdevelop.com/oces o juggler

☁ http://touchdevelop.com/fvmq

touchdevelop api

homework►change example, so that it creates…

• record sound in main, play when ball is near boundary

• 5 balls with random sizes, colors, frictions

• 3 obstacles with random position/sizes

►build a game with board, accelerometer• also consider reacting to touch