Artdm170 week12 user_interaction

683 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
683
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide























  • Artdm170 week12 user_interaction

    1. 1. ARTDM 170, Week 12: User Interaction Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
    2. 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. 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. 4. Paper Prototypes
    5. 5. Collision Detection
    6. 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. 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. 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. 9. Pythagorean Theorem C A B • To find the distance between two points we need the Pythagorean Theorem • A2 + B2 = C2
    10. 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. 11. Collision based on distance sprite1 sprite2 var sizeBetween = sprite1.width/2 + sprite2.width/2; if(dist < sizeBetween) { // collision detected }
    12. 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. 13. Hit the Brick example
    14. 14. Pop the Balloon example
    15. 15. User Interaction keys and spacebar
    16. 16. Listen for Keyboard stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownFunction); stage.addEventListener( KeyboardEvent.KEY_UP, keyUpFunction);
    17. 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. 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. 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. 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. 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. 22. Jumping if( jumpUp ) { jumpVelocity = jumpVelocity - gravity*timePassed/1000; myBrick.y -= jumpVelocity; if( myBrick.y >= oldBrickY ) { jumpVelocity = 40; myBrick.y = oldBrickY; jumpUp = false; } }
    23. 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

    ×