iOS Graphics and Animation Programming

Learn how to work with graphics and animation on iOS devices.
Course info
Rating
(103)
Level
Intermediate
Updated
Jul 30, 2013
Duration
4h 8m
Table of contents
Introduction
iOS Graphics Overview
UIKit Graphics and Animation Programming
Using Core Graphics and Quartz 2D
Creating an Animated Pie Chart
Creating Simple Game Animation
OpenGL ES
Miscellaneous Graphics Information on iOS
Description
Course info
Rating
(103)
Level
Intermediate
Updated
Jul 30, 2013
Duration
4h 8m
Description

Learn the fundamentals of graphics programming for the iPhone, iPad and other iOS devices. Practical, real world examples are developed for both business graphics and video game animations. This course covers graphics and animation concepts and demos for the major iOS visual technologies: UIKit, Core Graphics, Quartz 2D drawing and the fundamentals of OpenGL ES programming.

About the author
About the author

Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.

More from the author
Angular Forms
Beginner
2h 3m
Apr 2, 2019
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 46m
Jan 19, 2018
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

UIKit Graphics and Animation Programming
This module is titled UIKit Graphics and Animation Programming. In this module we'll look at using Interface Builder to use common UIKit classes. We'll see how to display image files and work with Retina and non-Retina screens. Then we'll look into programming with the UIKit classes directly without Interface Builder. We can't always bundle our artwork with our app, so in many cases we're going to need to download graphics files dynamically off the internet. We'll look at how to do this asynchronously. We'll see how to draw shapes and paths with UIKit. Next we'll look at the two different approaches to animating our images in UIKit. Frame animation lets us create an array of images for UIKit to display in sequence. This is usually used for a looping animation. Procedural animation, or property animation, lets us change an object's property over time. This is very easy to perform in UIKit, so we can get our graphics and user interface objects to fade in or out, zoom, bounce, or perform any other type of animation that could be accomplished by changing a property.

Using Core Graphics and Quartz 2D
This module is titled Using Core Graphics in Quartz 2D. Core Graphics in its drawing engine, Quartz 2D, have a wide range of drawing and rendering capabilities. If UIkit doesn't have the functionality you need, or you need a boost in drawing speed, Core Graphics may be your solution. In this module, we'll cover drawing, simple shapes and paths. We'll look at using colors in core graphics along with rendering linear and radial color gradients. We'll look at how to confine your drawing to a specific rectangle using a clipping rectangle. And we'll see how to prevent memory leaks in our graphics code. Core Graphics is a C-based API. So arc isn't going to help us release our objects. It's up to us to make sure everything gets freed and we'll get the analyze feature to help us. We'll look at drawing text and images in Core Graphics and we'll look at the current transform matrix or CTM to help us easily translate, scale and rotate our graphics. We'll conclude this module by comparing Core Graphics to UIKit to see which performs better and why I write most of my graphics code using Core Graphics and Quartz 2D.

Creating an Animated Pie Chart
Welcome to this module titled, Creating an Animated Pie Chart. In this model, we're going to put UIKit and Core Graphics to good use, and create an interactive pie chart control. After this module, you'll have a great understanding of what it takes to create smooth and interesting animations on iOS devices. We'll setup our classes according to the MVC pattern to make things simple, and Xcode will help us out with that. The pie chart will be drawn with Core Graphics and its Quartz 2D drawing engine. We'll create a simple state machine to transition through all the animation states. And we'll setup the timing mechanism to have the pie chart rotate. We'll create custom easing functions to make the rotation and pie slice separation animations more interesting. To wrap things up, we'll use UIKit animation to show the details of the selected pie slice. Also to keep our code reusable, we'll apply the separation of concerns concept, and use iOS's notification center to notify other classes when a pie slice is selected.

Creating Simple Game Animation
Welcome to this module titled Creating Simple Game Animation. Games are some of the most popular apps in the iTunes store. This module is an introduction to game animation, and we'll create a moving game scene using UIKit classes. Most high speed games are written using OpenGL ES, however, UIKit can handle casual style games pretty well. We'll create a Sprite Class which will be used to show each graphical element in our game. A Sprite is usually an animated character in a game, but sprites can also be used for the background and scrolling items in a game. All of our Sprites will be shown at a GameSurface Class. The purpose of this class is to control all Sprites added to our scene. We'll add the Background Image, scrolling hills, scrolling trees and grass, then we'll add the Animated Rhino. Sometimes the simulator shows great performance when in fact, an actual device runs much slower. We check out the performance on the device and refactor our code to make sure we get great performance. Timing is very important in Video Games, and we need to make sure our game will run just as quickly on an older device as it does on a newer, faster model. We can't use a fixed frame rate, instead we need to have our animation be time based. We'll improve the timing code we wrote for the pie chart app to be the quality we'll need for a video game. The art used in this module is from a game I programmed called Psycho Rhino by Milk Drinking Cow. I'd like to thank them for letting me use some art assets for this course. Psycho Rhino was written in OpenGL ES, however we can still make a decent casual game using UIkit classes as we'll see in this module.

Miscellaneous Graphics Information on iOS
In this module, we'll look at resources for looking up information on screen sizes for iOS devices. We'll see how to create Universal apps, which run on both iPhone and iPad devices and we'll learn how to determine the screen size and orientation at run time. Submitting an app to the App Store requires properly sized launch images and icons. So we'll look at Apple's Human Interface Guidelines to determine the proper sizes.