4.
To the dearest people, my family: Mom, Dad, Olya, Mike and Lena – Peter Bakhirev To my family, for always being supportive of my dreams. – PJ Cabrera To my loving wife Gina, who puts up with my addiction to iPhone game development. – Ian Marsh To my lovely wife Leonie. – Ben Britten SmithWith great love, to my mother, who lost her fight to GIST cancer shortly before this book came to press. Her courage and determination will always be an inspiration to me. – Eric Wing iii

14.
About the Authors Peter Bakhirev is a longtime software developer, with over a decade of experience in Internet technologies and network programming, and an aspiring writer and entrepreneur. During the pre-iPhone era, he helped architect and implement one of the largest online poker sites. More recently, he participated in the creation of one of the first multiplayer games for the iPhone called Scramboni. PJ Cabrera is a software engineer with more than 12 years of experience developing information systems in various industries, programming in C, C++, Java, PHP, Python, Ruby and Objective-C. He lives in the San Francisco Bay area and works as an iPhone and Rails developer for a stealth mode start- up in San Francisco. Ian Marsh is the co-founder of the independent game studio NimbleBit based in San Diego, CA. He has been developing games for the iPhone since the advent of the App Store, with such successes as the #1 kids game "Scoops" and the #1 free game "Hanoi". When not developing games, Ian enjoys reading about science, tweeting about game development, and finger painting. xiii

15.
Scott Penberthy began coding shortly after the Apple II was launched in the 70’s. His addiction to writing software fully bloomed with a scholarship to MIT, where he wrote a multiplayer online game that brought his school’s antique computer to its knees. After graduating, Scott took a job at IBM Research, the birthplace of IBM’s web products and services. After running up the corporate ladder in the 90’s building massive web sites, he jettisoned in 2005 to return to his true love of coding. Now a successful entrepreneur, Scott runs an app studio in New York City. Ben Britten Smith has been writing software on Apple platforms for 15 years. Most notably he was given an Academy Award for Technical Achievement for his feature film work with Mac-based suspended camera control systems. Lately he has switched his efforts from the big screen to the small screen. His first iPhone game, "SnowDude" was published to the App Store a few months after the SDK became available. Since then he has written a dozen apps for various clients including the games: "Snowferno", The award winning: "Mole - A quest for the Terracore Gem", and the "Gambook Adventures" series of games. Ben lives in Melbourne, Australia with his wife Leonie and their pet bunnies. Feeling he was living too extravagant of a lifestyle of ramen and subsidized bus passes, Eric Wing graduated (kicking and screaming) from the University of California at San Diego with a Masters degree in Computer Engineering just days before 9/11. In the following challenging world, he worked a wide range of jobs in the field from automated testing on satellite systems to scientific visualization with a variety of different operating systems and programming languages. But in a stroke of genius (actually, it was more likely just a stroke), he figured out how he could work even harder for no money and started working on open source projects. He has been a contributor to projects such as SDL (Simple DirectMedia Layer), OpenSceneGraph, and the Lua/Objective-C Bridge (and its successor LuaCocoa). And when he was offered a co-authorship of Beginning iPhone Games Development, how could he possibly refuse the idea of even more hard work for virtually no pay? It was a match made in heaven!xiv

16.
About the TechnicalReviewerThe chapters of Beginning iPhone Games Development were peer-reviewed by the authorsthemselves. Peter Bakhirev reviewed chapters by Ian Marsh, PJ Cabrera, and Ben Britten Smith.Eric Wing reviewed the chapters written by Peter Bakhirev, and Ben Britten Smith wasresponsible for the tech review of Scott Penberthy’s chapter. xv

17.
Acknowledgments Peter Bakhirev Writing this book is part of a journey that started long time ago. Many better, kinder and smarter people than myself stood along the way and made this journey possible. Papa, thanks for putting that first computer together, for that tape with Basic on it, and for the wisdom (and all of the games, too). Mike, thanks for giving me a chance at that interview, for teaching me everything that I know about programming today, and for always being there ("We should do this again some time"). Lenny, thanks for believing that we could go from A to B (otherwise, Id be going from 9 to 5 instead of writing this). Mama and Olya, thanks for the encouragement and asking about how the book is going almost every day. Lena, thanks for being and for believing, ILU and IWTHKWU. Thanks to Keith Shepherd for the introduction to Clay and Apress. Thanks to Clay Andres, Kelly Moritz, Douglas Pundick, Marilyn Smith and all of the wonderful people at Apress for pushing and pulling and making this happen. PJ Cabrera My gratitude goes out to Peter Bakhirev, Jeff Pepper, and Marilyn Smith for their help improving my chapters. Many thanks to Kelly Moritz and Dominic Shakeshaft for their patience. Kudos to Clay Andres and Douglas Pundick for their support. And last but not least, to my friends in the good ol SNAP team, Kevin, Lenny, Ernesto, Cesar, Alejandro, Javier, Xavier, Edwin, thanks for keeping computing fun amidst a sea of chaos. Ben Britten Smith Ben would like to thank Neil from Tin Man Games for the use of his art assets. Eric Wing I want to acknowledge and give my everlasting thanks to a wonderful group of volunteers who reviewed my chapters. First, my thanks to Daniel Peacock and Ryan Gordon for bringing to bear the full force of their technical expertise of OpenAL and audio in general to catch any mistakes and omissions. Also my thanks to Ian Minett for providing details about the Xbox implementations of OpenAL and Garin Hiebert for tracking down some obscure information concerning OpenAL for me. Next, I wish to thank Josh Quick, Victor Gerth, Carlos McEvilly, and Wang Lam who reviewed my chapters from the perspective of the general audience for this book, thus enabling me to improve things before the book went to press. Finally, there are several people who wish or need to stay anonymous. I wish to thank them nonetheless because their contributions were also significant. And of course, my thanks to my co-authors and to the people at Apress for all their support.xvi

18.
IntroductionHey there, curious reader! My name is Peter, and Id like you to meet my fellow co-authors Ian,PJ, Scott, Ben and Eric. We are here for one simple reason: to help you learn how to makeawesome iPhone games. You have probably noticed the word "beginning" in the title of thisbook. Here is what that means: you can develop games even if you have never thought of yourselfas a "game developer" before. Even though it might seem like "rocket science" at first, in reality itis anything but (although one of the games that we will build in this book does have a rocket in it,along with spectacular explosions, out-of-this-world sounds and evil aliens.) We believe thatanybody can learn the necessary skills, and well walk you through all of the steps and explaineverything as we go along.Speaking of ideas and games, we have a whole bunch of those for you to play with. This bookincludes half a dozen fully playable games that we will help you develop. In the process, youlllearn how to build 2D and 3D games with music, sound effects, support for multiple players andnetworking. But the question of "what to build" is at least as important as "how to build it", andyou will find plenty of discussion about how to design something thats fun, as well.In case you havent developed for the iPhone before and need a crash course in how to use thetools of the trade, we have included a brief introduction to Objective-C and Xcode, but you canfind a much more in-depth exploration of the iPhone development environment in "BeginningiPhone 3 Development" by Dave Mark and Jeff LaMarche, which we highly recommend. If youneed a more thorough introduction to programming in general or C and Objective-C languages inparticular, take a look at "Learn C on the Mac" by Dave Mark and "Learn Objective-C on the Mac"by Mark Darlymple and Scott Knaster.Writing, coding and debugging this book was a lot of fun, and we hope that you will find itenjoyable and engaging. Good luck and see you in the App Store!On behalf of the author team, Peter Bakhirev xvii

20.
1 Chapter 1A Revolutionary GamingPlatform: Games forEveryone, Anytime,AnywhereThe iPhone platform has drastically changed the landscape of next-generation mobilegaming. The iPhone is a device of many firsts, and its multifaceted nature is whatpushes it above and beyond traditional mobile gaming platforms. The iPhone’s ubiquity,connectivity, personal integration, popularity, and innovative interface make it one of themost potent and exciting platforms to develop for today.The Ever-Present iPhoneBecause the iPhone platform is first and foremost a mobile phone and/or digital musicplayer, the vast majority of iPhone and iPod touch owners carry their devices aroundwith them everywhere they go, every day. The combination of a phone, music player,and game player into a single, svelte package means that people no longer need tochoose which devices to take with them each morning. This fact makes the iPhone agroundbreaking game platform.For iPhone and iPod touch owners, any game is only seconds away—whether they’rewaiting at a gas pump or sitting on a trans-Atlantic flight. A quick glance around anypublic place illustrates the iPhone’s proliferation and the quickly expanding market foriPhone games. For the gamer on the go, there’s no better use of pocket space than theiPhone.With games always within reach for players, developers can design either quick “pick-up-and-play” games or longer “appointment” games that may take 30 minutes or moreto play. Great “time-waster” games, such as Veiled Game’s Up There (see Figure 1–1), 1

21.
2 CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere rarely last for more than a couple minutes and appeal to casual gamers who can’t dedicate long spans of time to gaming. Others enjoy spending time in absorbing titles like Electronic Arts’ SimCity (also shown in Figure 1–1). Either type of gamer can be an iPhone owner, and developers can even design a game that caters to both types. One thing is for certain: As an iPhone game developer, you can count on your game being carried around by your users every waking minute of their day. Figure 1–1. Up There offers players a quick balloon-soaring game. Fans of simulation games can easily spend long stretches of time playing SimCity. Always having your game on hand not only means it will get more play time by your users, but it also helps to market your game. One of the best ways a high-quality iPhone game can be advertised is through word of mouth. iPhone users are likely to associate with other iPhone users. With their entire game collection right there in their pockets, gamers can show off their favorite games in an instant, and their friends can buy the game for themselves in a matter of seconds. Mass Appeal—There’s a Gamer Born Every Minute Users are drawn to the iPhone for many reasons besides gaming. Some people are primarily interested in its web-browsing capabilities and multimedia features. But even those who have no history of playing video games find the App Store and its thousands of games very appealing. The App Store’s ease of use, combined with the availability of so many games, can turn anyone into a gamer, casual or otherwise. A developer can create games that will be enjoyed by all types of people—from a child on a car ride, to a Halo fan away from his Xbox, to a grandfather relaxing in his chair. The iPhone makes your games available to

22.
CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere 3people who previously never considered gaming important enough to warrant buyingone on any device.The diversity of iPhone apps is actually blurring the definition of what a game is.Entertainment apps such as Snappy Touch’s Flower Garden, The Blimp Pilots’ Koi Pond(see Figure 1–2), and Bolt Creative’s Pocket God are popular. These interactiveexperiences may not be games by literal definition, but they share many elements withgames and can attract a huge fan base.Figure 1–2. Flower Garden lets users manage a virtual garden and send flowers to friends. Koi Pond presentsusers with an interactive virtual koi pond.Because many developers, rather than publishers, are deciding what kinds of apps tomake, innovation and experimentation are running rampant. With so many potentialcustomers and different types of gamers, there can be a market for almost any type ofgame—whether it’s classic or something the world has never seen.As an iPhone game developer, your customer base is growing every day and shows nosign of slowing down. Even when upgrading their iPhones or iPod touches, yourcustomers can be sure to hang on to your games due to an easily supportedstandardized model lineup—a rarity in traditional cell phone gaming. Your game cantarget each and every iPhone and iPod touch gamer, regardless of which model theyown. Even with a hugely successful title, it’s impossible to saturate the market sincethere are new iPhone gamers born every minute.

23.
4 CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere User Interfaces—Death of the D-Pad The iPhone’s user interface is another part of the equation for this revolutionary platform. In the same way the Nintendo Wii made console gaming accessible to the general public’s touch screen, accelerometer, camera, and microphone let game developers create intuitive natural interfaces to their interactive experiences. With the tilt, touch, and microphone controls at their disposal, developers can make controls for their games transparent, creating an experience that is both immersive and easily comprehensible. Directly manipulating game objects with your finger or moving the physical device in your hands provides a visceral game interface to users. No longer is there a learning period of mentally mapping game buttons, pads, and joysticks to game actions. Interfaces on the iPhone must be immediately obvious to be usable at all. Developers are utilizing these nontraditional control methods in new and unexpected ways. The iPhone’s unique user interfaces have even spawned entirely new genres of games. Angling devices from side to side controls tilt games such as Lima Sky’s Doodle Jump and NimbleBit’s Scoops (see Figure 1–3). Multitouch games like Bed Bugs by Igloo Games put the players’ concentration to the test by forcing them to manipulate multiple game objects at the same time. Entertainment apps Ocarina and Leaf Trombone by Smule allow users to play virtual instruments by blowing into the iPhone microphone. Figure 1–3. Scoops utilizes the iPhone’s accelerometer to control a wobbling tower of ice cream scoops. Hanoi’s natural interface lets players drag and drop game pieces. An iPhone game’s interface can be the game, by presenting such a compelling and natural means of interaction that it becomes invisible to the user. A great example of the iPhone’s capability for transparent user interfaces is NimbleBit’s Hanoi (also shown in

24.
CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere 5Figure 1–3). Hanoi is the classic Towers of Hanoi puzzle used in many computer sciencealgorithm classes. On most other platforms, this simple game would need to let usersselect a disk, perhaps with a directional pad and button, indicate on the screen whichpiece is selected, and then give users a way to drop the selected disk. When you thinkabout it, this seems like a relatively complex interface to such a simple real-world task.In Hanoi for the iPhone, the user manipulates the pieces in a more natural manner: Theuser simply touches a disk, drags it to the correct position, and lets go. No directionalpads, buttons, joysticks, or styluses are required.Connectivity—Plays Well with OthersAnother feature setting the iPhone apart from past mobile gaming platforms is itsunprecedented connectivity. Developers targeting the iPhone (and iPod touch) cancount on their game almost always having a data connection. This means that games onthe iPhone can utilize Internet connectivity—whether it is a core part of the game play(multiplayer), a feature that improves an offline game (high score boards), or integrationwith social networks such as Facebook and Twitter. Games like Baseball Slugger byCom2uS (see Figure 1–4) pit you in a head-to-head contest against another playeranywhere in the world from the comfort of your living room, a park bench, or a bus seat.Figure 1–4. Rolando 2 uses push notifications to challenge friends even when they aren’t playing. BaseballSlugger lets you challenge players from around the world, anytime, anywhere.Even when devices are away from an Internet connection, a developer can useBluetooth to connect players. With the addition of push notifications, you can keepyour users involved and part of the game even when they’re not playing. Games notdesigned for real-time multiplayer interaction, like Rolando 2 by ngmoco:) (also

25.
6 CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere shown in Figure 1–4), utilize iPhone’s connectivity by sending asynchronous challenges to other players. This type of technology is perfectly suited for things like notifying players when they’re up in turn-based games, have been challenged by an opponent, or their record score has been dethroned. Being a connected device not only improves games themselves, but also makes your games available to purchase and download at anytime and from anywhere. On traditional mobile platforms, gamers needed to visit retail stores and hope the game they wished to purchase was in stock. Previously, a good amount of time and effort stood between a customer’s money and your games. With the live App Store only a tap away on the iPhone, it is easier and quicker than ever for developers to get their games on users’ devices. Even with the recent arrival of digital distribution for some other mobile game platforms, the App Store’s use of iTunes accounts avoids the need for purchasing or refilling points or credits to buy games; purchasing a game is as painless as buying a song. With the addition of support for paid downloadable content, developers also have multiple ways to monetize their creations. The connectivity of the iPhone opens up a huge number of possibilities for game developers. They can create games that are dynamically updated with real-time data or new content. Not only can players play others across the world, but they can also voice chat with them in real time. A developer can integrate any number of Internet technologies into a game—be it social networking or streaming audio and video. Developers can even learn valuable things about how their games are being played by recording and retrieving usage data. User Data—This Time It’s Personal The iPhone is the first gaming platform to have access to a wealth of personal information. Having the user’s contacts, music, photos, videos, and location available for game developers to access opens the door for extremely personalized and customized experiences. How many other gaming platforms know who your friends are? With access to a user’s contacts, iPhone games can use the names of friends and family for characters, contact them directly, or make multiplayer matchup a breeze. In ngmoco:)’s Dr. Awesome (see Figure 1–5), patients admitted to your hospital take the names of contacts from your address book, giving the game a very personal feel.

26.
CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere 7Figure 1–5. Face Fighter players can customize their opponents with photos on their iPhone. The patientsadmitted in Dr. Awesome by ngmoco:) are the player’s contacts.Not only can iPhone owners carry around their music collection in their pockets, butthey can also choose their own game soundtracks from their favorite music. Players cancustomize their game’s characters or environments with pictures or video taken orstored on their device.In addition to all of this personal information, developers also have access to thedevice’s physical location. While location-based games are still in their infancy, locationcan be used in more passive ways to match up nearby players or show maps of usersworldwide.Other devices have toyed with integrated or external cameras as a way to allow playersto customize their games, but most fell short due to the fact you could use only picturestaken with that particular camera. Games and applications on the iPhone not only haveaccess to the integrated camera, but also can use images saved from the browser,contained in an e-mail, saved to a contact, or sent in a multimedia message. This meansthat in games such as Appy Entertainment’s Face Fighter (also shown in Figure 1–5),you can battle kung fu style against your best friend, a coworker, or a celebrity whosephoto you saved from a web page.With the ability to tap into an iPhone owner’s music, photos, videos, friends, andlocation, game developers have unprecedented access to the personal lives of theirplayers. In the right situations, iPhone games can allow customization or use fragmentsof personal information to evoke a more emotional response or give a greater feeling ofownership in the game. Used appropriately, access to this user data is another valuabletool in the inventive iPhone developer’s toolbox.

27.
8 CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere Device Performance—A Multimedia Powerhouse Most important to many developers is the power of the hardware. The processing power of a mobile gaming platform determines the extent that 3D graphics, physics simulations, and other technologies can be utilized in any game. Lucky for us, the iPhone is no slouch in this department. Veteran developers put the abilities of pre-3GS devices ahead of the Nintendo DS, and on par with the Sony PlayStation Portable (PSP). With the introduction of the 3GS model, the iPhone has advanced to the front of the pack in terms of hardware capability and performance. With faster processers, more memory, and advanced 3D graphics support, future iPhone and iPod hardware will push the limits of what mobile games are capable of achieving. Each improved device will be able to create more polygons and simulate more physics. Established developers such as Electronic Arts, Gameloft, and Firemint have already produced iPhone titles that rival or surpass similar DS and PSP games (see Figure 1–6). Figure 1–6. Games like Firemint’s Real Racing and Gameloft’s Let’s Golf show off the graphical power of the platform. With support for common game technologies such as OpenGL ES and OpenAL, experienced developers can make graphically rich experiences in no time. Since the iPhone Software Development Kit (SDK) supports C/C++ in addition to Objective-C, many existing libraries and a lot of game code can be reused or ported with little (or no) effort. Along with the powerful hardware inside the devices, developers appreciate the presentation aspects. One glance at the crisp, high-resolution, glass-covered display will make developers forget the cheap, tiny screens of old mobile gaming. At 320 by 480 pixels, the screen is a wonderful canvas for high-quality game art and beautifully rendered 3D environments. The low response time of the display prevents any image ghosting, even with games running at 60 frames per second (fps). The smooth glass shield with the integrated capacitive touch screen makes tapping, dragging, pinching, and zooming a pleasure in any game. To complete the package, the iPhone’s hardware gives developers powerful audio capabilities. With hardware audio decoding, the CPU can concentrate on game play processing instead of background music. And when the highest quality lossless sounds

28.
CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere 9are needed, there is plenty of disk space to hold them. While the single mono speakermight leave something to be desired, developers can count on most users havingheadphones on hand for truly immersive audio experiences.Dev Kit? You’re Holding It!By far, the most revolutionary thing about the iPhone as a gaming platform is the factthat nearly anyone can develop for it. This fact alone dwarfs every other feature of theplatform. A platform might have the most amazing groundbreaking features the gamingworld has ever seen, but it’s all for nothing if you’re prevented from developing for it.Traditionally, console manufacturers such as Nintendo, Sony, and Microsoft have put ahuge number of restrictions on who can even purchase development kits. Developersmust apply and provide detailed company information and design docs for the gamesthey wish to make. It is then up to the manufacturers to decide whether the developersare competent enough and whether their game ideas are worthwhile. If you are luckyenough to become an authorized developer for one of these platforms, you’re then hitwith dev kit, licensing, testing, and certification fees—totaling thousands of dollars.While some may complain that the iPhone’s App Store is still a “walled garden,” it isnowhere near as restrictive as the exclusive platforms of the past. All that Apple requiresof its developers is a small annual fee. Apple doesn’t care how many employees youhave, how you’re funded, or what kind of games you intend to make. Anyone—whetheran experienced team or a single student just learning game development—can creategames that will stand alongside titles made by huge developers like Electronic Art, Sega,and Gameloft. Shelf space is given to every developer free of charge, thanks to digitaldistribution, and any developer’s game has the chance to be placed on the “end cap” ofthe App Store by being featured (see Figure 1–7).Cost of development for the iPhone is significantly cheaper as well. Even if you don’talready own an Intel-powered Mac, the total cost of computer, device, and developerfees would run around a thousand dollars or less. For most platforms, the developmentkits alone cost the same or more before adding fees for testing and certification.Unlike traditional platforms, Apple is totally hands-off when it comes to the actualdevelopment itself. Apple doesn’t require design docs or set milestones for you to meet.The only time Apple enforces its liberal requirements on your game is when it’s finishedand submitted to the App Store. The iPhone is the first popular gaming platform to beopen to all developers.

29.
10 CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere Figure 1–7. Games from small independent developers are in direct competition with those made by large and established developers and publishers. Innovation—Good Things Come from Small Developers Innovation comes hand in hand with an open platform. The number and variety of people developing for the iPhone lead to the creation of things never before seen or even imagined. The iPhone is a wonderful new outlet for independent game developers to deliver their work to the world. Radical new games that would have a hard time seeing the light of day on a normal console face no such difficulty on the App Store. Unique and innovative games such as Steph Thirion’s Eliss and Mobigame’s Edge (see Figure 1–8) can make it to market and start generating waves much quicker than would be possible on any other platform. Titles from relatively unknown developers can become hits overnight if they attract a large fan base that spreads news of the game by word of mouth, or have their games featured by Apple on iTunes or in a TV commercial. The App Store is one of the only platforms where games created by independent developers compete with the larger established developers and publishers, and even outnumber them.

30.
CHAPTER 1: A Revolutionary Gaming Platform: Games for Everyone, Anytime, Anywhere 11Figure 1–8. Eliss and Edge are two examples of unique and innovative games that have found success on the AppStore.Chances are good that if you can dream it and build it, you can distribute it. While thelarge number of apps available for the iPhone can diminish the signal-to-noise ratio ofhigh-quality games, consumers and Apple will continue to find ways of separating thewheat from the chaff.SummaryThe iPhone’s ubiquity, mass appeal, user interface, connectivity, power, and low barrierto entry all combine to make it a game-changing, revolutionary new mobile gamingplatform. Groundbreaking interactive experiences such as augmented reality are findingtheir way into people’s hands. While still in its infancy, the iPhone and the App Storehave already rewritten the rules of portable gaming. It’s an exciting time to be a mobilegame developer. In the next chapter, you’ll get a better look at the tools andtechnologies you’ll be using to get started.

32.
13 Chapter 2Developing iPhoneGames: Peeking Insidethe iPhone ToolboxNow that we’ve established the iPhone’s platform credentials and described why youshould be excited about developing for it, let’s take a peek at some of the tools you’ll beusing. These technologies include Objective-C or C/C++, Xcode, UIKit, Quartz 2D, CoreAnimation, OpenGL, audio APIs, networking, and GameKit. This chapter provides a briefoverview of these technologies, how they can be used when developing a game, andexamples of how they are employed in existing games.Development Tools and EnvironmentThe language of iPhone development is Objective-C. As the name implies, Objective-Cis an extension of the American National Standards Institute (ANSI) C language designedto give C simple and straightforward object-oriented capabilities. While most of theiPhone APIs have Objective-C interfaces, it is possible for the noninterfacing parts of anapplication to be written in C/C++, since Objective-C syntax is a superset of the GNUC/C++ syntax. You’ll need at least some understanding of Objective-C and experiencewith C/C++.Lucky for us, Apple prides itself on providing high-quality software to its developers.These tools have been enabling the creation of amazing software for the Mac for quitesome time, and you’ll be using nearly all the same tools for iPhone development. Thefoundation of iPhone development is Xcode, which allows for interface design, codeediting, debugging, and performance analysis. All of this software is provided free ofcharge and will run on any Intel-based Mac computer. 13

33.
14 CHAPTER 2: Developing iPhone Games: Peeking Inside the iPhone Toolbox The Xcode integrated development environment (IDE) is a full-featured code editor, project manager, and graphical debugger. Xcode contains all the amenities of a modern IDE, including robust syntax coloring, error reporting, code completion, and code folding. Compiling, installing, and launching your application requires a single click, and the on-device debugging is great for hunting down bugs. Make yourself comfortable with its user interface and shortcuts, because you’ll be spending a lot of time writing your C/C++ and Objective-C inside Xcode. Once your game is up and running, you can take advantage of the iPhone simulator. Able to simulate nearly every facet of the iPhone operating system apart from the accelerometer, the simulator is a quick and convenient way to test changes to your app. But make sure to test your app on a real device from time to time, since the simulator doesn’t replicate device CPU performance or memory conditions. Completing the package are a few other tools aimed at helping you design and optimize your iPhone apps. Interface Builder provides a graphical user interface (UI) editor, which automates the loading and positioning of UIKit elements such as buttons and labels. If you’re not using OpenGL to build your game, Interface Builder can greatly simplify the creation of items like menus and other static elements. Once you’ve reached the optimization phase of development, Instruments will come in handy. A powerful profiling tool, Instruments collects and visualizes data such as disk, memory, and CPU usage, allowing you to quickly find the bottlenecks or memory hogs in your game. UIKit UIKit provides one of the simplest ways to draw images and other useful UI elements. Displaying and positioning bitmaps is very simple using UIKit, yet still remains relatively fast due to underlying hardware acceleration. UIKit is a great choice for games that don’t have a large number of graphical elements or animations and don’t need to run at the maximum of 60 fps. Aside from drawing bitmaps, UIKit makes it easy for developers to add other UI elements useful to games, such as alert boxes, text labels, and text- input fields. UIKit also gives access to user input, such as screen touches and accelerometer readings. NimbleBit’s Sky Burger (see Figure 2–1) is a tilt-controlled, burger-stacking game that was developed entirely in UIKit, without the direct use of OpenGL ES. While Sky Burger has a lot of graphics and animated elements, it is near the limit of what UIKit can do graphically with acceptable frame rates. If you wanted to add more graphical effects to a game like this, you would probably need to employ OpenGL ES to ensure that it runs quickly on all devices. Textropolis by NimbleBit (also shown in Figure 2–1) is another example of a game that doesn’t need the powerful graphical rendering provided by OpenGL ES. Because Textropolis is a word game with only small background animations, UIKit was a perfect fit for its development.

