My name is Assana Fard, and welcome to WWDC 2009. We will be talking about all things graphics on the phone. So we're going to start our session by going over the technologies available to you a little bit, and then we'll spend most of the time getting into more detail about each and one of them. And towards the end we'll talk a little bit about comparing and contrasting the features, the performance, just what's best for your application. So first the UI Kit.

UI Kit is what you use to design and implement your applications user interface. It's your bag of goodies controlled, pre-built widgets that you're going to use. Quartz 2D is the drawing engine of iPhone graphics. It's really the workhorse of the drawing engine. Core Animation is your 2D compositing system. Everything that you see on the display on iPhones goes through Core Animation.

So it's really just the soul of the iPhone. And then we'll talk a little bit about OpenGL ES, which is the API behind all of the iPhone games currently. So how do these all fit in before we jump into actually talking about each of them? So the typical application has app controls. And these are your buttons, your widgets, the classes that help you interact with your user, your accelererometer, the sliders, and everything.

So that's what you use your UI Kit for. Then you have some 2D graphics, and that's going to be done using Quartz 2D. And of course, UI Kit gets its content from Quartz 2D, so those two are also related with each. And then finally Core Animation, which is your composite engine. Again, everything that gets drawn on the phone is using Core Animation.

And Core Animation is what talks to the display hard drive. And then on the 3D side we hav=e OpenGL ES, which talks to the graphics hardware, and it connects to Core Animation through a bridge layer called EQAL, and we'll talk about this a little bit later. And in turn Core Animation uses OpenGL ES for its rendering.

So, UI Kit is the heart of CocoaTouch. It's the thing that gives you these prebuilt widgets with standard behavior. It's what you use to communicate to your user, with your applications interface. It gives you beautiful prebuilt widgets with standard behavior, and these are behaviors that that user can actually understand.

Your iTune was designed with a phone in mind. So it, it lends itself to being, to a handheld device. Its transitions, its stage, they're all there to convey this state change to your user. Let's talk about just a one more thing that, it's also what gives you events; event handling comes all from UI Kits.

And we're going to, we're interested in the view. Now what is a view? A view is nothing but the rectangular region on your display where you get events from and you put your data in. Again, UI Kit gives you beautiful standard widgets, gives you buttons, and sliders, and pictures, and textfields, everything.

And they all come with this predefined behavior. It give your application this consistency, a professional look. And again, a behavior that the user can relate to. When you're switching views you don't want your user to be surprised by what happens, you want that nice slide to animation. And they're layer-backed. And this is important.

And I'll touch on that on the next slide. What it means is that there is a Core Animation layer for every UI view. And again, we'll talk about this in a little bit. They're easy to use, you can either use them in interface field, or just drag and drop them, or you can click to them. They're available in terms of programmatic coding.

So let's talk a little bit about the views. The views are what we really want to work with in terms of UI interface. Again, they're this rectangular region on the display where you put your data in. And UI Kit provides a high level interface to very common and most used drawing operations. Like setting your background colors, setting your button colors, writing text, getting images.

And this is what you use to customize these views to your own application. As I mentioned they are layer-backed. And what it is, is that, again, there's a Core Animation layer backing up every UI view. And with Core Animation comes animation, which is great. So these UI widgets have properties that can be animated.

And best of all these animations are all built in, so your swishes, your fades, your flips and transitions, they all come in prefilled with your widgets that you use. And again, you don't have to do any work, which is wonderful. And if you don't like any of these, obviously you can subclass your view, customize it, draw your own artwork. So UI Kit is, as most of you might know, it's a huge library of a lot of classes.

I'm going to pull out a few that are interesting for graphics. UI Image. UI Image gives you all of your image drawing classes. If you want to load an image into interface, draw into different view, different color, create a new image. This is what you use. UI Color gives you device color across your app and across your view, which is nice.

Font and Labels, this is what you want to use to get text onto your interface. And UI Screen gives you some information about your display, [inaudible] In addition to these classes, there are a bunch of utility functions that are handy for graphics. There's some that help you fill in a rectangle and just do outlines and general simple graphics operations.

There's some utility functions that allow you to create a single JPEG file out of your view, which is really nice and handy. And the last one is important for us; you can retrieve your graphics context out of your view. And this is going to be what you're going to need if you're customizing your viewer for [inaudible] So going to take a look at the little demo that we have. It's not a very fancy demo, but it's a catalog of everything that UI Kit provides for you. So this little application, it shows, you know, you have your buttons, of course.

