1

Fast and Rich animations for Android Apps using OpenGL ES

Kauserali HafizjiJune Software

2

About Me• @ Tap N Tap

• Android UI Toolkit for Tablets

• @ CrowdSpottr • Built the android version

• @ June Software• 2d Games for iOS and

Android

3

This is ! a gaming session

4

Agenda• Understand why OpenGL ES for

Android Apps• Anatomy of an OpenGL ES

Implementation• My experiences of using OpenGL ES• QnA

5

Why OpenGL ES?

6

Sdk Animations

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

7

When to use default animations ?

• Only in cases of simple animation requirements.

• Default animations are not sufficient for complex animations.

8

Sample complex animations

Inbuilt Gallery3d App built in OpenGL ES.

9

Talking Tom app • Easy to build with

OpenGL ES.

10

Case Study: Sample Animation

11

1. Using Simple Views

Animate the views on the UI Thread itself.

Problems• Slow

• Each movement causes an invalidate on the parent view.

12

2. Using the canvasUse 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.

13

3. OpenGL ESUse OpenGL to render the elements.Pros

• All the rendering happens in one view and we don’t have to worry about invalidations.

• Can render 2X-5X of regular FPS.

Cons• Programming intensive.

14

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.

15

State machine architecture

16

OpenGL ES Basic Terminology• Co-ordinate Axis• ViewPorts• Vertexes• Polygons• Meshes and Textures• FPS

17

Co-ordinate axis

18

Viewports• Chunk of space that can be seen. • OpenGL ES provides two kinds of

viewports:

1. Perspective projection 2. Orthographic projection

19

Vertexes

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

20

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.

21

Textures and Meshes• An image in OpenGL is termed as a

texture.• Textures are mapped onto a mesh of

vertices.

3d Mesh Textured Mesh

22

Animations with textured Meshes• Map an image to a mesh.• Move the mesh around in 3d space

according to the animation required.

23

OpenGL ES animation

Press Me

24

FPS – Frames Per Second• Is the number of times onDraw is called

in a second.• Typical code to measure FPS would

look like this:

25

26

Sample OpenGL ES program

27

Getting started with OpenGL ES1. 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:onSurfaceCreatedonDrawFrame onSurfaceChanged

28

In code

29

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.

30

References• Jeff Lamarche’s 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/)

31

Conclusion

32

Questions??

33

Thank You

• ali.hafizji@gmail.com• @Ali_hafizji