TouchDevelop_Tutorial_20150326_KevLai

TouchDevelop Tutorial by Kevin Lai

Transcript

1. TouchDevelop Tutorial Kev Lai
2. Who am I? • Kevin Lai • Studying Computer Science in CUHK (yr.3) • Intern at ASM Pacific • Coding Trainer of Microsoft • Total sucker of McDonald’s and other garbage food • Bragging right: Once scoffed 2 bags of gummy bears
3. What the heck is TouchDevelop? • online IDE • multi-platform • simple yet complete programming language
4. Our goal today http://tdev.ly/yaxsc
5. A little mindmap Game Character Game board Banana Size Size Size Gravity Jetpack Score Life Death Position
6. The first step binds one to the second 1. Open up your internet browser and go to this website: http://www.touchdevelop.com/ 2. Click "Launch TouchDevelop" and sign in
7. The first step binds one to the second
8. It’s a setup! 1. Click "Create Script" and choose "Blank"
9. It’s a setup! 2. Give your script a name and make it count
10. It’s a setup! 4. The bottom area is where you type your code.
11. Here comes the real deal! 1. Let’s declare your very first variable, the board!
12. Here comes the real deal! Oh shoot! We have to add something to make this line of code complete...
13. Don’t worry, that’s what I’m here for. 2. Let’s set the size of the game board. 3. But first, let me introduce our new best friend here, the search engine 4. Click “Dismiss” and this page should show up 5. Click the “plus sign”.
14. Where’s the library? 6. This page should pop up 7. Type “library”, duh...
15. Where? Where? Where? 6. You should be directed to results similar to this 7. Then click “game”, duh...
16. One thing leads to another 8. Done
17. One thing leads to another 9. Type “game”
18. One thing leads to another 10. And then type this line of code, which will define the size of the game board by (width, height)
19. Achievement unlocked! 11. Change the (0, 0) to (1024, 768) 12. And bam! You just wrote your first line of code!
20. Your first run 1. Click run, and you will see an almost blank screen.
21. Start screen 1. Write a new line of code by typing “game- >splash text…”
22. Start screen 2. Let’s modify the stuff in the brackets. a. Message on screen b. Time (T-minus) c. Foreground color d. Backgroun color e. Done (don’t change that)
23. Start screen 3. Then, inside the “done” brackets, insert “game->set background scene...”
24. Start screen 4. Now it’s time to add the background picture. Find whatever you want and FIND! THAT! PIC!
25. Start screen (Pic Upload) 4. Go back to this page and click the “plus sign”
26. Start screen (Pic Upload) 5. On this page, search for “picture”
27. Start screen (Pic Upload) 6. Upload it and you are done.
28. Start screen 5. Done.
29. Start screen 6. Here’s my background!
30. Character 1. Declare another variable, let’s say its name is “guy”. 2. Give him/her, or whatever it is, a face, by typing “board->create picture…” and adding another picture
31. Character 3. And voila! 4. But this buddy is little big, isn’t he? And we would also want to adjust his position.
32. Character 5. Add “guy->width(100)” to set his width to be 100 pixels, 6. And add “guy->set pos(100,300)” to set his position at 100 pixels along the x-axis and 300 pixels along the y-axis
33. And God said,”Let there be life!” 7. Let’s give this little guy the gift of life. 8. Type “game->set life (#)” and # is the no. of lives you wanna give him.
34. And Sheldon Cooper said, “Oh gravity, thou art a heartless b****!” 9. Now we shall make this little guy experience the excitement of free falling, by typing “guy->set acceleration y(100)”
35. Jetpack 1. What’s the point of wearing a jetpack if it doesn’t work? 2. Let’s give it some fuel by clicking the mouse 3. But how? 4. Now we need to write some code to handle a mouse click.
36. Jetpack 5. Let’s see if there’s anything useful, how about a library? 6. Click “Dismiss” again and go to this page. 7. Click the “plus sign”
37. Jetpack 7. This time we search for “gamepad”
38. Jetpack 8. Type “gamepad->on button pressed…”, easy peasy.
39. Jetpack 9. Now we need to write code and tell the program what to do when there’s a mouse click, which is making the guy go up, of course. 10. Type “guy->set speed y (-100)”
40. Jetpack 11. It’s working
41. Jetpack 11. It’s working
42. Die! Die! Die! 1. The Jetpack Dude can die in these 2 conditions: a. Flying too high b. Flying too low
43. Die! Die! Die! 2. Type “guy->on every frame…” so we can check the Dude’s condition every second.
44. Die! Die! Die! 3. So we can kill him when he violates those 2 conditions by typing “if (guy->y > board- >height or guy->y <0...”
45. Hang in there, we’re close!
46. Banana 1. Declare another variable “banana” 2. Set the width like last time 3. Set the banana to be at the end of the screen 4. Let the banana randomly choose its height 5. Make it move like it’s flying to the left
47. Banana
48. Final piece: How I Eat Your Banana http://ak-hdl.buzzfed.com/static/2014- 01/enhanced/webdr07/4/21/anigif_enhanced-buzz- 4112-1388890060-4.gif
49. Final piece: How I Eat Your Banana 1. There are 2 conditions we need to handle: a. What happens if the Dude has eaten the banana b. What happens when he can’t
50. Final piece: How I Eat Your Banana 1. If he can eat the banana, 5 points to Gryffindor! 2. If he can’t, he loses a life!
51. Last but not least, publish it! 1. Go back to this page and click “publish”
52. Last but not least, publish it! 2.
53. For people who wanna know more, or want this ppt My email address: kevlai@cuhk.edu.hk or 1155031274@link.cuhk.edu.hk
54. The end. Thank you!