And again, with all of these widgets the behavior comes built in. So you have a list of controls if you want to look and see what you want to use, you know, customize sliders, standard sliders, so on. I want to go show you a couple; a search bar is one of my favorites.

So you get this search bar, with it, of course, comes the keyboard access, great. You can type in your name, well, and it comes with a spell checker. And again, text entering everything is prebuilt in and you cancel, and so on. So again a lot of behavior that you don't really have to deal with that's prebuilt in.

Let's see, what else do we have? Oh, transitions. flipping boom right in your pocket, you don't have to do anything, and this is fading between images. And again, this is just built right out of your UI Kit; you don't have to do anything with them. Let's get images, oh, I like this one. This is just taking an image and plopping it into the UIView. And effectively it's creating a little slideshow right out of the box. So again, this, this is available a sample code. You can take home, you can download this from the developer website and play with it.

And again, it's a nice catalogue of what's available to you through UI Kit. If you want to read more, the iPhone Application Programming Guide is a great resource. There's also the iPhone Human Interface Guideline, which is not so much in terms of programming, but in terms of application design. It gives you a lot of guidelines.

And, of course, iPhone OS Technology review. Quartz 2D. Quartz 2D is the heart of the drawing engine in iPhone OS.. It's also the same as Mac, but we're talking about iPhone. It's the thing that draws everything, gets its contents from different technologies. Now let's look at this image, this images on the screen. Everything here was drawing using Quartz 2D.

The image in the top left was a PDF file, it has a nice soft border, it has that translucent guitar blended onto it. The next two are patterns, that I think that's a soccer ball or something, or the kidney. They're used using patterns, again, really easy to use. The little seismic graph, there is purely path. It's a really intricate path, but it's again, just done using paths.

It's of course text, and all this not of English, it's we have some Korean, or whatever it is. And my favorite in this take, the grape. I love it. It's a bunch of circles with shadings on it. And again, you can get great looking graphics just by using this components in Quartz 2D. So let's take a look at it again. It's a sophisticated drawing engine.

Its little vector-based geometry, so it has primitives that it builds on and creates more intricate shapes. In addition to graphics it also supports text and images and PDF's, and a whole bunch of other stuff. And we'll go through this a little bit more. It's used by a higher-level frameworks, like UI Kit gets its content from Quartz 2D. And of course, when you customize your view you will be using Quartz 2D to do the drawings.

And historically we refer to that Quartz Graphics, and you might hear me mention CG or Core Graphics, all the same thing basically. Let's take a look. So basic primitives, what are the basic primitives, you have? Point, of course, you can't get more basic than that. And you have lines, and arcs, and curves. And you know, these are all very easy, they're building blocks up to Quartz 2D. You could, you kind of build on top of, you combine them to create really nice images.

You have rectangles, and circles, there are variances in a circle, like this eclipse. You can stroke them, fill them again, a lot of flexibility in what you can do. It's a Quartz Path, and again it takes a path and you add building blocks to this path, and it allows you to, you know, you can add to your lines and basic primitives lines and rectangles and arcs to the path. And you can close your path, so now you can fill it if you want. And you can stoke the path that it's closed or not, and changes color, and again a lot of flexibility.

It supports a gradient. Now there are two kinds of gradients. There is the linear gradient, like the blue box on the left, there, that goes just from light blue to dark blue. And it's a really nice gradient for, I don't know, some of your backgrounds, or you see it all over the phone, people use this nice gradient. The second type, type is the radial gradient, which is what you see in the pink ball.

And this is a good example of taking just a boring little circle and adding this gradient on it. And now it looks like a really cool looking sphere, but it's really just a circle with a radial gradient on it, that goes from pink to white. And finally the last image is interesting.

It's got a 3 point gradient, which by itself is nice. It goes pink to green to orange, but what's important there is that it has been drawn through a mask, and that's how you get the letter B. So again, you take your building blocks, you combine them to get really sophisticated images, with just really no codes, it's a very little code. And simple coding.

We support images. There just 6 to 8 image types that we support on the phone. Our preferred image type is a paint file. So if you possibly can convert your data to paint, that would be great. If not, of course we support the rest of the image sites.

