DOC PREVIEW
SDSU CS 696 - 2D Graphics part 2

This preview shows page 1-2-17-18-19-35-36 out of 36 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 36 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

CS 696 Mobile Phone Application DevelopmentFall Semester, 2009Doc 16 2D Graphics part 2Oct 21, 2009Copyright ©, All rights reserved. 2009 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Basic Parts2BitmapRectangular grid of pixels of an imageWhat is displayed on screenPNG, JPG are bitmap formatsCanvasKnows how to draw on bitmapsPaintStyle and color information about how to draw thingsDrawing primitiveRect, text , Path, BitmapUsing Bitmaps3public class GraphicsExamples extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); View shapes = new SimpleDrawing(this); setContentView(shapes); }}Creating the bitmap4public class SimpleDrawing extends View { int starSize = 42; Bitmap star = Bitmap.createBitmap(this.starSize, this.starSize, Bitmap.Config.ARGB_8888); private final Paint basicPaint = new Paint(); public SimpleDrawing(Context context) { super(context); Resources resource = this.getContext().getResources(); Drawable image = resource.getDrawable(R.drawable.star); Canvas canvas = new Canvas(this.star); image.setBounds(0, 0, this.starSize, this.starSize); image.draw(canvas); }The drawing5 @Override protected void onDraw(Canvas canvas) { canvas.drawColor(Color.BLACK); for (int topRight = 0; topRight < 3000; topRight += this.starSize) canvas.drawBitmap(this.star, topRight, topRight, this.basicPaint); }}What is with the white rectangles?6Bitmap.Config7ALPHA_8 ARGB_4444 ARGB_8888 RGB_565ARGB_XXXXX = bits used to store given channel (alpha, color)Snake8The Images9 public void loadTile(int key, Drawable tile) { Bitmap bitmap = Bitmap.createBitmap(mTileSize, mTileSize, Bitmap.Config.ARGB_4444); Canvas canvas = new Canvas(bitmap); tile.setBounds(0, 0, mTileSize, mTileSize); tile.draw(canvas); this.mTileArray[key] = bitmap; }Hand created png filesmTileArray[1]mTileArray[2]mTileArray[3]Convert to bitmapsto be drawn laterThe Grid10 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { mXTileCount = (int) Math.floor(w / mTileSize); mYTileCount = (int) Math.floor(h / mTileSize); mXOffset = (w - mTileSize * mXTileCount) / 2; mYOffset = (h - mTileSize * mYTileCount) / 2; this.mTileGrid = new int[mXTileCount][mYTileCount]; clearTiles(); }n*m array of intsmTileGridComputing n & monSizeChanged is a method in the view classDrawing Grid11mTileGrid[n][m] if 0 draw nothingelse draw mTileArray[this.mTileGrid[n][m]]mTileArray[1]mTileArray[2]mTileArray[3] public void onDraw(Canvas canvas) { super.onDraw(canvas); for (int x = 0; x < mXTileCount; x += 1) { for (int y = 0; y < mYTileCount; y += 1) { if (this.mTileGrid[x][y] > 0) { canvas.drawBitmap(this.mTileArray[this.mTileGrid[x][y]], mXOffset + x * mTileSize, mYOffset + y * mTileSize, this.mPaint); } } }Where to Draw 12mTileSizemXOffsetThe Snake13 mSnakeTrail.add(new Coordinate(7, 7)); mSnakeTrail.add(new Coordinate(6, 7)); mSnakeTrail.add(new Coordinate(5, 7)); mSnakeTrail.add(new Coordinate(4, 7)); mSnakeTrail.add(new Coordinate(3, 7)); mSnakeTrail.add(new Coordinate(2, 7)); private ArrayList<Coordinate> mSnakeTrail = new ArrayList<Coordinate>(); private class Coordinate { public int x; public int y;Just a list of pointsHow to Draw the board 14mTileGrid holds what to draw at each locationFill boundary with wall tilesFill snake locationsFill apple locationsdraw private void updateWalls() { for (int x = 0; x < mXTileCount; x++) { setTile(GREEN_STAR, x, 0); setTile(GREEN_STAR, x, mYTileCount - 1); } for (int y = 1; y < mYTileCount - 1; y++) { setTile(GREEN_STAR, 0, y); setTile(GREEN_STAR, mXTileCount - 1, y); }The outline15Draw all the game elementsWait 600 millisecondsMove the snakeCheck for collisionsDraw all the game elementsetc.How to wait?16 class RefreshHandler extends Handler { @Override public void handleMessage(Message msg) { SnakeView.this.update(); SnakeView.this.invalidate(); } public void sleep(long delayMillis) { this.removeMessages(0); sendMessageDelayed(obtainMessage(0), delayMillis); } private RefreshHandler mRedrawHandler = new RefreshHandler();update17 public void update() { if (mMode == RUNNING) { long now = System.currentTimeMillis(); if (now - mLastMove > mMoveDelay) { clearTiles(); updateWalls(); updateSnake(); updateApples(); mLastMove = now; } mRedrawHandler.sleep(mMoveDelay); } }How to force a redraw of a View18invalidate(int l, int t, int r, int b) Mark the the area defined by the rect (l,t,r,b) as needing to be drawn.invalidate() Invalidate the whole view.invalidate(Rect dirty)Mark the the area defined by dirty as needing to be drawn.invalidateDrawable(Drawable drawable)Invalidates the specified Drawable.View methodsDon't forget onPause() etc.19 protected void onPause() { super.onPause(); mSnakeView.setMode(SnakeView.PAUSE); }Finger Paint20Basic Idea21Current path - one user is currently drawingStore in a Path object as it is being createdOld paths - ones drawn beforeStore all in a bitmapBasic Algorithm22On ACTION_DOWN (mouse down, user pressed)Create new PathPath starts where user pressedredraw ScreenOn ACTION_MOVEGet current locationAdd "line" from old location to current location in pathredraw screenOn ACTION_UPFinish pathAdd path to bitmap of previous pathsReset pathredraw screenHow get thick red line23 this.mPaint = new Paint(); this.mPaint.setAntiAlias(true); this.mPaint.setDither(true); this.mPaint.setColor(0xFFFF0000); this.mPaint.setStyle(Paint.Style.STROKE); this.mPaint.setStrokeJoin(Paint.Join.ROUND); this.mPaint.setStrokeCap(Paint.Cap.ROUND); this.mPaint.setStrokeWidth(12);Creating the Bitmap and Path24 public MyView(Context c) { super(c); this.mBitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888); this.mCanvas = new Canvas(this.mBitmap); this.mPath = new Path(); this.mBitmapPaint = new Paint(Paint.DITHER_FLAG); }How do we get


View Full Document

SDSU CS 696 - 2D Graphics part 2

Download 2D Graphics part 2
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view 2D Graphics part 2 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view 2D Graphics part 2 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?