iPhone Game Programming – Tutorial 3 – SpriteSheet Class
Hi all and welcome to Tutorial 3 in my iPhone Programming series on creating an OpenGL game.
This video runs for 46 minutes and covers changes to the project so far which are based on feedback I have had in the blog and also the creation of the SpriteSheet class.
The changes to the project are around making sure that the structure of the project and the location of certain elements such as OpenGL initialization etc is correct. I have also made changes to the main game loop.
I found that during my own testing I was loosing screen touches i.e. they were not registering and I was also seeing choppy screen updates. I did some research around this and found that there are better ways to run the main game loop than to have an NSTimer. So in this tutorial I make changes to the main game loop which removes the need for an NSTimer and in doing so means I don’t loose my touches and the screen updates are much smoother.
The project for Tutorial 3 can be found below. This project contains all the code I run through in the tutorial along with additional comments to hopefully make it easier to see what has been done and why.
I hope you enjoy this latest tutorial. The next tutorial will be building on the Image and SpriteSheet classes we now have and provide an Animation class. This class will allow us to define an animation made up of a series of images from a spritesheet. You will be able to also define how long each frame should be displayed in milliseconds during the animation. We will also be able to define things like, should the animation repeat or just run once, should it ping pong etc.
So watch this space as Tutorial 4 will be available soon.
Thanks
Mike
51 Comments
Ant1 on April 3rd, 2009
Thanks for an other great tutorial
Looking forward to the next one
Justin on April 4th, 2009
I have been waiting for this this couple days!! Thanks!!!
Jim on April 4th, 2009
Nice work :)
I wrote a quick iPhone game using 95% pure C code, your tutorial is helping me get into the objective C side of things! Cheers
mike on April 5th, 2009
Thanks guys, I’m glad your finding it helpful.
@Jim, its good to hear your finding the Objective-C stuff useful as well. I’m still a learner driver myself as my background is Java, but I’m really enjoying Obj-C.
Your skills in C will be useful later on. I’m writing everything using Obj-C i.e. classes, methods etc and for games I’m reading that using C is quicker than using Obj-C as there is an overhead to instantiating classes and calling methods etc.
For the moment I’m going to carry on using native Obj-C and if once its all done I run into any performance issues I’ll then look at how to optimize what I have using structs and functions in places rather than classes and methods.
Mike
Darbien on April 5th, 2009
Great job Mike, this is helpful stuff especially for a newbie like me!
I need some good advice for some programming, since I’m so new to this. What do you guys recommend as the best way to implement something like UITextview so it can support a lot of animation?
I’m actually planning to develop a text reading game for children that will be using some animation inside a large text document. The animation will be quite involved, as there may be many sprite active at one once (10-20+). The text will be non-editable and unicode support is needed (Japanese, Chinese and English)
However, I’m having a hard time deciding if I should use UITextview and put UIImageview as subview for the animated sprites, or actually roll my own class of UITextview using OpenGL ES based text rendering so it can work better with the animated sprites. It seems from what I read so far UITextview may be limited and may not be best for this purpose.
Any suggestion or advice will be appreciated!
Eskema on April 6th, 2009
@Darbien, As far as i know, if your game its that simple, stick with uitextview. If you plan to do something bigger and profesional (diablo, or some kind of game like that), then you should learn opengl.
@Mike we’re waiting for your fonts tutorial :)
Gas on April 6th, 2009
Excellent tutorials Mike, great for the newbie iphone developers. Looking forward to the next installment.
mike on April 6th, 2009
@Darbien, I would agree with Eskema. If you are doing something simple which will involve UI elements such as the UITextVIew then using those core views along with Core Animation would most likely be the way to go.
@Eskema, the font class tutorial is on its way :) . The AngelCode Font class I’ve written makes use of the SpriteSheet class so I’ve done them in order. I was going to do the Animation Class next, but given your interest :) I’ll do the AngelCode Font tutorial next. I’ll hope to have it up over the weekend.
I’ll then follow that up with the Animation Class tutorial and I’ve just finished writing a TileMap class as well which can take tile maps created in an opensource Java tool and render them etc to the screen so I’ll then cover that one off too.
There is plenty still to come :)
Thanks
Mike
Eskema on April 6th, 2009
I think the animation its something really easy, but fonts has more interest. I have a script for gimp to convert any ttf font into bitmap font, so this can be very interesting to use with your fonts tutorial :)
mike on April 6th, 2009
@Eskema, yep, animation is not too tough, but for any new game devs or devs in general it can be tricky to get working ok first time around, so I think its an important tutorial to cover, but I’ll get it done after the Fonts tutorial.
I have written my font class to use the output from AngelCode Font which can be found at http://www.angelcode.com/products/bmfont/
I use another open source Java tool called Heiro to take TTF fonts, apply effects etc and then generate the bitmap font image and control file. It should be easy enough to take this approach and adapt it for images and control files you may generate yourself :)
Mike
bob on April 8th, 2009
You are doing a great job with these tutorials, I would like to say that this is the best one I’ve seen. especially openGL, I never programmed in it either, I have an iPhone game half written and found out its to slow ( core animation ) so now I’m attempting to redo it in openGL. Thanks alot and keep up the good work.
A 50something programmer.. Rochester NY. USA
bob on April 8th, 2009
Just finished all 3 Tutorials. They were GREAT! can’t wait to see the animation one. After watching your tutorials I think I will be well on my way to converting my game. You deserve a lot of credit for doing this. I like the way you do your videos.. very easy to follow and understand.
Thanks Again… eagerly waiting..
Bob – 50something Iphone Developer….
luke on April 10th, 2009
Great. Just found all the tutorials from a google search, watched all three and can’t wait for the 4th. You really show the power of a object oriented base.
Thanks a ton for posting this.
chris on April 10th, 2009
Fantastic. I’ve just written my 1st app using standard UI but to get this insight into OpenGLES is exactly what I needed to kickstart my game dev knowledge. Thank you.
Looking forward to the next ones
Jake78 on April 12th, 2009
I have a very naive question about the Angelcode bmpfont generator. It may be very basic to some people but for some reason I can not find the answer anywhere. (newbie here)
After I use the bmpfont generator to generate a PNG file, I get the white letters in black background. I was also able to map the texture to some vertexes and render them successfully. However, I don’t know what to do if I want to change the color of the fonts (e.g. black font on white background instead). I’ve tried the “glColor4f()” call but it doesn’t seem to make a difference. To some of you who used the angelcode stuff how do I exactly accomplish this?
P.S. Excellent tutorial btw, keep up the good work!
mike on April 12th, 2009
I’m glad everyone is still enjoying the Tutorials. I have to say that I’m having a ton of fun doing them and its a great way to push yourself to learn as well :D
@jake78, it sounds like you’ve made some great progress already getting the output of the font generator and getting them on screen :) as for changing the colour, I do this by just outputing the font as white and then changing the current colour using glColor4f. If your trying that and its not working then I’m not sure what is happening. If you can post or send me your code I’d be happy to take a look.
Cheers
Mike
Dougontour on April 25th, 2009
Hi,
This is going to be a silly question, I have no doubt, but as soon as i remove the NSTimer part of the project, my simulator fails to show anything other than a blank screen if i follow the tutorial ..
As far as i can see, i am doing things right .. but at the same time trying to learn as i go instead of just running the project files .. can anyone offer any suggestions?
Dougontour on April 25th, 2009
Eating my own words .. but an oddity none the less, if i run the simulator using the 3.0 simulator, the project download doesnt work either….
Thank you so much for a sensational tutorial, i think i have learnt more watching / reading this than most of the books and sites i have visited over the last few weeks!!! keep it up :D please :D
indowill on May 29th, 2009
trying to follow your tutorial. I do have to say they have been awesome!
For some reason I couldn’t get that sprite from spritesheet16 to show up… even though xcode didn’t report any bugs…. any ideas?
mike on May 29th, 2009
@indowill hi and thanks for the nice comment :o)
I’m not sure why your project is not working, it could be all sorts of things :o)
If you can send me your project I can take a look and let you know what the problem was, if I can find it ;o)
My email is mike@71squared.co.uk
Mike
indowill on May 29th, 2009
thanks Mike. I’ll send it soon.
indowill on May 30th, 2009
Mike,
Figured out what my problem was. the Image.h file is missing the declaration for initWithImage function that takes in a filter parameter…
- (id)initWithImage:(UIImage *)image scale:(float)imageScale filter:(GLenum)filter;
It’ll be nice if xcode would at least complain about it. thanks again!
ferr0234 on June 1st, 2009
First off, Mike, fantastic tutorials. These are great and extremely helpful.
Quick question/issue:
To reiterate what Dougontour said above, after removing the NSTimer code after we re factored the mainGameLoop, I’m getting nothing drawn to the screen.
I’m running OS 3.0 beta on my device and the 3.0 simulator.
Any help would be greatly appreciated.
Thanks.
Anonymous on June 1st, 2009
Hi Mike,
First of all–phenomenal tutorials. They are extremely helpful and well done. Thank you for doing these.
I was wondering if you know of any software to make your own sprite sheets? I’m having trouble aligning images that precisely.
Do you have a tutorial on touch-events planned soon?
Thanks again,
Jake
mike on June 1st, 2009
Thanks for the comments guys.
@ferr0234, I had the same problem and yesterday managed to get it working. The following line of code needs to be replaced
[self mainGameLoop];
with
[glView performSelectorOnMainThread:@selector(mainGameLoop) withObject:nil waitUntilDone:NO];
in the app delegate. I don’t yet know why this change needs to be made, but that seems to solve the problem. Let me know if you are still having issues.
@Jake, hi, I am working on refactoring my code at the moment and part of that is adding the touch code. Inside Tutorial 8 on the Particle System I do cover how to grab touch events at a high level, but I’ll be going further in other tutorials. Hope it helps.
Mike
Anonymous on July 7th, 2009
THANK YOU
Naraxis on July 14th, 2009
Hi Mike, thanks for your tutorials, it’s giving me a great help as an game programmer intern at Singapore. Learning lots of wonderful things from your video tutorials. Keep it up!
amazium on July 21st, 2009
Hi Mike,
thanks for the great tutorials! I took them with me on vacation as a way to relax and learn something new. :)
I had a lot of issues with the 3.0 simulator, so thanks for the comment to fix it with the performSelectorOnMainThread.
Wkr
Jeroen
Incredible iPhone Game Programming Tutorials With Video | iPhone Development Tutorials and Tips on July 31st, 2009
[...] Game Programming – Tutorial 1 iPhone Game Programming – Tutorial 2 – Image Class iPhone Game Programming – Tutorial 3 – SpriteSheet Class iPhone Game Programming – Tutorial 4 – Bitmap Font Class iPhone Game Programming [...]
Anonymous on August 2nd, 2009
Hi.
thx for doing these tutorials, but I’ve got a big problem with this code.
Running on the device seems fluid and smooth, but running on the simulator is a mess. juddery, speeding up / slowing down… totally screwy.
Whereas with the NSTimer is was fine.
Solution?
Anonymous on August 2nd, 2009
Me again
As ad addendum.
Now that I’ve implemented touch response / detection even on the iPhone device touching it brings it to a crawl.
I think I’m going to go back to NSTimer as your implementation doesn’t seem to work, and most others on idevgames.com agree NSTimer is correct.
:/
If you know / prove otherwise, please let us know?
mike on August 2nd, 2009
@Anonymous, timing with the game loop is something I’ve played with a great deal and read hundreds of posts about on different forums such as iDevGames. Even there people are split about weather to use NSTimer or their own loop. I started with NSTimer, then moved to a straight loop which just ran flat out and I’ve since moved back to an NSTimer.
If you look at the latest tutorial 10, you’ll see that I’ve gone back to an NSTimer as it seems to work fine for my needs.
I may later look at breaking up the game logic timing from the FPS side of things and make it more adaptive. For games which are more complex and push the CPU more there would be an advantage to that. Weather I will stick with NSTimer when doing that I’m not sure, but for the moment it is working fine.
Even with NSTimer I’ve noticed that the Sim can act very odd compared with the device and I never use the Sim to get a reflection of how the performance will be on the actual device as the Sim uses the full capabilities of the machine on which its running, CPU, memory, GPU e.g. there is a 24MB texture memory limit on the iPhone which is not enforced at all on the Sim.
Touch events do seem to cause many people problems. They were really designed to provide GUI interaction and allow people to pinch and spin. Now they are being used in games they can flood the OS with events and cause problems. Apple is I believe looking into sorting this out and the 3.1SDK is a step towards doing that.
I’m looking at possibly putting the main game loop on its own thread so that if the system chokes on events it does not kill the game loop thread, but still working/thinking about that.
Hope it helps and I’m glad the tutorials are helpful and generating good discussion :o)
Mike
smith_mike on August 14th, 2009
Hi,
I am pretty new to iphone development and the world of animation.These are amazing Tutorials, Wondering how to get the sprite height,width and space. Any pointers are helpful.
Mike
mike on August 14th, 2009
Hi Mike and welcome to the blog. For getting the height, width and space, do you mean from the tilesheet you are using or from the actual images you are going to use to make up your tilesheet?
Mike
iPhone Game Programming – Tutorial 3 – SpriteSheet Class | 71² … | IPhoneMate on September 3rd, 2009
[...] rest is here: iPhone Game Programming – Tutorial 3 – SpriteSheet Class | 71² … Share and [...]
raj on October 11th, 2009
Hi
I am very new to the game develpment. Do you suggest any books or to get hang on 2 d deveopment. I played alot of games but don’t know how to build one. The question is what is the sprite and what are the techniques to program (algorithms etc.). In general, How do I build game engines ( do ou suggest any book to get a hang ) your tutorials are amazing any help is really appreciated.
raj
hixster on November 14th, 2009
Hi Mike,
First post here, I’ve just started following the tutorials.
I downloaded the source code from the link above, after building I get a black screen in the simulator?
Am I missing anything?
regards
Hixster
mike on November 14th, 2009
Hi hixster
If you are using SDK 3.0+ you will need to make some changes to the code. The changes needed are highlighted in a post at http://www.71squared.com/2009/.....thingness/
Let me now if you still have problems :o)
Mike
Vertical on January 2nd, 2010
Hey Mike, I just wanted to sign up and say that your tutorials are SUCH a HUGE help in making my iPhone game. I already started on it using a View-Based Application before I found your site, but after watching your tutorials (I am about to start this tutorial and watch the rest strait on into the wee hours of the morning) I decided that I definately should take the OpenGL ES route. Though being COMPLETELY new to iPhone/Mac development Cocoa and even Object Oriented Programming it should be nothing short of difficult hehe. I have been doing programming for 14 years procedural wise, so its time to jump on the OOP bandwagon ;) and thanks to these tutorials I believe I’ll be able to make considerable progress in a much shorter amount of time. Especially combined with the 4 books I bought and Apples sample code. Anyway just wanted to register and say thanks so much for all of the effort and hard work. I know it takes a great deal of it to make these tutorials!! Thanks! – Richard
mike on January 2nd, 2010
Thanks for the comment Richard and welcome aboard. If you get stuck or need help just ask as either myself or one of the blog readers will be able to help hopefully :o)
Mike
Simon on January 25th, 2010
Hi Mike,
Not sure if I should post this question hear or on the Tiledmap tutorial. As it the spritesheet that’s throwing an error
ERROR – SpriteSheet: texture location out of range.
But it’s only when I try and use it with the tiledmap class to create the texture for the tiles.
have you any idea what i might be doing wrong here
mike on January 25th, 2010
Hi Simon
I had some problems with the SpriteSheet class myself when I was rewriting it in this area. Can you identify which sprites it cannot find i.e. are they always sprites on the far right or bottom row of sprites in the sprite sheet.
It could be a problem with the calculation that is performed to calculate array index from the x and y position passed in for a sprite.
I was fixed support for spacing and borders within sprite sheets when I had the problem.
If you can’t get to the bottom of it I’m happy to take a look at the code if that would help.
Mike
Simon on January 26th, 2010
Hi Mike,
i fixed this problem (not 100% sure how) but i was not getting intialised properly on implementation. Played around with it for hours and it appears to be working.
However I have a different issue now and it’s very much to do with the tileMap so I’ll post it on the section.
Thanks
Simon
Juli on February 13th, 2010
Mike, thank you for the great tutorials.
Josh on February 16th, 2010
Hey Mike,
Have you ever thought about extending this to allow for sprite sheets that aren’t uniform?
If you are trying to pack all your sprites for a given level/area into one texture I would think it would be quite rare for *every* one to have the same width and height.
Any thoughts or pointer?
Great job on the tutorials!
Best,
Josh
mike on February 16th, 2010
Hey Josh. Your spot on about needing to be able to mix different sized sprites onto a single sheet. I posted about a tool that I am using for SLQ that creates exactly that type of spritesheet with a plist control file. The blog post can be found at http://www.71squared.com/2009/.....lder-tool/
I am using this in SLQ and have created a new PackedSpriteSheet class that uses the image and control file this tool generates. It’s also included in the book I’m working on.
Thanks for the feedback :o)
Mike
Josh on February 16th, 2010
Thanks Mike, I will take a look at that tool.
Lol when is the book coming out? :-)
Best,
Josh
zahur on February 25th, 2010
hi, well i tried to run this project but my Xcode fires me an error :
Their is no SDK with name or path iphoneos 2.2.
Please guide me for the same
Simon on February 25th, 2010
Hi Zathur,
The short answer to this problem is. Open the project in Xcode and you should see a drop down list in the top left corner (assuming you have the default menu layout). Using this select one of the build options there either simulator or device. Keep trying till you get one that works.
The longer answer to this is that Mike’s project is set to build on the base SDK 2.2.x. To set the prject to run on the base SDK you will need to. Open the projet.
Simon on February 25th, 2010
Under “Groups & Files” on the left hand side, go down to the “Targets” item in your project (it should look like a round red target) right click and select get info.
Then in the new window opesn, select the “Build” tab and then under “Architecture” go to the item named “Base SDK”. On the right of the “Base SDK” item you should see the base SDK that you’re using. Click on it and you should have the option to set it to SDK 2.2.x.
Mikes project should now run!





Philip on April 2nd, 2009
I have been looking forward to this latest installment! Thanks!