PDF supports, so the phone has a really nice rich PDF support. You can load in single page PDFs, multi page PDFs, you can jump around them, draw them into views, create new ones out of them. Just again, a nice set of PDF support functionality. It's important to remember that their drawing order matters if you're as a painter model. So, which means what comes next modifies what was there before. So let's draw this, build us a little flier for just I want to get this point across.

It's important; it's not a layer-based drawing. So in here we have a wide rectangle. We're going to put a gradient on it. And this gradient has replaced the white; it has blended into the white and modified the white rectangle. We're going to put that opaque image on it. Now this opaque image has replaced portions of the gradient that it covers.

So again, if you want to do gradient it has already to be modified. We put a little transparent, so I don't know if you guys can see, you can see through it that's getting blended into the image. So you can see through the stars, you can see their image on the gradient, but again, the image has been modified.

And finally we put a little nice Italian Velo stamp on it. And we have our flier. And again, if it's not very much work, it's really easy to use this stuff. So the heart of Quartz 2D is a Quartz Context, a CG context. .And a CG Context is nothing but a destination for your drawing. So you draw an image, you're drawing it into the CG context.

You draw it past, it's going through CG context. It is used by higher applications, like UI Kit and Core Animation. And again, your application, when you want to draw you want to get the CGcontext and draw into it. And it's also continued for graphics state. Now what is a graphics state? So in a lot of 2D programming -models what you do is you want to draw your primitive. You set a bunch of attributes, and then you draw your primitive. And then the next time you want to draw this primitive you have to reset attributes and draw again, or change one and set all of them and try again.

What we do in Quartz 2D is we save that stage for you. So these attributes are, they're just parameters that control the way your drawing looks. So let's take a look at this example. Here we have a path. It's just a star. Let's say we, want to fill it.

So we set the fill color attribute, and the next time we draw it it's filled to the blue. So let's say now we want to also stroke this path. So all we have to do is set the stroke color, redraw their path, and now we're a filled stroke star. You want to transform it, you can just set the transformation, and again redraw and you get accumulated parameters.

I do it in a lot of these parameters you can, you can change line with, and you know, change pattern and dash it. And my favorite, you can add a shadow, which is just a parameter. And boom, you get this beautiful shadow on your path, and again, you can see this global alha.

There are very, very many more of this pamphlets, so you can read the, read about. But again, graphic state saves your state, and you don't have to worry about it. Now how do we get access to the CGContext? It's really, really easy. What you do is you subclass UIView and then you implement your drawRect method. And the first thing you do in drawRect method is called UIGraphicsGetCurrentContext. This is what gives you your current context, your graphics context that you're going to use to render into.

So let's take a look at an example. So here we have subclass UIView. We're implementing our drawRect method, and again the first thing we do CGContext, xContext, myContext, UIGraphicsGetCurrentContext. And now at this point we have our current context that we're going to draw into. So before I move on I want to bring to your attention that on the iPhones the [inaudible] system is flipped. So origin is in the top left corner, and unlike the Cocoa developers, if you're Cocoa app developers you know the origin is in the bottom left.

So be mindful of this one change. So OK, great, so now we have our graphics context, and let's draw some drawings. And here I'm going to draw a blue rectangular shape. So the first thing we do is we want to get our geometry. CGRect, myRect, now I'm just going to call this CGRect Made, it takes four arguments: the orgin, XMY, and a width, and a height. So let's make the rectangle that's 40, 40.

And give it a width of 240 by 120. Now we need to set some parameters in this rectangle on this right before we draw it. So I want to fill it with blue. So what we're going to do is CG context. set out CG fill color. And the arguments, all the CG calls, the first argument is your context.

So of course we give it myContext. The next 3 arguments are the color-red, green, and blue. In here we're going to give it, make it a blue. So we're going to set red on green to zero. And full intensity blue. And the last argument is your opacity. So on the phone, 1.0 fully opaque, 0 fully transparent.

So we're going to make our blue color fully opaque. And the last thing we need to do is show our rectangle. So CGContext FillRect again, it's a CG call we give it context after the first argument, and then a rectangle. So but we have a blue rectangle on 40, 40. Really, really easy to use. Now let's make more changes to our rectangle. Let's showcase with a green color.

