Graphics. Lecture 16

Transcription

1 Graphics Lecture 16

2 Graph Library Draw a Graph, draw a chart, google Android Library draw graph/ chart GraphView library information can be found at Add it to your build.gradle: (build.gradle app, syn the gradle file) dependencies { compile com.jjoe64:graphview: Create a graph in your activity XML ( <com.jjoe64.graphview.graphview android:layout_width= android:layout_height= /> -- Note: full package name

3 Line Graph in GraphView Talk to a graph in Java GraphView graph = (GraphView) findviewbyid(r.id.graph); graph.settitle( title ); //set X bounds graph.getviewport().setxaxisboundsmanual(true); graph.getviewport().setminx(minx); graph.getviewport().setmaxx(maxx); // Y is the same idea graph.getviewport().setyaxisboundsmanual(true); graph.getviewport().setminy(miny); graph.getviewport().setmaxy(maxy);

4 Line Graph in GraphView Add a line to the graph LineGraphSeries<DataPoint> series = new LineGraphSeries<>(); DataPoint point = new DataPoint(x,y); // get the data from the database, every time make //a point series.appenddata(point, false, maxpoints); graph.removeallseries();// remove previous lines if there is any graph.addseries(series);

5 Android Screen Coordinates /how-do-android-screencoordinates-work

6 Getting the Size of your Window Display display = getwindowmanager().getdefaultdisplay(); Point size = new Point(); Display.getSize(size); int maxx = size.x; int maxy = size.y;

7 Drawing 2D Graphics To draw your own custom 2D graphics on screen, you will need to make a custom View subclass with the drawing code. If the app is animated (such as a game), you will also use a thread to periodically update the graphics and redraw them.

8 Custom View Template public class ClassName extends View { // required constructor public ClassName(Context context, AttributeSet attrs) { super(context, attrs); // this method draws on the protected void ondraw(canvas canvas) { super.ondraw(canvas); drawing code;

9 Using your custom view Insert your custom view into an activity s layout XML: <!-- res/layout/activity_main.xml --> <RelativeLayout... tools:context=".mainactivity"> <packagename.viewclassname android:layout_width="match_parent" android:layout_height="match_parent"... /> </RelativeLayout>

10 Another Way to use your custom view If your custom view takes up 100% of the activity screen, you can just add it to the activity in the Java code: //MainActivity.java public class MyActivity extends Activity public void oncreate (Bundle bundle) { super.oncreate(bundle); View myview = new ViewClassName(this, null); setcontentview(myview);

11 Canvas object methods c.drawargb(alpha, r, g, b); - fill window with color (rgb=0-255) c.drawarc(...); - draw a partial ellipse c.drawbitmap(bmp, x, y, null); - draw an image c.drawcircle(centerx, centery, r, paint); - draw a circle c.drawline(x1, y1, x2, y2, paint); - draw a line segment c.drawoval(x1, y1, x2, y2, paint); * (requires Android 5.0) c.drawoval(new RectF(x1, y1, x2, y2), paint); - draw oval/circle c.drawpoint(x, y, paint); - color a single pixel c.drawrect(x1, y1, x2, y2, paint); * (requires Android 5.0) c.drawrect(new RectF(x1, y1, x2, y2), paint); - draw rectangle c.drawroundrect(x1, y1, x2, y2, rx, ry, paint); * (requires Android 5.0) c.drawroundrect(new RectF(x1, y1, x2, y2), rx, ry, paint); c.drawtext("str", x, y, paint); - draw a text string c.getwidth(), c.getheight() - get dimensions of drawing area

12 Paint Many methods accept a Paint, a color to use for drawing. Create a Paint by specifying an alpha (opacity) value, and red/green/ blue (RGB) integer values, from 0 (none) to 255 (full). Paint name = new Paint(); name.setargb(alpha, red, green, blue); // example Paint purple = new Paint(); purple.setargb(255, 255, 0, 255); purple.setstyle(style.fill_and_stroke); // FILL, STROKE Paint has other useful methods like: gettextbounds, measuretext, setalpha, setantialias, setstrokewidth, setstyle, settextalign, settextsize, settypeface

13 Typeface In Android, a font is called a Typeface. Set a font inside a Paint. You can create a Typeface based on a specific font name: Typeface.create("font name", Typeface.STYLE) styles: NORMAL, BOLD, ITALIC, BOLD_ITALIC Or based on a general "font family": Typeface.create(Typeface.FAMILY_NAME, Typeface.STYLE) family names: DEFAULT, MONOSPACE, SERIF, SANS_SERIF Or from a file in your src/main/assets/ directory: Typeface.createFromAsset(getAssets(), "filename") // example: use a 40-point monospaced blue font Paint p = new Paint(); p.settypeface( Typeface.create(Typeface.MONOSPACE, Typeface.BOLD)); p.settextsize(40); // font size is set by paint p.setargb(255, 0, 0, 255); canvas.drawtext( hello,200,400,p);

14 Bitmap Image Draw an image (such as.png or.jpg) using the Bitmap class. Bitmap name = BitmapFactory.decodeResource( getresources(), R.drawable.ID); // example: draw heart.png on screen at (0, 0) Bitmap bmp = BitmapFactory.decodeResource( getresources(), R.drawable.heart); canvas.drawbitmap(bmp, 0, 0, null); // null is the Paint // you can also read a Bitmap from an input stream URL url = new URL(" Bitmap bmp = BitmapFactory.decodeStream( url.openstream());

15 Make a BitMap

16 Draw a Target public class TargetView extends View { public TargetView(Context context, AttributeSet attrs) { protected void ondraw(canvas canvas) { super.ondraw(canvas); Paint red = new Paint(); red.setargb(255,255,0,0); Paint white = new Paint(); white.setargb(255,255,255,255); int w = canvas.getwidth(); int h = canvas.getheight(); for (int i = 0; i < 5; i++) { canvas.drawoval(new RectF(w*i/10, h*i/10, w*(10-i)/10, h*(10-i)/10, i%2=0?red:white);

17 @Marty Stepp Smiley Face Example

18 @Marty Stepp Smiley Face Solution

19 Animation via redrawing To animate a view, you must redraw it at regular intervals. On each redraw, change variables/positions of shapes Force a view to redraw itself by calling its postinvalidate method

20 Example 1 public class FaceActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_face); public void moveclick(view view) { FaceView faceview = (FaceView) findviewbyid(r.id.myfaceview); faceview.postinvalidate(); // tell it to redraw itself

21 Animation In FaceView.java file (custom view), define a method public void dotheanimation() { while(true) { try { Thread.sleep(20); catch(interuptexception e) { break; // if terminate the app, then out the loop postinvalidate();

22 Wanted to click button, then do the animation public class FaceActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_face); public void moveclick(view view) { FaceView faceview =(FaceView) findviewbyid(r.id.myfaceview); faceview.dotheanimation(); // DID NOT WORK

23 Animation via redrawing Force a view to redraw itself by calling its invalidate method: But you can't just do this in a loop; this will lock up the app's UI and lead to poor performance You must instead do it in another thread of execution

24 Correct Version public class FaceActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_face); public void moveclick(view view) { final FaceView faceview =(FaceView) findviewbyid(r.id.myfaceview); Thread thread = new Thread ( new Runnable() { public void run() { faceview.dotheanimation(); ); thread.start();

25 Basic Animation Loop The code to animate a view must do the following: Tell the view to redraw itself Pause for some number of milliseconds Repeat, in a loop (possibly forever) // in custom view java file public void myanimationloop() { while(true) { try { Thread.sleep(20); catch(interuptexception e) { break; // if terminate the app, then out the loop postinvalidate();

26 Android Thread

27 Bouncing Ball Example Demo MyBouncingBall App BouncingBallView.java MainActivity.java

28 BouncingBallView.java public class BouncingBallView extends View { private static final float BALL_SIZE = 30; private float ballx = 10; private float bally = 10; private float velocityx = 5; private float velocityy = 3; public BouncingBallView(Context context, AttributeSet attrs) { protected void ondraw(canvas canvas) { super.ondraw(canvas); drawbouncingball(canvas);

29 BouncingBallView.java private void drawbouncingball(canvas canvas) { Paint red = new Paint(); red.setargb(255,255,0,0); red.setstyle(paint.style.fill); float w = canvas.getwidth(); float h = canvas.getheight(); //draw the ball canvas.drawoval(new RectF(ballX,ballY, ballx + BALL_SIZE, bally+ BALL_SIZE), red); //update x, y for ondraw next time ballx += velocityx; bally += velocityy; //bounce if needed if(ballx + BALL_SIZE >= w ballx <=0 ) { velocityx = -velocityx; if(bally + BALL_SIZE >= h bally <=0 ) { velocityy = -velocityy;

30 Android Game Libraries Unity: popular cross-platform game library Comprehensive, deploys to many platforms Libgdx: another cross-platform game lib based on OpenGL Google Play Games Services: set of libraries made by Google for social gaming features

31 Pros/cons of game frameworks You don t even code in Java Cocos2d-x: C++, JavaScript Unity: C# and others Skia: Python Xamarin: C# Have their own editing software (not Android Studio) Many are cross-platform and deploy(mostly) the same game code to multiple platforms Code game once and deploy it on web, Android, ios, etc.

32 Sprite Drawing Code Sprites can contain code to draw themselves Game s ondraw tells each sprite to draw itself in a loop public class Sprite { float x, y, w, h; float dx, dy; Paint paint; public void draw(canvas canvas) { canvas.drawrect(x,y,x+w,y+h, paint);

33 Canvas is the one under it public class ClassName extends View { // required constructor public ClassName(Context context, AttributeSet attrs) { super(context, attrs); // this method draws on the protected void ondraw(canvas canvas) { super.ondraw(canvas); drawing code;

34 Moving Sprites One Way to do the movement: have each sprite stores a velocity dx/dy pair, or write a simple 2D Vector class Usually write a simple method to tell the sprite to move/update itself This method is called once each frame in your game s animation loop public class Sprite { float x, y, w, h; float dx, dy; public void move() { x += dx; y += dy;

35 Acceleration Move advanced: you may want to apply acceleration to movement Could be a single value(scale up/down), separate ax/ay, or another 2D vector Updates velocity when object moves Need to watch out for sign issues if velocity components are negative public class Sprite { float x, y, w, h; float dx, dy; float ax, ay; public void move() { x += dx; y += dy; dx *= (1.0 +ax); //accelerate dy *= (1.0+ay);

36 Mouse (Touch) Events Old mouse events: a physical mouse attached to a device Types: button press, release, cursor moved, drag, enter/exit, hover New touch events: a finger touching the screen Type: button press, release, drag Mouse movement, hovering largely absent Multi-touch input now possible

37 Mouse Touch Events

38 Keyboard Events