Fast and Rich animations for Android Apps using OpenGL ES

Kauserali Hafizji
June Software

About Me @ Tap N Tap Android UI Toolkit for Tablets @ CrowdSpottr Built the android version @ June Software 2d Games for iOS and Android

This is ! a gaming session

Agenda
Understand why OpenGL ES for Android Apps Anatomy of an OpenGL ES Implementation My experiences of using OpenGL ES QnA

Why OpenGL ES?

Sdk Animations
Animations can be done in 2 ways:
Tweened animation Frame by frame animation

When to use default animations ?

Only in cases of simple animation requirements. Default animations are not sufficient for complex animations.

Sample complex animations

Inbuilt Gallery3d App built in OpenGL ES.

Talking Tom app

Easy to build with OpenGL ES.

Case Study: Sample Animation

10

1. Using Simple Views

Animate the views on the UI Thread itself. Problems Slow Each movement causes an invalidate on the parent view.

11

2. Using the canvas

Use the canvas to draw elements. Pros Is optimized since invalidation is on a part of the view. Cons For heavy items to be rendered, FPS reduces drastically rendering a jerky motion.
12

3. OpenGL ES
Use OpenGL to render the elements. Pros All the rendering happens in one view and we dont have to worry about invalidations. Can render 2X-5X of regular FPS. Cons Programming intensive.
13

What is OpenGL ES?

Cross-platform API for full function 2D and 3D graphics on embedded systems. Works as an interface between software and graphics acceleration.

14

State machine architecture

15

OpenGL ES Basic Terminology

Co-ordinate Axis ViewPorts Vertexes Polygons Meshes and Textures FPS
16

Co-ordinate axis

17

Viewports
Chunk of space that can be seen. OpenGL ES provides two kinds of viewports:
1. Perspective projection 2. Orthographic projection

18

Vertexes
A point in 3d space
X co-ordinate Y co-ordinate Z co-ordinate

19

Polygons
The biggest polygon that OpenGL ES allows you to draw is a triangle. Anything else needs to be drawn with a series of triangles.

20

Textures and Meshes

An image in OpenGL is termed as a texture. Textures are mapped onto a mesh of vertices.

3d Mesh

Textured Mesh
21

Animations with textured Meshes

Map an image to a mesh. Move the mesh around in 3d space according to the animation required.

22

OpenGL ES animation

Press Me

23

FPS Frames Per Second

Is the number of times onDraw is called in a second. Typical code to measure FPS would look like this:

24

25

Sample OpenGL ES program

26

Getting started with OpenGL ES

1. Set up the View. GLSurfaceView Glue to connect OpenGL ES to the view system. Allows OpenGL ES to work with the activity life cycle. 2. Set up the Renderer
GLSurfaceView.Renderer

Provides 3 utility functions:

onSurfaceChanged
27

onSurfaceCreatedonDrawFrame

In code

28

Common OpenGL ES problems

Introducing the GLSurfaceView in a 2d app can be resource intensive. You may notice a flicker at the start. To overcome Screen Flicker
Make sure the GLSurfaceView fills the entire screen.

29

References
Jeff Lamarches blog
(http://iphonedevelopment.blogspot.com)

Man pages
(http://www.khronos.org/opengles/sdk/1.1/docs/man/)

The red book

(http://www.glprogramming.com/red/)

OpenGL SuperBible
(http://www.opengl.org/sdk/docs/books/SuperBible/)

30

Conclusion

31

Questions??

32

Thank You
ali.hafizji@gmail.com @Ali_hafizji

33