Again we don't have to worry about this little color, we've already set it once, we've all ready filled our rectangle with no problem. All we do is CGContext R, RGB stroke color, which is very similar to the fill color in terms of arguments, but it's such a short color. So again, CGContext, my context is the first argument, let's green blue indicates green, a full intensity green, and it's fully opaque, so we give it a 1.0 for transparency.

And then set context stroke with Rect with width, that's the stroke our rectangle, and the width is the width of the stroke line around it. It's in this case 10. So again, context is always your argument into your CGCalls and our rectangle. So let's see, there we go. We have this green [inaudible] border around the rectangle. Again, it's really easy to use.

The building blocks are the key to this. You take a path, you start the path and you add the link blocks to it. And, and you, it allows you to create this really intricate arbitrary shapes, which is not very much work. So let's look at this demo we have. All right, so we have a little demo of course, it's really not too fancy.

But it's very similar to the UI catalog. Again, all sorts of samples so you can download it and look at how we done, done this stuff. And it's usually a list of Primitives we have and just features that we support. So you know, of course, you can have your lines, and rectangles, they can be filled, they can be stroked, they can be, you know, patterned, I think that's in a different area. I mean, who doesn't like curves, I like curves.

So this is how you get curves And again, you want to see how we do to give support. Really easy to take a look at these. I want to let you, what else do we have? Gradients, I love gradients. I would grade it, oops, did I click on the wrong thing? There we go. So again, different ways of doing gradient, linear gradient, which doesn't get as much credit as the radial.

But I like the linear gradients, use it everywhere, and so on, so you can take a look at this and just kind of, like get a pattern, you know, if you want. Take a look at this and see what works for you. And again, it's just an example of how to build on this primitive. All right, let's go back to slides.

So in terms of reading material, of course the Quartz CD Programming Guide, the great excellent guide. It's available on the developer's side. And we always are commanded for a Grammy, but of course this is a book written by a couple of very, very expert folks. And it's a great book. It has sample code in it.

It gets really into the detail of every one of these. And it has scenarios and, again, really wonderful work. We really recommend it. So Core Animation. Core Animation is really the heart and soul of iPhone OS. It's the thing that composites everything. Again, if a pixel is on your phone it has gone through Core Animation. It's a layer-based framework.

It's really easy to use. Layers are your building blocks. So you basically take these building blocks and composite them together. It's a post-transparency of face, and you know by compositing these layers together, it allows for really visually appealing applications, with really not very much work on your part.

It supports a lot of the different media. Your layers data can come from video, it can come from, you know, Quartz 2D, it can come from UI Kit. Again, it takes your layers regardless of where the contents came from and composites them. It's very nice, it's GP accelerated, so it's efficient. It loops really fast and smoothly. And once again it proves your ability to get this intricate fabulous looking image out of the simple layers. So the heart of Core Animation is the layer. A layer is nothing but a 2D surface in a 3D world.

And what that means is that it really doesn't understand about 3D-ness of it, but these layers can be placed in, again, a 3D space. and then sometimes referred to this as 2-1/2 D. And it does that really, really well. It continues for animations, so and I'll talk about this a little bit more in later slides. The content comes again from different places like Quartz 2D and united frameworks. And a property change invokes the animation. And animations are implicit, meaning you don't have to really worry about it.

And again we'll get into this in a little bit. So there's several layers, types. I'm not really going to talk about these today. There is a Core Animation session tomorrow at 9, which is I think one of the best sessions this, this year at WWDC, so please attend that if you're interested in this. John has a lot of great information for you, and it's full of eye candy. I've seen it several times the other day, still love it. So please attend that session if you're interested in different layer types.

So let's talk about the two aspects of layers. The two aspects of properties and animation. So let's talk about priorities A layer can have geometry. This is the basic property unit, a dotted line is my geometry, is my border of my layer. It can have a background. And again, I like fading.

So it has the nice gradient background in this example. You can have a border, a nice rounded border here. It can have sublayers, and this is important, because this is where you get into building this layer tree of information. You know, every day you can have a sublayer and they all get composited together again to give you that beautiful visual effect. The content comes, it has content, and again it comes from anywhere you want.

In this case I've added some pics content to my sublayers. And again, you can have opacity and mask, and again a lot of properties that we're not going to cover today. But all of these properties involve animation, and we'll talk about this. Now intensive animation, that's the second part of the layer, why is it that we all like animation so much? Animation adds that visual feedback to your application. Its in real life it makes sure you really don't see jaggy motions.

