1. physics engine + graphics
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.

2. board
sprite-based
objects have speed, gravity, friction (physics engine)
game loop (timer event)
touch events on sprites ☁

3. examples Missile defence ☁ http://touchdevelop.com/ecvs
BreakIt! (written by a user) ☁
… (many more games written by users)

4. coordinates and units positions are based on pixels
X: 480 pixel
(0,0)
positions are based on pixels
Windows Phone 7 platform mandates 480x800 screen resolution
origin (0, 0) is top left corner
extent (480,800) is just outside of bottom right corner
(240,400)
Y: (up to) 800 pixel
(480,800)

5. coordinates and units
sprite positions refer to center of sprite (makes rotation easy)
speed measured in pixels/second
acceleration measured in pixels/second2

6. board apis Media→create board Creates a new game board 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

7. board apis Board→set background Sets the background color
Board→set background picture Sets the background picture
Board→set background camera Sets the background camera

8. board apis 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.
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

9. demo/exercise: static layout
X: 480 pixel
(0,0)
var board: Board action main ◳board := media→create full board ◳board→create ellipse(20,20) ◳board→post to wall run script to see static layout
Y: (up to) 800 pixel
ellipse +(20,20)
☀ tip: always sketch on paper

10. create ellipse w h create ellipse(w, h)
w is width of enclosing rectangle
h is height w h

11. gravity gravity is property of board
Board→set gravity sets the uniform acceleration vector for objects on the board to pixels/seconds2
sprites are affected when Board→evolve is called
typical use:
var p := senses→acceleration quick→scale(1000)
◳board→set gravity(p→x, p→y)

12. demo/exercise: gravity
X: 480 pixel
(0,0)
var 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
Y: (up to) 800 pixel
ellipse +(20,20)
tilt phone to change gravity
Important! Moves things around according to speed/gravity/friction/…
Important! Makes changes visible

13. obstacles
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
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).

14. demo/exercise: boundary
X: 480 pixel
(0,0)
var 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
Y: (up to) 800 pixel
ellipse +(20,20)
tilt phone to change gravity
Important! Moves things around according to speed/gravity/friction/…
Important! Makes changes visible

15. demo/exercise: obstacle
X: 480 pixel
(0,0)
var 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
(100,100)
obstacle +(50,50)
Y: (up to) 800 pixel
ellipse +(20,20)
tilt phone to change gravity
Important! Moves things around according to speed/gravity/friction/…
Important! Makes changes visible

16. create obstacle obstacle (x, y) h w (x, y) is upper left corner
create obstacle(x, y, w, h, elasticity)
(x, y) is upper left corner
obstacle is a straight line
(w, h) is size of bounding rectangle
(x, y)
obstacle h w

17. friction without friction, ball doesn’t slow down set friction:
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)

18. demo/exercise: friction
X: 480 pixel
(0,0)
var 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)
(100,100)
obstacle +(50,50)
Y: (up to) 800 pixel
ellipse +(20,20)

19. springs, anchors
a spring lets 2 sprites accelerate towards each other (without friction, those sprites will oscillate indefinitely)
an anchor has infinite friction

20. demo/exercise: springs, anchors
action main ◳board := media→create full board var 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

21. touch input add event handler, for example:
event tap board: board(x, y)
if y > 400 then
phone→vibrate(0.05)

22. sprites sprites are movable objects
use to visually represent parts of a game, such as your space ship, a bullet, a monster, etc.
create new sprites through the board API
change its position, speed, etc

23. sprite properties position: x, y speed: speed x, speed y
set x(x), set y(y), set pos(x, y)
speed: speed x, speed 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)

24. exercises
►add picture sprite ►add text sprite

25. sprite helper functions
s→move(x, y) same as s→pos(s→x + x, s→y + y)
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)
s→speed towards(s’, f) puts sprite on a trajectory towards the other sprite with a speed vector of the given magnitude.

26. sprite overlap Sprite→overlaps with Do the sprites overlap
Sprite→overlap with Returns the subset of sprites in the given set that overlap with sprite

27. sprite set
Board→create sprite set Create a new collection for sprites.
add and remove sprites from set, enumerate over sprites in set (“for each”), test if a sprite is in a given set, etc.

28. examples counter ☁ http://touchdevelop.com/cvby
break countdown ☁
turtle ☁
maze ☁
juggler ☁

29. 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