GATAV 5. Animations Using a Game Loop

Transcription

1 GATAV 5. Animations Using a Game Loop

2 TOC 1. The basic principle. 2. Creating bubbles. 3. Making the bubbles more look alive. 4. The appearent look. 5. Making the audiance impressed. 6. Now it up to you: Your exercise. Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 2

3 Animation Basics Any kind of animation is a series of images Animation techniques differ in the kind of image generation Frame Based Animations Every image is a bitmap, which was drawn by somebody in advance Simple concept, but seems not very flexible Tween Based Animations Bitmap images are partitioned; partitions will be animated seperately Animations were described as in between states: start situation, end situation, time duration More complex concept allowing scene flexibility and synchronization Display List Animations Objects (bitmap or vector) are drawn in realtime on calculated paths and under calculated shape and visibility transformations Calculations may depend on user interaction Most flexible, but most complex Almost used in every computer game Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 3

4 The Basic Principle 1. Hijack the view surface 2. Do your own thing Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 4

5 A New Element: User Defined Views BubblesActivity.java package de.fhkl.gatav.ut.bubbles_minus1; import de.fhkl.gatav.ut.bubbles_minus1.r; import android.app.activity; import android.os.bundle; public class BubblesActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); User defined View a class to be defined //Initializing the view, will instantiate on // object of the class BubblesView setcontentview(r.layout.main); Layout: main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <de.fhkl.gatav.ut.bubbles_minus1.bubblesview android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 5

6 The BubblesView - Init s & Helpers package de.fhkl.gatav.ut.bubbles_minus1; import java.util.linkedlist; import android.content.context; import android.util.attributeset; import android.util.log; import android.view.surfaceholder.callback; import android.view.surfaceview; import android.view.surfaceholder; import android.graphics.canvas; import android.graphics.color; import android.graphics.paint; import android.graphics.rectf; //BubblesView: Manages display handling of app. //Implements SurfaceHolder.Callback to access surface public class BubblesView extends SurfaceView implements SurfaceHolder.Callback { //Surface to hijack private SurfaceHolder surfaceholder = null; //Display refresh thread private GameLoop gameloop; //Certain paint properties and objects private Paint backgroundpaint = new Paint(); private Paint bubblepaint = new Paint(); private static final int RADIUS = 10; private static final float DEG_TO_RAD = (float)(2* /360.0); //Positionals for drawing & angel for circle path private float x, y; private int alpha = 0; public BubblesView(Context context, AttributeSet attrs) { super(context, attrs); //Register class as callback handler for the surface getholder().addcallback((callback) this); //Create a blue/red color for backgrd./bubble backgroundpaint.setcolor(color.blue); bubblepaint.setstyle(paint.style.fill); bubblepaint.setcolor(color.red); //The contructor doesn t draw a view/layout private void drawscreen(canvas c) { //Draw background c.drawrect(0, 0, c.getwidth(), c.getheight(), backgroundpaint); //Draw bubble c.drawoval(new RectF(x-RADIUS, y-radius, x+radius, y+radius), bubblepaint); private void calculatedisplay(canvas canvas) { //Screen is partitiones in 4 segments in x an y final float width = canvas.getwidth()/4; final float height = canvas.getheight()/4; //Circle moves on a circle around screen center x = width * (float)math.cos(alpha * DEG_TO_RAD) + 2 * width; y = height * (float)math.sin(alpha * DEG_TO_RAD) + 2 * height; //Move on to next angle if (alpha < 360) alpha++; else alpha=0; Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 6