Everything is smooth, except for my hands. But short of my hands, things are normally smooth. And animation gives that effect, it makes your app more real. It gives it more; again, it conveys the state change. You know, you're transitioning between views; your user isn't ever going to be surprised.

What happened to my, you know, I was looking at a page, where did it go? Well the transition to it, it's smooth. And it adds that extra jazz to your application. And there are two real concepts with Core Animation. Again, the fact that there are layers and all composited together in one animation loop.

And the second thing is that animations are implicit. And what does that mean? It means that you don't have to deal with timers. You don't have to monkey around with your animation. You don't have to worry about, oh, my God, what is my geometry on slide 25? It doesn't matter.

You change your property, Core Animation will animate for you. Asynchronistically behind your back, things just happen, and you just concentrate on what you want to do in your application instead of worrying about the animation. Anyone who has coded to timers know what a pain they are. So let's take a look at a couple of examples. So you have loaded this beautifulCore Animation logo in arts layers. And let's say we want to fade it away. So opacity, one of the properties, we set it to 0 again.

And I find OS 0 fully transparent, 1.0 fully opaque. So, boom. As soon as this line of code executes, your logo fades away, you don't have to worry about it. Let's say if you want to bring it back, so we can reset its opacity to 1.0. And as soon as that line executes your logo fades back in. And again, beautiful, it's simple, easy; it's done behind your back. Let's look at more cases-transactions.

Transactions combine multiple animations together. So let's look at this. So let's say we want to say blueLayer, I want you to fade, and I want the green also fade at the same time. So the moment this code executes they both simultaneously, asynchronistically fade away. And this one is my favorite example. You can change more than just one kind, or one property under layers. So in this case I'm going to make my blue fade, and also shrink as it's fading, and I want, I want the green layers to just walk away from us. So, boom, everything gets done.

Again, asynchronistically behind your back. Very nice. I'm going to touch a little bit on the different animation types. Again, I don't want to get into too much of Core Animation, you can read about this stuff and also go to John's session tomorrow. But there's just basic animation. And the gist of that is go from point A to point B, boom you're done. There's the Keefer [phonetic] animations.

And the gist of that is go from A, to B, to C, to D, etc, and you provide the key frames for us and Core Animation does the bouncing between them. Again, really simple model. We have transitions, and the transitions are just a cross state between 2 states.

You know, a cross state from my state A to state B. And finally group animations, or animation groups, and what there are is sasically grouping multiple animations in one animation loop. Really easy. Really easy to implement. So we've talked like 3 F or 4 frame words. And these 3 are the 3 that really are tangled together and they interact with each other quite a bit. Now let me show you this app, it's a solitaire app.

And the interesting thing about it is that the user has, the developer has chosen very wisely what part of which frame he uses. So right off the bat the welcomes page is nothing but the UI Kit. You know, it provides the button for a why not. He's not going to worry about using anything else. So all he did is customize the buttons to his own liking.

So let's play a game, oops, let me try a new game. So what's happening here is that every one of these cards is a UI Field. And he has customized them, he has subclassed them, and he has used Quartz 2D, actually these are all done in Quarts 2D, to draw the artwork on the front and back of the cards, great. But if he's still using Core Animation's implicit animation to just do the moving of the cards so if they are going from point A to point B, there is no reason to actually do anything more with that.

Now if I pick up a card and we move it around, so that events are coming from your UI Kit, great. The movement is explicit animation by Core Animation. So he's modified Core Animation to do what exactly he wants to and not do the implicit animation. However, the more can let it go again, implicit animation and core animation, go from Point A to Point B. Now I want to show you one more thing, and I don't know if you'll see it up here.

So when I flip these cards over, I don't know if you can see, the cards, it seems like they're flipping in 3D space. And this is what they call 2-1/2D animation. Again, this is still all 2D layers, they're not really going in 3D. But Core Animation has this fantastic way of making them look like they're flipping in 3D.

And again, this is just implicit animation done by Core Animation. Very nice and simple to use. And the best thing about these is that you don't have to do any work, cause this really comes with your layer. Excellent. So again, and he's again picked and chosen what to use out of UI Kit. These are all the standard UI Kit uses.

