api
board
physics 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
board
o
sprite-based
o
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
examples
o
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 units
(0,0)
positions are based on
pixels
o
Windows Phone 7 platform
mandates 480x800 screen
resolution
o
origin (0, 0) is top left corner
o
extent (480,800) is just
outside of bottom right
corner
Y: (up to) 800 pixel
o
X: 480 pixel
(240,400)
(480,800)
touchdevelop api
coordinates and units
o
sprite positions refer to center of sprite
(makes rotation easy)
o
speed measured in pixels/second
o
acceleration measured in pixels/second2
touchdevelop api
board apis
o
Media→create board
Creates a new game board
o
typical use:
action main
◳board := media→create full board
... create sprites ...
◳board→post to wall
event game loop
... move objects around ...
◳board→update on wall
Important! Makes changes visible
touchdevelop api
board apis
o
Board→set background
Sets the background color
o
Board→set background picture
Sets the background picture
o
Board→set background camera
Sets the background camera
touchdevelop api
board apis
o
o
o
o
o
Board→create text
Create a new text sprite.
Board→create rectangle
Create a new rectangle
sprite.
Board→create ellipse
Create a new ellipse sprite.
Board→create picture
Create a new picture sprite.
Board→create sprite set
Create a new collection for
sprites.
o
o
o
o
Board→create boundary
Create walls around the
board at the given
distance.
Board→create obstacle
Create a line obstacle with
elasticity (from sticky to
complete bounce)
Board→create anchor
Create an anchor sprite.
Board→create spring
Create a spring between
sprites
touchdevelop api
demo/exercise: static
layout
(0,0)
X: 480 pixel
var board: Board
action main
◳board→create ellipse(20,20)
◳board→post to wall
run script to see static layout
Y: (up to) 800 pixel
◳board := media→create full board
ellipse
+(20,20)
☀ tip: always sketch on paper
touchdevelop api
create ellipse
create ellipse(w, h)
o
w is width of
enclosing rectangle
o
h is height
w
h
touchdevelop api
gravity
o
gravity is property of board
o
Board→set gravity
sets the uniform acceleration vector for objects on the
board to pixels/seconds2
o
sprites are affected when Board→evolve is called
o
typical use:
var p := senses→acceleration quick→scale(1000)
◳board→set gravity(p→x, p→y)
touchdevelop api
demo/exercise:
gravity
(0,0)
X: 480 pixel
var board: Board
action main
◳board→create ellipse(20,20)
◳board→post to wall
Y: (up to) 800 pixel
◳board := media→create full board
ellipse
+(20,20)
event game loop
var p := senses→acceleration quick→scale(1000)
tilt phone to change gravity
◳board→set gravity(p→x, p→y)
Important! Moves things around according
◳board→evolve
to speed/gravity/friction/…
◳board→update on wall
Important! Makes changes visible
touchdevelop api
obstacles
o
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: boundary
(0,0)
X: 480 pixel
var board: Board
action main
◳board→create boundary(0)
◳board→create ellipse(20,20)
◳board→post to wall
Y: (up to) 800 pixel
◳board := media→create full board
ellipse
+(20,20)
event game loop
var p := senses→acceleration quick→scale(1000)
◳board→set gravity(p→x, p→y)
◳board→evolve
◳board→update on wall
tilt phone to change gravity
Important! Moves things around according
to speed/gravity/friction/…
Important! Makes changes visible
touchdevelop api
demo/exercise:
obstacle
(0,0)
var board: Board
action main
◳board→create boundary(0)
◳board→create obstacle(100,100,50,50,1)
◳board→create ellipse(20,20)
◳board→post to wall
Y: (up to) 800 pixel
◳board := media→create full board
X: 480 pixel
(100,100)
obstacle +(50,50)
ellipse
+(20,20)
event game loop
var p := senses→acceleration quick→scale(1000)
◳board→set gravity(p→x, p→y)
◳board→evolve
◳board→update on wall
tilt phone to change gravity
Important! Moves things around according
to speed/gravity/friction/…
Important! Makes changes visible
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
(x, y)
h
w
touchdevelop api
friction
o
without friction, ball doesn’t slow down
o
set friction:
o
o
•
default setting for entire board
•
custom setting for each sprite
“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
example: board→set friction(0.01)
touchdevelop api
demo/exercise:
friction
(0,0)
var board: Board
action main
◳board→create boundary(0)
◳board→create obstacle(100,100,50,50,1)
var ball := ◳board→create ellipse(20,20)
ball→set friction(0.05)
Y: (up to) 800 pixel
◳board := media→create full board
X: 480 pixel
(100,100)
obstacle +(50,50)
ellipse
+(20,20)
◳board→post to wall
(new code in bold)
touchdevelop api
springs, anchors
o
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,
anchors
action main
event gameloop()
◳board := media→create full board
◳board→evolve
var sprite := board→create ellipse(20,20)
◳board→update on wall
var anchor := board→create anchor(10,10)
sprite→move(100,0)
◳board→create spring(sprite, anchor, 100)
sprite→set speed y(100)
This code
◳board→post to wall
produces a sprite
that will circle the
center of the board
touchdevelop api
touch input
o
add event handler, for example:
event tap board: board(x, y)
if y > 400 then
phone→vibrate(0.05)
touchdevelop api
sprites
o
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 properties
o
position: x, y
•
o
speed: speed x, speed y
•
o
o
o
o
set x(x), set y(y), set pos(x, y)
set speed x(x), set speed y(y), set speed(x, y)
acceleration: acc x, acc y
rotation (angular speed in degrees/second),
friction, width, height, color, text, elasticity
visibility: is visible/hide/show
opacity: 0 (transparent), to 1 (opaque)
touchdevelop api
exercises
►add picture sprite
►add text sprite
touchdevelop api
sprite helper
functions
o
s→move(x, y)
same as
s→pos(s→x + x, s→y + y)
o
s→move towards(s’, f)
same as
s→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 overlap
o
Sprite→overlaps with
Do the sprites overlap
o
Sprite→overlap with
Returns the subset of sprites in the given set
that overlap with sprite
touchdevelop api
sprite set
o
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
examples
o
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
touchdevelop api