Your SlideShare is downloading. ×
0
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MobAppDev (Fall 2013): MotionEvent Capture in Touch Driving Drawings & Sprites

372

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
372
On Slideshare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. MobAppDev MotionEvent Capture in Touch Driving Drawings & Sprites Vladimir Kulyukin www.vkedco.blogspot.com
  • 2. Outline ● ● ● MotionEvent Capture in Touch Driving Touch Driving Drawings Touch Driving Sprites
  • 3. Review
  • 4. MotionEvent ● ● ● ● On Android, digital data from touchscreens are captured as MotionEvent objects MotionEvent objects are created when the user touches the device's touchscreen Each MotionEvent object contains the x and y coordinates (and some other stats) of the captured touch MotionEvent objects are handled by the View.onTouchEvent() method
  • 5. MotionEvent Sequences ● ● ● When user places his/her finger, moves it (without lifting it up), and then lifts it up, a sequence of MotionEvent objects is generated Such sequences can be captured and used in touch gesture recognition Each MotionEvent object contains information on: 1) type of action captured (e.g., MotionEvent.ACTION_DOWN, MotionEvent.ACTION_UP, etc); 2) pressure value; 3) x and y coordinates; 4) time of event
  • 6. MotionEvent.getAction() ● ● MotionEvent.getAction() can be used to retrieve the type of action Examples:  MotionEvent.getAction() returns ACTION_DOWN when user touches screen  MotionEvent.getAction() returns ACTION_MOVE when user moves sideways  MotionEvent.getAction() returns ACTION_UP when user lifts his/her finger
  • 7. Interface View.OnTouchListener ● ● Classes the receive touchscreen events must implement View.OnTouchListener Two main methods to handle MotionEvents are:  onTouch(View, MotionEvent)  ● onTouchEvent(MotionEvent) onTouch(View, MotionEvent) is used when one OnTouchListener handles MotionEvents from multiple views
  • 8. Interface View.OnTouchListener ● ● If onTouch() or onTouchEvent() consumes a received MotionEvent and no other component should not about it, the method should return true If onTouch() or onTouchEvent() does not/cannot consume a received MotionEvent, it should return false
  • 9. Develop, Save, & Recognize Touch Gestures 1. Start GestureBuilder 2. Draw a Gesture 3. Save it Source code of BuiltGestureConsumer app is here
  • 10. Touch Driving Drawings
  • 11. Touch Driving Touch driving is a touchscreen technique that allows the user to drive drawings and/or images (sprites) with his/her finger.
  • 12. Problem Develop an application that draws a 3x3 Tic Tac Toe Board, 2 red circles, and 2 blue crosses. The user can touch drive circles and crosses on the screen. Source code of DrawTouchDrive app here
  • 13. Screenshots Initial Screenshot Touch Driving a Circle Touch Driving a Cross
  • 14. Solution Outline ● ● ● Define a custom View object that extends the View class This custom View class (TicTacToeView.java) handles all touch events and does all drawing All basic board geometry is abstracted in a separate class (BoardGeometry.java)
  • 15. Object-Oriented Modeling ● BoardGeometry.java ● Shape.java ● Circle.java ● Cross.java ● TicTacToeView.java
  • 16. X & Y Offsets of a Circle Drawing X me is a MotionEvent ME's X X Offset c is a Circle final float me_x = me.getX(); y final float me_x = me.getX(); final float me_y = me.getY(); final float me_y me.getAction(); final int action = = me.getY(); final int action = me.getAction(); c.setActionDownX(c.getCurrentX()); ME's Y c.setActionDownX(c.getCurrentX()); c.setActionDownY(c.getCurrentY()); c.setActionDownY(c.getCurrentY()); c.setActionMoveOffsetX(me_x); c.setActionMoveOffsetX(me_x); c.setActionMoveOffsetY(me_y); c.setActionMoveOffsetY(me_y); Y Offset
  • 17. Custom View: TicTacToeView <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <org.vkedco.mobappdev.draw_touch_drive_00001.TicTacToeView android:id="@+id/pntr" android:tag="Painter" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> Lecture on Custom Views is here
  • 18. TicTacToeView.euclidDistance() // TicTacToeView uses Euclidean Distance to find closest objects private static float euclidDist(float x1, float y1, float x2, float y2) { return android.util.FloatMath.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); }
  • 19. TicTacToeView: Member Variables public class TicTacToeView extends View { // define background and foreground paints final Paint mBackgroundPaint; final Paint mForeCirclePaint; final Paint mForeCrossPaint; final Paint mForeBoardPaint; // define a BoardGeometry object final BoardGeometry mBoardGeometry; // define arrays of circles and crosses ArrayList<Circle> mCircles; ArrayList<Cross> mCrosses; }
  • 20. TicTacToeView: Construction of Circles & Crosses public class TicTacToeView extends View { // placing circles and crosses to their start x's & y's private void createCircles() { mCircles = new ArrayList<Circle>(); mCircles.add(new Circle(30, 30, 20)); mCircles.add(new Circle(120, 30, 20)); } private void createCrosses() { mCrosses = new ArrayList<Cross>(); mCrosses.add(new Cross(30, 350, 20)); mCrosses.add(new Cross(120, 350, 20)); } }
  • 21. Handling MotionEvents ● ● ● ● Get the x and y coordinates of a MotionEvent ME Find a circle C closest to ME Find a cross X closest to ME If the Euclidean distance from ME to the closest circle C is smaller than the Euclidean distance from ME to the closest cross X, then assume that the circle C was touched and handle it (redraw it at ME's x and y); otherwise, assume that the cross was touched and handle it
  • 22. TicTacToeView: Handling MotionEvents public boolean onTouchEvent(MotionEvent event) { // 1. get the x and y of MotionEvent float x = event.getX(); float y = event.getY(); // 2. find circle closest to x and y Circle cr = findCircleClosestToTouchEvent(x, y); // 3. find cross closest to x and y Cross cx = findCrossClosestToTouchEvent(x, y); // 4. compute euclid distances to find which is // closer - circle or cross float dtcr = euclidDist(cr.getCurrentX(), cr.getCurrentY(), x, y); float dtcx = euclidDist(cx.getMidX(), cx.getMidY(), x, y); // 5. if distance to closest circle is smaller // handle the circle; otherwise, handle the cross if (dtcr < dtcx) { handleTouchedCircle(event, cr); } else { handleTouchedCross(event, cx); } return true; }
  • 23. TicTacToeView: Handling Touched Circles private void handleTouchedCircle(MotionEvent me, Circle c) { final float me_x = me.getX(); final float me_y = me.getY(); final int action = me.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: c.setActionDownX(c.getCurrentX()); c.setActionDownY(c.getCurrentY()); c.setActionMoveOffsetX(me_x); c.setActionMoveOffsetY(me_y); break; case MotionEvent.ACTION_MOVE: case MotionEvent.ACTION_UP: c.setCurrentX(c.getActionDownX() + me_x - c.getActionMoveOffsetX()); c.setCurrentY(c.getActionDownY() + me_y - c.getActionMoveOffsetY()); break; case MotionEvent.ACTION_CANCEL: c.restoreStartPosition(); break; }}
  • 24. Drawing the Canvas ● ● ● ● ● Draw the background rectangle over the entire canvas Draw the TicTacToe board (horizontal and vertical lines) Draw the circles Draw the crosses Invalidate the canvas object to force it to redraw
  • 25. TicTacToeView: Canvas Drawing public void draw(Canvas canvas) { if ( mDrawingEnabled ) { final int width = canvas.getWidth(); final int height = canvas.getHeight(); // 1. draw background rectangle that covers the entire canvas canvas.drawRect(0, 0, width, height, mBackgroundPaint); // 2. draw board on the canvas drawBoard(canvas); // 3. draw red circles on canvas drawCirclesOnCanvas(canvas); // 4. draw blue crosses on canvas drawCrossesOnCanvas(canvas); // 5. force redraw invalidate(); } }
  • 26. Touch Driving Sprites
  • 27. Problem Develop an application that displays 3 black chess pieces above and 3 white chess pieces below. The application allows the user to touch drive the black chess pieces down. If a black chess piece is driven close to a white chess piece, the white chess piece jumps on the black chess piece. The user's objective is to touch drive the black pieces down. Source code of ImageTouchDrive is here
  • 28. Screenshots Initial Screen Piece Capture End Game Restoration
  • 29. Sprites Black Bishop White Bishop Black King White King Black Knight White Knight
  • 30. ChessPiece public class ChessPiece { final Bitmap mBitmap; // image of chess piece float mStartX; // x of top left corner of bitmap float mStartY; // y of top left corner of bitmap float mCurrentX; // current x coordinate of ChessPiece float mCurrentY; // current y coordinate of ChessPiece float mActionDownX; // x coordinate of ChessPiece of an action down float mActionDownY; // y coordinate of ChessPiece of an action down float mActionMoveOffsetX; // x coordinate of a move action float mActionMoveOffsetY; // y coordinate of a move action float mEuclidDistThresh; // threshold to decide if motion event should be consumed // rest of code }
  • 31. ChessPiece Construction public ChessPiece(Resources res, int res_id, float dthresh, float start_x, float start_y) { mBitmap = BitmapFactory.decodeResource(res, res_id); mStartX = start_x; mStartY = start_y; mCurrentX = start_x; mCurrentY = start_y; mEuclidDistThresh = dthresh; }
  • 32. ChessPiece's Handling of Touch Events void handleOnTouchEvent(MotionEvent me) { final float me_x = me.getX(); final float me_y = me.getY(); final float left_x = mCurrentX; final float top_y = mCurrentY; final float right_x = left_x + (float)mBitmap.getWidth(); final float bot_y } = mCurrentY + (float)mBitmap.getHeight();
  • 33. ChessPiece's Handling of Touch Events void handleOnTouchEvent(MotionEvent me) { if ( euclidDist(left_x, top_y, me_x, me_y) > mEuclidDistThresh && euclidDist(right_x, top_y, me_x, me_y) > mEuclidDistThresh && euclidDist(left_x, bot_y, me_x, me_y) > mEuclidDistThresh && euclidDist(right_x, bot_y, me_x, me_y) > mEuclidDistThresh ) { return; } }
  • 34. ChessPiece's Handling of Touch Events void handleOnTouchEvent(MotionEvent me) { final int action = me.getAction(); switch ( action ) { case MotionEvent.ACTION_DOWN: this.setActionDownX(this.getCurrentX()); this.setActionDownY(this.getCurrentY()); this.setActionMoveOffsetX(me_x); this.setActionMoveOffsetY(me_y); break; case MotionEvent.ACTION_MOVE: case MotionEvent.ACTION_UP: this.setCurrentX(this.getActionDownX() + me_x - this.getActionMoveOffsetX()); this.setCurrentY(this.getActionDownY() + me_y – this.getActionMoveOffsetY()); break; case MotionEvent.ACTION_CANCEL: this.restoreInitialPosition(); break;} }
  • 35. References ● en.wikipedia.org/wiki/Touchscreen ● http://developer.android.com/reference/android/view/MotionEvent.html ● http://developer.android.com/reference/android/view/View.OnTouchListener.html ● http://en.wikipedia.org/wiki/Chess ● http://vkedco.blogspot.com/2012/12/mobappdev-2d-frame-animations-on-android.html

×