And if you don't have to code it why bother coding it? Use what comes with the applications. So again, the take home message here is if you don't have to, you don't have to, if you need it, don't use everyone of the frameworks; just use what works best for your applications. Reading materials: Core Animation Programming Guide, again, available on the Developer website.

You can download it. And also Animation Text and Timing Program guides, also available on the Developer site. So let's talk a little bit about OpenGL ES. And before we get into OpenGL ES I just want to talk about OpenGL. What is OpenGL? OpenGL is nothing but a softer interface to graphics hardware. And it's been around for along time. It's defined by those [inaudible] GL specifications. So it's an open standard. And it's not necessarily a 3D graphics API, although it's been used for one for a long time.

And you know this slide isn't going to do its justice, but I'm going to quickly just go over the gist of what OpenGL does. In summary, it takes vertices, which are points in 3D in the space, basically, and pixels at its input. And it applies some for whatwe would call visual operations on them. And it pops out at a pixels that are your last image.

Now what are their visual operations? So, it can transform on a state space and create the geometry. It can shrink themand rotate them, you know, all of these goodies. It can apply pervertix [phonetic] operations like lighting, if you want to look to your records and again transformation. And then it goes through and tessellates the geometry into time roles and rasterizes it into pixels. And now we have these pixels that we can apply for pixel operations through them, like texture mapping, or shading, or just, you know, colored look-up whatever you want.

And the gist of it is that he does all of this and pops our pixels into the frame buffer. And the frame buffer could be onscreen, frame buffer could display hardware. Or an off-screen frame buffer in the phone you have access to SBO's. And so that's really a simplified version of what OpenGL does. And I have a little reptile dude here we're going to look at.

So this dude is all vertices. And these vertices are transformed. And this is the kind of I don't know if you can see. So,here's the tesellation of these vertices on the reptile. And they're really, the vertices are just nothing but collection of triangles. And the triangles end up getting rasterized..

So at the end of the day we have pixels for every single point of our reptile. And we apply a visual operations to these pixels, and then there comes a texture map, gecko or reptile, or some sort, I don't know. So that's what OpenGL does. OpenGL ES is, again, it's a softer interface to graphics hardware for imbedded systems.

It's a sub-set; it's a lean version of OpenGL. Again, it's defined by an open standard. So open specifications. And it's high performance, because it was designed for these embedded smaller systems. And the nice thing about it is that it doesn't have a lot of the redundancies and just obsolete feature sets that OpenGL has kind of accumulated over the years. It's, one thing to note is that he also doesn't have a softer path.

So the version of app correctness is really on the developer's shoulders. Although you do something wrong, you quickly see, nothing draws. So let's take a look at on OpenGL ES a state of place in a bigger platform, just in the world. OpenGL ES is the framework that talks to graphics hardware. And on the other side the basic windows system API, what would that might be under? Mac is the Windows server, and the phone it happens to be something else. It talks to the display hard drive.

And the two of them connect to each other with this really thin bridge framework called OpenGL ES platform called API. That's where they sit in the grand scheme of things. Now EAGL is that bridge layer on the phone. All it does is it defines an interface within the operating system and OpenGL ES. It's the thing that manages your context.

And again, it does nothing more than just hand this context back to the operating system for composition. And here is how it looks on the phone. What is the naked windows system API? It's Core Animation. Again, Core Animation is the thing that draws everything on the screen and the phone.

And OpenGL ES platform API, it's called EAGL. And, I want to also bring to attention that Core Animation uses OpenGL ES for its composition, so. compositing. That's all I'm going to say about OpenGL right now, except there are a lot of sessions. You should go to them. I will mention them at the end of the session.

So the last thing I want to mention is how do you, so you decided you want to write an OpenGL app, how would you go about starting this? The nice thing besides is that Cocoa Touch has a really wonderful template for it, and this is what I'm going to just how you quickly.

It does all of the set-up for you, so you don't have to really worry about it. And then all you have to do is reimplement it, just draw a view. So let's take a look at this. I'm going to build a little quick app for you. So, OK, let's open Xcode, and we close that guy, and open a new project. So right here when you open a new project there is OpenGL ES application. Let's choose that and name it our demo.

