1. ARTDM 170, Week 12:
User Interaction
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170

2. Turn in Homework
• Please put your files in a folder with
your last name and first initial
• Put the folder in my dropbox
• Example:
smith-h
design.jpg

3. Timeline
March April May Last day of class
9 16 23 30 6* 13 20 27 4 11 18 25
Create a project title and description
Present final projects
Paper prototypes (two days)
Design background, characters,
and other game elements
Embed game elements in game symbol
Add movement and keyboard interaction
Add Start and Game Over screens
Add scoring and game over trigger

4. Paper Prototypes

5. Collision Detection

6. hitTestObject sprite1
sprite1.hitTestObject(sprite2) sprite2
• When the bounding
box of one object overlaps
with the bounding box of
another object, a collision is detected
• Use an if() statement to do something with
the collision
if( sprite1.hitTestObject(sprite2) ) {
// collision happened
}

7. hitTestPoint sprite1
sprite1.hitTestPoint(x1, y1, true)
• Check if the edge of a shape is near
a point
• Cannot be used with two shapes,
only a shape and a point
• Can be used with the mouse, using
mouseX and mouseY

8. Collision based on distance
• Detect when two
objects are near each
other sprite1
• Collide when the sprite2
distance between their
registration points is
less than half their
sprite1
combined sizes
sprite2

9. Pythagorean Theorem
C
A
B
• To find the distance between two
points we need the Pythagorean
Theorem
• A2 + B2 = C2

10. Pythagorean Theorem
(x1,y1)
dist
dy
(x1,y2) dx (x2,y2)
• In ActionScript:
dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx*dx + dy*dy);

11. Collision based on distance
sprite1
sprite2
var sizeBetween =
sprite1.width/2 + sprite2.width/2;
if(dist < sizeBetween) {
// collision detected
}

12. Point.distance
• Thereʼs a function for this!
var sizeBetween =
sprite1.width/2 + sprite2.width/2;
if( Point.distance(
new Point(sprite1.x, sprite1.y),
new Point(sprite2.x, sprite2.y)
) < sizeBetween ) {
// collision detected
}

13. Hit the Brick
example

14. Pop the Balloon
example

15. User Interaction
keys and spacebar

16. Listen for Keyboard
stage.addEventListener(
KeyboardEvent.KEY_DOWN,
keyDownFunction);
stage.addEventListener(
KeyboardEvent.KEY_UP,
keyUpFunction);

17. Checking which key
// key pressed down
public function
keyDownFunction(event:KeyboardEvent) {
if(event.keyCode == 37) {
leftArrow = true;
} else if(event.keyCode == 39) {
rightArrow = true;
} else if(event.keyCode == 32) {
jumpUp = true;
}
}

18. Checking which key
// key lifted up
public function
keyUpFunction(event:KeyboardEvent) {
if(event.keyCode == 37) {
leftArrow = false;
} else if(event.keyCode == 39) {
rightArrow = false;
}
}

19. Key codes
• Spacebar 32
• Left arrow 37
• Up arrow 38
• Right arrow 39
• Down arrow 40
More key codes and constants on
Adobeʼs site

20. Moving an object
// move to the left
if (leftArrow) {
myBrick.x -= speed;
}
• This would allow the user to move
the object to the left at a certain
speed every frame.

21. Time-based animation
• Using time is more accurate than frames
• We can capture how much time has
passed and multiply it by the speed
var timePassed:int =
getTimer() - lastTime;
lastTime += timePassed;
if (leftArrow) {
myBrick.x -= speed*timePassed/1000;
}

22. Jumping
if( jumpUp ) {
jumpVelocity =
jumpVelocity - gravity*timePassed/1000;
myBrick.y -= jumpVelocity;
if( myBrick.y >= oldBrickY ) {
jumpVelocity = 40;
myBrick.y = oldBrickY;
jumpUp = false;
}
}

23. Homework, due April 20
• Embed your game elements in a
game symbol
• Add basic movement and keyboard
interaction
• Read p179-193, Paddle Ball in
Chapter 5 of AS 3.0 Game
Programming University