34.
CHAPTER 2: Developing iPhone Games: Peeking Inside the iPhone Toolbox 15Figure 2–1. Sky Burger and Textropolis by NimbleBit are examples of simple 2D games developed with UIKit.In Chapter 3, iPhone developer PJ Cabrera provides an in-depth look inside UIKit andtells you everything you need to know to get up and running with it. If you’re planning tomake a simple 2D game that doesn’t need to run at 60 fps, consider building your gamein UIKit.Quartz 2D and Core AnimationAlso known as Core Graphics, Quartz 2D provides developers with a more advanced,low-level drawing engine. While still a 2D technology, Quartz 2D provides useful andpowerful features such as off-screen rendering, transparency layers, and advanced linedrawing. These abilities come in handy for many game developers to do things like drawradar screens, mini maps, curved paths, and other UI elements. While it may be too slowto use for rendering the main elements of a game, Quartz 2D is another valuable tool inthe iPhone developer’s toolbox.PJ Cabrera will give you all the details and more potential uses for Quartz 2D in Chapter4. Be sure to read that chapter if you plan on doing any off-screen rendering oradvanced drawing in your game.What is a game without some animation? Core Animation gives developers a way tomove and transform UIKit elements with a minimum amount of work. Using CoreAnimation, you can create hardware-accelerated, time-based animations usingproperties like position, rotation, transparency, and even matrix transformations. CoreAnimation is flexible enough for anything from animating game elements to adding abit of flourish to game menus and UI elements. Core Animation can be used for

35.
16 CHAPTER 2: Developing iPhone Games: Peeking Inside the iPhone Toolbox transitioning between views as well; it provides many built-in transitions that are ready to use. In Chapter 5, PJ goes over the basics of Core Animation, and even shows you how to use it to create particle-like effects. This isn’t a chapter to skip, as uses for Core Animation can be found in just about any game. OpenGL ES Depending on the type of game you wish to make, OpenGL ES may be the single most important tool in your toolbox. OpenGL ES gives you powerful graphics rendering using a tried-and-true interface (see Figure 2–2). Whether your game draws in two or three dimensions, using OpenGL ES to render your graphics will almost always be the fastest option. Support for this rendering technology is what makes the iPhone competitive against other modern mobile platforms. With so many developers already versed in OpenGL and the huge amount of existing resources and code, support for OpenGL makes iPhone game development a familiar affair for a large number of programmers. OpenGL makes it possible to render 3D graphics at high frame rates, and developers are constantly finding new ways to push the iPhone hardware to its limits. Games like Real Racing and Wild West Pinball by OOO Gameprom (see Figure 2–2) showcase the 3D graphics made possible with OpenGL. Casual games like Imangi Studios’ Harbor Master (also shown in Figure 2–2) demonstrate the use of OpenGL for quick 2D rendering. Figure 2–2. OpenGL ES can provide speedy graphic rendering for both 2D and 3D games.

36.
CHAPTER 2: Developing iPhone Games: Peeking Inside the iPhone Toolbox 17OpenGL guru Ben Smith provides all the essentials in Chapters 6, 7, and 8. With thearrival of even more powerful 3D acceleration in the iPhone 3GS, this section of thebook is bound to become dog-eared in no time.Audio APIsIt is hard to make a compelling game on any platform without sound. Fortunately,iPhone developers have multiple choices when it comes to using sound in their games.You can use more advanced APIs such as OpenAL or simpler built-in services,depending on how much control you need over your game’s audio.Using the audio APIs, you can stream audio, play short sounds, or even simulate audiopositioned in 3D space. You can give players the option to choose their own songs for asoundtrack or provide your own. Some games, like TAITO’s Space Invaders InfinityGene (see Figure 2–3), even generate game levels based on the player’s song choice.Other games, such as Zen Bound by Secret Exit (also shown in Figure 2–3) use theirsoundtrack to immerse the player and set a mood for game play, even encouraging theuser to use headphones for the complete experience.Figure 2–3. Space Invaders Infinity Gene uses player song choice to generate levels. Zen Bound uses a beautifuland relaxing soundtrack to immerse players.Audio master Eric Wing will give you the ins and outs of audio on the iPhone in Chapters9 through 12. After introducing the more basic audio APIs, Eric will take you on adetailed tour of OpenAL, including basic playback, positional audio, and streaming.Read these chapters so you’ll be able to give your game the gift of sound!

37.
18 CHAPTER 2: Developing iPhone Games: Peeking Inside the iPhone Toolbox Networking Networked games are a natural fit for a platform as connected as the iPhone. Whether it’s turn-based, real-time, worldwide, or local, your game can get added value with networked multiplayer and high-score capabilities. While there will always be a place for single-player games, more and more gamers are looking for networked features to make their gaming a more social experience. Many technologies available to iPhone developers can help add connectivity to your game. Real-time multiplayer activities can be implemented through sockets and streams with servers and clients, or through GameKit’s Bluetooth matchmaking. Simple things like global high scores can keep your players coming back again and again. Games like Freeverse’s Flick Fishing (see Figure 2–4) go beyond the simple score board. With Flick Fishing’s Fish Net feature, any player can create a Net that others can join, which adds that player’s successive catches to the Net. Using this group high-score mechanism, players can compete with people they know instead of anonymous players. Utilizing GameKit’s Bluetooth matchmaking, Firemint’s Flight Control (also shown in Figure 2–4) allows local players to play cooperatively by sending their aircraft across to each other’s devices. Figure 2–4. Flick Fishing connects players through persistent group score boards. Flight Control offers local cooperative play through GameKit’s Bluetooth matchmaking. With many different ways of networking available, nearly any type of player interaction is possible. Networking ninja Peter Bakhirev gives you all the secrets to networking your iPhone game in Chapters 13 through 16. These chapters will get you familiar with sockets, streams, Bonjour, servers, clients, Bluetooth, and Wi-Fi connectivity. With your

38.
CHAPTER 2: Developing iPhone Games: Peeking Inside the iPhone Toolbox 19newfound networking knowledge, you’ll be on your way to bringing your playerstogether in new and exciting ways.SummaryBy this point, you should be hungry to get your hands dirty and start developing. Luckily,the real meat and potatoes lie just beyond this page, brimming with source code andreal-world examples. Now that I (Ian Marsh) have given you some of the reasons youshould be developing games for the iPhone and a quick look at the tools of the trade. I’llleave you in the very capable hands of PJ Cabrera, Ben Smith, Eric Wing, and PeterBakhirev. Soak up all the information in the following chapters, get inspired, and startbuilding something amazing!

40.
21 Chapter 3Moving Images on aSmall Screen—UIKitControlsYou have already been introduced to the iPhone and iPhone gaming, and have seen anoverview of its development environment. But what is iPhone development like? Howcomplicated is it to learn Objective-C? How easy to use are the tools mentioned in theprevious chapter? How do you get started making an iPhone game? This chapter beginsthe journey to answer these questions.This chapter introduces you to the Cocoa Touch app environment, Objective-C, andUIKit framework. You will learn how to use the iPhone SDK’s one-two-punch IDE andGUI design tool: Xcode and Interface Builder. We will build a simple iPhone game usingXcode, Interface Builder, and Cocoa Touch. Along the way, you will become acquaintedwith the essential APIs and get some important iPhone game design tips.A Quick Introduction to Cocoa TouchThe Cocoa Touch app environment that powers the iPhone provides various C libraries,Objective-C frameworks, and associated design patterns that dictate how apps for theiPhone are built. This section introduces the iPhone app development environment. Ifyou are already familiar with programming Cocoa Touch apps, feel free to skip to thenext section.The Cocoa Touch environment is composed of a number of Objective-C frameworksand C libraries that give the developer access to the iPhone’s UI; technology such asgeolocation through the GPS and compass; and input devices such as the touchscreen,accelerometer, and camera. Two frameworks are central to this environment: Foundation framework: Defines common classes such as NSObject and NSString that are used throughout Cocoa Touch. 21

41.
22 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls UIKit framework: Provides classes for the creation of iPhone screens with buttons, labels, text fields, sliders, tables of data, and other UI components. Besides UI components, UIKit defines Objective-C classes that encapsulate app object properties and methods, and prototypes that define various app, view, and input events. UIKit also dictates how developers should use these classes and prototypes by dividing functionality along the recommended guidelines of time-tested object-oriented programming (OOP) constructs, such as the Model-View-Controller (MVC) and Delegate design patterns. We will be discussing these classes, prototypes, and design patterns in the remainder of the chapter. But before we begin discussing UIKit, you need to get up to speed on Objective-C. The Objective-C Language Objective-C is an OO language invented in early 1980s by Brad Cox. Objective-C is a superset of the C language, and was invented independently of, but around the same time as, the more popular C++ language. Brad Cox’s goal when he invented Objective-C was to bring the syntax and OO nature of the Smalltalk language to his C programming environment. He wanted to program in a Smalltalk-like environment and language. But as a C programmer of many years, he had developed and depended on a lot of C code he didn’t want to rewrite. So he invented Objective-C to bridge the two languages together. To properly understand and use Objective-C, you must know and have some experience with C programming, especially pointers and memory management. It also will help if you are familiar with OOP concepts such as classes, class instances (also called objects), inheritance, encapsulation, and polymorphism. If you already know Java, C#, or C++, it will be easier to learn Objective-C. Objective-C has different syntax for calling methods, and a few differences in how it treats null objects, undeclared methods, and memory management. A Brief Objective-C Example The first thing you will likely notice when looking at the Objective-C code of an iPhone project is that most code files end in .m (sometimes also .mm, which is used when you want to mix C++ and Objective-C). The .m stands for module. Like C and C++, Objective-C uses header files that end in .h. Header files are used for declaring types and method signatures. Let’s look at a short example of Objective-C code. Listing 3–1 shows a sample header file, named SampleClass.h. Listing 3–1. Sample header file (SampleClass.h) #import <Foundation/Foundation.h> @interface SampleClass : NSObject { float floatMember; }

42.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 23+ (void)classMethod;+ (int)classMethodWithParameter:(int)intParam;- (void)instanceMethod;- (float)instanceMethodWithParam1:(float)floatParam andParam2:(int)intParam;@endThe first line of code in Listing 3–1 is a framework import statement. In this case, we areimporting a header file for a framework. #import works like the C and C++ #includestatement. Objective-C uses #import instead of #include for various reasons, but one ofthem is that framework header files are stored in a separate place than standard C andC++ include files. One other difference is that #import reads the header file only once.In the code in Listing 3–1, we import the Foundation framework. The significance of thisis that the Foundation framework is the framework on which all other Objective-Cframeworks are based. It’s called Foundation because it’s the foundation of all the otherObjective-C frameworks.The Foundation framework defines a few basic classes, which you will use veryfrequently in your iPhone programming. These classes represent typical data in an app,such as numbers, strings, arrays, sets, and implementations of many other computerscience and OO concepts.The following is the second line of code in Listing 3–1:@interface SampleClass : NSObjectThis is the start of a class interface declaration. Class declarations begin with@interface and end with @end.The class being declared is called SampleClass. Unlike in Java and C#, the name of theclass doesn’t need to match the name of the file, but it is good practice to give them thesame name. It simply makes it easier to find the right code.In the class interface declaration, the class name is followed by a colon, then the nameof the class from which the class being defined is derived. In this case, SampleClass isderived from NSObject. NSObject is the most important class in the Cocoa Touchenvironment. It is the class from which every class in Cocoa Touch is derived.After the @interface line, we have three lines of code, which only make sense together:{ float floatMember;}The squiggly symbols are known as curly brackets, used in C and similar languages togroup code together. In this case, we are declaring the list of instance variables for classSampleClass. In C++, these are called member variables. In Java, they are known asattributes. There is only one instance variable in this code. It is of type float, and itsname is floatMember.The next four lines of code consist of some method declarations:+ (void)classMethod;

43.
24 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls + (int)classMethodWithParameter:(int)intParam; - (void)instanceMethod; - (float)instanceMethodWithParam1:(float)floatParam andParam2:(int)intParam; @end These look almost like method declarations in C and similar languages, except they don’t have a list of parameters enclosed in parentheses, and they have plus and minus signs in front. The method declarations with the plus sign are class methods; the minus sign denotes instance methods. And there are methods with parameters, but they’re declared differently than in C and similar languages. In Objective-C, method parameters are denoted by a colon character before the parameter location in the method name, followed by the type and name of the parameter. So the class method classMethodWithParameter: has a parameter of type int called intParam. The instance method instanceMethodWithParam1:andParam2: has one parameter of type float called floatParam and a second parameter of type int called intParam. Now the interface declaration of SampleClass ends, and we tell the compiler this by putting the @end symbol in the code. Typically, this goes at the end of the file. With the interface declaration finished, we now move to the implementation of SampleClass, shown in Listing 3–2. Listing 3–2. Sample implementation file (SampleClass.m) #import “SampleClass.h” @implementation SampleClass static int intMember; + (void)classMethod { NSLog(@”inside classMethod”); } - (void)instanceMethod { NSLog(@”inside instanceMethod”); } + (int)classMethodWithParameter:(int)intParam { intMember = intParam; return intParam; } - (float)instanceMethodWithParam1:(float)floatParam andParam2:(int)intParam { floatMember = floatParam; intMember = intParam; return floatParam * intParam; } @end

44.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 25The first line of code in Listing 3–2 imports the SampleClass.h file. This lets us work withthe SampleClass interface in the implementation file. This step should be familiar to Cand C++ developers, as it is analogous to using #include to include a header file for aC++ class or a C module.The next line of code starts the implementation block of SampleClass:@implementation SampleClassSimilar to an @interface block, implementation starts with the @implementation symbol,followed by the name of the class, and ends with @end. In the implementation block of aclass, you define the methods declared in the interface. The interface has only the nameand parameters for the methods of the class. The implementation has the actual codefor those methods, and for any other internal methods needed to complete theimplementation of the class.The next line of code immediately after the @implementation symbol, there is thedefinition of a static int module variable named intMember:static int intMember;This is going to be used in the code as if it were a class variable, because Objective-Cdoesn’t have class variables. It’s just a regular C module scope variable.And now we come to the first of the method definitions:+ (void)classMethod{ NSLog(@”inside classMethod”);}The first method defined is a class method named classMethod, which does not takeany parameters and does not return a value. It looks almost like a C method definition,except for the plus sign at the beginning of the line and the lack of parentheses forparameters.Like any method definition in C and similar languages, the method body is containedinside a pair of curly brackets. This method makes a call to a C function called NSLog,which is provided by the Foundation framework. NSLog writes to the console log, and isuseful when debugging. NSLog takes an Objective-C string object as its parameter. Asyou can see in the code, Objective-C string constants begin with the @ symbol. This is todifferentiate them from C strings, which are a different beast. Objective-C strings areobjects of Objective-C class NSString, whereas C strings are simply arrays ofcharacters.The next method definition is an instance method called instanceMethod:- (void)instanceMethod{ NSLog(@”inside instanceMethod”);}

45.
26 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls You can identify it’s an instance method by the minus sign at the beginning of the line. Like the class method defined before it, it calls NSLog and passes a string object as a parameter to NSLog. The next method definition is a class method named classMethodWithParameter:. + (int)classMethodWithParameter:(int)intParam { intMember = intParam; return intParam; } The method takes one parameter, an integer named intParam, and returns an integer. In the method body, the value of intParam is assigned to the pseudo class variable intMember, and then it returns the value of intParam. Except for the first line of the method definition, this is pure C code. The next method definition is an instance method named instanceMethodWithParam1:andParam2:. - (float)instanceMethodWithParam1:(float)floatParam andParam2:(int)intParam { floatMember = floatParam; intMember = intParam; return floatParam * intParam; } @end This method takes two parameters and returns a float. The first parameter is a float named floatParam. The second method is an int named intParam. The code assigns floatParam to the instance variable floatMember, and also assigns intParam to intMember. Then it multiplies floatParam by intParam and returns the result. With the last method definition, the implementation block ends with the @end symbol and the end of the file SampleClass.m. So to recap, you learned how to declare the interface and define the implementation of Objective-C classes. You also learned how to declare method signatures in the interface, and how to define the code in these methods. Then you learned how to use method parameters in Objective-C. In the next few sections, you will learn how to use the SampleClass. Using an Objective-C Class Now let’s look at how to allocate and initialize an instance, how to call class methods and instance methods, and how to call methods with parameters. Listing 3–3 shows the sample code that accomplishes this. Listing 3–3. The following Objective-C code shows how classes are allocated and initialized and how different kinds of methods are called and parameters are passed SampleClass *instance; instance = [[SampleClass alloc] init];

46.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 27 [SampleClass classMethod]; [instance instanceMethod]; int result1 = [SampleClass classMethodWithParameter: 5]; float result2 = [instance instanceMethodWithParam1: 5.0 andParam2: 2]; [instance release];The first line of code in Listing 3–3 declares a variable named instance, of type pointerto an object of a class type SampleClass. This syntax should be very familiar to C andC++ programmers, and other than the pointer symbol (the *), this code should also lookfamiliar to C# and Java developers.Now let’s move on to the next line.instance = [[SampleClass alloc] init];If you have any knowledge of computer languages, you should be able to determine thatthe beginning of this line is storing something in the variable instance. But what is thatto the right of the equal sign? What is that mess of brackets? This is certainly strange,because square brackets are usually employed in C and similar languages in thedeclaration of arrays and in the addressing of elements in arrays. But this looks different.In Objective-C, brackets are used to make method calls. This is to differentiate theObjective-C method calls from C function calls.The method call always has two parts: the first part is an instance variable or a classname, and the second part is a method name and any parameters.The brackets are nested, meaning that one pair of brackets is inside another. They kindof look like parentheses in a long math operation. In school, we learned that we shouldstart with the stuff in the inner pair of parentheses and work our way out. In Objective-C,you use the same approach: inner brackets first.The inner pair of brackets contains the code SampleClass alloc. Whenever you see aclass name as the first part of the method call, you know that it is a call to a classmethod. In this case, we are calling the alloc method of class SampleClass.But wait a minute! In the interface declaration of SampleClass, there is no method calledalloc. That is correct. alloc is a method of class NSObject. Since everything derivesfrom NSObject, all classes have a method called alloc. The alloc method creates aninstance of a class and returns a pointer to this instance.Because our brackets are nested, the result of [SampleClass alloc] is used as the firstpart of the second pair of brackets. So the instance returned by [SampleClass alloc] isused to make a call to an instance method named init. SampleClass does not declare amethod named init. Once again, we are dealing with a method defined in the NSObjectclass—in this case, an instance method of NSObject called init.The init method is used to initialize the instance variables of a class to a default, orinitial, value. Classes typically override the init method when they have a lot of instancevariables that must be initialized to safe and sensible default values. Besides overridinginit, classes also define several init methods with one or more parameters, to set theinitial values of several instance variables with a single method call.

47.
28 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls The next four lines of code should be straightforward. [SampleClass classMethod]; [instance instanceMethod]; int result1 = [SampleClass classMethodWithParameter: 5]; float result2 = [instance instanceMethodWithParam1: 5.0 andParam2: 2]; [instance release]; The first is a class method call to classMethod, which takes no parameters. Next is an instance call to instanceMethod, which also takes no parameters. Following that is a class call to a method named classMethodWithParameter:, which takes an integer parameter. In this case, we are passing the integer 2 into this method. This method returns an integer value, which we store in an int variable named result1. And finally, we have a call to an instance method named instanceMethodWithParam1:andParam2:, which takes a float parameter and an int parameter. We pass to this method the float 5.0 and the integer 2. This method returns a float value, which we store in float variable result2. The last method call in Listing 3–3, [instance release], is an instance method call to another method inherited from class NSObject. The method release should be called whenever you are finished with an object instance you have created yourself with alloc. In this case, we allocated the instance, and we are finished using it, so it is released. Memory Management in Objective-C Memory management in Objective-C is different than in C and similar languages. In C and C++, you allocate memory with malloc or new, keep it in a pointer, pass it around to other code as needed, and free/delete it when you’re finished. In C# and Java and some scripting languages, you only allocate objects; the language runtimes take care of freeing objects when there are no more references to them. In Objective-C, release is not the same as free in C. Calling release decrements an internal reference counter inside the object. The memory held by an object is invalidated by the Objective-C runtime when this internal reference counter reaches 0. When you first allocate an Objective-C object with alloc, its reference count is set to 1. You need to manage the reference counting yourself as you code, and remember to call release at the appropriate times, or the object will become a memory leak. When creating a class instance for a short time as in the example in Listing 3–3, it’s simple to remember to release the object when you are finished. But when you have objects that stick around for a long time and get used by different sections of your code at different times, it can get quite complicated. NSObject has another method called clone, which makes a new object that is a copy of another. The clone has its own reference counter and it is set to 1, regardless of the reference count of the original object from which the clone was made. As with any other kind of Objective-C object, you should call release on any clones once you are finished with them. There are situations in Cocoa Touch programming when you don’t allocate the objects yourself. The Cocoa Touch frameworks have a lot of convenient methods that allocate

48.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 29objects and return them to you. These objects are held in what is called an autoreleasepool. If you are going to hold on to an object returned by these Cocoa Touchframeworks, Cocoa Touch might autorelease it and invalidate it before you are finishedwith it, leading to a crash. In situations like this, you need to increment the referencecount of that object so that it is not invalidated. This is called retaining the object. It isdone by calling a method named retain on the object. The method retain is anotherNSObject instance method, which every Objective-C class inherits. When you retain anobject, you still must remember to call release on the object when you are finished withit, allowing the Cocoa Touch framework to autorelease and invalidate the object.Otherwise, you will have a memory leak.You can use this automatic cleanup of objects in your own code by creating your ownautorelease pool. An autorelease pool lets you control the release of objects in memoryin an organized, reliable manner. To create an autorelease pool, you allocate an instanceof the class NSAutoreleasePool and initialize it. Because NSAutoreleasePool instancesare like any other Objective-C instance, when you are finished with the instance, youmust release it. Listing 3–4 shows an example of creating and releasing an autoreleasepool.Listing 3–4. Creating and releasing an autorelease poolNSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];// other code here[pool release];You place objects in an autorelease pool by calling the autorelease method on theobject. The method autorelease is another NSObject instance method. Callingautorelease on an object places the object in the most recently created autoreleasepool. When the autorelease pool is released, all objects that were added to it arereleased.So now that you’ve learned some Objective-C syntax and learned some things abouthow Objective-C and Cocoa Touch memory management works, you’re ready to diveinto the details of the Cocoa Touch environment and the UIKit framework. NOTE: To learn more about Objective-C syntax and memory management, see Learn Objective- C on the Mac by Mark Dalrymple and Scott Knaster (Apress, 2009). Apple also provides Objective-C tutorials on the iPhone Dev Center at http://developer.apple.com/ iphone.Cocoa Touch and the UIKit FrameworkThe UIKit framework is mainly used for the creation of the app’s screens. The UIKitframework defines Objective-C classes for the various components that make up aniPhone app. UIKit has classes for the iPhone screen, views, scroll views, tables, tablecells, text labels, buttons, images, and many kinds of controls that let developers createbeautiful-looking iPhone apps.

49.
30 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls An app’s screens are created by laying out instances of UIKit classes, either programmatically using code or graphically through the Interface Builder design tool. The iPhone and iPod touch have a screen that is 320 pixels wide and 480 pixels tall when the device is held upright, in what is known as portrait orientation. Your job as a game developer is to fill that screen with exciting animations and other graphics to entertain the player. When programming with UIKit, you do this by placing graphic objects in a UIView. Introducing UIView A UIView is a container object. This means it can contain buttons, icons, labels, text fields, and any sort of UI components. You can even position UIView instances inside another UIView. In this chapter, we will mostly concern ourselves with placing image views inside a UIView and making them move according to a games logic. Image views are a type of UIView that holds images. A UIView is an Objective-C class representing a region of graphical real estate. A UIView has several properties, such as its position, size, background color, visibility, and whether it responds to touch events. Learning about these UIView properties is useful, not only because you use the UIView in iPhone programming, but also because all the other iPhone components derive from UIView. Buttons, labels, text fields, text views, and tables all are a kind of UIView. This means they also have all of these properties, and they behave the same way in regard to setting these properties. The Frame Property A UIViews screen position and size are expressed through a property called frame. The frame property is a C structure of type CGRect. This structure represents the specific properties of a rectangle. CGRect is used throughout iPhone UI development to specify the size and position of UI elements such as labels, buttons, and text fields. The CGRect structure is made up of two elements: Origin: This first element is a C structure of type CGPoint. It holds the x and y coordinates of the rectangle’s top-left corner. Size: This element is another C structure, of type CGSize. It holds the rectangle’s width and height. Figure 3–1 illustrates the concept of a UIView’s frame. The dot at the upper-left corner of the iPhones screen corresponds to position 0,0. The x axis extends from this corner toward the right side of the screen, such that an x value of 319 is at the right edge of the screen. The y axis extends toward the bottom of the screen, such that a y value of 479 is at the bottom of the screen. This means the dot at the bottom-right corner of the screen is at position 319,479. The view, represented by the rectangle in Figure 3–1, has its upper- left corner positioned at coordinates 100,100—that is, 100 pixels to the right of the top-left corner and 100 pixels from the top of the screen. This is its frames origin. The view rectangle has a width of 100 pixels and a height of 40 pixels. This is its frames size.