Whoops, demo. All right, so let's just build and run this little app that we just created. There we go. So this is what comes right out of the box for you. It's a little quad that's rotating, very nice. So let's take a look at what you can do to modify this to your own application. So we opened a EAGL view file, excuse me.

And all you have to do, there's some setup at the beginning, and all I want to point to you is you scroll down and there is the drawView method that is there hard [inaudible] this little app. It's what's drawing, what's doing this drawing, it has all the set ups. So all you have to do is actually put your own code in this, in this method. Actually, they've even a comment to replace me with this implementation. So that really you can get an OpenGL game going.

All right, so that's all I'm going to say on that.

So learning more reading material, of course there's OpenGL ES 2.0 book. It's a good book. The developer website has some documentation on, of course, OpenGL ES and the iPhone. And the Red book is always good reading for OpenGL if anyone cares to actually learn OpenGL before its OpenGL ES. And OpenGL.org has a ton of information on OpenGL, just the API, and just information. It's not the easiest reading, but it's really, really powerful. Great! So, again we talked about our frameworks.

These are the four main frameworks available to you. Again, the question is which one do you use for your apps? And the answer is not necessarily any one, you have to use a combination that works for you. So we've picked a few examples, and let's talk about it. So here we have this application. On the top there is nothing, if you think UI Kit and Quartz 2D. On the top it's just a table view.

It's a UI Kit table view that is customized. They've painted the buttons, they've put their own text in, their put gradients on it. And again, just a UI to table view plopped in. The bottom, that little nice jagged line that's kind of going up nicely, that is done, that is done using Quartz 2D. Again, they took a view and they subclassed it and used Quartz 2D to do their -own drawings.

And both of them in the same view, and it works for them. Why not? You know, they could have used Quartz 2D to actually -implement the top section, but why? Why bother? It comes for them free. Let's take a look at another example. The solitaire example was again another good choice of, it's a good app of good choices.

What they did it's a combination of Quartz 2D and Core Animation, also UI Kit in some sense, because they picked what UI Kit offers in terms of buttons, and you know, the scroll bars and everything. But then what they did is, indeed, in the main body of the game they used Core Animation for all of their animations.

And as much as possible they used the implicit animation, so they didn't even have to worry about it. And then they subclassed and used Quartz 2D to do the intricate drawings and just the artwork that they wanted. Again, a good combination. Color flow is another example of really complex animation.

As you know if you want to swish [inaudible] or word kind of falls in or falls out. And it's again, really complex animation. And they're using Core Animation for that, which is great, that's what Core Animation, they should do, it's just it works really well for them. But then you flip your album, and you don't need to worry about using anything else.

UI Kit gives you the flip, it gives you the table view, and again, why not, use it. And the last thing I want to mention with touch fighter game, which is an OpenGL ES app. And again, if you're writing a game, OpenGL ES, that's your best bet. 3D modeling, OpenGL ES.

And you know you can use Core Animation to do some of the animations, but for the most part that's the framework to use. Again, we, we talk about all these frameworks, and they're supposed to make your life easier. They're not supposed to make your app busier. So use, use what works for you, and is, for example, UI Kit's high level interface to graphic operations is enough for you, then don't bother getting into Quartz 2D, you don't h-ave to. If it's not enough, then get into Quartz 2D. If, if the implicit animations are not enough for you, then get into explicit animations.

But if you don't have to why bother? The other nice thing about using UI Kit for what it comes with is that it, again, it gives your application just consistency both over your app, and also over the rest of the apps on the phone. So that's really nice. You don't want your user to be surprised. User uses buttons and uses UI elements, and they expect a behavior.

And UI Kit gives you that expected behavior. So again, how do you choose? We talk a lot about frameworks, but you might still not be clear how to choose. And we don't know. You know, there are tradeoffs based on features that some performance ease of use. The framework, each of them have their own strengths, and then for different needs. You know, we don't know what you're trying to do. In need of an application that's truly just customizing their GUI to do something is very different than the touch fighter fame that's [inaudible] 3D game under [=inaudible].

So we put together some scenarios that we thought might be common among the developers. And we tried to kind of figure out what framework works best for these. So, first category, standard GUI. Well, UI Kit was born to do thist, of course. It's easy to use; it has these huge features that we've been talking about it on and off today. And of course it's very fast. It's efficient. It runs on top of Core Animation, so it's nice.

