1 / 44

2D Graphics

2D Graphics. Outline. Basic Adding graphics to Sudoku Handing input The rest of the story Improvements. Basic -Color. int color = Color.BLUE ; // solid blue // Translucent purple color = Color.argb (127, 255, 0, 255); XML file color = getResources (). getColor ( R.color.mycolor );.

uyen
Télécharger la présentation

2D Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2D Graphics

  2. Outline • Basic • Adding graphics to Sudoku • Handing input • The rest of the story • Improvements

  3. Basic -Color • int color = Color.BLUE; // solid blue • // Translucent purple • color = Color.argb(127, 255, 0, 255); • XML file • color = getResources().getColor(R.color.mycolor);

  4. Paint • One of the Android native graphics library’s most important classes is the Paint class. • It holds the style, color, and other information needed to draw any graphics including bitmaps, text, and geometric shapes. • Normally when you paint something on the screen, you want to draw it in a solid color. • You set that color with the Paint.setColor( ) method. • For example: • cPaint.setColor(Color.LTGRAY); • This uses the predefined color value for light gray.

  5. Canvas • The Canvas class represents a surface on which you draw. • Initially canvases start off devoid of any content, like blank transparencies for an overhead projector. • Methods on the Canvas class let you draw lines, rectangles, circles, or other arbitrary graphics on the surface.

  6. Draw on Canvas • In Android, the display screen is taken up by an Activity, which hosts a View, which in turn hosts a Canvas. • Draw on that canvas by overriding the View.onDraw( ) method. • The only parameter to onDraw( ) is a canvas on which you can draw

  7. Example

  8. Path • Draw lines, rectangles, and curves • Circular path • defines a circle at position x=150, y=150, with a radius of 100 pixels. (Clockwise) • circle = new Path(); • circle.addCircle(150, 150, 100, Direction.CW);

  9. Drawable Class • Is used for a visual element like a bitmap or solid color that is intended for display only. • Can combine drawables with other graphics, or you can use them in user interface widgets • for example, as the background for a button or view • Drawables are often defined in XML • gradient • from one color to another (in this case, white to gray). • angle • specifies the direction of the gradient (270 degrees means top to bottom). • This will be used for the background of a view:

  10. Use Drawable • Refer to it in XML with the android: • background=attribute or • setBackgroundResource(R.drawable.background) • in the view’s onCreate( ) method • This gives our GraphicsView example a nice gradient background,

  11. Sudoko - Drawing the Board

  12. Three different colors • The code uses three different colors for the grid lines: • a light color between each tile, • a dark color between the three-by-three blocks, • a highlight color drawn on the edge of each tile to make them look like they have a little depth. • The order in which the lines are drawn is important • since lines drawn later will be drawn over the top of earlier lines.

  13. Drawing the Numbers

  14. Draw numbers • Find out what numbers to display. • getTileString( ) • To calculate the size of the numbers • set the font height to three-fourths the height of the tile • set the aspect ratio to be the same as the tile’s aspect ratio. • We can’t use absolute pixel or point sizes because we want the program to work at any resolution. • To determine the position of each number • center it in both the x and y dimensions. • The x direction is easy—just divide the tile width by 2. • the y direction, wehave to adjust the starting position downward a little so that the midpoint of the tile will be the midpoint of the number instead of its baseline. • We use the graphics library’s FontMetrics class to tell how much vertical space the letter will take in total, and then we divide that in half to get the adjustment.

  15. FontMetrics

  16. Change view (screen)size?

  17. Handling Input • Implement a little cursor that shows the player which tile is currently selected. • The selected tile is the one that will be modified when the player enters a number. • This code will draw the selection in onDraw( ):

  18. Entering Numbers

  19. override the onTouchEvent( )

  20. Adding Hints

  21. Results

  22. Shaking Things Up • What if the user tries to enter an obviously invalid number, • such as a number that already appears in the three-by-three block? • Let’s make the screen wiggle back and forth when they do that. • First we add a call to the invalid number case in setSelectedTile( ).

  23. The Rest of the Story • Creating the Keypad • The keypad is handy for phones that don’t have keyboards. • It displays a grid of the numbers 1 through 9 in an activity that appears on top of the puzzle. • The whole purpose of the keypad dialog box is to return a number selected by the player

  24. user interface layout from res/layout/keypad.xml:

  25. Implementing the Game Logic

  26. Miscellaneous

More Related