50.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 31Figure 3–1. A UIViews frame property holds the views position and size.The following code fragment creates a view with the position and size illustrated inFigure 3–1:CGRect newframe;newFrame.origin = CGPointMake(100,100);newFrame.size = CGSizeMake(100,40);UIView *myView = [[UIView alloc] initWithFrame:newFrame]; NOTE: You may notice that CGRect, CGPoint, and CGSize all start with the letters CG. They are C structures, rather than Objective-C classes. The CG stands for Core Graphics. Core Graphics, also known as Quartz 2D, is a low-level C library used internally by UIKit to draw lines, curves, gradients, and images. We will study Quartz 2D in more depth in the next chapter.The x/y elements of the CGPoint structure and the height/width elements of the CGSizestructure are C float values. That means that you can use a decimal number, such as100.25, for any of the views position coordinates or for the views given width or height.

51.
32 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls The iPhone screen is really made of 320 by 480 physical pixels, so how come you can specify fractions of a pixel? The iPhone and iPod touch are capable of what is called subpixel rendering. When given a position or size with a decimal number, it renders the graphic by interpolating between adjacent pixels, giving the appearance that the graphic was drawn partway between pixels. The Background Color and Alpha Properties Two other UIView properties are background color and alpha. Alpha (also known as opacity) is the opposite of transparency. The property is an unsigned float. It accepts values between 0.0 (no opacity) and 1.0 (fully opaque, or not transparent). Half transparency has an alpha value of 0.5. Any values higher than 1.0 are interpreted as meaning the same as 1.0. When you set the alpha property of a view, all elements positioned within that view will be affected by the setting. So, if you have a button and a label inside the view, and you set the views alpha property to partly transparent, these elements also will show as partly transparent. Background color is a property of type UIColor. UIColor is an Objective-C class that is part of the UIKit framework. UIColor has a few color constants set for commonly used colors. You can use one of the built-in color constants for ease of programming of simple color choices. The following line of code sets the background color of a view to red: myView.backgroundColor = [UIColor redColor]; Or you can assign a color with specific intensities of red, green, blue, and alpha. myView.backgroundColor = [UIColor colorWithRed:1.0 green:0.5 blue:1.0 alpha:1.0]; For games, most of the time you will want your view to be totally transparent—to be seen through. You dont want the view to obscure whats behind it in any way. You can accomplish this in two ways: Set the alpha value of the backgroundColor property to 0. Use a convenient color constant called clearColor, like this: myView.backgroundColor = [UIColor clearColor]; The Center Property Another property of UIView is center, which lets you specify the coordinates for the center of the view. When you set the center property, the view uses the size element of the frame property to reset the frames origin element. myView.center = CGPointMake(15,25); There are many other properties of UIView that can be useful in games programming, as you will see as we work through examples. Now lets create our first game. Talking about stuff only gets you so far.

52.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 33Building a Simple GameWe’ll now build a game in which a ball bounces around the screen, making coloredbricks disappear when the ball hits them. We’ll begin with a quick introduction tocreating a new Xcode project and using Interface Builder. If you’re familiar with how touse Xcode and Interface Builder, you may want to skip directly to the “Snazzy GraphicsMake the Grade” section.Creating an Xcode ProjectTo create an iPhone game with UIKit, we’ll start with a new View-based Applicationproject in Xcode. Start Xcode and choose File New Project. This will open the NewProject dialog box. Select Application under iPhone OS in the list on the left, and View-based Application in the right panel, as shown in Figure 3–2. Then click Choose.Figure 3–2. Choose View-based Application from the New Project dialog box.In the next step, Xcode will prompt you for a name for your project and where to saveit. We are making a brick-breaking game, so enter the name IVBricker and save itwhere you prefer (I saved the project in my users Desktop folder). Xcode creates afolder named IVBricker where you specified, and then creates the project, as shownin Figure 3–3.

53.
34 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Figure 3–3. The view-based application loaded in Xcode Once the project is loaded into Xcode, you see a panel named Groups & Files to the left, below the toolbar. The icon named IVBricker, highlighted in Figure 3–3, represents your project. When this icon is selected, the top-right panel, which is called the detail panel, shows all the files and frameworks that are used to create your application. Below the IVBricker icon in the left panel, you see the following folder icons: Classes and Other Sources: These groups contain the source code for your application. The Classes group is the only group in the default set that corresponds to a folder on disk. In this case, it has a matching folder named Classes inside the projects folder on the Desktop. Most of an apps source code will be located in this group. Resources: This group contains data files that your application needs to run, such as images, sounds, and so on. When Xcode builds your app, it bundles these data files along with your compiled code. You will drop data files into this group as you add new resources to your app. Besides data files, I also like to move my Interface Builder files to this group, for consistency. Frameworks: This group contains references to the different Cocoa Touch frameworks used by your code. The default frameworks specified by Xcode when it generated the project are fine for the sample projects in this chapter. Products: This group contains a reference to the built application bundle. This app bundle is what you will submit to the App Store when your app is ready to distribute.

54.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 35These are the five standard groups of files that make up all newly created Xcode appprojects. When you select one of these groups, only the files that belong within thatgroup are shown in the detail panel. While these groups have folder icons, they dontnecessarily correspond to folders on disk. They are aids provided by Xcode to helporganize your files by function.Now that we have looked at the organization of our project in Xcode, let’s examine theUI of our new view-based application.Creating the IVBricker User InterfaceSelect the Resources group in Xcode, and you will see three files there: IVBricker-Info.plist, MainWindow.xib, and IVBrickerViewController.xib. The two files that end in .xibare Interface Builder files.Interface Builder is the iPhone SDKs GUI design tool. For games made with UIKit, youonly need to know a few basic facts about Interface Builder. We’ll start by taking a lookat the main window file.Examining the Main Window FileSelect the file MainWindow.xib in Xcode and double-click it to open it in InterfaceBuilder. The Interface Builder window offers three views, selectable from the View Modeicons on the upper left: an icon view mode, a list view mode that shows the componentname and its type (see Figure 3–4), and a hierarchical view mode.Figure 3–4. The MainWindow.xib file contains the UI components that make up our application.When an iPhone app starts, Cocoa Touch looks in the apps Info.plist for a propertycalled Main nib file base name and loads the file specified there. In an app createdfrom Xcode templates, this property is hard-coded to the apps MainWindow.xib file.

55.
36 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Upon loading the MainWindow.xib, it starts processing the components and properties set in the file, as follows: Files Owner: Every Interface Builder file has a Files Owner component. The first thing Cocoa Touch does when loading an Interface Builder file is create an object of the type specified in the Files Owner. In the case of MainWindow, the Files Owner object is of type UIApplication. This is an important UIKit class, which starts setting up the Cocoa Touch environment for your app, and delivers events between the operating system and the rest of your application. This is the first UIKit object instantiated by an iPhone app. NOTE: For the purpose of game development, we can usually ignore the First Responder object in Interface Builder. You can learn more about this object in Beginning iPhone 3 Development by Dave Mark and Jeff LaMarche (Apress, 2009). Application Delegate: Every UIApplication instance needs an Application Delegate object, or else the app does nothing. Cocoa Touch loads MainWindow and creates an instance of the type specified in the application delegate. Once Cocoa Touch has finished loading MainWindow and processing all components and properties specified in the file, Cocoa Touch calls the application delegate to let the app know it has fully launched. Without an application delegate, this call wouldnt be delivered, and the apps components would just sit idle. The application delegate’s job is to receive messages for the application’s life-cycle events. We will discuss these application delegate messages in detail later in this chapter. Window: After the Application Delegate object, Cocoa Touch loads the Window component. In Cocoa Touch, the Window component holds the several different views that make up an app. This Window component is our apps main UIWindow instance. View Controller: The View Controller object represents the controller of the main view in the app. In this example, our main view controller is called Bricker View Controller and it is of type IVBrickerViewController. View controller classes respond to Cocoa Touch events that let the controller know the status of the view, such as whether the view has been loaded or whether Cocoa Touch will unload the view to reclaim memory. We will extend this class to respond to multitouch, accelerometer, and other type of events for this chapter’s sample game. So to recap, at application startup, Cocoa Touch loads the MainWindow.xib file and processes it. During processing of the .xib file, Cocoa Touch creates the UIApplication instance, the app delegate, the main window, the main view, and the view’s view controller. Then it connects them together through the various components’ properties.

56.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 37Once this is done, Cocoa Touch notifies the application delegate that the applicationhas finished launching.We are finished examining the MainWindow file for now, so close that file and return toXcode.Examining the View Controller FileIn your Xcode project, double-click the IVBrickerViewController.xib file in the Resourcesgroup. This will open the file in Interface Builder, as shown in Figure 3–5.Figure 3–5. The IVBrickerViewController.xib file in Interface BuilderThe IVBrickerViewController.xib file shows the Cocoa Touch components that make upthe view controller for the apps main view. There is the view itself, represented by thecomponent called View. And then there is IVBrickerViewController.xib Files Owner,which is an object of type IVBrickerViewController. You will note that this is the sametype as the view controller in MainWindow.xib. This is no coincidence—they are thesame object.The View component in this Interface Builder file is where we will be placing the differentUI components, such as text labels, that make up our main game screen.Setting View PropertiesDouble-click the View component in Interface Builder to open a window with the visuallayout of the view. Right now, its empty and has a dark-gray background.Bring up the Inspector window by pressing I. We will use the Inspector window,shown in Figure 3–6, to change various properties of our view.

57.
38 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Figure 3–6. The Inspector window (the one on the right) lets you change properties in your UI components. The View window (in the middle) is where you will place UI components. The Inspector window has four tabs along the top. The first tab from the left is called the Attributes tab, and it lets you modify various properties in the app’s UI components. Lets change the Background property to set our views background color to some other color. Make sure the Attributes tab in the Inspector window is selected, and then click the color swatch of the Background property to open a color picker. Set the views background color to black. Close the color picker once youve changed the color. Adding Components to the View Lets add other components to our view. Open the component library by pressing L. This opens a window called Library, which displays the different types of components that can be laid out in a view in Interface Builder. At the top of the Library window, select the Objects half of the segmented button, and then select the Inputs & Values group in the Cocoa Touch library. We will drag two labels to our view, to display the current score for our game in progress. Select Label from the component types shown in the Library window, and drag this to the View window. Place it close to the top and right border. NOTE: As you move UI components within the View window, keep an eye out for the blue dashed-line hint from Interface Builder. These dashed blue lines, which appear and disappear as you move components around the view, are hints to help you position components at a good distance from the borders of the view and from other components. Theyre there to help you; use them in your own designs.

58.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 39With the new label selected, look for the Text property in the Inspectors Attributes tab.This property currently has a value of Label. Change the Text property of this label tofive zeros: 00000. This label will display the value of the score as it changes in our game.The Font Size property has a check box called Adjust to Fit, which is currently selected.Deselect it to make the score display with a fixed font size. This will make the labeltruncate our five zeros, because it is not big enough to display the whole string. Changethe Inspector to the third tab, the one with the ruler icon. This is the Size tab. Changethe W (Width) property to 50. Our label is now 50 pixels wide and displays our string ofzeros comfortably. Now change the X and Y properties to 275 and 10, respectively.Also, to the left of the coordinates there is a grid of points. Make sure the center dot isselected, so that a small red cross is centered on the grid. Throughout this chapter, thex and y coordinates represent the center of the component.Drag a new label just to the left of the score label. Change the Text property to sayScore:. Also, deselect the Font Size propertys Adjust to Fit check box. Then switch tothe Size tab. Change the W (Width) property to 50, and the X and Y properties to 216and 10, respectively. Don’t forget to select the center dot in the grid to the left if it’s notalready selected, or the position of the label won’t be correct for these numbers.Now our view has a score label and is starting to look more like a game in progress.Figure 3–7 shows the positioning of our labels.Figure 3–7. The label components and their position in the view

59.
40 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Now that we have added these labels, what’s next? The score label with the zeros is going to be where the code displays the games score. In our game code, every time the score changes, we will need to update the value displayed in the score label. To update the score label from our game code, we first need to add a property to the view controller. We will name this new property scoreLabel. After adding the property to the view controller, we will make a connection between the view controllers scoreLabel property and the score label component in Interface Builder. Before continuing, save your changes to IVBrickerViewController.xib in Interface Builder. Adding Code to the View Controller Return to your Xcode project and select the Classes group in the project tree. In the detail panel at the top right, select the file IVBrickerViewController.h. The contents of the file will appear in the editor panel, below the detail panel. Listing 3–5 shows the code for IVBrickerViewController.h. The lines of code in bold are the code that declares our scoreLabel instance variable (also called an ivar) and its matching property, and another instance variable for holding the score. Add these lines to your file and save the changes. Listing 3–5. The new code for IVBrickerViewController.h, which declares the scoreLabel instance variable and the property of the same name, as well as an integer instance variable called score. #import <UIKit/UIKit.h> @interface IVBrickerViewController : UIViewController { UILabel *scoreLabel; int score; } @property (nonatomic, retain) IBOutlet UILabel *scoreLabel; @end Next, lets make the appropriate changes to IVBrickerViewController.m. Open this file in the editor panel, and add the code in bold from Listing 3–6. Listing 3–6. The new code for IVBrickerViewController.m synthesizes the scoreLabel property and releases it in the dealloc method. #import "IVBrickerViewController.h" @implementation IVBrickerViewController @synthesize scoreLabel; - (void)dealloc { [scoreLabel release]; [super dealloc]; }

60.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 41I like to move the dealloc method definition from the end of the file to just after the last@synthesize statement. As you add @synthesize statements for your properties, youusually need to add matching release statements in the dealloc method. Moving thedealloc close to the @synthesize statements means less scrolling around as you code,and it also helps if you need a reminder to add the necessary release statements for theclass’s properties to the dealloc method definition.Now that this code has been added to the class, we can connect the property to thelabel component in Interface Builder. Make sure you have saved your changes toIVBrickerViewController.h and IVBrickerViewController.m before continuing.Connecting a Property with a ComponentSwitch back to Interface Builder and IVBrickerViewController.xib. Right-click the FilesOwner. This will bring up a window that lists the Files Owner Outlets and ReferencingOutlets. You will see scoreLabel listed first among the Outlets. Click and hold on theunfilled circle to the right of scoreLabel and drag to the Label (00000) component, asshown in Figure 3–8.Figure 3–8. Making a connection from the scoreLabel property to the Label component in Interface Builder thatwill display the score in the view NOTE: Another way to connect the property to the label is to select the Files Owner, and switch tabs in the Inspector window to the second tab from the left, which is the Connections tab. Drag from the scoreLabels hollow circle to the corresponding label component.Now that the connection is made, we can easily update the score label in our game withcode like this in our view controller:scoreLabel.text = [NSString stringWithFormat:@"%05d", score];

61.
42 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls With the basic setup out of the way, you are now ready to learn about using UIKit specifically for making iPhone games. NOTE: If you would like to learn more about Cocoa Touch, Xcode, and Interface Builder, check out Beginning iPhone 3 Development, by Dave Mark and Jeff LaMarche (Apress, 2009). Snazzy Graphics Make the Grade For the brick-breaking game we’re building, we need a ball to bounce around the screen. So to begin implementing this game, lets add a ball to our sample project. NOTE: If you skipped here because you already know Objective-C and how to use Xcode and Interface Builder, you can load the example project IVBricker first stage from the source code download. That will let you proceed where the previous section left off. Adding the Image In the source code download for this chapter, there is a folder named IVBricker finished version. In there, you will find a file named ball.png. Copy this file to your own project folder. Just copying the file to the project folder is not enough, though. Next, drag the file from the project folder to the Resources group in Xcode. When you build your project, Xcode will copy all the files in this group into your app. With the file copied to the project Resources group, we can now add it to our view. Return to Interface Builder and the IVBrickerViewController.xib file. The View window should be open from when we added the two labels to the view. Open the Interface Builder Library window if it isnt open already (press L). Select the Data Views group in the Library window. For displaying images, we will use the Image View component. Image views are UIKit components of type UIImageView. They are used to display images. The iPhone SDK supports JPG, GIF, PNG, TIFF, BMP, ICO (Windows icon), and CUR (Windows cursor) files, and XBM file formats. Objects of the UIImageView class have various properties, such as height, width, x and y coordinates within the parent view, image transparency, image stretching ratios, background color, and so on. Drag an image view from the Library window to the View window. With the new image view selected in the View window, look in the Attributes tab of the Inspector window for a property called Image. In the drop-down list, you should see ball.png. Choose this as the image, and the image view will change to show the ball graphic, as shown in Figure 3–9.

62.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 43Figure 3–9. The image view is now displaying the ball graphic. We need to resize the Image View component tomake it better fit the dimensions of the ball.Now select the Size tab in the Inspector window, set the width and height of the imageview to 16 by 16 pixels, and X and Y to 159 and 239, respectively. This places the ball inthe middle of the view. (Don’t forget the center dot on the position grid needs to beselected to have the red cross displayed; otherwise, the ball will not be positionedcorrectly.)Save your work and return to Xcode. Build and run your project. When the app launchesin the simulator, you should see the black background, the red ball, and the scoredisplayed, but they all just sit there. Lets make the ball do something.To access the ball programmatically in our game code, we need to add it as a propertyin the view controller, in the same fashion that we added scoreLabel to the viewcontroller earlier. In Xcode, open the file IVBrickerViewController.h and add the code inbold in Listing 3–7, which declares the ball instance variable and the property of thesame name.Listing 3–7. The new code for IVBrickerViewController.h, which declares the ball ivar and the property of thesame name.#import <UIKit/UIKit.h>@interface IVBrickerViewController : UIViewController { UILabel *scoreLabel; int score; UIImageView *ball;}@property (nonatomic, retain) IBOutlet UILabel *scoreLabel;@property (nonatomic, retain) IBOutlet UIImageView *ball;@end

63.
44 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Next, lets change the file IVBrickerViewController.m. Open this file in the editor panel, and add the code in bold from Listing 3–8, which synthesizes the ball property and releases it in the dealloc method. Listing 3–8. The new code for IVBrickerViewController.m synthesizes the ball property and releases it in the dealloc method. #import "IVBrickerViewController.h" @implementation IVBrickerViewController @synthesize scoreLabel; @synthesize ball; - (void)dealloc { [scoreLabel release]; [ball release]; [super dealloc]; } Once you have added the new code to IVBrickerViewController.h and IVBrickerViewController.m, you need to connect the image view in Interface Builder to the properties in the view controller. The steps to follow are the same as connecting the score label with the scoreLabel property (described earlier in the “Connecting a Property with a Component” section). After the ball property is connected to the ball image view, we can start making the ball do something on the screen. The Illusion of Motion To create the illusion of motion on a screen, movies and TV use still frames presented in quick succession, one after the other, within a short lapse of time. This is the origin of the term frames per second used in video performance. In games programming, the display logic is ideally performed at least 30 times per second, to give the illusion of smoothly moving images on the screen. On the iPhone, a class called NSTimer, provided by Foundation framework, lets you schedule a method to be called repeatedly, several times per second. We will now write a method to modify the balls position over time, to make it bounce around the screen, using NSTimer. NOTE: There is a new way to create a timer in iPhone SDK 3.1, called CADisplayLink, which is more appropriate for games. CADisplayLink synchronizes with the iPhone display, which is guaranteed to refresh 60 times per second. We will continue this game example using NSTimer, but switch the code to use CADisplayLink at the end of the chapter. Go back to Xcode and open IVBrickerViewController.h in the editor panel. Add the code in bold in Listing 3–9.

65.
46 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls } This implements the viewDidLoad, initializeTimer, and animateBall: methods in the view controller. viewDidLoad sets an initial value to the ballMovement instance variable, of 4 pixels vertically by 4 pixels horizontally. Next, it calls the initializeTimer method. The initializeTimer method creates an NSTimer instance, initializing it to call the animateBall: method 30 times per second. The animateBall: method begins by taking the ball center coordinates and adjusting it by the values of the corresponding ballMovement coordinates. This effectively moves the ball by 4 pixels vertically and horizontally every frame. The remaining lines of code in animateBall: check whether the ball has reached any of the four edges of the screen. If it has, the code reverses the direction of ball movement by changing the value of the coordinate from 4 to -4 and vice versa. For example, if the ball is moving left to right and it reaches the right edge, the ball “bounces” off the edge and starts moving to the left. You may notice the current code within animateBall: does not make use of the NSTimer object that is passed in as a parameter. This object will come in handy later on in the chapter. For example, we will add code to stop the timer when the player loses a life and when the game is over. Save your work. Now build and run the project, and behold the greatness of iPhone animated 2D graphics on the simulator. Now that we have some motion going on, lets add some user interaction. NOTE: In this simple example, I am putting game state and game logic code in the view controller. When designing large games with a lot of enemies, obstacles, and many other game elements to keep track of, it is more organized to create several classes to contain a model of what is happening on the screen and to separate the game logic code from game model code. The view controllers job then becomes simpler, as it just needs to send input events to the game logic and update the view according to the game model. Separating model code, view code, and controller code is called the Model-View-Controller design pattern. Rocking and Grooving with User Input The iPhone platform provides very advanced input technologies for games. Besides just touching the screen, the iPhone can track multiple touches separately, allowing for the creation of complex UIs with multiple touch areas on the screen at once. All devices in the iPhone platform family have an accelerometer built in, allowing applications to track movement, which can make for a very interesting gaming experience. Now let’s add a paddle to our fledgling game, and experiment with adding input handling to our code. Look in the source code download for this chapter, in the folder named IVBricker finished version, for a file called paddle.png. Copy it to your project folder, and add this to your projects Resources group in the same manner as you did with the ball.png file.

66.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 47Next, load IVBrickerViewController.xib in Interface Builder (if it isnt open already) andadd an image view from the Cocoa Touch component library. Specify the paddle.png asthe image you want to use for the new image view. Set the width and height of thepaddle image view as 60 and 16, respectively, and the x and y coordinates as 159 and399, respectively. Don’t forget the center dot on the position grid needs to be selectedto have the red cross displayed, so the paddle will be positioned correctly.Now return to Xcode. We’ll add another instance variable and property to the viewcontroller, to let us control the paddle from our code. Lets give the instance variableand property the more than appropriate names of paddle. Listing 3–11 shows the codechanges to the view controllers interface in bold.Listing 3–11. Adding an ivar and property called paddle to the view controllers interface.#import <UIKit/UIKit.h>@interface IVBrickerViewController : UIViewController { UILabel *scoreLabel; int score; UIImageView *ball; CGPoint ballMovement; UIImageView *paddle;}@property (nonatomic, retain) IBOutlet UILabel *scoreLabel;@property (nonatomic, retain) IBOutlet UIImageView *ball;@property (nonatomic, retain) IBOutlet UIImageView *paddle;- (void)initializeTimer;- (void)animateBall:(NSTimer *)theTimer;@endListing 3–12 shows the changes to the view controllers implementation in bold.Listing 3–12. Synthesizing and releasing paddle in the view controllers implementation.#import "IVBrickerViewController.h"@implementation IVBrickerViewController@synthesize scoreLabel;@synthesize ball;@synthesize paddle;- (void)dealloc { [scoreLabel release]; [ball release];

67.
48 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls [paddle release]; [super dealloc]; } Now that these changes have been made in the code, go back to Interface Builder and connect the paddle property to the paddle image view. Once that is done, we can use code to move the paddle on the screen. Handling Accelerometer Input Lets add accelerometer control to the code to see how that works. In Listing 3–13, you can see the code to enable this support in our example project. Add the code in bold to the IVBrickerViewController.m file. Listing 3–13. The code in bold adds accelerometer support to the view controller. - (void) accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)accel { float newX = paddle.center.x + (accel.x * 12); if(newX > 30 && newX < 290) paddle.center = CGPointMake( newX, paddle.center.y ); } - (void)viewDidLoad { [super viewDidLoad]; UIAccelerometer *theAccel = [UIAccelerometer sharedAccelerometer]; theAccel.updateInterval = 1.0f / 30.0f; theAccel.delegate = self; ballMovement = CGPointMake(4,4); The first method in Listing 3–13 takes the accelerometer reading for left to right movement, multiplies it by 12, and adds this to the current location of the paddle. The paddle location is updated only if the paddle is not moving past the right or left edge of the view. The next section of new code is within the viewDidLoad method, and it configures the accelerometer to take readings 30 times per second. It also sets up the view controller as the accelerometer delegate. This means that the accelerometer will call the method named accelerometer:didAccelerate: defined at the beginning of the listing. If you were to build this code, you would find that there is a compiler warning in the line of code that sets the accelerometer delegate. The code compiles and runs properly, but I find compiler warnings annoying. To get rid of that warning, open IVBrickerViewController.h and change this line: @interface IVBrickerViewController : UIViewController { to read like this instead: @interface IVBrickerViewController : UIViewController

68.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 49 <UIAccelerometerDelegate>{ NOTE: If you were to run this latest version of the example project in the simulator, you would find it does nothing. This is because the simulator doesnt support accelerometer readings. You will need to set up the project to run on your device to test this code. This requires signing up as a registered iPhone developer. You can find how to do this at the Apple iPhone Developer Connection site (http://developer.apple.com/iphone).To play the game, hold your device upright, and tilt it left or right to move the paddle.The more you tilt the device, the faster the paddle moves.Once you run this code on your development device, you will find that the paddlemoves, but the ball does not reverse direction when it collides with the paddle. Bear withme—we will fix this in the next section.You will also perhaps not be too thrilled with using the accelerometer with this type ofgame. Its not very precise, and moving fast requires tilting the device fast, which makeskeeping your eye on the ball a difficult task. But the purpose of this example was toshow you how to set up the accelerometer. This game will actually use the touchscreenfor input. So, remove the accelerometer code we just added from the project, and letssee how to add touch support next.Handling Touchscreen InputThe view created by the Xcode template is already enabled for touch support when theproject was created. All we need to add to the view code are the methods to processtouch events. These methods are called touchesBegan:withEvent:,touchesMoved:withEvent:, and touchesEnded:withEvent:. Cocoa Touch calls thesemethods when the user touches a component that is touch-enabled, such as our view.Before we begin adding these methods, we need to add an instance variable to our viewcontroller to track how the users drag their finger on the screen. Listing 3–14 shows thecode to be added to the header file. Add the line of code in bold toIVBrickerViewController.h.Listing 3–14. Adding touchOffset to the view controllers header file.#import <UIKit/UIKit.h>@interface IVBrickerViewController : UIViewController { UILabel *scoreLabel; int score; UIImageView *ball; CGPoint ballMovement; UIImageView *paddle; float touchOffset;

69.
50 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls } Ill explain the use of touchOffset in context in a second. Now that we have modified the header file, we can add the touch event handling code to the view controller implementation, as shown in Listing 3–15. Listing 3–15. Implementing touch handling in the view controller. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event allTouches] anyObject]; touchOffset = paddle.center.x - [touch locationInView:touch.view].x; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event allTouches] anyObject]; float distanceMoved = ([touch locationInView:touch.view].x + touchOffset) - paddle.center.x; float newX = paddle.center.x + distanceMoved; if (newX > 30 && newX < 290) paddle.center = CGPointMake( newX, paddle.center.y ); if (newX > 290) paddle.center = CGPointMake( 290, paddle.center.y ); if (newX < 30) paddle.center = CGPointMake( 30, paddle.center.y ); } The first method in Listing 3–15, touchesBegan:withEvent:, is called when the user touches the screen. This code stores in the touchOffset instance variable the distance in horizontal pixels between the users touch of the screen and the paddles center position. This tells us where the user first touched the screen to begin moving the paddle. The second method, touchesMoved:withEvent:, is called when the user drags a finger following a touchesBegan:withEvent:. This code takes the touchOffset value that was stored by the first method, adds it to the horizontal position of the current touchesMoved event, and then subtracts the paddles center position. This effectively lets us track the fingers movement left to right relative to the initial touch event. Next, we apply this horizontal distance to the paddles position. This code makes for very smooth movement of the paddle. Run this latest version of the code. Youll see that it is possible to move the paddle from one edge of the screen to the other very quickly, without taking your eyes off the ball. Its a marked improvement over the accelerometer version. When Objects Collide So far in our game, the ball just keeps moving right through the paddle as if it were not there. The reason is simple: the ball doesnt know about the paddle. The animation code for the paddle checks only for the edge of the view. So lets add more code to make the animateBall: method check the paddle’s position and act properly when the ball touches the paddle. Add the code in bold in Listing 3–16 to IVBrickerViewController.m.

