Creative Coding through Games and Apps
Unit 1 - Surveying the Landscape
Instructional Day: Unit 1, Lesson 7
Topic Description
In this lesson, students learn about the coordinate system and positioning sprites in
games.
Objectives
Students will be able to:

Plot points on a gaming coordinate system

Identify code used to create and position sprites
Materials and preparation required

Collage Tutorial: http://aka.ms/CollageTutorial

Collage Tutorial Exercise: U1.07_Tutorial_Ex

Mark the Spot!: http://aka.ms/MarkTheSpot

Familiarity with the tutorial and game

Student journals

Headphones for students (recommended)
Outline of the Lesson

Complete the Collage Tutorial (30 minutes)

Mark the Spot! game (15 minutes)

Journal entry (5 minutes)
Student Activities

Complete Collage Tutorial

Play Mark The Spot!

Write in journals
Teaching/Learning Strategies

Complete the Collage Tutorial (30 minutes)
 Distribute the Collage Tutorial Exercise (U1.07_Tutorial_Ex).
 Direct students to sign in to their TouchDevelop accounts and open
Collage Tutorial. http://aka.ms/CollageTutorial
U1.07_Lesson page 1
Unit 1 Lesson 7
 Review the Touch Development environment to help students settle
into the task of the tutorial as needed. Direct students to watch the
Welcome to TouchDevelop video, if necessary
(http://aka.ms/WelcomeToTouchDevelop).
 Students complete the tutorial and exercise.
o Students should take their time and pay close attention to the
content in the instructional videos. They will need these skills for
their independent collage project. Rushing through will guarantee
the need to repeat the tutorial.
o Discuss the exercise questions.

Mark the Spot! game (15 minutes)
 Direct students to the Mark the Spot! game.
http://aka.ms/MarkTheSpot
 They should run the program—not edit it.
1. Goal: Tap or click at the indicated point. Students will need to
draw on their understanding of the coordinate system from
Collage Tutorial.
2. 10 correct guesses wins. 3 misses loses.
3. Students can play again by selecting the Play button in the upper
left corner of the screen.
 If there is time, guide students to complete the Extension activity
below.

Journal entry (5 minutes)
 How is the TouchDevelop coordinate system similar and different
from the coordinate systems seen in the past (e.g., the coordinate
system in math class)?
Additional Resources
To learn more about TouchDevelop visit:

Birth of Bot provides a lengthy overview of programming in TouchDevelop.
http://www.microsoftvirtualacademy.com/training-courses/codexist-thebirth-of-bot

Bot Levels Up builds on Birth of Bot.
http://www.microsoftvirtualacademy.com/training-courses/learn-to-codewith-codexist-bot-levels-up

Revisit the TouchDevelop environment with Welcome to TouchDevelop
video. http://aka.ms/WelcomeToTouchDevelop
U1.07_Lesson page 2
Unit 1 Lesson 7
Extensions

Instruct students to find the Mark the Spot! script in the my scripts section of
the TouchDevelop environment
 If student are logged in when opening/running Mark the Spot!, the
script should be in the my scripts list. Otherwise, they may have to
sign in to TouchDevelop and go to http://aka.ms/MarkTheSpot again.

Students inspect the code for the script by selecting edit.

With a partner, identify the following:
 Code responsible for providing start up instructions
 Code responsible for scoring
 Code responsible for removing a life
 Code responsible for responding to a tap on the board
 Code responsible for determining if you have won
Tips

It is tempting for students to quickly go through the tutorials
without really processing the information and learning from the
experience. Monitor students as they work. Make sure students
are paying attention to the instructional videos. Stop their work
to ask them about what they are learning.

Complete Collage Tutorial on your own before class.

Play the Mark the Spot! game on your own before class.
U1.07_Lesson page 3
Unit 1 Lesson 7
KEY
Unit 1 Lesson 7: Collage Tutorial Exercise
Directions
Answer the questions below while working on or after you finish the tutorial.
1. What is a collage?
Answers will vary. In general, a collage is an artistic collection of images or other
art forms
2. What is a sprite?
Images used in games and other programs that can be moved and changed
3. What is a pixel?
A tiny dot that makes up the screen in games and applications
4. Consider the following code:
sprite := board->create picture(mypicture)
If the rectangle below represents a board that is 800 pixels wide and 400 pixels
tall, place an X approximately where the sprite is placed. Explain why the sprite is
placed there.
X
By default, the position of an image is set to the center of the screen.
U1.07_Lesson page 4
Unit 1 Lesson 7
5. Consider the following code:
sprite := board->create picture(mypicture)
sprite->set x(100)
If the rectangle below represents a board that is 800 pixels wide and 400
pixels tall, place an X approximately where the sprite is placed. Explain why the
sprite is placed there.
x
The image would be at the halfway point vertically, but about 1/8 of the way
across the X axis.
6. Consider the following code:
sprite := board->create picture(mypicture)
sprite->set pos(700, 300)
If the rectangle below represents a board that is 800 pixels wide and 400
pixels tall, place an X approximately where the sprite is placed. Explain why
the sprite is placed there.
x
The image would be about 7/8 of the way across the screen on the X axis and
3/4 the way down the Y axis.
7. Suppose you place a sprite that is 100 pixels wide and 300 pixels
tall on the screen. After you use sprite->set width(50) to adjust
the size of the sprite, what are the dimensions of the sprite?
Explain your answer.
Width: 50
Height: 150
8. What is a text sprite? How is it different from a picture sprite?
Both are objects that appear on the screen and can be manipulated and moved
around. Text sprites hold words instead of images.
U1.07_Lesson page 5