Presentation is loading. Please wait.

Presentation is loading. Please wait.

Touchdevelop api api board physics engine + graphics Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including.

Similar presentations


Presentation on theme: "Touchdevelop api api board physics engine + graphics Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including."— Presentation transcript:

1 touchdevelop api 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 touchdevelop api board o sprite-based o objects have speed, gravity, friction (physics engine) o game loop (timer event) o touch events on sprites ☁

3 touchdevelop api examples o Missile defence ☁ o BreakIt! (written by a user) ☁ o … (many more games written by users)

4 touchdevelop api coordinates and units o 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 X: 480 pixel Y: (up to) 800 pixel (0,0) (240,400) (480,800)

5 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/second 2

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

7 touchdevelop api board apis o Board→set background Sets the background color Board→set background o Board→set background picture Sets the background picture Board→set background picture o Board→set background camera Sets the background camera Board→set background camera

8 touchdevelop api board apis o Board→create text Create a new text sprite. Board→create text o Board→create rectangle Create a new rectangle sprite. Board→create rectangle o Board→create ellipse Create a new ellipse sprite. Board→create ellipse o Board→create picture Create a new picture sprite. Board→create picture o Board→create sprite set Create a new collection for sprites. Board→create sprite set o Board→create boundary Create walls around the board at the given distance. Board→create boundary o Board→create obstacle Create a line obstacle with elasticity (from sticky to complete bounce) Board→create obstacle o Board→create anchor Create an anchor sprite. Board→create anchor o Board→create spring Create a spring between sprites Board→create spring

9 touchdevelop api demo/exercise: static layout 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 X: 480 pixel ellipse +(20,20) ☀ tip: always sketch on paper Y: (up to) 800 pixel (0,0)

10 touchdevelop api create ellipse create ellipse(w, h) o w is width of enclosing rectangle o h is height w h

11 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/seconds 2 Board→set gravity o sprites are affected when Board→evolve is calledBoard→evolve o typical use: var p := senses→acceleration quick→scale(1000) board→set gravity(p→x, p→y)

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

13 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 boardBoard→create boundary o use Board→create obstacle(x,y,w,h,elasticity) to create line obstacle with elasticity:Board→create obstacle 1 means the entire impulse is maintained 0 means full absorption of the impulse (a sprite will stick to the wall).

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

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

16 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

17 touchdevelop api friction o without friction, ball doesn’t slow down o 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)

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

19 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

20 touchdevelop api 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 touchdevelop api touch input o add event handler, for example: event tap board: board(x, y) if y > 400 then phone→vibrate(0.05)

22 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

23 touchdevelop api sprite properties o 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 y o rotation (angular speed in degrees/second), friction, width, height, color, text, elasticity o visibility: is visible/hide/show o opacity: 0 (transparent), to 1 (opaque)

24 touchdevelop api exercises ►add picture sprite ►add text sprite

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

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

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

28 touchdevelop api examples o counter ☁ o break countdown ☁ o turtle ☁ o maze ☁ o juggler ☁

29 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


Download ppt "Touchdevelop api api board physics engine + graphics Disclaimer: This document is provided “as-is”. Information and views expressed in this document, including."

Similar presentations


Ads by Google