70.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 51Listing 3–16. Adding collision-detection code between paddle and ball in the animateBall: method- (void)animateBall:(NSTimer *)theTimer { ball.center = CGPointMake(ball.center.x+ballMovement.x, ball.center.y+ballMovement.y); BOOL paddleCollision = ball.center.y >= paddle.center.y - 16 && ball.center.y <= paddle.center.y + 16 && ball.center.x > paddle.center.x - 32 && ball.center.x < paddle.center.x + 32; if(paddleCollision) { ballMovement.y = -ballMovement.y; if (ball.center.y >= paddle.center.y - 16 && ballMovement.y < 0) { ball.center = CGPointMake(ball.center.x, paddle.center.y - 16); } else if (ball.center.y <= paddle.center.y + 16 && ballMovement.y > 0) { ball.center = CGPointMake(ball.center.x, paddle.center.y + 16); } else if (ball.center.x >= paddle.center.x - 32 && ballMovement.x < 0) { ball.center = CGPointMake(paddle.center.x - 32, ball.center.y); } else if (ball.center.x <= paddle.center.x + 32 && ballMovement.x > 0) { ball.center = CGPointMake(paddle.center.x + 32, ball.center.y); } } if(ball.center.x > 310 || ball.center.x < 16) ballMovement.x = -ballMovement.x; if(ball.center.y > 444 || ball.center.y < 32) ballMovement.y = -ballMovement.y;}The code in Listing 3–16 checks whether the ball has touched the paddle, and makesthe ball bounce away in the opposite direction. Because the ball moves 4 pixels at atime in any direction, there is code, from line 13 to line 21 of the listing, to check that theball has not gotten stuck inside the paddle.With these latest changes, our program is now fully interactive, but its still missingsomething. Its a graphics demo, not a game. We need to add more code to make thisexample into a game.Besides animation and interaction, a game consists of a goal or goals the player mustachieve. We need a set of failure conditions, which eventually lead to the game beingover for the player, and a set of winning conditions, which eventually lead to thecompletion of the games goals.Failure ConditionsThe only failure condition in a typical brick-breaking game is missing the ball and lettingit reach the bottom edge of the screen. When the ball reaches the bottom of the screen,the game logic stops the ball and informs the player he lost. Then it resets the ball to thecenter of the screen and starts the ball moving again.

71.
52 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Games typically give the player a set number of lives at the beginning of a game session. In our brick-breaking game, the code must subtract one of these lives every time the ball reaches the bottom of the screen. Once the player has run out of lives, the game is over. To implement the logic to count and display the number of lives, we need to add an instance variable to hold the current amount of lives, an integer we will simply call lives, and a property of type UILabel for displaying this value. We also need another UILabel property, to display the “Game Over” message and any other messages for the user. We will code this first, and deal with points and winning conditions in a later section. Listing 3–17 shows the class interface changes needed to begin implementing these game-play improvements. Add the code in bold to the file IVBrickerViewController.h. Listing 3–17. The view controller header file changes for adding support for game lives and user messages to our example program UIImageView *paddle; float touchOffset; int lives; UILabel *livesLabel; UILabel *messageLabel; BOOL isPlaying; NSTimer *theTimer; } @property (nonatomic, retain) IBOutlet UILabel *scoreLabel; @property (nonatomic, retain) IBOutlet UIImageView *ball; @property (nonatomic, retain) IBOutlet UIImageView *paddle; @property (nonatomic, retain) IBOutlet UILabel *livesLabel; @property (nonatomic, retain) IBOutlet UILabel *messageLabel; - (void)startPlaying; - (void)pauseGame; The code in Listing 3–17 adds four instance variables to the view controller. Ive already discussed the meaning of lives and the two labels. isPlaying will be used in the touch event handling to determine if the game play is paused. Another instance variable is added for the timer instance. At the end of the listing are two new properties for the labels. We have also added declarations for two methods, named startPlaying, and pauseGame, which will be used to clean up and organize some of the code that’s starting to clutter the method viewDidLoad. Now that weve changed the view controller interface, lets change the view controller implementation. Open IVBrickerViewController.m and modify the code as shown in bold in Listing 3–18.

72.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 53Listing 3–18. Modify IVBrickerViewController.m to match these changes in the code.@synthesize paddle;@synthesize livesLabel;@synthesize messageLabel;- (void)dealloc { [scoreLabel release]; [ball release]; [paddle release]; [livesLabel release]; [messageLabel release]; [super dealloc];}As in our previous changes to the code, we synthesize the properties from the headerfile, and we release them in the dealloc method. These synthesized properties can nowbe used in Interface Builder to connect the UI components to the code.Open the IVBrickerViewController.xib file in Interface Builder to add these new labels tothe UI. Drag each label from the Library window to the view, and configure them asfollows: Place a label against the top and left borders. On the Attributes tab in the Inspector, set the Text property to Lives:. Deselect the Font Size attributes option Adjust to Fit. On the Size tab, change the X and Y attributes to 45 and 10, respectively. Then change the width to 44. Position another label to the right of the Lives: label. On the Attributes tab, set the Text property to 3. Deselect the Font Size attributes option Adjust to Fit. On the Size tab, change the X and Y attributes to 83 and 10, respectively. Then change the width to 20. Postion a third label just above the paddle. On the Attributes tab, set the Text property to Game Over. Set the Alignment property to Centered (the middle button next to Layout, just below the Line Breaks selector). Deselect the Font Size attributes option Adjust to Fit. Click the Font property (where it currently says “Helvetica, 17.0”) to open a font picker window. Select English for Collections, Helvetica for Family, Oblique for Typeface, and 36 for Size. Close the font picker. On the Size tab, change the X and Y attributes to 159 and 353, respectively. Then change the width to 310 and the height to 43.Once these three labels are placed and sized, connect them to the properties in the viewcontroller. Right-click the Files Owner to open the Outlets and Referencing Outletswindow. Make a connection from the livesLabel property to the component namedLabel (3), and then make a connection from the messageLabel property to the

73.
54 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls component named Label (Game Over). Figure 3–10 shows the three labels and their relative positions. Figure 3–10. The three new labels in the view: a placeholder for the text “Lives:”, one to display the number of lives the player has, and another for user messages like “Game Over” Now that weve made changes to the view controller class and to the UI, lets make the other changes to the implementation, to start bringing the game to life. The changes are extensive, so Ive broken them up into two listings. Listing 3–19 shows the changes (in bold) to the first half of the IVBrickerViewController.m file. Listing 3–19. Changes to the viewDidLoad method in IVBrickerViewController.m - (void)viewDidLoad { [super viewDidLoad]; [self startPlaying]; } - (void)startPlaying { if (!lives) { lives = 3; score = 0; } scoreLabel.text = [NSString stringWithFormat:@"%05d", score]; livesLabel.text = [NSString stringWithFormat:@"%d", lives]; ball.center = CGPointMake(159, 239); ballMovement = CGPointMake(4,4); // choose whether the ball moves left to right or right to left if (arc4random() % 100 < 50) ballMovement.x = -ballMovement.x;

74.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 55 messageLabel.hidden = YES; isPlaying = YES; [self initializeTimer];}- (void)pauseGame { [theTimer invalidate]; theTimer = nil;}- (void)initializeTimer { if (theTimer == nil) { float theInterval = 1.0f/30.0f; // Ive renamed animateBall: to gameLogic theTimer = [NSTimer scheduledTimerWithTimeInterval:theInterval target:self selector:@selector(gameLogic) userInfo:nil repeats:YES]; }}The first major change from the earlier versions is in the viewDidLoad method.Previously, most of the initialization code was in this method. Weve refactored it into anew method called startPlaying. The rationale for this is that the initialization codeneeds to be called from more than one place now. The game-play initialization codeneeds to be called when any of the following happen: When the player first starts the app When play is restarted after the player loses one life When starting a new game after losing three livesIt is better to factor out the initialization code into a method that can be called fromseveral places, rather than copy and paste this code into several places. When you copyand paste code, you increase the chances of bugs happening every time you need tochange the copied code.The startPlaying method starts by resetting the number of player lives to 3, and itresets the score to 0 if the number of lives has reached 0. Then it updates the score andlives labels on screen. As in earlier versions of the initialization code, it sets theballMovement instance variable to 4 pixels vertically and horizontally, and positions theball in the center of the screen. As an extra twist, the code picks a number randomly anddecides whether the ball will move left to right or right to left when animation starts.The initialization code then hides the message label and sets the isPlaying flag to YES.Finally, we initialize the NSTimer instance by calling initializeTimer. Note that theanimateBall: method has been renamed to gameLogic, as explained after the nextlisting.Listing 3–20 contains the rest of the changes to the view controller implementation.

76.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 57}The touch event handling code in Listing 3–20 checks the isPlaying flag to determinewhether the ball is in play. When isPlaying is set to YES, the touch event handling codeperforms the same steps as before. When isPlaying is set to NO, the touchesBegan eventhandling restarts game play. In contrast, the touchesMoved event handling ignores thetouch event when isPlaying is set to NO.As noted earlier, another change made in the code is the renaming of the methodanimateBall: to gameLogic. This method now does a few more things than just animatethe ball. The ball now bounces back only when it touches the paddle or when it touchesthe top, right, or left border of the screen. When the ball reaches the bottom of thescreen, the code stops the game by invalidating the game logic timer in the pauseGamemethod, sets the isPlaying flag to NO, decrements the lives counter, and displays thenumber of lives left. It also checks whether the player has any lives left and displays a“Game Over” message if not. Otherwise, it tells the player the ball is out of bounds. Thegame continues once the user taps the screen.Now that we have finished adding the code to handle failure conditions, lets discusswhat we need to do to implement winning conditions.Winning ConditionsIn a brick-breaking game, you earn points by bouncing the ball against colored bricks ofdifferent colors. Typically, each different color earns you different points. You also getbonus points for bouncing the ball on more than one brick in a row—the more bricks in arow, the higher the bonus. You win by removing all the colored bricks before running outof lives.Right now, our game example lacks all of these winning conditions. First, we will need toadd a grid of bricks to our screen. We will use a different image view object for eachbrick. Next, we need to add code to the game logic, to detect when the ball bounces offone of these bricks, and it needs to increment our score appropriately.Lets look first at an efficient way to display a grid of image views.Loading and Displaying Images ProgrammaticallySo far in our sample program, weve added image views to our view by draggingcomponents in Interface Builder. This is convenient in that it saves us from typing a lotof boilerplate code. But if your game were made of hundreds of different images, itwould be quite impractical to add them all to the view in Interface Builder. You wouldneed to carefully place the image views, and make connections to your properties inyour code so that you could manipulate the image views as needed in your game.Creating and manipulating UIImage and UIImageView in code is another way to load anddisplay images in an iPhone application. Weve been using UIImage and UIImageView inthis chapter all along, but not in pure code. We had the help of Interface Builder.

77.
58 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls A UIImage instance is a representation of image data loaded from files in a variety of image formats. You typically create a UIImage instance by loading a file from the iPhones flash disk or downloading it from a URL. The code in Listing 3–21 shows how to load an image from your application bundle. Listing 3–21. Loading an image from the application bundle UIImage* myImageObj; NSString* imagePath = [[NSBundle mainBundle] pathForResource:@"myImage" ofType:@"png"]; // load it like this myImageObj = [[UIImage alloc] initWithContentsOfFile:imagePath]; // or like this myImageObj = [UIImage imageNamed:imagePath]; NOTE: Whether you use [[UIImage alloc] initWithContentsOfFile:] or [UIImage imageNamed:] is up to you, but be aware that [UIImage imageNamed:] tends to retain images longer than necessary sometimes. Ill demonstrate how to code and document a UIImage cache with a loadImage: method in the “Managing Memory with a Custom Image Loader” section later in this chapter. This cache will provide a method to release the images if memory use becomes an issue. A UIImage instance is immutable, meaning the object does not have methods for changing the image properties, such as height, width, opacity, and so on; you can only get the images properties. The object also does not provide direct access to the image data. This means you cannot draw on a UIImage object and change any of its pixels. (The iPhone does support drawing onto a views graphics context and turning this drawing into a UIImage object. You can use other APIs for drawing, which we will examine in the next chapter.) The image object itself is not displayable. To display an image, you create an instance of the UIImageView class, initializing it with an instance of UIImage. Once your UIImageView object is created, you can add it to a view to display it. Listing 3–22 shows how to initialize a UIImageView instance with an instance of UIImage and add it to a view (named mainView in the example). Listing 3–22. Initializing an image view with a previously loaded image object, then adding it to a view UIImageView* myImgView = [[UIImageView alloc] initWithImage:myImageObj]; [mainView addSubview:myImgView]; While this example stores the image view instance in a variable, you can store the object anywhere, such as in an array, set, or any other collection objects available in Cocoa. A downside to creating image views programmatically is that you can manipulate these image views only in code. You lose all the visual design comforts of Interface Builder. But with the lack of comfort comes an increase in flexibility. Along with being able to have as many image views as memory allows, you can change the properties of your image views, including their size, position, transparency, and visibility (whether it is

78.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 59hidden or shown). These properties are the same as the attributes shown in InterfaceBuilder.Now that we have learned a little about how to create image views through code, wecan start putting together the different parts we need to finish our sample game.Creating the Grid of BricksFirst, we need to store our rows of bricks. To do that, we need to know how many bricksto allocate. For this example, we will use bricks of the same width as the paddle: 64pixels. The iPhone screen is 320 pixels wide, which means we can fit five bricks side toside across the screen. The bricks are about three times as tall as the paddle image. Wecan fit four rows of bricks on screen, if we place our bricks just a little below where thescore and lives counter are displayed, and extend downward toward the center of thescreen just above where the ball is displayed when the game begins.To store our grid of bricks, we’ll use a C array to keep things simple. We need toallocate a 5-by-4 array of pointers to image views. By now, you should know the drill:open IVBrickerViewController.h and copy the code in bold in Listing 3–23.Listing 3–23. Allocating an array of pointers to image view objects in image view. UILabel *messageLabel; BOOL isPlaying; NSTimer *theTimer;#define BRICKS_WIDTH 5#define BRICKS_HEIGHT 4 UIImageView *bricks[BRICKS_WIDTH][BRICKS_HEIGHT]; NSString *brickTypes[4];}@property (nonatomic, retain) IBOutlet UILabel *scoreLabel;@property (nonatomic, retain) IBOutlet UIImageView *ball;@property (nonatomic, retain) IBOutlet UIImageView *paddle;@property (nonatomic, retain) IBOutlet UILabel *livesLabel;@property (nonatomic, retain) IBOutlet UILabel *messageLabel;- (void)initializeTimer;- (void)pauseGame;- (void)startPlaying;- (void)initializeBricks;@endThe code in Listing 3–23 declares two constants, BRICK_WIDTH and BRICKS_HEIGHT, andthen declares an array of pointers to image views using these constants to specify thearrays size. The code proceeds to declare an array of strings to hold the file names ofthe brick images. The code changes end with the declaration of a method namedinitializeBricks.

