ARTDM 170, Week 11: User Interaction

451 views

Published on

  • Be the first to comment

  • Be the first to like this

ARTDM 170, Week 11: User Interaction

  1. 1. ARTDM 170, Week 11: User Interaction <ul><li>Gilbert Guerrero [email_address] gilbertguerrero.com/blog/artdm-170 </li></ul>
  2. 2. Turn in Homework <ul><li>Please put your files in a folder with your last name and first initial </li></ul><ul><li>Put the folder in my dropbox </li></ul><ul><li>Example: smith-h Memory-Game.swf </li></ul>
  3. 3. Collision Detection
  4. 4. hitTestObject <ul><li>When the bounding box of one object overlaps with the bounding box of another object, a collision is detected </li></ul><ul><li>Use an if() statement to do something with the collision </li></ul>if( sprite1.hitTestObject(sprite2) ){ // collision happened } sprite1 sprite2
  5. 5. hitTestPoint <ul><li>Check if the edge of a shape is near a point </li></ul><ul><li>Cannot be used with two shapes, only a shape and a point </li></ul><ul><li>Can be used with the mouse, using mouseX and mouseY </li></ul>sprite1 if( sprite1.hitTestPoint(x1, y1, true) ){ // collision happened }
  6. 6. Collision based on distance <ul><li>Detect when two objects are near each other </li></ul><ul><li>Collide when the distance between their registration points is less than half their combined sizes </li></ul>sprite1 sprite2 sprite1 sprite2
  7. 7. Pythagorean Theorem <ul><li>To find the distance between two points we need the Pythagorean Theorem </li></ul><ul><li>A 2 + B 2 = C 2 </li></ul>A B C
  8. 8. Pythagorean Theorem <ul><li>In ActionScript: </li></ul><ul><li>dx = x2 - x1; dy = y2 - y1; dist = Math.sqrt(dx*dx + dy*dy); </li></ul>(x1,y1) dist (x2,y2) (x1,y2) dx dy
  9. 9. Collision based on distance <ul><li>var sizeBetween = sprite1.width/2 + sprite2.width/2; if(dist < sizeBetween) { // collision detected } </li></ul>sprite1 sprite2
  10. 10. Point.distance <ul><li>There’s a function for this! </li></ul><ul><li>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 } </li></ul><ul><li>You must import the flash.geom.Point class at the top of your ActionScript after the package declaration. </li></ul>
  11. 11. Hit the Brick <ul><li>example </li></ul>
  12. 12. Pop the Balloon <ul><li>example </li></ul>
  13. 13. User Interaction <ul><li>keys and spacebar </li></ul>
  14. 14. Listen for Keyboard <ul><li>stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownFunction); stage.addEventListener( KeyboardEvent.KEY_UP, keyUpFunction); </li></ul>
  15. 15. Checking which key <ul><li>// 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; } } </li></ul>
  16. 16. Checking which key <ul><li>// key lifted up public function keyUpFunction(event:KeyboardEvent){ if( event.keyCode == 37 ){ leftArrow = false; }else if( event.keyCode == 39 ){ rightArrow = false; } } </li></ul>
  17. 17. Key codes <ul><li>Spacebar 32 </li></ul><ul><li>Left arrow 37 </li></ul><ul><li>Up arrow 38 </li></ul><ul><li>Right arrow 39 </li></ul><ul><li>Down arrow 40 </li></ul><ul><li>More key codes and constants on Adobe’s site </li></ul>
  18. 18. Moving an object <ul><li>// move to the left if (leftArrow) { myBrick.x -= speed ; } </li></ul><ul><li>This would allow the user to move the object to the left at a certain speed every frame . </li></ul>
  19. 19. Time-based animation <ul><li>Using time is more accurate than frames </li></ul><ul><li>We can capture how much time has passed and multiply it by the speed </li></ul><ul><li>var timePassed:int = getTimer() - lastTime; lastTime += timePassed; </li></ul><ul><li>if (leftArrow) { myBrick.x -= speed*timePassed/1000 ; } </li></ul>
  20. 20. Jumping script <ul><li>if( jumpUp ) { jumpVelocity = jumpVelocity - gravity*timePassed/1000; myBrick.y -= jumpVelocity; if( myBrick.y >= oldBrickY ) { jumpVelocity = 40; myBrick.y = oldBrickY; jumpUp = false; } } </li></ul>
  21. 21. Homework, due Nov 4 <ul><li>Create the Start and Game Over screens in Flash for your final project </li></ul><ul><ul><li>Make an encapsulated movie </li></ul></ul><ul><ul><li>Start screen must have a start button that takes the user to the second frame </li></ul></ul><ul><ul><li>Second frame must have some trigger that takes the user to the Game Over screen </li></ul></ul>

×