7 The BubblesView Display Loop & Timing //Private display loop thread private class GameLoop extends Thread { private long msperframe = 1000/25; //Frame rate public boolean running = true; //Thread run control private long frametime = 0; //Clock to time control private void waittillnextframe() { long nextsleep = 0; //Count frametime on every call frametime += msperframe; //run is the standard routine called, when a thread is //started through the start() method public void run() { Canvas canvas = null; final SurfaceHolder surfaceholder = BubblesView.this.surfaceHolder; frametime = System.currentTimeMillis(); while (running) { try { //Get the canvas exclusively canvas = surfaceholder.lockcanvas(); //Correct frametime value by actually passed ms nextsleep = frametime - System.currentTimeMillis(); if (nextsleep > 0) { //Wait to every msperframe. Keeping the //processing time into account try { sleep(nextsleep); //Try this line instead, if you don't believe // sleep(msperframe); //Must be executed exclusively synchronized (surfaceholder) { //Calculate new frame & draw cycle calculatedisplay(canvas); drawscreen(canvas); finally { if (canvas!= null) surfaceholder. unlockcanvasandpost(canvas); waittillnextframe(); catch (InterruptedException e) { //Nothing being done here //End of private class GameLoop Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 7 ft=st ft+40 ct=st+40 dt=ft-ct=0 no sleep ft: frametime st: starttime ct: currenttime dt: delaytime ft+80 ft+120 ft+160 ft+200 ct=st+75 dt=ft-ct=5 sleep(5) ct=st+130 dt=ft-ct=-10 dt<0 => no sleep ct=st+150 dt=ft-ct=10 sleep(10) ct=st+200 dt=ft-ct=0 no sleep time [ms]

8 The BubblesView - Miscellaneous //Interfcae implementation //Called when display is up public void surfacecreated(surfaceholder holder) { surfaceholder = holder; //Must be executed exclusively synchronized (this) { if (gameloop == null) { //Start animation here gameloop = new GameLoop(); gameloop.start(); //Not used: Called after structural changes // (format or size) have been made to the surface public void surfacechanged( SurfaceHolder holder, int format, int width, int height) { //Called before display will be brought down public void surfacedestroyed(surfaceholder holder) { //Must be executed exclusively synchronized (this) { boolean retry = true; if (gameloop!= null) { //Signal stop request to display loop gameloop.running = false; //Wait until thread joins here while (retry) { try { //Catch the thread gameloop.join(); retry = false; catch (InterruptedException e) { //Void loop in any case gameloop = null; //End of class BubblesView Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 8

9 Creating Bubbles A fine example of using classes and instances Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 9