79.
60 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls For this example, I have created brick images in four different colors. You can find these in the code download, in the IVBricker finished version folder, as the files named bricktype1.png through bricktype4.png. Once we have declared our array of bricks, we need to fill it with image view instances. This is accomplished by looping through the bricks array and selecting a different image name from the brickTypes list as we instantiate each image view. Besides instantiating the image view and assigning it to the array, we need to assign each image view a position on screen and add it to the main view. As you’ve done for the previous updates, open IVBrickerViewController.m and copy the code in bold shown in Listing 3–24. Listing 3–24. Filling the bricks image view array when the view first loads - (void)viewDidLoad { [super viewDidLoad]; [self initializeBricks]; [self startPlaying]; } - (void)initializeBricks { brickTypes[0] = @"bricktype1.png"; brickTypes[1] = @"bricktype2.png"; brickTypes[2] = @"bricktype3.png"; brickTypes[3] = @"bricktype4.png"; int count = 0; for (int y = 0; y < BRICKS_HEIGHT; y++) { for (int x = 0; x < BRICKS_WIDTH; x++) { UIImage *image = [UIImage imageNamed: brickTypes[count++ % 4]]; bricks[x][y] = [[[UIImageView alloc] initWithImage:image] autorelease]; CGRect newFrame = bricks[x][y].frame; newFrame.origin = CGPointMake(x * 64, (y * 40) + 100); bricks[x][y].frame = newFrame; [self.view addSubview:bricks[x][y]]; } } } - (void)startPlaying { In the code in Listing 3–24, we call a new method named initialzeBricks from the viewDidLoad method. Then in the initializeBricks method, we assign a different file name to each element of the brickTypes array. The rest of the code in Listing 3–24 loops through our 5-by-4 grid of bricks, and then allocates an image view and assigns one of the four different color brick images to the image view. Then it computes a position on screen in pixels, based on the position of

80.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 61the image view in the grid. The calculation stems from the fact the brick images aresized 64 by 40 pixels. The code multiplies the x grid coordinate by 64 and multiplies they grid coordinate by 40, to arrive at their pixel positions. We add an extra 100 pixels tothe vertical position, to place the first row of bricks below the Score and Lives labels andprovide some room for the ball to bounce between the labels and the first row of bricks.Figure 3–11 shows the game displaying the grid of bricks.Figure 3–11. The game now displays a grid of bricks above the center of the screen.Detecting image View CollisionsSo now the game has a grid of bricks, a ball and a paddle, but if you run it, you will seethat there is still no way of earning points and winning the game. We need to add codeto the gameLogic: method to handle scoring and game-winning conditions. The codeneeds to do the following: Detect when the ball collides with one of the bricks. Bounce the ball in the opposite direction it was heading before the collision.

81.
62 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Add points to the score. Remove the brick from the grid. Once all the bricks have been removed, stop the gameLogic: timer and display a message to the player indicating she has won the game. As explained earlier in the chapter, the frame property of a view holds the coordinates and size of the rectangular area occupied by that view. Core Graphics provides the function CGRectIntersectsRect to help us detect whether one view’s frame overlaps another view’s frame. We will use this function to detect when the ball has collided with a brick. Once we have detected a collision with a brick, we need to remove the brick from the view. Rather than just remove it, it looks nicer to make the brick fade out over time, such as half a second. We can do this by decreasing the brick’s alpha property by 0.1 each time we run through the collision detection code. Therefore, when checking for a collision, the code should ignore bricks that don’t have an alpha of 1.0, since the ball has already hit these bricks in previous frames. Besides having the bricks fade out when hit, the ball also needs to bounce away from the side of the brick it hit. If the ball is moving down vertically and it hits the top of the brick, the ball should react by moving up vertically in subsequent frames. Let’s look at the code to detect collisions. Listing 3–25 shows the changes to the gameLogic: method and other functions added to support these changes. The code in bold shows the modifications to be made to IVBrickerViewController.m. Listing 3–25. This listing shows the code added to gameLogic: to detect when bricks are hit. - (void)gameLogic:(NSTimer *) theTimer { ball.center = CGPointMake(ball.center.x+ballMovement.x, ball.center.y+ballMovement.y); BOOL paddleCollision = ball.center.y >= paddle.center.y - 16 && ball.center.y <= paddle.center.y + 16 && ball.center.x > paddle.center.x - 32 && ball.center.x < paddle.center.x + 32; if(paddleCollision) ballMovement.y = -ballMovement.y; BOOL there_are_solid_bricks = NO; for (int y = 0; y < BRICKS_HEIGHT; y++) { for (int x = 0; x < BRICKS_WIDTH; x++) { if (1.0 == bricks[x][y].alpha) { there_are_solid_bricks = YES; if ( CGRectIntersectsRect(ball.frame, bricks[x][y].frame) ) { [self processCollision:bricks[x][y]]; }

83.
64 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls brick.alpha -= 0.1; } The code changes start by declaring a variable to determine whether if there are any solid bricks left on the screen. This variable, named there_are_solid_bricks, is initially set to NO. As the code loops over each of the bricks in the grid, it checks whether the brick is solid. If the code finds a nonsolid brick, it decreases the brick’s alpha property once per frame until it is totally transparent. Once we find a solid brick, we set there_are_solid_bricks to YES. This variable essentially lets the code determine if the player has won the game. The player wins when there are no solid bricks left. When the code finds a solid brick, it also checks whether the ball has hit a brick, by using the Core Graphics function CGRectIntersectsRect to determine if any part of the ball is within the brick’s area. If there is a collision, the code calls the method processCollision, passing in the brick object as a parameter. The processCollision method increases the score by ten points and displays the new score. It also checks which side of the brick the ball hit, and bounces the ball in the appropriate direction. And last but not least, it decreases the brick’s alpha property, to mark the brick as nonsolid. Changing the Timer to CADisplayLink Earlier in the chapter, I mentioned that iPhone SDK 3.1 added the CADisplayLink class, a new way of scheduling a method to be called periodically. It is similar to NSTimer, but runs more precisely. It is synchronized to the iPhone’s screen logic, which refreshes itself 60 times per second. Listings 3–26 and 3–27 show the modifications needed to change the game logic code to use CADisplayLink. Listing 3–26. This listing shows the changes that need to be made to IVBrickerViewController.h #import <UIKit/UIKit.h> #import <QuartzCore/CADisplayLink.h> @interface IVBrickerViewController : UIViewController { UILabel *scoreLabel; int score; UIImageView *ball; CGPoint ballMovement; UIImageView *paddle; float touchOffset; int lives; UILabel *livesLabel; UILabel *messageLabel; BOOL isPlaying; CADisplayLink *theTimer;

84.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 65#define BRICKS_WIDTH 5#define BRICKS_HEIGHT 4Listing 3–27. This listing shows the changes that need to be made to IVBrickerViewController.m- (void)pauseGame { [theTimer invalidate]; theTimer = nil;}- (void)initializeTimer { if (theTimer == nil) { theTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(gameLogic)]; theTimer.frameInterval = 2; [theTimer addToRunLoop: [NSRunLoop currentRunLoop] forMode: NSDefaultRunLoopMode]; }}Listing 3–26 changes the instance variable named theTimer to the correct type, fromNSTimer to CADisplayLink. Llisting 3–27 shows the changes in the way theTimer isinitialized. The NSTimer initializer took as one of its parameters a time interval betweencalls to the game logic. CADisplayLink defaults to running at 60 frames per second, anddoesn’t need this time interval to be set. But our game logic is meant to run at 30 framesper second, so we set the CADisplayLink property named frameInterval to a value of 2.This tells CADisplayLink to run every other frame, effectively making the game logic runat 30 times per second.CADisplayLink also differs from NSTimer in that NSTimer takes another parameter to setwhether the timer repeats. CADisplayLink is set to repeat until it is invalidated. Anotherdifference is that the display link needs to be added to a run loop, a Cocoa Touchconstruct for handling system events. NSTimer started running as soon as it wasinitialized.Before using this version of IVBricker, you need to include in your project the QuartzCore framework. To add it to your project, right-click the Frameworks group in theGroups and Files panel and select Add Existing Frameworks from the pop-up menu. Youwill see a drop-down list of all the different iPhone frameworks, as shown in Figure 3–12.Choose QuartzCore.framework and click the Add button.

85.
66 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Figure 3–12. Choose QuartzCore.framework and click the Add button. The End? We now have all the code for a complete game. It handles scoring, losing the game, and winning the game. But there are still some things to cover that are very important in iPhone programming. The rest of the chapter is focused on these important topics in iPhone game development. In the next section, we tackle what to do in your game when players lock their iPhone, or are interrupted by a phone call or text message. Sometimes they need to quit your app temporarily, but they’ll be back later. How do you handle that kind of thing? After that, we cover some tips and tricks in the area of memory handling involving images. And last but not least, we will look at different ways of implementing animated image views.

86.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 67Application Delegate EventsEarlier in this chapter, I alluded to the fact that a Cocoa Touch application is made up ofseveral objects. When we created our sample game, we based it on a template thatcomes with Xcode, the View-based Application template. This template has aMainWindow.xib file, which is automatically loaded and processed by Cocoa Touch atapplication startup. By loading and processing MainWindow.xib, Cocoa Touch createsthe main UIWindow instance, the IVBrickerViewController and its view with the paddleand ball image views, the UIApplication instance, and the IVBrickerAppDelegateinstance.Once these instances are created, Cocoa Touch is able to start our application coderolling by sending messages to methods in the application delegate and in the viewcontroller. In the code template we used to begin coding our game, the app begins itslife cycle with a call to the method applicationDidFinishLaunching: in the appdelegate. In this method, we assign the IVBrickerViewControllers view to the UIWindowinstance and make the window visible. Then Cocoa Touch proceeds to message theviewDidLoad method in IVBrickerViewController, where the code creates the grid ofbricks, initializes score and lives counters, and starts the timer to animate the ball andprocess the game logic.Besides messaging these two methods in the app delegate and the view controller,there are many more messages that UIKit sends the application delegate during thelifetime of an app. These messages can be classified as low memory warnings, userinterruption warnings, messages to allow resuming from interruptions, and applicationtermination messages.Application TerminationThe UIApplicationDelegate class defines a method called applicationWillTerminate:,which is typically called when users quit your application through the iPhones homebutton, or when they quit your game to answer a phone call, respond to a text message,or respond to any other kind of notification from the operating system. You can use thisdelegate method to save your game’s state, to allow the user to resume your game at alater time.You don’t need to worry about closing windows, deallocating views, or releasingmemory in the applicationWillTerminate: method. iPhone OS cleans up after yourapplication shortly after this method is called. You should close any open files andrelease database handles, though. SQLite databases can become corrupt if they are notclosed properly.You’ll learn more about saving the game state in the “Saving and Loading Game State”section later in this chapter. The important thing to keep in mind is that you have at mosttwo to three seconds to do what you need to save your game’s current state. Youshould save your game state as quickly and efficiently as possible, or else the operatingsystem will kill your app before it’s finished saving all the data, leading to datacorruption.

87.
68 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Application Interruptions The app delegate also defines a method called applicationWillResignActive:, which is called when the user is interrupted, such as when the user receives a phone call or text, or when the device is locked. The applicationWillResignActive: message allows you to pause your game while the user decides whether to answer that call or reply to the text message. You should invalidate any timers, effectively pausing your game. You should also use this method to save the user’s progress in your game. If the user decides to close the notification message without answering the phone call or replying to the text message, Cocoa Touch resumes the game by calling the method applicationDidBecomeActive:. Use this method to initialize any timers in your game that were invalidated in the applicationWillResignActive: method. Listing 3–28 shows sample implementations of applicationWillResignActive: and applicationDidBecomeActive: for our IVBricker game. These methods go in the IVBrickerAppDelegate.m file. Listing 3–28. These are example implementations of the methods applicationWillResignActive: and applicationDidBecomeActive: - (void)applicationWillResignActive:(UIApplication *)application { [viewController pauseGame]; [viewController saveGameState]; } - (void)applicationDidBecomeActive:(UIApplication *)application { [viewController loadGameState]; [viewController startPlaying]; } In Listing 3–28, when the game is interrupted by a phone call or when the phone is locked and the applicationWillResignActive: method is called, the code pauses the game and saves the game state. When the app is ready to resume after an interruption, and the applicationDidBecomeActive: method is called, the code reloads the game state and continues the game. Low Memory Warnings One thing to keep in mind when developing for iPhone is that your game’s available RAM is limited. Typically, iPhone OS uses about 40MB of RAM. This leaves you with less than 24MB of RAM available when running your game on an iPhone 2G or 3G. The situation with iPod touch models is a bit better. Because the iPod touch doesn’t need to receive phone calls or text messages, the operating system uses less RAM than on an iPhone. You have about 32MB of RAM available when running your game on an iPod touch. The important thing to remember is that your game will be forcibly shut down by the operating system if it uses too much of the available RAM. If the operating system kills your app, its too late to start worrying about why it happened. It is likely you have a memory leak somewhere, and you will need to spend some time debugging the problem.

88.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 69Cocoa Touch does try to help, though. There is a message received by the app delegatethat lets you try to free up memory before its too late. The message calls a methodnamed applicationDidReceiveMemoryWarning:. You should use theapplicationDidReceiveMemoryWarning: method to release any cached data yourapplication may hold in the app delegate.For example, if your game uses data from a web service, you can cache that data thefirst time you retrieve it from the web service. Subsequent uses of the web service datacan access the cache, rather than hitting the web service every time. The app delegateis an ideal place to hold this data, and the applicationDidReceiveMemoryWarning:method should release this cache when memory is low. If your app needs the webservice data again, it can reload it from the web service and cache it until memory is lowagain.View controllers also receive a similar message, with call to the method namedviewDidUnload. Over the course of a game, you are likely to load several views, one foreach screen in your game. As you navigate from one screen to the other, it is likely theother screens don’t need to take up RAM while they are not visible. Cocoa Touch callsthe viewDidUnload method after a view is removed from the screen. If your viewallocates any objects in memory, it should release them in the viewDidUnload method.Saving and Loading Game StateIn Listing 3–28, you saw code for pausing the game when the iPhone gets aninterrupting notification or when it is locked, and code for resuming the game. This codealso called the saveGameState and loadGameState methods in the view controller. Thissection will examine these methods and explain one technique for saving and loadinggame state with the Cocoa Touch frameworks.Cocoa Touch provides the class NSUserDefaults for saving data and looking it up at alater time. You obtain an instance to the default data store with the NSUserDefaultsclass method standardUserDefaults. Then you use this instance with methods likesetObject:forKey:, setInteger:forKey:, and setDouble:forKey:, to assign each pieceof data you want to save a key and a value. Later on, you use the key to read the data,using the default data store instance with a method such objectForKey:, stringForKey:,integerForKey:, or doubleForKey:. Listing 3–29 shows an implementation of themethods saveGameState and loadGameState using NSUserDefaults.Listing 3–29. Implementing saveGameState and loadGameState using NSUserDefaultsNSString *kLivesKey = @"IVBrickerLives";NSString *kScoreKey = @"IVBrickerScore";- (void)saveGameState { [[NSUserDefaults standardUserDefaults] setInteger:lives forKey:kLivesKey]; [[NSUserDefaults standardUserDefaults] setInteger:score forKey:kScoreKey];}- (void)loadGameState { lives = [[NSUserDefaults standardUserDefaults] integerForKey:kLivesKey]; livesLabel.text = [NSString stringWithFormat:@"%d", lives];

89.
70 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls score = [[NSUserDefaults standardUserDefaults] integerForKey:kScoreKey]; scoreLabel.text = [NSString stringWithFormat:@"%d", score]; } Besides using saveGameState and loadGameState in the app delegate app termination, inactivate and reactivate notification methods, you should save game state when the user loses or wins a game. Just insert a call to saveGameState in the gameLogic method in the code sections for winning or losing. Listing 3–30 has the necessary changes to the code in bold. Listing 3–30. The changes to the game logic code. if (!there_are_solid_bricks) { [self pauseGame]; isPlaying = NO; lives = 0; [self saveGameState]; messageLabel.text = @"You Win!"; messageLabel.hidden = NO; } if (ball.center.x > 310 || ball.center.x < 16) ballMovement.x = -ballMovement.x; if (ball.center.y < 32) ballMovement.y = -ballMovement.y; if (ball.center.y > 444) { [self pauseGame]; isPlaying = NO; lives--; livesLabel.text = [NSString stringWithFormat:@"%d", lives]; if (!lives) { [self saveGameState]; messageLabel.text = @"Game Over"; } else { messageLabel.text = @"Ball Out of Bounds"; The viewDidLoad method should also be changed to load the game state at game launch time. Listing 3–31 shows the changes to the viewDidLoad method in bold. Listing 3–31. The changes made to the viewDidLoad method to load the game state at game launch. - (void)viewDidLoad { [super viewDidLoad]; [self loadGameState]; [self initializeBricks]; [self startPlaying]; } By including the code in Listing 3–31, the game state gets loaded from previous runs of the app.

90.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 71When designing your game, you should determine what kind of state it makes sense tosave in your game when the user is interrupted. In this chapter’s trivial game example,we save the score and the number of lives, by way of example. We could also save theball position and the current alpha value of the bricks.A more complex arcade game with multiple levels would also save the current gamelevel. In a real-time combat strategy game, you could choose to save the state of eachgame unit at different checkpoints in the current mission. The point is to try as much aspossible to allow the player to resume play without needing to start the game or thecurrent level from the beginning.Managing Memory with a Custom Image LoaderWhen we’re dealing with development of a game, it is likely loading too many images orother resources is causing the memory problem. There are ways to architect your imageloading so that you can release memory taken up by your images. Listings 3–32 and 3–33 show a simple implementation of a caching image loader you can use in your apps.Listing 3–32. The interface to the custom image loader, named ImageCache.h#import <Foundation/Foundation.h>@interface ImageCache : NSObject {}+ (UIImage*)loadImage:(NSString*)imageName;+ (void)releaseCache;@endListing 3–33. The implementation to the custom image loader, named ImageCache.m#import "ImageCache.h"@implementation ImageCachestatic NSMutableDictionary *dict;+ (UIImage*)loadImage:(NSString*)imageName{ if (!dict) dict = [[NSMutableDictionary dictionary] retain]; UIImage* image = [dict objectForKey:imageName]; if (!image) { NSString* imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:nil]; image = [UIImage imageWithContentsOfFile:imagePath]; if (image) { [dict setObject:image forKey:imageName];

91.
72 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls } } return image; } + (void)releaseCache { if (dict) { [dict removeAllObjects]; } } @end To use the caching image loader, call the loadImage: class method of the ImageCache class, passing in the image file name as a parameter. To release all the images held in the cache, call the releaseCache class method. This basic code gets the job done, but it is an all-or-nothing approach. You cache every image, and when the operating system complains memory is low, you unload every image from the cache. You could easily modify this code to let you keep several different caches rather than one universal cache. That way, you could use a different cache for each view in your app, and unload images only from views that are no longer on screen. Animating Images In the previous sections of this chapter, you learned how to create a basic game using UIView, UIImage, UIImageView, and NSTimer. The image views used in previous sections were static. They changed position and transparency depending on events processed by the game logic, but the UIImage instance displayed by any particular UIImageView was always the same throughout the game. But there are many types of games in which you need to display different images several times per second. For example, if the game features a robot walking and jumping around the screen, the game needs to display a different image of the robot as it takes each step or as it jumps. In this section, we will examine different techniques to display a sequence of images several times per second, using UIImageView. Using the UIImageView Animation Properties The first technique available to do animation with image views is actually built in to the UIImageView class. Image views have a property called animationImages. This property is an NSArray of UIImage instances. You can create an array of images, each image a different frame of your animation, and assign the array to this property. Then you use the image view’s animationDuration property to set how long the animation will last. The animationDuration property accepts fractions of a second.

92.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 73To play the animation once and stop immediately after the last frame is displayed, youcan set the image view property animationRepeatCount to 1. The default value of thisproperty is 0, which makes the animation repeat indefinitely. You can also call themethod stopAnimating at any time to stop the animation, regardless of theanimationRepeatCount or animationDuration.One important point to remember is that the animation doesn’t start immediately oncethe animationImages property is set; you must call the image view methodstartAnimating to display the animation. Once you call the startAnimating method,Cocoa Touch will automatically display a different image in the animationImages arrayevery 1/30 second, until the time interval set in animationDuration property or until youcall the stopAnimating method, whichever happens first.Listing 3–34 demonstrates how to use UIImageView animations.Listing 3–34. Using image view animationsNSMutableArray *images = [NSMutableArray alloc] initWithCapacity: 30];// load the images into the arrayfor (int i = 1; i <= 30; i++) { NSString *imageName = [NSString stringWithFormat: @”animation1_f%0d.png”, i ]; UIImage *image = [ImageCache loadImage: imageName ]; [images addObject: image];}// set the animations property on the image viewimageView.animationImages = images;[images release];imageView.animationDuration = 1;imageView.animationRepeatCount = 1;[imageView startAnimating];The code in Listing 3–34 assumes that a variable named imageView holds a UIImageViewinstance and that it has been set up properly to display somewhere on the screen. Thecode creates an array of UIImage instances by loading 30 different images, namedanimation1_f01.png through animation1_f30.png.The code proceeds to set the animationImages property of the image view. TheanimationImages property holds its own copy of the array, meaning our array is nolonger needed, so we release it immediately. The code sets the animationDuration andanimationRepeatCount properties and starts the animation with a call to thestartAnimating method.One limitation of using this animation technique built in to UIImageView is that CocoaTouch changes the image displayed only every 1/30 second, and you cannot changethis rate. You will need to use another technique if you want your animation to run fasteror slower than 30 frames per second. Another limitation is that it is not very precise.Cocoa Touch doesn’t guarantee that it will start animating immediately or that eachimage change will happen at precise 1/30-second intervals. Cocoa Touch does the bestit can to run the animation, but there can be slight delays of a few fractions of a second.

94.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 75 [_theTimer invalidate]; _theTimer = nil; }}- (void)startAnimating { if (self.animationDuration > 0 && self.animationImages && [self.animationImages count] > 0) { _frameCounter = 0; _repeatCounter = 0; _timeElapsed = 0; _theTimer = [NSTimer timerWithTimeInterval:_animationInterval target:self selector:@selector(changeAnimationImage) userInfo:nil repeats:(self.animationRepeatCount > 0)]; }}- (void)changeAnimationImage { self.image = [self.animationImages objectAtIndex:frameCounter++]; _timeElapsed += _animationInterval; if ( (_timeElapsed >= self.animationDuration || _frameCounter >= self.animationImages.length) && (0 < self.animationRepeatCount && _repeatCounter <= self.animationRepeatCount) ) { _repeatCounter++; _frameCounter = 0; } if (_repeatCounter >= self.animationRepeatCount) { [self stopAnimating]; }}@endThe class in Listing 3–36 can be used exactly like UIImageView, but animations run moreprecisely by virtue of using NSTimer. It also adds a new property namedanimationInterval, which lets you specify the time between image changes. It defaultsto 1/30 second, but can be changed to any fraction of a second less than 1/60 secondand up to 1/15 second. Any values less than 1/60 get rounded up to 1/60; values greaterthan 1/15 get rounded down to 1/15.Using CADisplayLink for AnimationA third animation technique is using CADisplayLink. As you learned earlier,CADisplayLink runs very precisely at 60 times per second, thanks to being triggered bythe iPhone’s display circuits. This solution also derives from UIImageView, which meansyou use it in the same way as you would use the UIImageView animation feature. Thissolution defaults to running at 60 frames per second, rather than UIImageView’s 30frames per second. Listings 3–37 and 3–38 show the interface and implementation ofthis class.

96.
CHAPTER 3: Moving Images on a Small Screen—UIKit Controls 77- (void)stopAnimating { if (_displayLink) { [_displayLink invalidate]; _displayLink= nil; }}- (void)startAnimating { if (self.animationDuration > 0 && self.animationImages && [self.animationImages count] > 0) { _frameCounter = 0; _repeatCounter = 0; _timeElapsed = 0; if (!_displayLink) { _displayLink= [CADisplayLink displayLinkWithTarget:self selector:@selector(changeAnimationImage) ]; } [_displayLink addToRunLoop: [NSRunLoop currentRunLoop] forMode: NSDefaultRunLoopMode]; }}- (void)changeAnimationImage { self.image = [self.animationImages objectAtIndex:frameCounter++]; _timeElapsed += _displayLink.duration; if ( (_timeElapsed >= self.animationDuration || _frameCounter >= self.animationImages.length) && (0 < self.animationRepeatCount && _repeatCounter <= self.animationRepeatCount) ) { _repeatCounter++; _frameCounter = 0; } if (_repeatCounter >= self.animationRepeatCount) { [self stopAnimating]; }}@endYou use this code in a manner similar to the BetterAnimations class shown in theprevious section. But instead of setting an animationInterval property that takesfractions of a second between frames, this one uses a property called frameInterval,which takes an integer between 1 and 4. This property tells the CADisplayLink at whatratio of 60 frames per second to display the animation. The frameInterval propertydefaults to 1, which means 60 frames per second. A frameInterval of 2 means theanimation will display at 60/2, or 30 frames per second, and so on for the other values.To use the MoreBetterAnimations class, you will need to add the Quartz Core frameworkto your project, as we did when we switched IVBricker from NSTimer to CADisplayLink(see Figure 3–12).

97.
78 CHAPTER 3: Moving Images on a Small Screen—UIKit Controls Summary This chapter lays the foundation for what is to follow in this book. In this chapter, you learned the basics of Objective-C programming. You learned a little about how to use Xcode to make an iPhone view with labels and other UI components. And you learned how to make a basic game using UIKit and other Cocoa Touch technologies like NSTimer. The chapter also introduced you to some of the different application life-cycle notifications Cocoa Touch sends to applications as they launch, load views, unload views, terminate, and get interrupted by other device functions. You learned how to save game state to allow the player to terminate your game and resume playing at a later time. The chapter concluded by examining image caching and animation techniques. The sample project called IVBricker final version contains all the game code in this chapter, all the way to the section on saving game state and use of the image cache. Take a look at that project to see how it all comes together. With the knowledge gained in this chapter, you should be able to get started programming basic iPhone games. These skills will help you apply the contents in the rest of this book for more advanced game-programming technologies.

98.
79 Chapter 4She Shoots, She Hits, SheScores!In the previous chapters, you’ve been introduced to gaming on the iPhone and taken a tripthrough the world of UIKit. This can be considered GUI-level development. You use theApple-supplied tools, dragging and dropping icons, and assembling the logic with bits ofcode here and there. If you’re lucky, you get to stay in the world of Objective-C, tossingmessages back and forth. It’s a wonderful world. Apps can be built in a single day!Soon, though, you’ll want more. You might want to draw your own characters or importvector art from popular programs such as Adobe Illustrator. You may want your graphicsto shrink and grow, fade, twirl, and change color. Static text can be much more interestingwhen it, too, changes size, rotates about the screen, and bounces off other objects. Fixedgraphics become animated, flipbook movies, allowing your characters to come to life.Characters should jump, laugh, wiggle, and entertain. Games should be fun.This chapter introduces you to the world of Quartz 2D games on the iPhone. Quartz 2Dis a powerful API that simplifies the inner workings of the iPhone, allowing you to drawvector art, play with images, and manipulate fonts. As you leave the world of UIKit andenter the land of Quartz 2D, you’ll write code to position and manipulate these items.There is a bit of math involved. We’ll do our best to keep it simple.To give you insight into how popular games are built, we’ll walk though the constructionof a Quartz 2D implementation of Atari’s Asteroids. Let’s begin with an overview of howwe’ll build the game.Quartz 2D Game OverviewThe iPhone SDK includes copious documentation on Quartz 2D, as well as sample codefor numerous Quartz 2D-powered apps. Our goal here is to make sense of it all, and tohelp you understand how to use Quartz 2D to build games. We’ll skip over a lot ofQuartz’s capabilities, such as the ability to generate Adobe PDF documents or work onstandard Mac OS X platforms. You won’t need those for your games. Instead, we’llchoose the tasty bits and assemble them into a framework. 79

99.
80 CHAPTER 4: She Shoots, She Hits, She Scores! We begin by organizing the rich capabilities of Quartz 2D into Objective-C classes called sprites. The English definition of a sprite is a small or elflike supernatural being, an elflike person, a ghost. In the gaming world, a sprite can be the main character, an animated scoop of ice cream, a space rocket, or the tiny dust particles that appear after something has exploded. Sprites move; they do stuff. Our classes provide general methods for moving, rotating, scaling, and coloring sprites in a game world. The guts of our classes are functional calls into the Quartz 2D API. With sprites out of the way, we introduce a Quartz 2D game loop, depicted in Figure 4– 1. As you saw in Chapter 3, timers are an effective tool for making changes 30 times a second. We call each iteration of the loop a “tic,” like the ticking of a clock. The game loop organizes the changes to sprites during a tic into three steps: update, render, and persist. “tic” Model Controller Persist Update Render View Figure 4–1. A Quartz 2D game loop with the MVC model At the beginning of every tic of the timer clock, the update step adds or deletes items from the game, and then moves each sprite just a hair. The render step places visible sprites on the screen. The persist step records shared information on a common “blackboard,” while capturing external changes to the UI (such as a finger touch or accelerometer movement). The loop repeats, 30 times a second, giving the illusion of movement and interactivity. We implement the game loop with a set of classes, following the Model-View-Controller (MVC) design pattern introduced in Chapter 3. The blackboard is our model, holding information that persists beyond each game loop. The controller manipulates sprites during the update step with custom game logic. The controller also records changes to the UI and iPhone events in the model. Finally, the view places sprites on the screen during the render step. Quartz 2D plays a heavy role in the views, and is only a bit player in the controller and model. With sprites and the game loop in hand, we dive into an implementation of Atari’s Asteroids, as shown in Figure 4–2. This game is a set of sprites with one model. The buttons are implemented as image sprites, using frame animation to emulate button presses. The core and status displays are simple text sprites. The ship, rocks, and

100.
CHAPTER 4: She Shoots, She Hits, She Scores! 81bullets are sprites made with shaded vector art. Sound effects, button presses, scoring,and lives are all kept in a centralized model. Game logic, from exploding asteroids tofiring missiles, is kept in a controller class.Figure 4–2. A version of Atari’s Asteroids in Quartz 2DThe source code provided for this chapter includes two projects: figures.tar.gz andasteroids.tar.gz. The figures.tar.gz project contains all the sample code through the“Heads-Up Displays” section. One of the files, Defs.h, contains documentation on howto build the code for each figure in a live project. You may find it helpful to keep awindow open with the source code, this book at your side, going back and forthbetween the text and the Xcode project.The asteroids.tar.gz project covers the more detailed Asteroids game which is describedin the “Asteroids Game Architecture” section. This is a complete game with soundeffects, animation, levels, and scoring, built and extended from the classes we’ll coverhere. A lot of the logic and effects are particular to Asteroids and will not be covered inthe chapter text. However, the code contains copious documentation to take yourlearning further.Let’s get started.Every Artist Needs a CanvasQuartz 2D paints and draws on a graphics context. The context is essentially the canvasfor your game, and you’ll need it when calling the various functions in the Quartz 2D API.It’s an internal data structure associated with a UIView. Let’s create one now. Luckily,you need to do this only once.Open Xcode and start a new project. Select View-based Application, as shown in Figure4–3. Then name the project Asteroids, as shown in Figure 4–4.

102.
CHAPTER 4: She Shoots, She Hits, She Scores! 83Open Asteroid’s project settings in Xcode (select Project Edit Settings). Look towardthe bottom of the window, where Xcode prompts you for the organization name. Enteryour company name (shown as Acme Games in the example). Next, choose the iPhoneDevice 3.0 platform, as shown in Figure 4–5. Close the window.Figure 4–5. Changing the company name and iPhone version for project filesNow let’s create a UIView subclass to hold our Quartz canvas. Add a new file to theClasses group in Xcode, choosing Cocoa Touch Class, and then selecting UIView as itssuperclass. Name it AsteroidsView.m, as shown in Figure 4–6. Click Finish. The windowshows generated text for Asteroids.m, using your name and company name, as shownin Figure 4–7.

103.
84 CHAPTER 4: She Shoots, She Hits, She Scores! Figure 4–6. Creating a new AsteroidsView subclass of UIView in Xcode

104.
CHAPTER 4: She Shoots, She Hits, She Scores! 85Figure 4–7. Prepopulated files for AsteroidsView.m and AsteroidsView.hWe now have a skeletal class for the main view of our game. We need to connect thisview to the default controller, telling the iPhone we want total control over how theview is drawn. To do this, open the Resources group in the Xcode navigator anddouble-click MainWindow.xib to launch Interface Builder (as you did in Chapter 3), asshown in Figure 4–8.Figure 4–8. The bare Asteroids app and its MainWindow.xib resource

105.
86 CHAPTER 4: She Shoots, She Hits, She Scores! In Interface Builder, click the MainWindow.xib icons in the upper left, choosing the one with lines in the middle. This will shift to a detailed view that displays the entire name of each object, as seen on the left in Figure 4–9. Double-click the Asteroids View Controller entry to reveal the window on the right of Figure 4–9. Note how the view states that it is loaded from our main controller, AsteroidsViewController. Figure 4–9. Interface Builder in detail mode, showing the Asteroids view controller Click the blue underlined text AsteroidsViewController. This will reveal the underlying view object, shown on the left of Figure 4–10. We’ll now tell Interface Builder that this view should use AsteroidsView, versus the default UIView. Double-click View to reveal the View window on the right of Figure 4–10. Figure 4–10. The view controller in detail mode, with its view highlighted

106.
CHAPTER 4: She Shoots, She Hits, She Scores! 87Click the View window. Carefully press 4 while the View window is selected. This willopen the Inspector window for the view, as shown in Figure 4–11. The Class selector atthe very top of the Inspector window tells the iPhone which class will control display ofthe view. Since we already created AsteroidsView, it should be one of the choicesavailable. Navigate to it and select it, as shown on the left in Figure 4–11.Figure 4–11. Connecting our AsteroidsView class to the main view in Interface Builder, then changing thebackground color to Licorice (solid black)Our Asteroids game occurs in space. We’ll need a black background. While we’re here,let’s change that as well. Click the icon in the upper left of the Inspector window—theone that looks like a slider. The window will change to look like the one on the right inFigure 4–11. The current color will be a default gray. Click the color, changing it toLicorice, a solid black color. The view window will also change to black.Press Q to exit Interface Builder, answering Yes when you’re asked whether to saveyour changes to Asteroids.Return to Xcode, and then compile and run Asteroids in the simulator. The simulatorshould start fine, showing a completely black view, as shown in Figure 4–12. At the topof the view, you’ll see a gray status bar. Let’s get rid of it.

