• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Artdm170 week12 user_interaction
 

Artdm170 week12 user_interaction

on

  • 693 views

 

Statistics

Views

Total Views
693
Views on SlideShare
664
Embed Views
29

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 29

http://www.gilbertguerrero.com 29

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Artdm170 week12 user_interaction Artdm170 week12 user_interaction Presentation Transcript

  • ARTDM 170, Week 12: User Interaction Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
  • 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
  • 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
  • Paper Prototypes
  • Collision Detection
  • 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 }
  • 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
  • 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
  • Pythagorean Theorem C A B • To find the distance between two points we need the Pythagorean Theorem • A2 + B2 = C2
  • 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);
  • Collision based on distance sprite1 sprite2 var sizeBetween = sprite1.width/2 + sprite2.width/2; if(dist < sizeBetween) { // collision detected }
  • 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 }
  • Hit the Brick example
  • Pop the Balloon example
  • User Interaction keys and spacebar
  • Listen for Keyboard stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownFunction); stage.addEventListener( KeyboardEvent.KEY_UP, keyUpFunction);
  • 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; } }
  • Checking which key // key lifted up public function keyUpFunction(event:KeyboardEvent) { if(event.keyCode == 37) { leftArrow = false; } else if(event.keyCode == 39) { rightArrow = false; } }
  • 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
  • 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.
  • 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; }
  • Jumping if( jumpUp ) { jumpVelocity = jumpVelocity - gravity*timePassed/1000; myBrick.y -= jumpVelocity; if( myBrick.y >= oldBrickY ) { jumpVelocity = 40; myBrick.y = oldBrickY; jumpUp = false; } }
  • 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