10 Definition of a Bubble package de.fhkl.gatav.ut.bubbles_0; import android.graphics.canvas; import android.graphics.color; import android.graphics.paint; import android.graphics.rectf; class Bubble { private float x, y, speed; private static final Paint bubblepaint = new Paint(); //Unusual way to set static prop s of an class static { bubblepaint.setstyle( Paint.Style.FILL); bubblepaint.setcolor(color.cyan); bubblepaint.setalpha(150); bubblepaint.setantialias(true); //Some constants of a Bubble public static final int RADIUS = 10; public static final int MAX_SPEED = 10; public static final int MIN_SPEED = 1; //Constructor init. Start pos. & speed public Bubble (float x, float y, float speed) { this.x = x; this.y = y; this.speed = Math.max(speed, MIN_SPEED); //Simply draw that bubble public void draw(canvas c) { c.drawoval(new RectF(x-RADIUS, y-radius, x+radius, y+radius), bubblepaint); //Speed moves bubble up in any way public void move() { y -= speed; //Test if the Bubble is still visible public boolean outofrange() { return (y+radius < 0); //End of class Bubble Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 10

11 Aus BubblesView.java import java.util.linkedlist; private LinkedList<Bubble> bubbles = new LinkedList<Bubble>(); //Bubble generation rate private float BUBBLE_FREQUENCY = 0.3f; //Constructor is now simplified public BubblesView(Context context, AttributeSet attrs) { super(context, attrs); getholder().addcallback((callback)this); backgroundpaint.setcolor(color.blue); bubblepaint.setstyle(paint.style.fill); bubblepaint.setcolor(color.red); Using Bubble Instances //Calculates next bubble step private void calculatedisplay(canvas canvas) { randomlyaddbubbles(canvas.getwidth(),canvas.getheight()); LinkedList<Bubble> bubblestoremove = new LinkedList<Bubble>(); //Move all bubbles for (Bubble bubble : bubbles) { bubble.move(); //and keep display leavers in mind if (bubble.outofrange()) bubblestoremove.add(bubble); //Remove all bubbled up for (Bubble bubble : bubblestoremove) bubbles.remove(bubble); //Adds a bubble at random. public void randomlyaddbubbles(int screenwidth, int screenheight) { //Create bubble every time the //frame threshold is exceeded if (Math.random()>BUBBLE_FREQUENCY) return; private void drawscreen(canvas c) { c.drawrect(0,0,c.getwidth(),c.getheight(), backgroundpaint); //Draw bubbles for (Bubble bubble : bubbles) { bubble.draw(c); bubbles.add(new Bubble( //x pos at random (int)(screenwidth*math.random()), //y below bottom of screen screenheight+bubble.radius, //This avoids bubbles of speed 0 (int)((bubble.max_speed-0.1) *Math.random()+0.1) )); Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 11

12 Making the Bubbles Looking more Alive Things don t have to act as reality, as long as it looks like reality Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 12

13 package de.fhkl.gatav.ut.bubbles_1; import... More Animation to the Bubbles class Bubble { private float x, y, speed; private static final Paint bubblepaint = new Paint(); static { bubblepaint.setstyle(paint.style.fill); bubblepaint.setcolor(color.cyan); bubblepaint.setalpha(150); bubblepaint.setantialias(true); public static final int RADIUS = 10; public static final int MAX_SPEED = 10; public static final int MIN_SPEED = 1; private float amountofwobble = 0; private static final float DOUBLE_PI = (float)(2* ); public static final float WOBBLE_RATE = (float)8*double_pi; public static final float WOBBLE_AMOUNT = (float)0.05; private float amountofshift = 0; public static final float SHIFT_RATE = (float)50*double_pi; public static final float SHIFT_AMOUNT = 2f; public Bubble(float x, float y, float speed) { this.x = x; this.y = y; this.speed = Math.max(speed, MIN_SPEED); public void draw(canvas c) { float xdeformation = RADIUS*WOBBLE_AMOUNT*amountOfWobble; float ydeformation = RADIUS*WOBBLE_AMOUNT*(1-amountOfWobble); float shift = SHIFT_AMOUNT*amountOfShift; c.drawoval( new RectF(x-(RADIUS+xDeformation)+shift, y-(radius+ydeformation), x+(radius+xdeformation)+shift, y+(radius+ydeformation)), bubblepaint); public void move(canvas c) { y -= speed; amountofwobble = (float)math.cos((y/c.getheight()) *WOBBLE_RATE); amountofshift = (float)math.sin((y/c.getheight()) *SHIFT_RATE*speed/MAX_SPEED); public boolean outofrange() { return (y+radius < 0); //End of class Bubble Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 13

14 package de.fhkl.gatav.ut.bubbles_1; import... More Animation to the Bubbles class Bubble { private float x, y, speed; private static final Paint bubblepaint = new Paint(); static { bubblepaint.setstyle(paint.style.fill); bubblepaint.setcolor(color.cyan); bubblepaint.setalpha(150); bubblepaint.setantialias(true); public static final int RADIUS = 10; public static final int MAX_SPEED = 10; public static final int MIN_SPEED = 1; private float amountofwobble = 0; private static final float DOUBLE_PI = (float)(2* ); public static final float WOBBLE_RATE = (float)8*double_pi; public static final float WOBBLE_AMOUNT = (float)0.05; private float amountofshift = 0; public static final float SHIFT_RATE = (float)50*double_pi; public static final float SHIFT_AMOUNT = 2f; public Bubble(float x, float y, float speed) { this.x = x; this.y = y; this.speed = Math.max(speed, MIN_SPEED); public void draw(canvas c) { float xdeformation = RADIUS*WOBBLE_AMOUNT*amountOfWobble; float ydeformation = RADIUS*WOBBLE_AMOUNT*(1-amountOfWobble); float shift = SHIFT_AMOUNT*amountOfShift; c.drawoval( new RectF(x-(RADIUS+xDeformation)+shift, y-(radius+ydeformation), x+(radius+xdeformation)+shift, y+(radius+ydeformation)), bubblepaint); public void move(canvas c) { y -= speed; amountofwobble = (float)math.cos((y/c.getheight()) *WOBBLE_RATE); amountofshift = (float)math.sin((y/c.getheight()) *SHIFT_RATE*speed/MAX_SPEED); public boolean outofrange() { return (y+radius < 0); //End of class Bubble Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 14

15 The Appearent Look Mad Movies or Things got to get smooth Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 15

16 Things to do for a Smoother Look Simple solution: draw as many frames as possible But be careful, there may be other things to do Exact movement calculation If we don t have fixed logical frames, we need a kind of fractions of a frame From Bubble.java public void move(canvas c, float numberofframes) { //Movement depends on exact time between drawn frames float moveddistance = speed*numberofframes; y -= moveddistance; amountofwobble = (float)math.cos((y/c.getheight())*wobble_rate); amountofshift = (float)math.sin((y/c.getheight()) *SHIFT_RATE*movedDistance/MAX_SPEED); Adjust the rate of bubble generation Since frequently calls to randomlyaddbubbles will create to much bubbles now Necessary: Subframe counting Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 16

17 From BubblesView.java //Generates new, moves, removes unused bubbles private void calculatedisplay(canvas canvas, float numberofframes) { randomlyaddbubbles(canvas.getwidth(), canvas.getheight(), numberofframes); LinkedList<Bubble> bubblestoremove = new LinkedList<Bubble>(); for (Bubble bubble : bubbles) { bubble.move(canvas, numberofframes); if (bubble.outofrange()) bubblestoremove.add(bubble); for (Bubble bubble : bubblestoremove) { bubbles.remove(bubble); Subframe Counting //Adds a bubble at random. //Now: Probability depends prop on the time between frames //Resulting in a more constant bubble generation rate public void randomlyaddbubbles( int screenwidth, int screenheight, float numframes) { //Private display loop thread public void run() { Canvas canvas = null; long thisframetime; long lastframetime = System.currentTimeMillis(); float framessincelastframe; final SurfaceHolder surfaceholder = BubblesView.this.surfaceHolder; frametime = System.currentTimeMillis(); while (running) { try { canvas = surfaceholder.lockcanvas(); synchronized (surfaceholder) { drawscreen(canvas); //Calculate the exact no. of frames since last loop thisframetime = System.currentTimeMillis(); framessincelastframe = (float) (thisframetime-lastframetime)/msperframe; lastframetime = thisframetime; //Create a bubble if numberofframe threshold exceeds if (Math.random()>BUBBLE_FREQUENCY*numFrames) return; bubbles.add(new Bubble( //x pos at random (int)(screenwidth*math.random()), //y pos under bottom of screen screenheight+bubble.radius, //This avoids bubbles of speed 0 (int)((bubble.max_speed-0.1)*math.random()+0.1))); calculatedisplay(canvas, framessincelastframe); finally { if (canvas!= null) surfaceholder.unlockcanvasandpost(canvas); waittillnextframe(); Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 17

18 Making the Audiance Impressed Some minor tricks. Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 18

19 Use a cool pics Background Nice, fancy looking objects From BubblesView.java private Bitmap backgroundbitmap; private Bitmap bubblebitmap; Simple but Effective Tricks //Constructor public BubblesView(Context context, AttributeSet attrs) { super(context, attrs); backgroundbitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.aquarium); bubblebitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.bubble); private void drawscreen(canvas c) { Rect nullrect = null; Paint nullpaint = null; c.drawbitmap(backgroundbitmap, nullrect, new RectF(0,0,c.getWidth(),c.getHeight()), nullpaint); From Bubble.java method draw c.drawbitmap(bubblebitmap, nullrect, new RectF(x-(RADIUS+xDeformation)+shift, y-(radius+ydeformation), x+(radius+xdeformation)+shift, y+(radius+ydeformation)), nullpaint); Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 19 The bubble is drawn on a transparent background

20 Now it up to you. Your exercise. We hope it won t be a rainy day to you Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 20

21 Always keep in mind: Things don t have to behave physically correct, but it should look like that THANK YOU FOR YOUR ATTENTION! Graphical Apps - The Android View: Prof. Dr. Bender, Prof. Dr. Tronnier 21