107.
88 CHAPTER 4: She Shoots, She Hits, She Scores! Figure 4–12. A black iPhone canvas for Quartz, containing a status bar. Navigate to the Resources group again in the Xcode navigator. Click Asteroids-Info.plist, revealing attributes for the application in Xcode’s property list editor. Click the very last entry, which will create a plus sign at the end of the row. Now click the plus sign. This will create a new property, prompting you to select from a given list. Navigate this list and choose Status Bar is Initially Hidden. Then click the little check box to the right. You should see a window similar to that in Figure 4–13. Figure 4–13. Hiding the status bar

108.
CHAPTER 4: She Shoots, She Hits, She Scores! 89Compile and run your application in Xcode ( ). The simulator should now becompletely black, as in Figure 4–14. We’re ready to write some code.Figure 4–14. A blank canvas, ready for Quartz 2DYour First Graphic with Quartz 2DAt this point, you’re probably itching to play with graphics. The steps we just completedset up our main view, connected the view controller to this view, turned off the statusbar, and gave us total control over drawing.Open the AsteroidsView class and change the content of the drawRect method to thefollowing code. This method is called whenever AsteroidsView needs updating.- (void)drawRect:(CGRect)rect { // Get a graphics context, saving its state CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); // Reset the transformation CGAffineTransform t0 = CGContextGetCTM(context); t0 = CGAffineTransformInvert(t0); CGContextConcatCTM(context,t0); // Draw a green rectangle CGContextBeginPath(context); CGContextSetRGBFillColor(context, 0,1,0,1); CGContextAddRect(context, CGRectMake(0,0,100,200)); CGContextClosePath(context); CGContextDrawPath(context,kCGPathFill); CGContextRestoreGState(context);}

109.
90 CHAPTER 4: She Shoots, She Hits, She Scores! Save your project and compile. A green rectangle will appear on the canvas, as shown in Figure 4–15. The rectangle is painted at the lower left (0,0), and proceeds 100 units to the right in the x direction and 200 units to the top in the y direction. The rectangle demonstrates the default coordinate system of Quartz 2D. On the iPhone and iPod touch, the x axis extends from 0 to 320 pixels. The y axis extends from 0 to 480 pixels. y-axis (0,0) x-axis Figure 4–15. A 100-by-200 green rectangle painted at (0,0) by Quartz 2D. The default Quartz 2D coordinate system is shown on the right. Saving and Restoring the Context The iPhone provides a single call to retrieve the Quartz 2D graphics context during a draw operation: // Get a graphics context, with no transformations CGContextRef context = UIGraphicsGetCurrentContext(); All Quartz 2D data structures and API calls have a CG prefix, which stands for Core Graphics. CGContextRef is a pointer to a Quartz data structure for the artist canvas. UIGraphicsGetCurrentContext asks the iPhone for the current view. Unlike with desktop operating systems, there is only one window within the phone, and thus one context. You can think of the context as a physical canvas. Like a canvas, the context can be moved, rotated, shrunk, and stretched, and then covered in layers of paint. Imagine you are an artist with a large canvas in front of you, perhaps several feet on a side. If you have a complex scene you’re trying to paint, you can rotate and move the canvas to make things easier to draw. For example, after you paint birds in the sky, you can move the canvas again, and paint the grass or ocean waves.

110.
CHAPTER 4: She Shoots, She Hits, She Scores! 91So, when you sit down at a canvas, the first thing you need to do is to get your bearings.You may have left it in an odd state the day before, when the birds were being painted.Today, you’re painting the ocean. Time to move the canvas.But first, we need to be good citizens by calling CGContextSaveGState. This remembersthe current state of the canvas for us, which we can later restore with a single call toCGContextRestoreGState.In a large program, multiple classes and artists will be painting on the canvas. As a ruleof thumb, we should always leave the canvas in the same state that we found it. Withthe canvas state stowed away, we can safely move it into place.Quartz 2D describes the shifts of the canvas with matrix transformations. These aremathematical relationships that tell how to position points in space. In 2D games, we’retypically interested in affine transformations. An affine transformation does what youexpect in the real world. If you scale or move an object, edges that started straightremain straight. Affine transformations are reversible. If you scale an object down, thenscale it back up, it doesn’t change. If you move an object from one point to another,then back, it doesn’t change.It’s important to follow one simple algorithm whenever drawing with Quartz 2D: 1. Save the context state. 2. Perform a single, combined matrix transformation. 3. Draw your graphics that need this transformation. 4. Restore the context. NOTE: I found that trying to be smart or tricky—combining multiple transformations within a single draw or trying to figure out the math when multiple items need to be on the screen in various scales and rotations—is rarely worth the effort. Once you finally get the math right, your design may change. Worse, looking at the complex code weeks or months later will lead to confusion, making the code brittle.Let’s tell Quartz 2D to put our canvas back in the default or (0,0) position. We do this byasking for the current transformation, a mathematical matrix describing how the canvaswas moved from its original location, orientation, and scale. The canvas could be in anystate. We then calculate the exact opposite motion, which in mathematics is called theinverse matrix. Finally, we ask Quartz 2D to apply the inverse matrix to the currenttransformation. Since the transformations are affine, and since all affine transformationsare reversible, this will place our canvas back to the default location.We need three lines of code:CGAffineTransform t0 = CGContextGetCTM(context);t0 = CGAffineTransformInvert(t0);CGContextConcatCTM(context,t0);

111.
92 CHAPTER 4: She Shoots, She Hits, She Scores! CGContextGetCTM returns the graphic context’s transformation matrix or CTM, as a matrix data structure. We call CGAffineTransformInvert to create the inverse matrix. We then call CGContextConcatCTM, which will concatenate our new matrix t0 with the existing matrix. Concatenation is the act of multiplying the matrix you supply (t0 in this case) with the current drawing matrix. When any matrix is multiplied by its inverse, we get the identity matrix. The identity matrix restores the canvas to its original, native state, as though no transformations were performed. NOTE: More details on matrices and transformations can be found online at http://bit.ly/cmwg7D, a shortened URL to relevant sections of Apple’s Quartz 2D Programming Guide. Adding Color Let’s throw some paint on the canvas. Like any good artist, Quartz 2D likes to paint outlines before it fills in a scene. These outlines are called paths. The following lines of code create a rectangular path (the lines are numbered on the right for clarity). CGContextBeginPath(context); (1) CGContextSetRGBFillColor(context, 0,1,0,1); (2) CGContextAddRect(context, CGRectMake(0,0,100,200)); (3) CGContextClosePath(context); (4) As before, the API functions begin with the letters CG. Most calls require the graphics context, which we went through great pains to create. CGContextBeginPath, on line 1, starts a fresh, new path in Quartz 2D. The Quartz 2D engine is like an artist with just one pair of hands. At any time, only one path is being created. CGContextSetRGBFillColor, on line 2, specifies the color we would like to use in our path. Colors in Quartz 2D are specified in three unit values—a floating-point number between 0 and 1—for each of red, green, and blue. A value of 0 means to use no color for the given color component, 0.5 means to use 50% of that color, and 1.0 means to use 100% of the color. A fourth unit value represents the opacity, where 0 means the graphic is invisible, 0.5 means make the graphic 50% transparent, and 1 means the graphic is completely opaque. Quartz has numerous, powerful ways to combine these colors for interesting effects. For now, we’ll use the default, which just adds the components together to create a single green, completely opaque color: (0 x red) + (1.0 x green) + (0.0 x blue) at an opacity of 1.0 CGContextAddRect, on line 3, adds a single rectangle to the current path. We describe our rectangle using the CGRectMake macro. The macro is passed an origin (0,0), a width (100), and a height (200). CGContextClosePath, on line 4, tells Quartz 2D that we’re finished with the current path, and ready to paint with it on the canvas. The following call tells Quartz to take the current path, fill it in with the current color, and add it to the canvas. The first argument is the context. The second argument is a drawing mode, one of several available.

112.
CHAPTER 4: She Shoots, She Hits, She Scores! 93CGContextDrawPath(context,kCGPathFill);Finally, being good citizens, we restore the state of the canvas with a single call:CGContextRestoreGState(context);SpritesOur Quartz 2D API calls for drawing the green rectangle can be generalized, then reusedfor all kinds of graphical items on the screen. Instead of hard-coding the location, size,and attributes of our rectangle, we create a class to store these values as instancevariables. As noted earlier in the chapter, the common name used in the industry for anobject that comes alive is the sprite.Creating the Sprite ClassLet’s create a new class, Sprite, as a subclass of NSObject. Add a new file to theClasses group in Xcode, naming it Sprite. Replace the default @interface definition inSprite.h to that shown in Listing 4–1.Listing 4–1. The Sprite interface in Sprite.h@interface Sprite : NSObject { CGFloat x; // x location CGFloat y; // y location CGFloat r; // red tint CGFloat g; // green tint CGFloat b; // blue tint CGFloat alpha; // alpha value, for transparency CGFloat speed; // speed of movement in pixels/frame CGFloat angle; // angle of movement in degrees CGFloat rotation; // rotation of our sprite in degrees, about the center CGFloat width; // width of sprite in pixels CGFloat height; // height of sprite in pixels CGFloat scale; // uniform scaling factor for size int frame; // for animation CGFloat cosTheta; // precomputed for speed CGFloat sinTheta; CGRect box; // our bounding box BOOL render; // true when were rendering BOOL offScreen; // true when were off the screen BOOL wrap; // true if you want the motion to wrap on the screen}@property (assign) BOOL wrap, render, offScreen;@property (assign) CGFloat x, y, r, g, b, alpha;@property (assign) CGFloat speed, angle, rotation;@property (assign) CGFloat width, height, scale;@property (assign) CGRect box;@property (assign) int frame;

113.
94 CHAPTER 4: She Shoots, She Hits, She Scores! The Sprite class captures the 2D geometry and color of a graphic that we would like to place on the iPhone. x and y capture the desired location of our graphic on the screen. The variables r, g, b, and alpha capture the Quartz 2D color and transparency (floating- point values ranging from 0.0 to 1.0, as described earlier). We store two different angles for each sprite. Figure 4–16 demonstrates these two angles on a rectangle. The original or starting position is shown in thinner gray lines, and the modified position is shown with thicker black lines. rotation captures the number of degrees we’ve rotated our object (about its center). We follow standard geometry, where increasing angles represent counterclockwise rotations. An angle of 0 means no rotation. A 90-degree rotation turns the graphic counterclockwise a quarter turn. A 180-degree rotation turns the graphic counterclockwise a half turn. A 360-degree rotation is a complete spin, back to the original orientation. Figure 4–16 shows a rectangle rotated 45 degrees. Quartz 2D uses radians to measure angles. You might recall that a 360-degree circle is equal to 2 radians and that is approximately 3.1415926. Let’s add convenience functions to the sprite, so that we can work in degrees, while the math is stored natively inside the sprite. We do this by overriding the default methods for getting and setting the rotation instance variable, as shown in Listing 4–2. Listing 4–2. Convenience functions for working in degrees vs. radians - (void) setRotation: (CGFloat) degrees { rotation = degrees*3.141592/180.0; } - (CGFloat) rotation: { return rotation*180.0/3.141592; } - (void) setAngle: (CGFloat) degrees { rotation = degrees*3.141592/180.0; cosTheta = cos(rotation); sinTheta = sin(rotation); } - (CGFloat) angle: { return rotation*180.0/3.141592; } angle describes movement of sprites on the canvas. An angle of 0 represents a straight movement to the right, parallel to the x axis. An angle of 90 is straight up and parallel to the y axis, 180 is to the left, and 270 is straight down. Figure 4–16 shows a rectangle that has a movement angle of 45 degrees. The amount a sprite moves during each tic of the game loop is represented as its speed. Two variables save processing time during the update cycle of a game loop. costheta stores the cosine of the movement angle, and sintheta stores the sine of the movement

114.
CHAPTER 4: She Shoots, She Hits, She Scores! 95angle. These trigonometry functions are expensive and best computed once, when theangle of movement changes. 45 d ee sp 45 rotation angle & speedFigure 4–16. A sprite’s rotation, angle, and speedbox stores the bounding box for our sprite. A bounding box is the smallest rectangle thatcompletely covers all parts of our sprite, rotated if necessary. Games use these all thetime to determine whether two sprites might collide. In Asteroids, we’ll use the boundingbox of rocks and bullets to determine when a rock should explode. The bounding boxfor our ship is compared against the bounding box for rocks to determine if our shipshould die. Figure 4–17 shows the bounding box for a rock and ship at differentrotations. rock shipFigure 4–17. A sprite’s bounding box (dashed line)scale tells us how big to draw the sprite. A scale of 1.0 means to draw it at default size,0.5 at half the size, 4.0 at four times the size, and so on. width and height capture thedimensions of our sprite, before any rotations or scaling are done.We keep three Boolean switches for every sprite: render, offscreen, and wrap. renderdetermines whether our sprite should be drawn on the screen. This is a handy switch for

115.
96 CHAPTER 4: She Shoots, She Hits, She Scores! taking sprites on and off the canvas. This can be useful for things like space aliens that suddenly appear, pop-up menus, destroyed rocks, and alert messages. offscreen records whether the sprite has moved out of sight. In the Asteroids game, an off-screen bullet just disappears, assuming it continues to fire off into the ether. wrap tells the update loop what to do when a sprite goes off the screen. Rocks don’t disappear. They come back to haunt the main ship, wrapping around the screen. Your ship doesn’t disappear, either. As you thrust across the screen, your ship wraps from one side to the next. Finally, we keep an integer value frame to represent the current “frame” for the sprite’s own movie. Some sprites are composed of multiple images or drawings, one for each frame of a small animation. This enables a sprite to appear to walk, emit fire, and so on. It’s time to put our Sprite class to work. Open the Sprite.m file in Xcode. Quartz likes to generate paths first, before filling them in. Add the following outlinePath: method to the Sprite class: - (void) outlinePath: (CGContextRef) context { // By default, just draw our box outline, assuming our center is at (0,0) CGFloat w2 = box.size.width*0.5; CGFloat h2 = box.size.height*0.5; CGContextBeginPath(context); CGContextMoveToPoint(context, -w2, h2); CGContextAddLineToPoint(context, w2, h2); CGContextAddLineToPoint(context, w2, -h2); CGContextAddLineToPoint(context, -w2, -h2); CGContextAddLineToPoint(context, -w2, h2); CGContextClosePath(context); } We use two new Quartz 2D functions: CGContextMoveToPoint and CGContextAddLineToPoint. Paths in Quartz 2D have the notion of the “current point” for sketching. The CGContextMoveToPoint function moves the current point to an (x,y) location, shown here as (-w2,-h2), where w2 is half the width of the bounding box and h2 is half the height. The CGContextAddLineToPoint function tells Quartz 2D to draw a line from the current point to a new (x,y) location, moving the current point to (x,y) as well. We make four such calls, drawing a rectangle centered at the origin, as shown in Figure 4–18. (–w2,h2) (w2,h2) origin (–w2,–h2) (w2,–h2) Figure 4–18. The outline path of a sprite

116.
CHAPTER 4: She Shoots, She Hits, She Scores! 97The outline path is the shape of the sprite’s bounding box. It doesn’t yet have the scale,rotation, or location information. Transformations do the math for us. We’ll add colorlater, too. We do this in two steps, one draw method to set up the canvas and currentcolor, invoking a second drawBody to do the actual drawing. First, let’s add the methodfor drawBody, which will fill the path with our chosen r,g,b color and transparency alpha:- (void) drawBody: (CGContextRef) context{ CGContextSetRGBFillColor(context, r, g, b, alpha); [self outlinePath: (context)]; CGContextDrawPath(context,kCGPathFill);}This method uses the outline path and the Quartz 2D call CGContextDrawPath to fill it withthe current color, just as we did with our green rectangle. Add just one more method tothe Sprite class, draw:- (void) draw: (CGContextRef) context{ CGContextSaveGState(context); // Position the sprite CGAffineTransform t = CGAffineTransformIdentity; t = CGAffineTransformTranslate(t,x,y); t = CGAffineTransformRotate(t,rotation); t = CGAffineTransformScale(t,scale,scale); CGContextConcatCTM(context, t); // Draw our body [self drawBody: context]; CGContextRestoreGState(context);}Here, we encounter a bit of math and some peculiarities with Quartz 2D. Let’s walkthrough it.We first make a copy of the identity matrix CGAffineTransformIdentity in the localvariable t. Think of this as the number 1 in multiplication. If you concatenate (multiply)the current matrix by the identity matrix, it leaves the current transformationunchanged—any number times 1 equals that number.Next, we pass the matrix t to CGAffineTransformTranslate, creating a new matrix thatwill translate the canvas x units in the x direction, and our y units in the y direction.Translate is the mathematical term for movement along a given axis. We store the resultof this translation back in our matrix t. This technique is called chaining, where we chaintogether multiple matrix transformations into one.We chain the matrix t again, calling CGAffineTransformRotate, rotating our canvas byour sprite’s rotation.We chain the matrix one final time, calling CGAffineTransformScale, scaling our canvasby the scale of our sprite. This will ensure that a unit movement (1 pixel on our path)equals the appropriate units on our canvas.

117.
98 CHAPTER 4: She Shoots, She Hits, She Scores! Now here’s the peculiar part. Our code executes three transformations in a row: a translation, a rotation, and a scale. The underlying mathematics, however, capture these in reverse order, much like a last-in-first-out stack in computer science. When Quartz applies the transformation matrix to drawing operations, the math essentially applies the transformations in the reverse order that we specified. Thus, our drawing operations will conduct the following transformations, in order: 1. Scale the drawing by the scale property. 2. Rotate the drawing by the rotation property. 3. Translate the drawing to the specified (x,y) location. We write the code in reverse, first translating (step 3), then rotating (step 2), then scaling (step 3). We’ve conveniently located our outline path so that it centers at (0,0) of the canvas. In fact, all drawBody methods should center their drawing at (0,0). This way, when the canvas is spun in one direction or another by Quartz, our graphic spins about its center. Quartz performs the affine transforms of draw as shown in Figure 4–19, correctly positioning the desired graphic on our iPhone screen. scale rotate translate Figure 4–19. The transformation sequence of the Sprite draw method Before we try out our sprite, let’s tidy up the Sprite class by adding @synthesize definitions for all these attributes, and changing the init method to use some default values. Change the beginning of your Sprite class definition so that it looks like this, at the top of Sprite.m: @implementation Sprite @synthesize x,y,speed,angle,width,height,scale,frame,box,rotation,wrap,render; @synthesize r,g,b,alpha,offScreen; Objective-C will create methods that allow us to access sprite attributes with the dot syntax; for example, mySprite.speed becomes shorthand for [mySprite speed]. Next, replace the init method with the code shown in Listing 4–3. Listing 4–3. The Sprite init method, which chooses default values - (id) init { self = [super init]; if (self) { wrap = NO;

119.
100 CHAPTER 4: She Shoots, She Hits, She Scores! We can use the drawing routines of our Sprite class, ditching the hard-coded routines from earlier. Change the drawRect of our AsteroidsView class in AsteroidsView.m to reflect this (the changes are shown in bold). - (void)drawRect:(CGRect)rect { // Get a graphics context, saving its state CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); // Reset the transformation CGAffineTransform t0 = CGContextGetCTM(context); t0 = CGAffineTransformInvert(t0); CGContextConcatCTM(context,t0); // Draw a green rectangle [test updateBox]; [test draw: context]; CGContextRestoreGState(context); } # Don’t forget to clean up after yourself, changing the dealloc method of the AsteroidsView class as follows: - (void)dealloc { [test release]; [super dealloc]; } Compile and run AsteroidsView. You should see something familiar if all went well (see Figure 4–20). Figure 4–20. A Sprite version of our green rectangle

120.
CHAPTER 4: She Shoots, She Hits, She Scores! 101It looks like nothing has changed! However, to the contrary, we have significantly morepower at our disposal.Let’s change the drawRect routine of our AsteroidsView class. After the first rectangle isdrawn, we’ll move the test sprite, rotate it by 90 degrees, change its color to purple,scale it by 50%, and set its alpha transparency to 25%. We draw it a second time, usingthe sprite like a rubber stamp to produce another rectangle on our screen.See Listing 4–4 for the new source code of drawRect, and Figure 4–21 for the resultingdisplay. Quartz layers the sprites onto the canvas using the painter’s model of 2Dgraphics. Basically, this means that items are layered in the order they’re drawn, likepainting with oils on a canvas. The green rectangle is drawn first; the purple,semitransparent purple rectangle is drawn second. You can see the green underneaththe purple, creating a combined color.Listing 4–4. An updated drawRect routine- (void)drawRect:(CGRect)rect { // Get a graphics context, saving its state CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); // Reset the transformation CGAffineTransform t0 = CGContextGetCTM(context); t0 = CGAffineTransformInvert(t0); CGContextConcatCTM(context,t0); // Draw a green rectangle [test updateBox]; [test draw: context]; // Draw it again, in purple, rotated test.x = 75; test.y = 100; test.r = 1.0; test.g = 0.0; test.b = 1.0; test.alpha = 0.25; test.scale = 0.5; test.rotation = 90; [test updateBox]; [test draw: context]; CGContextRestoreGState(context);}

121.
102 CHAPTER 4: She Shoots, She Hits, She Scores! Figure 4–21. Quartz 2D’s painter’s model demonstrated by the new drawRect code Which Way Is Up? Our sprites look great in portrait mode, where the screen is vertical. Many games prefer landscape mode, providing a wider area for scrolling backgrounds, card tables, and two thumbs. Asteroids is one such game. Changing to Landscape Orientation Let’s turn our iPhone into a landscape application and see what happens. Make the following change to the applicationDidFinishLaunching method of our AsteroidAppsDelegate class (see the source code in AsteroidAppsDelegate.m): - (void)applicationDidFinishLaunching:(UIApplication *)application { [application setStatusBarOrientation: UIInterfaceOrientationLandscapeRight animated:NO]; [application setStatusBarHidden:YES animated:NO]; [window addSubview:viewController.view]; [window makeKeyAndVisible]; } We call the setStatusBarOrientation method on our main application, specifying that we want landscape mode. We also make sure the status bar doesn’t pop back up, asking that it remain hidden. Compile and run the Asteroids application. Your screen should look like Figure 4–22.

122.
CHAPTER 4: She Shoots, She Hits, She Scores! 103Figure 4–22. The iPhone in landscape mode, with no changesIf you look at this sideways, you’ll see that nothing has changed. The green and purplerectangles are drawn as they were before, along the left edge, above the iPhone button.This is not what we want. Instead, we expect to see the green rectangle in the lower leftof the display, regardless of orientation. We can fix this with transformations on theQuartz context. We keep the same coordinates for our objects. We turn the virtualcanvas to suit our needs.Replace the draw method in Sprite.m with the following code:- (void) draw: (CGContextRef) context{ CGContextSaveGState(context); // Position the sprite CGAffineTransform t = CGAffineTransformIdentity; t = CGAffineTransformTranslate(t,y,480-x); t = CGAffineTransformRotate(t,rotation - 3.141592*0.5); t = CGAffineTransformScale(t,scale,scale); CGContextConcatCTM(context, t); [self drawBody: context]; CGContextRestoreGState(context);}Compile and run the application. Your screen should now look like Figure 4–23.Figure 4–23. Landscape mode, corrected through affine transformations

123.
104 CHAPTER 4: She Shoots, She Hits, She Scores! We left the scale the same. That doesn’t change when we shift from landscape to portrait mode. We decrease the rotation angle by -90 degrees, to offset the iPhone landscape rotation of +90 degrees. Finally, we reverse the y and x values, offsetting x from 480 to make everything line up. Centering the Origin So far, we’ve been using the lower-left corner of the display as the origin of our game coordinate system. The Asteroids game starts with a ship in the center, fending off rocks and ships that come from all angles. You may find it easier to use a coordinate system where the origin is in the center of the display, with x increasing to the right and y increasing toward the top, as shown in Figure 4–24. lower left centered Figure 4–24. Centering the origin in landscape mode We accomplish this by adjusting our transform. Here is a version of the Sprite draw method that centers the origin in landscape mode: - (void) draw: (CGContextRef) context { CGContextSaveGState(context); // Position the sprite CGAffineTransform t = CGAffineTransformIdentity; t = CGAffineTransformTranslate(t,y+160,240-x); t = CGAffineTransformRotate(t,rotation - 3.141592*0.5); t = CGAffineTransformScale(t,scale,scale); CGContextConcatCTM(context, t); [self drawBody: context]; CGContextRestoreGState(context); } Change the draw method in Sprite.m, recompile, and run the application. You’ll see the rectangles shift to the center, as indicated by the “centered” coordinate system in Figure 4–24. A sample output is shown in Figure 4–25.

124.
CHAPTER 4: She Shoots, She Hits, She Scores! 105Figure 4–25. Two sprites on a landscape coordinate system centered in the displayIf this seems confusing, don’t worry. It is! We just have to get it right once, add thetransforms to our core Sprite class, and then forget about it. I usually add methods tomy game controller to sense the device orientation, as follows:UIDeviceOrientation orient = [[UIDevice currentDevice] orientation];The value of orient will be one of the following: UIDeviceOrientationUnknown: Unknown, assume no rotation UIDeviceOrientationPortrait: No rotation UIDeviceOrientationPortraitUpsideDown: 180 degree rotation UIDeviceOrientationLandscapeLeft: 90 degree rotation UIDeviceOrientationLandscapeRight: –90 degree rotation UIDeviceOrientationFaceUp: Unknown rotation UIDeviceOrientationFaceDown: Unknown rotationGood interface designs are simple and intuitive. I recommend that you only use twoorientations for drawing, the ones included in this chapter: portrait and landscape right.It’s up to you whether to place the origin at the lower left or use the center. I prefer thecenter. The math is cleaner in code.If you have made it this far, congratulations! The bulk of the math is behind us. We’llnow look at three subclasses of Sprite: one for vector art, another for images, and athird for text.Vector ArtOur green and purple rectangles can also be called vector art. In fact, a popular displayat the Museum of Modern Art in New York City shows just that: large green, purple, andred rectangles. It’s an acquired taste.Vector art uses the drawing routines of Quartz 2D to draw lines, curves, and polygons.These shapes can be filled with color using other Quartz 2D API calls. Vector art scalesnicely, producing smooth edges and curves regardless of the scale.

125.
106 CHAPTER 4: She Shoots, She Hits, She Scores! Creating the VectorSprite Class Figure 4–26 shows vector art for a spaceship suitable for Asteroids. Let’s figure out how to make these come alive with a new class, VectorSprite. We’ll keep the drawings simple to focus on the use of Quartz 2D. Figure 4–26. Vector art for a spaceship Return to your Asteroids project in Xcode. Create a new class named VectorSprite as a subclass of NSObject (see Figure 4–27), placing it in the Classes group. Figure 4–27. Creating a new VectorSprite class Change the contents of VectorSprite.h to the following: #import <Foundation/Foundation.h> #include "Sprite.h" @interface VectorSprite : Sprite { CGFloat *points; int count; CGFloat vectorScale;7 }

126.
CHAPTER 4: She Shoots, She Hits, She Scores! 107@property (assign) int count;@property (assign) CGFloat vectorScale;@property (assign) CGFloat *points;+ (VectorSprite *) withPoints: (CGFloat *) rawPoints count: (int) count;- (void) updateSize;@endThe VectorSprite class is a subclass of the Sprite class we just created. It will inheritthe drawing operations, transformations, and all those nifty parameters to describe howa sprite moves and positions itself in space.We add a few new instance variables to capture the vector art:CGFloat *points;int count;We’re going to assume that art is quite simple—just a set of connected lines in 2D thatform one polygon. The points variable is an array of floating-point values, stored in acompact array in memory. The edges of our line segments are stored in order, (x0, y0),(x1, y1), …, , (xn, yn) for all n points. The integer count records the number of point pairs.Figure 4–28 shows an example of how points are laid out in memory with a count of 4.We then make points an assignable property rather than a retained property, assumingsomeone else will worry about managing their memory usage:@property (assign) CGFloat *points;@property (assign) int count;Why? We could have dozens of sprites that all share the same design. There’s no senseduplicating this data and wasting precious memory on the iPhone.We can vary the size of the art by paying attention to the scale property in our parentSprite class. This introduces the last instance variable, vectorScale. Often, we’ll want artto get small or large, but keep the lines the same size. Think of multiple rocks within anAsteroids game, floating in space, all of various sizes. If we relied on the canvas to scaleour art, the line thickness would scale just as well. Multiplying the size of our art by fivewould produce lines that are five times thicker! That’s clearly not what we want. To keepour interface clean, we’ll override the default scale routines in Sprite. Let’s do that now.Add the setScale and updateSize methods shown in Listing 4–5 to the VectorSpriteclass in VectorSprite.m. The first of these overrides the dot-method for size in Sprite.We intercept the attempt to change the native size. We store the value in vectorScaleinstead, calling an updateSize routine to figure out our sprite’s new width and height.Listing 4–5. Overriding changes to scale in VectorSprite.m@synthesize points, count, vectorScale;- (void) setScale: (CGFloat) s{ self.vectorScale = s; scale = 1.0; [self updateSize];}- (void) updateSize

128.
CHAPTER 4: She Shoots, She Hits, She Scores! 109 [v updateSize]; return v;}With a set of points, scale, width and height, we’re ready to draw something on thescreen. We’ll replace the default Sprite method for creating a path with our own. Addthe following outlinePath method to the VectorSprite class in VectorSprite.m:- (void) outlinePath: (CGContextRef) context{ CGContextBeginPath(context); CGContextSetRGBStrokeColor(context, r, g, b, alpha); for (int i=0; i < count; i++) { CGFloat x1 = points[i*2]*vectorScale; CGFloat y1 = points[i*2+1]*vectorScale; if (i == 0) { CGContextMoveToPoint(context, x1, y1); } else { CGContextAddLineToPoint(context, x1, y1); } } CGContextClosePath(context);}You’ve seen these Quartz 2D API calls before, when we created our green and purplerectangles. This time, we’re generalizing our code to use an arbitrary set of points,connecting them together into a single polygon, and then filling them as before. It’s timeto test it.Using the VectorSprite ClassOpen the definition for our view, AsteroidsView.m. Make sure to import the definition forour newly created VectorSprite class, and then change the initWithCoder routine touse a VectorSprite instead of the default Sprite. Leave everything else unchanged.Remember that our VectorSprite is a subclass of Sprite, and should behave just as ourrectangles did. All we’ve done is change how the sprite is stored and how its outline isdrawn. See Listing 4–6 for the changes to the top of AsteroidsView.m.Listing 4–6. A revised AsteroidsView class that uses a VectorSprite to draw rectangles#import "AsteroidsView.h"#import "VectorSprite.h"@implementation AsteroidsView#define kVectorArtCount 4static CGFloat kVectorArt[] = { -50,100, 50,100, 50,-100, -50,-100,};- (id) initWithCoder: (NSCoder *) coder { if (self = [super initWithCoder: coder]) { test = [VectorSprite withPoints: kVectorArt count: kVectorArtCount];

129.
110 CHAPTER 4: She Shoots, She Hits, She Scores! test.scale = 1.0; test.x = 50; test.y = 100; test.r = 0.0; test.g = 1.0; test.b = 0.0; test.alpha = 1.0; } return self; } With these changes, you should see our familiar rectangles in the centered coordinate system, as shown in Figure 4–29. Figure 4–29. A VectorSprite version of our dual rectangles The rectangles display as before. We’ve moved the hard-coded points into an external array of data. Note how the data is arranged so that the VectorSprite points are centered at (0,0). We have specified the first point as (-50,100), or the upper left of our green rectangle, centered at (0,0). The second point is (50,100), moving to the right on the x axis, but staying at the top of the y. We drop down to the lower right (50,-100), and then back to the lower left (-50,-100). Quartz 2D closes the path for us. The data for every shape in our game must be centered at (0,0). This enables us to share common matrix transformations with all sprites. We use the x, y, rotation, and scale attributes to position them on the display. We do not use points for this. Instead, the points are like a Quartz 2D path—a generalized version of the vector art that we can reposition, scale, and rotate to our heart’s content. Let’s put our first pair of asteroids on the screen. Change the points in the kVectorArt array to the following, then compile. You should see two asteroids in place of the rectangles, as shown in Figure 4–30. #define kVectorArtCount 12 static CGFloat kVectorArt[] = { -7,12, 1,9, 8,12, 15,5, 8,3, 15,-4, 8,-12, -3,-10, -6,-12, -14,-7, -10,0, -14,5 };

130.
CHAPTER 4: She Shoots, She Hits, She Scores! 111Figure 4–30. Tiny green and purple asteroids courtesy of VectorSpriteThe source code for Asteroids (in asteroids.tar.gz) demonstrates other tricks you can dowith a VectorSprite. Here, we’ve used a simple, solid fill color. The Asteroids codeincludes a gradient fill, outlining the objects in white. I’ll spare you the details of creatinga gradient, which is the subject of a more advanced book on Quartz 2D. Instead, let’speek at the drawBody method for VectorSprite within the full Asteroids game:- (void) drawBody:(CGContextRef)context{ [self outlinePath: context]; (1) CGContextDrawPath(context,kCGPathFillStroke); [self outlinePath: context]; (2) CGContextClip(context); (3) [self gradientFill: context]; (4)}As labeled in the listing, this code works as follows: 1. We draw the outline path, but tell Quartz 2D to just fill the stroke of the path. Think of the stroke as a pen, following along the points of the path. 2. We create another copy of the outline path. 3. We turn the current path into a clipping region. Once a clipping region has been set in Quartz 2D, all subsequent draw operations are clipped if they fall outside the path area. Clipping cuts off a drawing at the edges of the path. 4. We call a routine to draw a large splotch of gradient color. This gives rocks with a bit more texture, as shown in Figure 4–31.

131.
112 CHAPTER 4: She Shoots, She Hits, She Scores! Figure 4–31. Vector sprites for a ship and rocks, drawn with a gradient fill and white edges A production game will use more elaborate vector graphics—potentially multiple polygons in several colors, each with a particular shading technique. Still, the basic design is the same as the one shown here. VectorSprite instances are subclasses of Sprite, referring to a set of shared data points. Some art can be quite complicated, with hundreds of polygons and dozens of layers, plus shading effects like dropped shadows, gradients, and blends. Drawing these 30 times a second in Quartz 2D is just not possible. In these cases, we need to use bitmap images for our sprites. We’ll cover that next. NOTE: In Chapters 6 through 8, Ben Smith will introduce OpenGL, a layer in the iPhone beneath Quartz 2D, closer to the metal of the graphics processor. OpenGL is happy to draw polygons with hundreds of points at game speed. Flipbook Animations Over two centuries ago, flipbook animations were an inspiration for the original motion picture. Figure 4–32 contains two flipbooks, where the individual pages are laid out in a grid. The animation on the left mimics what we’re doing here – app construction. It depicts a construction worker walking in four different directions, one direction per row. Let’s call him Mario. The flipbook on the right shows a two-frame animation for buttons in our Asteroids app: a thrust button, a button for rotating left, a button for rotating right, and a final button for firing missiles. Since buttons can get a tad dull, we’ll instead create a small diversion and make Mario come alive. We’ll have him walk about our screen, as if on break from hours of coding. The Asteroids game we review at the end of the chapter will animate the buttons, a simpler version of what we’ll now describe.

132.
CHAPTER 4: She Shoots, She Hits, She Scores! 113Figure 4–32. The modern flipbook: a sprite atlasCreating the AtlasSprite ClassLet’s first dispense with some basic terminology common to all games. A single imagethat contains multiple frames of an animation is called a sprite atlas. The simplest atlasuses a fixed size for each frame, arranging them neatly into rows and columns. Framesare numbered from 0 at the upper left, reading from left to right, and then down theatlas, as shown in Figure 4-32 and illustrated in Figure 4–33. 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 frame numberingFigure 4–33. Frame numbering within a gridTime to cut some code.Return to the Asteroids project in Xcode. Create a new file in the Classes group, asubclass of NSObject. Call it AtlasSprite.m, as shown in Figure 4–34.

134.
CHAPTER 4: She Shoots, She Hits, She Scores! 115We’ll build a convenience function at the class level, fromfile:withRows:withColumns,for building an atlas sprite from a single image. This method will take an input file name,plus the number of rows and columns in the sprite image. The class figures out all therest.The class will assume that a single image is shared by multiple sprites, much like theVectorSprite class assumed vector data was shared.Open the AtlasSprite.m file. We’ll create a shared dictionary to store all the imagesneeded by our sprites. Add the following methods to the AtlasSprite implementation,plus the Objective-C directives to expose our data, at the top of AtlasSprite.m.@implementation AtlasSprite@synthesize rows,columns;@synthesize image, atlas, atlasWidth, atlasHeight, clipRect, w2, h2;+(NSMutableDictionary *) sharedSpriteAtlas{ static NSMutableDictionary *sharedSpriteDictionary; @synchronized(self) { if (!sharedSpriteDictionary) { sharedSpriteDictionary = [[NSMutableDictionary alloc] init]; return sharedSpriteDictionary; } } return sharedSpriteDictionary;}The sharedSpriteAtlas method synchronizes access to a static variable, which we useto store a common NSMutableDictionary. If the dictionary doesn’t exist, we create it—once. This is a common technique for implementing singletons, object-oriented-speakfor (gasp) global variables.Now we need a class method to look up an image by its short file name. Add thefollowing method to your AtlasSprite class:+ (UIImage *) getSpriteAtlas: (NSString *) name{ NSMutableDictionary *d = [AtlasSprite sharedSpriteAtlas]; UIImage *img = [d objectForKey: name]; if (!img) { img = [[UIImage alloc] initWithContentsOfFile: [[NSBundle mainBundle] pathForResource:name ofType:nil]]; [d setObject: img forKey: name]; } return img;}The class method getSpriteAtlas takes a file name as an argument. It first checkswhether the file name has an associated UIImage pointer in the shared dictionary. If so,the pointer is returned. If not, the method looks for the file name in the global applicationbundle, creating a UIImage and storing it in the dictionary, and then returns it. This isreferred to as image caching in the previous chapter.

135.
116 CHAPTER 4: She Shoots, She Hits, She Scores! Let’s create the main convenience function of our AtlasSprite class: + (AtlasSprite *) fromFile: (NSString *) fname withRows: (int) rows withColumns: (int) columns { AtlasSprite *s = [[AtlasSprite alloc] init]; s.atlas = [[AtlasSprite getSpriteAtlas: fname] retain]; CGImageRef img = [s.atlas CGImage]; s.image = img; int width = CGImageGetWidth(s.image); int height = CGImageGetHeight(s.image); if (rows < 1) rows = 1; if (columns < 1) columns = 1; s.atlasWidth = width; s.atlasHeight = height; s.rows = rows; s.columns = columns; s.width = round(width/s.columns); s.height = round(height/s.rows); s.w2 = s.width*0.5; s.h2 = s.height*0.5; s.clipRect = CGRectMake(-s.width*0.5,-s.height*0.5,s.width,s.height); return s; } The first two lines allocate an AtlasSprite and retrieve the atlas image from the shared dictionary. The first bold line sends the CGImage message to the UIImage object, giving us a CGImageRef handle. This is a C structure and cannot receive Objective-C messages. We store it locally. The next few lines extract the dimensions of the image, using the Quartz methods CGImageGetWidth and CGImageGetHeight. Note that we don’t need a context in these API calls, as we did for other Quartz 2D calls. That indicates that we’re asking for data or activities that are unaffected by transformations. We want the raw, original size of our image. After we extract the atlas’s width and height, we use a bit of arithmetic to calculate the width and height of a single sprite image. We store these values in the newly created AtlasSprite image. We cache splitting the dimensions in half, as we’ll need these values for every draw operation. Pay close attention to this line: s.clipRect = CGRectMake(-s.width*0.5,-s.height*0.5,s.width,s.height); Recognize this? We’re creating a rectangle, centered at (0,0). The upper left is (-w/2,- h/2) and it extends the full width and height of a single sprite. This rectangle has the same dimensions as the default outline path in our Sprite class, shown in Figure 4–17. We’re going to use this rectangle to clip out a section of the sprite atlas. The magic occurs in the drawBody method of AtlasSprite. Add that now to AtlasSprite.m: - (void) drawBody: (CGContextRef) context { int r0 = floor(frame/columns); int c0 = frame-columns*r0; CGFloat u = c0*width + w2; // (u,v) center of sprite frame

136.
CHAPTER 4: She Shoots, She Hits, She Scores! 117 CGFloat v = atlasHeight - (r0*height + h2); // within the atlas // clip our image from the atlas CGContextBeginPath(context); CGContextAddRect(context, clipRect); CGContextClip(context); // draw the atlas CGContextDrawImage(context, CGRectMake(-u,-v,atlasWidth,atlasHeight), image);}The drawBody method first computes the center of our current frame within the spriteatlas. We label its x coordinate u and its y coordinate v. You’ll learn more about (u,v)coordinates in the chapters on OpenGL.Next, we set up the path centered at (0,0). We tell Quartz that we want to clip everythingthat falls outside this smaller rectangle.Finally, we draw the image using CGContextDrawImage. This method expects an imagereference, which we have, as well as a rectangle on which to draw the image.We need to be careful. Quartz will scale the existing image to fit the rectangle. Since wehave all the scaling we need in the base Sprite class, we draw the entire sprite atlas at thegiven width and height. The trick here is to shift the sprite atlas to (-u,-v). That centers theframe we want at (0,0). Figure 4–35 shows this technique for the (u,v) coordinates of frame16 in the construction worker atlas. The clipping path is also centered at (0,0).(–U5,–V3) 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 frame centeringFigure 4–35. AtlasSprite centers a frame, clipping to the rectangular areaNow for some housekeeping. Change the init method of AtlasSprite to set somedefault values, and clean up after ourselves in the dealloc method in AtlasSprite.m:

138.
CHAPTER 4: She Shoots, She Hits, She Scores! 119 else { offScreen = ((x+w2) < left) || ((x-w2) > right) || ((y+h2) < bottom) || ((y-h2) > top); } origin.x = x-w2*scale; origin.y = y-h2*scale; bsize.width = w; bsize.height = h; box.origin = origin; box.size = bsize;}- (void) tic: (NSTimeInterval) dt{ if (!render) return; CGFloat sdt = speed*dt; x += sdt*cosTheta; y += sdt*sinTheta; if (sdt) [self updateBox];} NOTE: The updateBox method as shown handles only landscape mode on the iPhone. It’s left as an exercise for the reader to upgrade this method for portrait mode or other coordinate systems.With this code in place, all sprites know how to move themselves. We send the sprite atic message, along with an interval of time in seconds. The default action advances thex and y position along the angle of motion, and then updates the bounding box for latercollision or off-screen detection.Using the AtlasSprite ClassThe final changes we need are a timer and an atlas sprite, updating the atlas sprite ateach tic, rendering it on screen. We start with Mario at the center, facing right. Wechoose a random angle and send Mario along his way. When he hits an edge (offscreenbecomes true), we calculate the angle back to the center of the screen. We then add arandom bounce angle, back in the general direction of the screen center, +/- a fewdegrees. This logic normally sits in a game controller. We’ll cheat for now and make thechanges in AsteroidsView.m, as shown in Listing 4–9. Well also change thebackground color of our view to white, creating a sense of being “behind the scenes” ofour app. Mario will be walking back and forth in this white wasteland.Listing 4–9. Changes to AsteroidsView.m to demonstrate animation with AtlasSprite#define RANDOM_SEED() srandom(time(NULL))#define RANDOM_INT(__MIN__, __MAX__) ((__MIN__) + random() % ((__MAX__+1) - (__MIN__)))

141.
122 CHAPTER 4: She Shoots, She Hits, She Scores! The forward (kForward) motion starts at frame zero (0), with Mario standing straight. It advances to frame 7,showing Mario walking to the right as he swings his hammer back and forth. The frames are drawn by Reiner “Tiles” Prokein, a generous character animator in Germany with numerous free animations. See http://bit.ly/PzclV for many more. Reiner has carefully designed the last frame of each animated walk so that it flows seamlessly back to the initial frame (0). We advance frames in the app by incrementing a frame counter, using modulo (%) arithmetic to wrap the number between 0 and kSteps – 1. frame = (frame+1)%kSteps; The code also changes Mario’s size every time he runs off screen. The size starts at 40% of the sprite size and scales randomly up to 200%. Since this can move him quite a bit, and we don’t want the offscreen flag to keep firing, we run a while loop, waiting for him to reappear before continuing: test.scale = 0.4+1.6*RANDOM_INT(0,10)/10.0; while (test.offScreen) [test tic: 1.0/kFPS]; The sprite’s speed is specified in pixels per second. We want him moving rather quickly, so we set this to 300 pixels per second: #define kSpeed 300 To summarize, here’s what we did in the last several pages: Created a sprite atlas and stored it in the project’s Resources group. Added AtlasSprite as a subclass of Sprite. The drawBody method extracts the current frame through clipping and translation. Upgraded Sprite to support motion at every tic, updating the bounding box, setting the offscreen flag or wrapping around edges. Upgraded AsteroidsView by adding a timer, an AtlasSprite, and a gameLoop method that causes Mario to bounce around the screen. That gives us Mario, as shown in Figure 4–36! Figure 4–36. Mario walks aimlessly around the iPhone, bouncing off edges and changing size, all courtesy of AtlasSprite and an updated AsteroidsView class.

142.
CHAPTER 4: She Shoots, She Hits, She Scores! 123Atlas sprites are powerful. They pick up where vector sprites fall short. However,sometimes you’ll need to display text to the user. Most games have heads-up displaysthat show the current score, the number of lives or time left, and other critical statistics.Creating all these with atlas sprites is possible yet tedious. Quartz 2D provides a rich setof libraries for drawing text from local fonts. We might as well use it. In the next section,you’ll learn how to use Quartz fonts within the sprite framework we’ve begun to build.Heads-Up DisplaysQuartz 2D has rich font support—on the desktop. The iPhone is limited to a small setof preloaded fonts, probably to keep the local storage to a minimum and to stay withintight design constraints. Designers are passionate about fonts. Spend a few minutesGoogling for “Comic Sans” to get a taste. The simple font shown in Figure 4-37seems to drive designers batty, with font-hating groups, t-shirts, and hilariouscartoons that humiliate fans of Comic Sans. Will we ever see Comic Sans on theiPhone? You must be crazy.Figure 4–37. Fonts are limited on the iPhone. And there’s no Comic Sans.I’ve found it safe to stick with Arial and Helvetica—nice clean fonts without messy serifsat the edges. We’ll wrap the Quartz 2D font API in a nice little sprite, enabling us torotate, scale, colorize, and move the text around on the screen.Ready? Let’s cut some code.Creating the TextSprite ClassUse Xcode to create a new class, TextSprite, as a subclass of NSObject. Place it in theClasses group as you’ve done with our other sprite classes. Figure 4–38 should lookfamiliar.

144.
CHAPTER 4: She Shoots, She Hits, She Scores! 125 @"Times New Roman" @"Trebuchet MS" @"Verdana" @"Zapfino"TextSprite retains the desired fontSize in points, and caches the number of charactersin the current text as textLength. Both of these values are used every time text isrendered, so we cache them to prevent needless calls to the length method of NSString.We support a convenience class function, TextSprite withString: @"", for creating textsprites directly from an NSString resource. Since the text is often used for heads-updisplays, where values change frequently, we supply a newText method for changing theunderlying string. Finally, we provide a moveUpperLeftTo: method for positioning theupper-left corner of a text string on the display. All the other sprites were positioned atthe center. I find text is easier to grab onto the left edge and move it around in code.Let’s jump to the implementation of the TextSprite class. Open TextSprite.m andreplace the generated code with a new init routine and our convenience method forcreating text sprites. Here, we’ll set some default values.#import "TextSprite.h"#define kDefaultFont @"Helvetica"#define kDefaultFontSize 14@implementation TextSprite@synthesize text, font, fontSize;- (id) init{ self = [super init]; if (self) { font = [kDefaultFont retain]; fontSize = kDefaultFontSize; text = nil; width = height = 0.0; } return self;}+ (TextSprite *) withString: (NSString *) label{ TextSprite *ts = [[TextSprite alloc] init]; if (ts) { ts.text = [label retain]; } return ts;}- (void) newText: (NSString *) val{ if (text) [text release]; text = [val retain]; width = 0; height = 0;

145.
126 CHAPTER 4: She Shoots, She Hits, She Scores! } @end TextSprite makes a habit of retaining every NSString that it receives, to prevent memory issues in future renderings. The init and withString methods are no different. We make sure to clean this up in the dealloc method, also part of TextSprite.m: - (void) dealloc { [text release]; [font release]; [super dealloc]; } The newText method appears to be doing something peculiar. After storing a copy of the NSString in the text variable, it sets the width and height of the sprite to zero. The drawBody method of newText watches for a zero width and height, indicating that it needs to step aside and calculate the overall string size and bounding box. These change with every new string or font change. Copy the code from Listing 4–10 and place it in TextSprite.m as well. Listing 4–10. The core routines of the TextSprite class - (void) computeWidth: (CGContextRef) context { textLength = [text length]; CGFontRef fref = CGFontCreateWithFontName((CFStringRef) font); if (!fref) { width=0.0; height=0.0; printf("Warning: missing font %sn",[font UTF8String]); return; } CGRect bbox = CGFontGetFontBBox(fref); int units = CGFontGetUnitsPerEm(fref); // Convert from glyph units, multiply by fontSize to get our height height = ( ((float) bbox.size.height) / ((float) units)) * fontSize; // Draw the text, invisibly, to figure out its width CGPoint left = CGContextGetTextPosition(context); CGContextSetTextDrawingMode(context, kCGTextInvisible); CGContextSetTextMatrix(context, CGAffineTransformIdentity); CGContextSelectFont(context,[font UTF8String], fontSize, kCGEncodingMacRoman); CGContextShowText(context, [text UTF8String], textLength); CGPoint right = CGContextGetTextPosition(context); width = right.x - left.x; // Figure out our new bounding box and release [self updateBox]; CGFontRelease(fref);

146.
CHAPTER 4: She Shoots, She Hits, She Scores! 127 return;}- (void) drawBody: (CGContextRef) context{ if (!text) return; if (!width) [self computeWidth: context]; CGContextSelectFont(context, [font UTF8String], fontSize, kCGEncodingMacRoman); CGContextSetTextDrawingMode (context, kCGTextFillStroke); CGContextSetRGBFillColor(context, r,g,b,alpha); CGContextSetRGBStrokeColor(context,r,g,b,alpha); CGContextShowTextAtPoint(context, 0,0, [text UTF8String], textLength);}Recall that drawBody is called whenever a sprite is sent a draw message. TextSprite firstchecks if it has any text. If not, there’s no reason to do anything, so it just returnswithout affecting the screen. Next, it checks whether the current width is zero. If so, thecomputeWidth method is invoked for the current context.You may wonder why we don’t calculate the string’s dimensions at the time it’schanged. The reason is that fonts differ in size based on the context in which they’redrawn. Quartz 2D was designed to let us manipulate graphics, images, and fontswithout worrying about the underlying hardware or printer. If we really need to know howbig something is going to be on a device, we must wait until we have a handle on thecontext (our canvas).The computeWidth method is chock-full of Quartz 2D API calls. We first callCGFontCreateWithFontName and hand it a Quartz string (known as a CFStringRef) thatrepresents the name of the font we want to use. Luckily, CFStringRef and NSString usethe same data structure. Casting from one to the next is a free operation. The APIfunction gives us a CGFontRef data structure. As with CGImageRef, this is a C structureand cannot receive Objective-C messages.We first check to see the CGFontRef (fref) is nonzero. This means we have a validpointer, and Quartz was able to find the font for us. If not, we just print an error. If thefont can’t be found, the app can’t really do anything, so it should exit gracefully. In thiscase, we just do nothing and print something to the console for debugging.Assuming that our font reference fref is valid, we call CGFontGetFontBBox, which returnsa bounding box that is big enough any character in the font. While some characters areclearly smaller than others (think a period versus a capital W), the bounding box is stilluseful for determining the maximum height of our string. But there’s still a problem.The CGFont class works in “glyph units.” We don’t care what they are; we just need toconvert them to device units. We do that by first calling CGFontGetUnitsPerEm, whichtells us how many of those glyph units are equal to one point. Remember ourpointSize? The next line computes the height, multiplying pointSize times the size of asingle point in the given font.Calculating width is more involved. We actually need to draw the font on the screen—invisibly—and watch as Quartz advances its hand. We then measure the distance from

147.
128 CHAPTER 4: She Shoots, She Hits, She Scores! when Quartz started and when it finished, giving us the width in device units. Obviously, we want to do this as few times as possible. Quartz 2D draws a font with five steps: 1. Pick a drawing mode with CGContextSetTextDrawingMode to know how characters will hit the canvas. 2. Specify any font transformations you want with CGContextSetTextMatrix. 3. Select a font with CGContextSelectFont, passing in a font name as an UTF8String and the font size as a floating-point value. 4. Optionally, set a stroke color with CGContextSetRGBStrokeColor and a fill color with CGContextSetRGBFillColor. 5. Display the text, either at the current point with CGContextShowText or at a specific point on the canvas with CGContextShowTextAtPoint. You can see these steps in action, both in computeWidth as we draw the text invisibly, and then again in drawBody. We position the font at (0,0). Quartz 2D draws the string of characters, placing the baseline of the first character at (0,0). This is the imaginary line on which all characters in a string “sit” so that they line up properly. See Figure 4–39 for a description of the various parts of a font. Fontery Cap Height Serif Bracket Eye Shoulder X-Height Ascender Terminal Baseline Stem Descender Figure 4–39. Various parts of a CGFont. We care about the baseline. We can simplify all this fontery by adding another method to our TextSprite class. Add the following to TextSprite.m: - (void) moveUpperLeftTo: (CGPoint) p { CGPoint p2 = CGPointMake(0,0); p2.x = p.x; p2.y = p.y + height; [self moveTo: p2]; } That’s it for our TextSprite. Let’s draw some text.

148.
CHAPTER 4: She Shoots, She Hits, She Scores! 129Using the TextSprite ClassOpen our overworked view, AsteroidsView.m. Assuming you’ve kept up with this, youshould now have a routine that moves Mario around the screen. First, add the followingimport statement to the top of AsteroidsView.m:#import “TextView.h”We’re going to leave the drawRect routine in place, but replace the initializer inAsteroidsView.m:- (id) initWithCoder: (NSCoder *) coder { if (self = [super initWithCoder: coder]) { test = [TextSprite withString: @"Hello World!"]; test.r = 0; test.g = 1.0; test.b = 1.0; test.x = -85; test.y = -30; test.rotation = 20; [(TextSprite *) test setFontSize: 36]; } return self;}The new initWithCoder creates a text sprite, passing in the string "Hello World!". Wechange its color to cyan, a combination of green (1.0) and blue (1.0). Next, we move thestring a bit to the left in the x direction, and then down a bit in the y direction. We rotatethe text 20 degrees counterclockwise. Finally, we set the font size to a large 36 points.Compile and run the result. You should see the bright cyan words “Hello World” in thecenter of the iPhone, as shown in Figure 4–40. Note how the rotations are different fromour earlier sprites. We’ve written the code to rotate the text from the lower left, along thebaseline of the first character. This is typical convention in many graphics programs. A90-degree rotation is useful for labeling y axes, with the words moving up, from bottomto top. A -90-degree rotation has the words reading from top to bottom.Figure 4–40. “Hello World” rotated 15 degrees with a TextSpriteAt this point, we’ve created basic sprites, vector sprites, atlas sprites, and text sprites.You can see the pattern forming. We create a new subclass of Sprite, adding a fewinstance variables to track the data we need. We override the outlinePath or drawBody

149.
130 CHAPTER 4: She Shoots, She Hits, She Scores! method, drawing our sprite centered at (0,0). We respond to the tic method, taking a time interval and updating our internal model accordingly. We packed a lot of functionality into the drawRect: method of AsteroidsView that really should be pulled into an outside controller. The data in the view should also be extracted, and kept in a separate model class. As you’ll see, many games are just a set of sprites and a shared model, plus a bit of programming for game logic, audio, special effects, and networking—just a tad. We’re now going to leap ahead and move quickly to cover game architecture. Asteroids Game Architecture The companion source code for this chapter includes an entire game of Asteroids in asteroids.tar.gz, built from the sprite classes discussed here. We’ll now step through the basic game architecture and highlight interesting bits. NOTE: This version of Asteroids does include a basic audio system, keying off state changes in a shared model. Audio systems are described by Eric Wing in Chapters 9 through 12. The Asteroids Game Loop You saw many of the parts of a game loop in the earlier part of this chapter. The Asteroids code extends it a bit in Figure 4–41, and organizes the work into an MVC design pattern. AstroidsViewController GameController “tic” AsteroidsModel AudioController Persist Update Render AstroidsView Figure 4–41. The Asteroids implementation of a Quartz game loop When the app first launches, the iPhone invokes the AsteroidsViewController. This class creates the model and controllers, places the phone in landscape mode, creates a timer as we did earlier, and then calls the tic method of the game controller until the app is terminated by a user. Here’s the complete source of its gameLoop method:

150.
CHAPTER 4: She Shoots, She Hits, She Scores! 131- (void)gameLoop{ // we use our own autorelease pool so that we can control when garbage getscollected NSAutoreleasePool * apool = [[NSAutoreleasePool alloc] init]; self.timeSinceLevelStart = [levelStartTime timeIntervalSinceNow]; self.deltaTime = lastFrameStartTime - timeSinceLevelStart; self.lastFrameStartTime = timeSinceLevelStart; [game tic: self.deltaTime]; [apool release];}As shown in Figure 4–41, the primary purpose of AsteroidsViewController is to run thetic loop. All of the sprites and game state are stored in AsteroidsModel, a class thatreally doesn’t do much other than keep things in one place. I like to treat the model as adatabase of sorts. I may occasionally add routines to this, much like someone wouldadd stored procedures to a database, when accessing local data is much faster andcleaner than doing it “over the wire” to an external class.The Asteroids ModelLet’s take a peek inside a real game model. Here’s the complete interface definition ofAsteroidsModel:@interface AsteroidsModel : NSObject { NSMutableArray *rocks; NSMutableArray *bullets; NSMutableArray *deadSprites; NSMutableArray *newSprites; NSMutableDictionary *fingers; Sprite *ship; Sprite *saucer; AtlasSprite *thrust; AtlasSprite *left; AtlasSprite *right; AtlasSprite *fire; TextSprite *status; TextSprite *lives; NSMutableDictionary *state; int lastBullet; CGFloat time;}The mutable arrays store all rocks and bullets that fly around the screen. We alsosynchronize the addition or creation of sprites. During a single tic, sprites may die andsprites may be born. We push all new sprites into one array and all dead sprites intoanother. After the rendering is complete, we clean up the sprite lists in the persist cycle,before the next tic occurs.

151.
132 CHAPTER 4: She Shoots, She Hits, She Scores! The model points to several atlas sprites, which are used as buttons in the interface. Two text sprites form the heads-up display: one to show our score and status, and another to show the number of lives left. What I find most useful is the central dictionary, state. Two convenience methods are defined and used throughout the game: + (int) getState: (NSString *) indicator { AsteroidsModel *game = [AsteroidsModel sharedModel]; if (game.state == nil) game.state = [[NSMutableDictionary alloc] init]; NSNumber *n = [game.state objectForKey: indicator]; if (n) { return [n intValue]; } return kUnknown; } + (void) setState: (NSString *) indicator to: (int) val { AsteroidsModel *game = [AsteroidsModel sharedModel]; if (game.state == nil) game.state = [[NSMutableDictionary alloc] init]; NSNumber *n = [NSNumber numberWithInt: val]; [game.state setObject: n forKey: indicator]; } The various controllers and views can get any information about the game by referring to these methods. This forms the heart of the persist step, for keeping information in between tic cycles. We define several constants for the state variable names, and also use constants for their values. This helps us by letting the compiler catch state errors, where we’re using an unknown value for some state variable. For example, we use the following constants to track the major state of the game: #define kGameState @"gameState" #define kGameStatePlay 0 #define kGameStateLevel 1 #define kGameStateNewLife 2 #define kGameStateDone 3 Other classes can query the game state with this call: uint state = [AsteroidsModel getState: kGameState]; They change the state value with another call: uint state = [AsteroidsModel setState: kGameState to: kGameStatePlay]; Following in this convention, we also keep a list of the current finger state in an array of Fingers. This doesn’t have much to do with Quartz graphics, so we won’t go into the details here. Suffice it to say that we keep the current location of fingers on the display. During an update cycle, the game controller tests whether these finger points intersect with the atlas sprite buttons. If they do, their frame is changed.

153.
134 CHAPTER 4: She Shoots, She Hits, She Scores! Other than the typical initialization and teardown routines, this is the bulk of AsteroidsView. It should look familiar. We grab the context (1) and save its state for later. We reset the transformation (2). We call the draw method of all our items (3). Finally, we restore the context state (4). As the number of sprites grows, you may find your application bogging down. The clean abstractions we’ve introduced here are common in object-oriented programming. Each sprite sets up its own transformations, displays itself, returning control to the view for the next item. At scale, this can get expensive. Each change to the transformations, colors, and so on requires a context switch within the rendering chips on the phone. These switches are expensive, slowing down the graphics pipeline. Production applications are not as pretty. The views often optimize the display loop, combining multiple operations into one, minimizing the number of calls into the graphics chip. These techniques are called pipeline optimization. Although we won’t go into the details of these techniques here, just remember that when you find yourself needing to break the sprite abstraction, or feeling like you need to bunch things together for speed, have no fear—this is typical. Let’s move on to the heart of our game, the game controller. The Asteroids Game Controller Practically all of the game logic for Asteroids is kept in a single class, GameController. Yet the MVC design pattern allows us to keep a clean structure. Here is the interface definition: @interface GameController : NSObject { AsteroidsModel *model; AsteroidsView *view; AudioController *audio; BOOL start; int restartDelay; } You’ve seen AsteroidsModel and AsteroidsView. We’ll save AudioController for later in the book. The Boolean, start, is a flag to let us know if this is the very first tic, so that we can initialize our model state. The integer restartDelay is a countdown timer. When a life or level ends, the game controller sets this variable to a set number of frames. As long as the restartDelay is nonzero, the game controller will ignore the buttons and keep the ship hidden from view. Let’s take a look at how GameController starts up and handles the tic message: - (id) initWithView: (AsteroidsView *) theView { self = [super init]; if (self) { AsteroidsModel *m = [AsteroidsModel sharedModel]; self.audio = [[AudioController alloc] init]; self.model = m; self.view = theView;

155.
136 CHAPTER 4: She Shoots, She Hits, She Scores! [model updateButtons]; [model unleashGrimReaper]; } The last method call is my favorite, unleashGrimReaper. This cleans up the model, moving all dead sprites back into a common pool (such as bullets and rock fragments). They, too, will live another day. Conclusion This chapter began by creating a blank canvas, which Quartz 2D calls a context. We jumped through menus and configuration panels to put Quartz 2D in total control over our main view. We then defined our first sprite, an elfish creature that captures the basics of motion and position for all objects in a game. Sprites tap into the Quartz 2D API and provide a clean abstraction, hiding much of the complexity. Sprites introduced a bit of math. You learned about affine transformations, which convert the (x,y) position of a sprite into a physical location on the iPhone screen. These transformations are done once a cycle, during the draw method. We showed affine transformations for successfully rotating, scaling, and translating sprites, both in portrait and landscape modes. Then we created three types of sprites: vector sprites, atlas sprites, and text sprites. Vector sprites are helpful in turning an array of points into filled shapes, which form things like rocks, spaceships, and bullets. Atlas sprites extend this capability, allowing arbitrarily complex images to be displayed in a single call through images. An atlas sprite pulls its image from a matrix of frame images stored on a single, larger image called a sprite atlas. We used an antique frame atlas to animate a character wandering around our iPhone. Text sprites hide the complexity of Quartz 2D fonts and enable us to position and colorize text anywhere on the screen. We promised not to use Comic Sans. Finally, we took a quick tour of the game loop and classes within an Asteroids game, built from the sprites covered in this chapter. The game loop followed the three steps of update, render, and persist, all run by the tick of a clock set up by our main AsteroidsViewController. I encourage you to play with the source code of Asteroids. I also hope you have as much fun building derivatives of the game, and using pieces of the code in your own wonderful creations, as I did building this game. Feel free to follow me on Twitter, at @drjsp173. Send me a direct message anytime to chat.

156.
137 Chapter 5Flipping Out andSweeping Away with CoreAnimationIn previous chapters, you learned about displaying moving graphics with theUIImageView, and about drawing lines, shapes, paths, and gradients on a UIView withQuartz 2D. These technologies pack a lot of functionality and are essential to making 2Dgames on the iPhone. You will be using them a lot in your games.Quartz 2D is actually a Mac OS X technology that has made its way unchanged to theiPhone. Like the Core Foundation and Foundation frameworks, Quartz 2D is afundamental API in both Mac OS X and iPhone OS. UIKit, while very central to iPhoneprogramming, is a simplified version of Mac OS Xs AppKit.Another iPhone technology with a lot of functionality is Core Animation. Unlike Quartz2D and UIKit, Core Animation was invented just for the iPhone, and made its way intoMac OS X Leopard after the iPhone was developed. Core Animations power for makingdynamic effects on the iPhone’s UI is what gives the iPhone its personality.Core Animation is the technology behind the slick way views slide as you navigatearound in many iPhone apps. It’s used to make an application’s loading image grow andfade in once you touch the app’s icon. It’s also behind the application screen shrinkingand fading to nothingness once you quit with the home button.To be clear, the animation part of the name Core Animation has nothing to do withdisplaying a sequence of images in rapid succession. Core Animation is used for themovement of components across the screen, such as the sliding of photos on and offthe screen as you navigate through a photo album in your favorite photo app. It is alsoused for special effects, such as the curling page in the Maps application. You will useCore Animation to add cool animated effects to your game’s UI, or to make a terrificintro screen. 137

157.
138 CHAPTER 5: Flipping Out and Sweeping Away with Core Animation In this chapter, you will learn how to unleash the power of Core Animation in your own games. Core Animation Sample Project Overview To get started with Core Animation as soon as possible, we will begin coding from an existing project. This will get us to the important code faster than walking through creating the project in Interface Builder, which is covered in Chapter 3. To begin, open the sample project called CoreAChicken first stage (provided with this book’s source code) in Xcode. Select the Resources group in the Groups and Files pane. Double-click the CoreAChickenViewController.xib file to open it, as shown in Figure 5–1. Figure 5–1. The CoreAChickenViewController.xib file opened in Interface Builder, in list view mode, with view and toolbar objects expanded to show their components Figure 5–1 shows the logical composition of the sample app’s only view controller. It is composed of a view, which contains a toolbar and two views. The views are called firstView and secondView. The toolbar has a button called animateButton. The firstView is composed of two image views, called theRoad and theChicken. The secondView contains two labels. Let’s look now at the visual composition of the same view controller. If you don’t see the window shown in Figure 5–2, double-click the component called View to open it.

158.
CHAPTER 5: Flipping Out and Sweeping Away with Core Animation 139Figure 5–2. The visual layout of the app’s main screen as displayed in Interface Builder’s view editing windowIn Figure 5–2, you can see the toolbar at the bottom of the screen, with theanimateButton component. Above the toolbar are two views stacked on top of oneanother. The secondView is laid out on top of firstView, but secondView actually has itshidden property set. This makes Interface Builder show secondView as half transparent inthis window. Because secondView is shown half transparent, you can see firstViewbehind it, and the image views called theChicken and theRoad laid out in firstView.Keep in mind that even though secondView is shown half transparent in Interface Builder,when the app runs, it will not be visible because the hidden property is set. When the appfirst runs, firstView will be visible, and the first animations will be run on it. We will changesecondView’s hidden property and animate it in some of the code we will write in thischapter, to create fades and other types of animated transitions between the two views.The code we’ll be concerned with in this chapter is an animate method, which willdemonstrate Core Animation routines. It’s in the CoreAChickenViewController.m file,which you can open in Xcode, from the Classes group. Listing 5–1 shows the code,which is appears around line 20 in the file.

159.
140 CHAPTER 5: Flipping Out and Sweeping Away with Core Animation Listing 5–1. The code that powers the animateButton in the sample app (in CoreAChickenViewController.m) - (IBAction)animate { static int counter = 0; switch (++counter) { default: counter = 0; break; } } The code begins by defining an IBAction method named animate. IBAction methods are connected to a UI component in Interface Builder. They are called when a button gets clicked or when the user triggers some other event. The animate method is connected to the animateButton displayed on the toolbar at the bottom of the app’s main view. In this first stage of the code, the method doesn’t do much. It declares a static integer variable called counter, increments it, and checks it in a switch statement. There’s only one case in the switch, the default case, which resets the counter back to 0. In the course of this chapter, we will code the animate method to play through a sequence of Core Animation routines—a different routine each time the animateButton is clicked. When the last routine plays, the counter is reset to start again from the first routine. You will be adding switch cases and animation routines to this method throughout this chapter. I will walk you through the code and explain the Core Animation APIs used. Animating UIViews The easiest way to use Core Animation is to take advantage of its close integration with UIKit on the iPhone. In creating UIKit, Apple engineers added basic animation functionality that uses Core Animation behind the scenes, simplifying its application for the most common use cases. We will examine the simpler APIs in this section, and explore the more complex (and more flexible) APIs in later sections. The UIView class provides class methods for the programming of animated transitions between different property values in your UI components. You use these class methods to begin an animation block, to set animation properties such as animation duration, and to commit the animation block. You begin an animation block by calling the UIView class method named beginAnimations:context:. This method takes two parameters: an NSString instance used to identify the animation block and a context. Both parameters are optional, but their purpose is to help you identify which animation block called your animation delegate methods (as you’ll see in the examples throughout this chapter). The context parameter is a void pointer, meaning that you can pass anything you want in this parameter. You can use this context pointer to pass a data structure or instance of a class that your animation delegate may need to analyze or modify in regard to the animation starting or finishing.

160.
CHAPTER 5: Flipping Out and Sweeping Away with Core Animation 141Once you have begun an animation block, you close it by calling the UIView classmethod named commitAnimations. Committing the animation block will make CoreAnimation play the animation in a separate thread from your UI event handling.Animation blocks can be nested, which means you can begin one animation block withinanother. Each animation block can have its own animation properties, such as its ownanimation identifier and duration. But the nested animation blocks won’t start playinguntil the outer animation block is committed. Here’s how animation blocks can benested:[UIView beginAnimations:@”animation1” context:nil];// component1 properties animated here[UIView beginAnimations:@”animation2” context:nil];// component2 properties animated here[UIView commitAnimations];[UIView commitAnimations];As you may remember from Chapter 3’s introduction to UIKit, UIKit components such asUIImageView, UILabel, and UIButton are derived from UIView. By deriving from acommon class, they have many properties in common, such as position, size, andalpha. Core Animation can animate the following five UIView properties: frame: The component’s frame rectangle, in terms of its superview. center: The coordinates of the component’s center point, in terms of its superview. bounds: The view’s bounding rectangle, in coordinates inside the component. transform: The transform applied to the component, relative to the center of the bounding rectangle. alpha: The component’s alpha value, which represent its opacity.Changing any of these properties within an animation block will make Core Animationplay an animation in which the value of the property or properties change from theirinitial value just before the start of the animation block to the final value set within theanimation block.For example, let’s say we have a UIImageView component with an initial alpha propertyvalue of 1. We start an animation block, set the value of the component’s alpha propertyto 0, and then commit the animation to close the animation block. This will make CoreAnimation play an animation in which the opacity of the component changes from fullyopaque to fully transparent.That’s enough talk, let’s look at some code to make these concepts become moreconcrete. Listing 5–2 shows the animate method, expanded to support a total of ten

161.
142 CHAPTER 5: Flipping Out and Sweeping Away with Core Animation animations. Replace the current version of the animate method in the CoreAChickenViewController.m file with this one. Listing 5–2. The expanded animate method, with ten animations (in CoreAChickenViewController.m) - (IBAction)animate { static int counter = 0; switch (++counter) { case 1: [self viewAnimation1]; break; case 2: [self viewAnimation2]; break; case 3: [self viewAnimation3]; break; case 4: [self viewAnimation4]; break; case 5: [self viewAnimation5]; break; case 6: [self viewAnimation6]; break; case 7: [self viewAnimation7]; break; case 8: [self viewAnimation8]; break; case 9: [self viewAnimation9]; break; default: [self viewAnimation10]; counter = 0; break; } animateButton.enabled = NO; } In Listing 5–2, the animate method’s switch statement has been modified with nine new case statements. Each case statement, including the default one, calls a different method. The methods are called viewAnimation1 through viewAnimation10. You may note that at the end of the animate method, the animateButton is disabled. This is so that the user cannot trigger another animation before the current animation is completed. Animation blocks cancel each other out unless they are nested. If the animationButton is not disabled between animations, and the user clicks the button while one animation is playing, the current animation will be canceled as the next animation starts, and this will look wrong. As you’ll see in the rest of the code to follow, the animateButton is enabled again at the end of each animation.

162.
CHAPTER 5: Flipping Out and Sweeping Away with Core Animation 143Let’s now walk through these view animation methods.Simple MovementListing 5–3 shows the code for method viewAnimation1.Listing 5–3. The viewAnimation1 method- (void)viewAnimation1 { // Reset properties to default values theChicken.transform = CGAffineTransformIdentity; theChicken.frame = CGRectMake(15, 144, 62, 90); [UIView beginAnimations:@"viewAnimation1" context:theChicken]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(animationDidStop:finished:context:)]; theChicken.frame = CGRectMake(15, 330, 62, 90); [UIView commitAnimations];}The first line of code in the viewAnimation1 method resets theChicken’s properties todefault values. The transform property controls rotation, scaling (size changes), andtranslation (position changes) using a set of functions that will be discussed in the“UIView Transforms” section later in this chapter. The CGAffineTransformIdentityconstant resets the property to a value that essentially means “no transform.” Afterresetting the transform, the code sets theChicken’s frame property to the startingposition for this animation.The next line of code starts an animation block with the animation identifierviewAnimation1 and theChicken image view as the context parameter.Following that, the code sets the animation delegate:[UIView setAnimationDelegate:self];[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];The animation delegate receives notifications when the animation is about to start andwhen the animation has stopped through two selectors you can assign. We assign theselector named animationDidStop:finished:context: to be called when the animationstops. Setting the delegate and selectors is optional. But in this sample project, we mustalways set a delegate and delegate method for stopping the animation, because weneed to reenable the animateButton at the end of each animation. You can also assign aselector to be notified when the animation is about to start, if you need that functionality,by calling the UIView class method setAnimationWillStartSelector: and passing theappropriate selector.In the next line of code in the viewAnimation1 method, we change the frame of theimage view theChicken:theChicken.frame = CGRectMake(15, 330, 62, 90);

163.
144 CHAPTER 5: Flipping Out and Sweeping Away with Core Animation The initial position of theChicken’s in the Interface Builder .xib file is at coordinates 15 and 144 for the x and y values. Its initial size is a width of 62 and a height of 90. So this line of code simply moves theChicken down the screen to y coordinate 330. The last line of code in the viewAnimation1 method commits the animation, closing the animation block: [UIView commitAnimations]; This makes Core Animation play an animation that moves theChicken down the screen in 0.2 second, to stand at the top of the toolbar. The duration of 0.2 second is the default of a UIView animation, unless you set a different duration using the UIView method setAnimationDuration:. Once the animation stops, Core Animation calls the method we set earlier for notifications that the animation ended. Listing 5–4 shows the code for this delegate method. Listing 5–4. The animationDidStop:finished:context: animation delegate method - (void)animationDidStop:(NSString *)theAnimation finished:(BOOL)flag context:(void *)context { animateButton.enabled = YES; } The signature for this method is the standard signature for the animationDidStop delegate. You can call the method anything you want, but if the method takes parameters, the parameter types must match this signature, or the method may cause a crash. The first parameter must be a pointer to an NSString instance. It will be set to the value you passed for the animation name in the beginAnimations:context: call for this animation. The second parameter, if there is one, must be a Boolean flag. The value passed will be YES if the animation ran to completion or NO if it was interrupted. The current animation can be interrupted by another animation block being committed before the current animation plays out. The last parameter to the delegate method must be a void pointer. It will be set to the value of the context parameter passed in the beginAnimations:context: for the current animation calling the animation delegate. Animation Curves Listing 5–5 shows the method viewAnimation2 and its animation stop delegate method. Listing 5–5. The viewAnimation2 method and its animation stop delegate method - (void)viewAnimation2 { [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

164.
CHAPTER 5: Flipping Out and Sweeping Away with Core Animation 145 theChicken.frame = CGRectMake(15, 144, 62, 90); [UIView commitAnimations];}- (void)animationDidStop { animateButton.enabled = YES;}In this listing, the animation block begins with no parameters set for the animationidentifier and for the context. In the next line of code, we set the animation duration to 1second by calling the setAnimationDuration: class method.Rather than set the animationDidStop selector to the standard signature, we pass in aselector with no parameters. This has no danger of causing a crash, as any parameterspassed by the caller will be ignored.After setting the delegate and animation stop selector, the code sets the frame fortheChicken image view back to the original x and y coordinates of 15 and 144. Then wecommit the animation to close the animation block.When this animation plays, theChicken image view slides back up to the originalcoordinates over the length of 1 second. If you look car