Post on 31-Mar-2015
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