Slide 1
Slide 1 text
TouchDevelop Tutorial
Kev Lai
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
What the heck is TouchDevelop?
● online IDE
● multi-platform
● simple yet complete programming language
Slide 4
Slide 4 text
Our goal today
http://tdev.ly/yaxsc
Slide 5
Slide 5 text
A little mindmap
Game
Character
Game
board
Banana
Size
Size
Size
Gravity
Jetpack
Score
Life
Death
Position
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
The first step binds one to the second
Slide 8
Slide 8 text
It’s a setup!
1. Click "Create Script"
and choose "Blank"
Slide 9
Slide 9 text
It’s a setup!
2. Give your script a
name and make it
count
Slide 10
Slide 10 text
It’s a setup!
4. The bottom area is where you type your
code.
Slide 11
Slide 11 text
Here comes the real deal!
1. Let’s declare your
very first variable,
the board!
Slide 12
Slide 12 text
Here comes the real deal!
Oh shoot! We have to add something to make
this line of code complete...
Slide 13
Slide 13 text
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”.
Slide 14
Slide 14 text
Where’s the library?
6. This page should
pop up
7. Type “library”,
duh...
Slide 15
Slide 15 text
Where? Where? Where?
6. You should be
directed to results
similar to this
7. Then click “game”,
duh...
Slide 16
Slide 16 text
One thing leads to another
8. Done
Slide 17
Slide 17 text
One thing leads to another
9. Type “game”
Slide 18
Slide 18 text
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)
Slide 19
Slide 19 text
Achievement unlocked!
11. Change the (0, 0) to
(1024, 768)
12. And bam! You just
wrote your first line
of code!
Slide 20
Slide 20 text
Your first run
1. Click run, and you will see
an almost blank screen.
Slide 21
Slide 21 text
Start screen
1. Write a new line of code
by typing “game-
>splash text…”
Slide 22
Slide 22 text
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)
Slide 23
Slide 23 text
Start screen
3. Then, inside the “done” brackets, insert
“game->set background scene...”
Slide 24
Slide 24 text
Start screen
4. Now it’s time to add the background picture. Find
whatever you want and FIND! THAT! PIC!
Slide 25
Slide 25 text
Start screen (Pic Upload)
4. Go back to this page and click the “plus sign”
Slide 26
Slide 26 text
Start screen (Pic Upload)
5. On this page, search for “picture”
Slide 27
Slide 27 text
Start screen (Pic Upload)
6. Upload it and you are done.
Slide 28
Slide 28 text
Start screen
5. Done.
Slide 29
Slide 29 text
Start screen
6. Here’s my background!
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Character
3. And voila!
4. But this buddy is little
big, isn’t he? And we
would also want to adjust
his position.
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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.
Slide 34
Slide 34 text
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)”
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
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”
Slide 37
Slide 37 text
Jetpack
7. This time we search for
“gamepad”
Slide 38
Slide 38 text
Jetpack
8. Type “gamepad->on
button pressed…”,
easy peasy.
Slide 39
Slide 39 text
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)”
Slide 40
Slide 40 text
Jetpack
11. It’s working
Slide 41
Slide 41 text
Jetpack
11. It’s working
Slide 42
Slide 42 text
Die! Die! Die!
1. The Jetpack Dude can
die in these 2
conditions:
a. Flying too high
b. Flying too low
Slide 43
Slide 43 text
Die! Die! Die!
2. Type “guy->on
every frame…” so
we can check the
Dude’s condition
every second.
Slide 44
Slide 44 text
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...”
Slide 45
Slide 45 text
Hang in there, we’re close!
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
Banana
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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!
Slide 51
Slide 51 text
Last but not least, publish it!
1. Go back to this page and click “publish”
Slide 52
Slide 52 text
Last but not least, publish it!
2.
Slide 53
Slide 53 text
For people who wanna know more, or want this ppt
My email address:
[email protected]
or
[email protected]
Slide 54
Slide 54 text
The end.
Thank you!