You want, you think GUI, use UI Kit. Custom GUI. Custom GUI, and this is where we talk about when you subclass a view and you make it general, basically, and Quartz 2D is your best bet here. It gives you the graphics context, and you can use it to draw, again, intricate states and whatever you want. And the features that is very rich, obviously, and it's fast. Now here I put UI Kit, I've given the UI Kit a little bit of credit.

And reason for that is that it, it does some, it, it has a, it, it provides an interface to graphics operations. You know there are still ways to customize it, but, and we talked about this, you know there are ways to put, bring images into interface and add text, and that might just be enough for what you want. I mean that might be enough customization for your, for your GUI. Also if you noticed that Core Animation, I should mention this, ah, you can read that.

So Core Animation, we put Core Animation in there. And the reason for that is that if your custom GUI does some custom animations, of course then you want to use Core Animation and its explicit animations to do some of the transitions, or whatever you want to customize. They all perform well. Of course, Core Animation and Quartz 2D perform the best. 2D graphics-again Quartz 2D is your bet here.

It does, that's what it does, it loves doing 2D graphics. And it's fast, its at a full features set. It's the thing to do. UI Kit gets some credit here, mainly because it, again, it does provide some API's to doing 2D drawing. And if that's enough for you, by all means use it.

You don't have to get further down into the frameworks. And I put Core Animation in there just because it also does a lot of, it gives you the validity to do a lot of the compositing and layering of your customizations. 2D animation, of course, Core Animation, that's what it does best. Across the board it has great feature set, it's really fast, it's efficient, it's easy to use. You know the layers are just really lightweight and easy to implement.

Again, UI Kit does give you a little bit of interface with some of these animations. And if that's what you want, if it's enough, it, it's fast. 2-1/2D, of course, Core Animation's calling in life is 2-1/2D, across the board- Core Animation, Core Animation, Core Animation-easy, is again fast. It's what gives you what you want.

And the same with 3D. 3D graphics is OpenGL. OpenGL is your best bet,. OpenGL ES. You want to use it and it's got a huge feature set, let's you do anything you want pretty much, and it's fast. It's, again, it runs on the GPU, and it's just very fast.

Now, on the ease of use I didn't give it its highest score, mainly because it's just OpenGL. Yes, it's not easy to use. It's a sophisticated API, it takes some learning. So I don't want you, I don't want anyone to think that oh, quickly I can jump in and boom.

Yeah, it takes some learning too. And finally, 3D animation, the same way-OpenGL is what you really want to do if you're doing 3D animation. Core Animation, got itself into the slide also literate. And the reason is that it does some, like we talked, we saw the flipping of the cards.

Again, it's 2-1/2 the animations, but it does have the concept of 3D in essence space. So see what you can do. If you can actually use Core Animation for your 3D animation, by all means. it's a lot simpler, and it's a whole lot easier to code than OpenGL is.

So who's the winner? I don't know. So let's look at just the categories that we talked about. So standard GUI, of course, UI Kit wins. We've talked, I mean it's hands down. Custom GUI, we're going to give this one to Quartz 2D, again, just because it's easy to use.

And it gives you a lot of flexibility. 2D graphics, that's Quartz 2D, there is no question there. Again, you, you have a lot of building blocks and really easy ways to put them together and build them. Let's see, where was I? 2D animation, Core Animation. And of course 2-1/2D graphics, that is Core Animation absolutely.

And all of the 3D's, 3D graphi=cs just goes to OpenGL ES. So these are your winners. but over the weekend my college Derek and I were, we were talking about this. And we really wanted to come up with one framework, we thought it would be great to just have this one framework that's the winner. You want to say blah, whatever. So we went to my phone and we're looking at all the apps that I had, and we learned 2 things. The first thing was that I needed to really buy more apps.

I don't have enough apps. The second thing is that we really don't know who the winner is, because you guys are just really creative. We looked at how each of these apps were using these frameworks and API's, and we were blow away by the way and the combination of permutations that you guys were using. And again, we, we don't know who we, we don't know what to say, so we've decided the winner is you guys, because you use this stuff in ways that we can't even imagine.

And its really fun for us to just implement them and sit back and watch you guys use them in these fantastic ways. So that's that. So for more information, our evangelist is the fabulous Allan Schaffer. And I don't see him; he's back there. And documentation, of course you can get documentation from the Apple website. 1