iPhone Game Programming – Tutorial 2 – Image Class
I have finally been able to upload the second tutorial on writing a game on the iPhone using OpenGL.
This Tutorial has turned out to be longer than I thought and comes in at around 1.5 hours. It covers the creation of an Image class which wraps around the Texture2D class and functions which I think would be useful in a game such as scaling, rotation and applying a colour filter and alpha etc. This image class will form the basis for the next tutorials where we will create a class for handling sprite maps, animation and bitmap fonts.
This Tutorial also gives you a quick look at some of the other classes we are going to cover in action, so not only how scaling, rotating and colours work but also animation and bitmap fonts.
Play Tutorial 2
There has been some great feedback in the forums on the first tutorial and that is much appreciated. Also people posting about issues they have spotted and providing info on how things can be done is excellent as not only does it teach me but also all those reading this blog. I’m going to investigate all the comments made and if changes are made I’ll cover them in future tutorials.
Below are links to the project as it was at the end of Tutorial 1 so if you want to follow the tutorial and add the code yourself you can, but I’ve also put a link to the project as it stands at the end of Tutorial 2 in case you just want to take that and play with it.
As always, if you spot anything which is wrong, have comments or suggestions then please let me know. I’m learning as I go along so I’m sure there will be mistakes but feedback will help make sure these are corrected.
I hope you find this next tutorial useful and the next one covering the Sprite Sheet Class will be available very soon.
Thanks
Mike
46 Comments
Eskema on March 22nd, 2009
Excellent as always, keep it coming
mike on March 22nd, 2009
Thanks guys and I’m feeling loads better thanks Raymon :o)
The next Tutorial will be out shortly for SpriteSheets and I’m also going to take the opportunity to run through some changes I’ve made based on great feedback from Joe on this blog just so I can make sure we are doing things right.
I’m off to the Middle East next week for a few days, but the next tutorial will be done very soon so watch this space.
Mike
Chuck on March 24th, 2009
Thanks for the great tutorial Mike.. it is really helping me out! I do have a question though on the images and how you make them transparent.
The question is.. How do you do it! ;-) I actually modified the existing image (player.png) and added more to it and the only part that shows up is the original ship. If I color over part of the ship it shows up…but only the part that is over the original ship!
Any special trick to getting the image to be transparent (e.g. not display the “background” color?)
Chuck
mike on March 24th, 2009
Hi Chuck
I created the ship image in Photoshop and didn’t use any special configuration apart from making sure the background was transparent. I am not sure why your changes are not showing up, but if you want to send me your image I can check it out to see what may be happening. My email is mike at 71squared dot co dot uk
Mike
Dan on March 24th, 2009
Mike again thanks for such a great tutorial. Your tutorials are going to make it so much easier for me to develop my little game. I am new to iphone development and I can’t express how much these help me. You should place a little paypal donation button on your site for those wishing to give a little back to you. I look forward to your future tuts!
Chuck on March 24th, 2009
Thanks for the info Mike.. I found the problem/solution. I am using Paintshop and have to export the image so I can specify it should use transparency. After that it all worked fine! I just couldnt figure out from your example or the original Crash Landing how via code transparency was set…turns out it isnt code it is just the image itself that sets it. Just use to setting a mask color from some other API’s I guess.
Keep up the great work and thanks again for the response.
Davman on March 25th, 2009
Thanks for this second tutorial! Really looking forward to the third one so I can get motoring with my game idea.
I’m used to writing my games using SDL, and unfortunately the SDL port for the iPhone doesn’t work on OS 3.0!
OpenGL is very confusing to me, so your tutorials are a great help. Keep up the good work!
Alex on March 26th, 2009
Thanks for the tutorials so far, Mike. It’s so hard to find good OpenGL tutorials but you’re doing great. Keep them coming!
mike on March 26th, 2009
Thanks for the comments guys. I’m in Riyadh this week so not able to really do much, but I expect to have the next tutorial done just after the weekend so watch this space :)
Mike
Svinja on March 26th, 2009
Thank you, great tutorials, looking forward to bitmap fonts tutorial…
Fredrik on March 27th, 2009
Thanks! Always nice to see some examples of how others code!
Ant1 on March 28th, 2009
Thx
for the great tutorial
Looking forward to the next tutorial
Kevin on April 19th, 2009
Thanks a lot for this crash course in OpenGL on the iPhone! Learning a ton, thanks again for all the hard work putting these together for everyone.
mike on April 19th, 2009
Hi Kevin, thanks for the feedback. I’m pleased the tutorials are helping you out, I’m certainly having fun creating them :D
Mike
Mike Weller on April 22nd, 2009
In Image’s initWithTexture, why don’t you retain the texture that is passed in, thus avoiding any problems with that texture being destroyed?
Reinaldo on April 26th, 2009
These are great! Many thanks for your kindness in share you knowledge with us.
sudhir on May 4th, 2009
Really great tutorial . I am new to OpenGl and found very useful . waiting for next tutorial.thnx for tutorial mike.
Sommer on May 17th, 2009
Hey Mike,
I am currently watching your second tut, and well, great work! I am completely new to Objective #C, OpenGL etc. but your tutorial #1 made me understand the syntax.
You should definately create a “Get started with Obj. #C” tutorial! Great explanations and everything like in these two!
xXToKyXx on June 2nd, 2009
Hi!, I haven’t seen any Tutorial yet
but I’m totally sure are great …THNKS for the help…
mike on June 2nd, 2009
Thanks for the comment xXToKyXx and I hope you enjoy them when you get a chance to watch some :o)
Mike
Austin on June 4th, 2009
Mike you’re awesome! I’ve only done the first two tutorials but you already have answered many of my OpenGL ES questions. Thanks a lot for this website!
P.S. Can’t wait to do tutorial 3 tomorrow!
andre on June 9th, 2009
hi all!
before any thing i have had my congratulations for these tutorials!
is the best i saw!!! i have a question in this method!!! CFRunLoopRunInMode…. don´t run for me!!! a black screen appear when i click for bild and run!!! this driving me crazy!!! help me please! without this i´m nothing!!! thanks!
sorry about my english is not the best but…
ieattictacs on June 17th, 2009
Hey there Mike, I love your tutorials. I hope you don’t stop, if I had money I’d donate… Well anyways thank you for being the only tutorial source (and a good one at that) for iPhone App Programming. I think you should set up a news letter to update us, but just when you release a new tutorial, not the other posts. Or those could be an option or something.
Also, a tip would be to get more detailed with what you write, tell us why you type what you type as you type it, how it works and why you need it to work with the rest of the code. I wouldn’t mind having a 10min. longer video for easier learning. If you do listen then thank you, very much. Keep up the excellent work.
Malcx on June 18th, 2009
Hi Mike,
Like everyone else – a big thanks for these tutorials they are a great help for shifting into iPhone dev.
However I thought I’d post an update on the image class following something I’ve been working on, and possible memory issues.
Our game has a series of awards that the player wins as they progress. Each award is a full screen image (480×320 jpg) and there are 52 such awards in the game.
Loading all of these in at once, understandably caused the iphone to baulk and crash with a 101 memory error. (Note the iPhone simulator runs fine, this happens only on the actual hardware).
To overcome this I tried reusing the same [Image] object and loading the textures only as needed. This still fell over itself and crashed out!
So I tried releasing the [Image] and it’s associated texture before creating alloc’ing a new one – still no luck, memory usage would continue to creep up and crash the app.
It took quite a bit of tracking down but the issue is actually with loading images via [UIImage imageNamed:...] this causes the iphone to try and be clever and cache it’s own copy of the texture somewhere in RAM, so that even if released and dealloc’d it still eats into the total memory usage.
To solve this you need to use imageWithContentsOfFile:
e.g.
[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@”awardImage_07″ ofType:@”jpg”]]
This does the same thing, but frees up the mysterious memory pit afterwards.
I don’t see it being an issue for most games, but anyone loading in alot of images will probably stumble on this so hopefully this can help save a few headaches!
Cheers and I’ll let you know when our game is ready and send you a free copy (and a donation if it sells well ;-)
Mal
mike on June 18th, 2009
Thanks Mal, that is fantastic feedback and something I’ll implement in my version of the Image class. I’ve not been using a large number of images yet or of that size so not seen it, but having read your feedback and done some digging, it does in deed look like the iPhone is trying to be clever and cache these images incase they are needed again.
I’ve started to do some very simple caching of the Texture2D instances myself now in a simple resource manager which will be in the next set of tutorials, so if multiple images all use the same texture, then they will all share the same Texture2D instance. This should also reduce the number of texture bindings and help performance in a small way as well.
Thanks again for the feedback and really looking forward to see your game :o)
Mike
Navee on June 26th, 2009
Hi mike,
Thanks for providing us great tutorials, it does help great way for learning iphone programming.
I was working on a game based on opengl and i was using some of the classes provided by you as a base. I m using lot of image in the project. now application get crash due to memory overloads.
I was searching with few forums and though it could solve problem if i use imageWithContentsOfFile method in place of the imageNamed of UIImage class.
But it didn’t helped yet.
I used following chages in initwithimage method in Image class
- (id)initWithImage:(NSString *)image scale:(float)imageScale filter:(GLenum)filter {
self = [super init];
if (self != nil) {
texture = [[Texture2D alloc] initWithImage:[UIImage imageWithContentsOfFile:image] filter:filter];
scale = imageScale;
[self initImpl];
}
pls tell if you find any way to get this image caching issue.
Thanks
korki696 on July 1st, 2009
Hi Mike,
Thanks a lot fr all of these tutorials they are helping out a bunch.
I go have a quick question. Is there a way to move the images that we define for example if we wanted to touch and drag one of them. i have been trying a bunch of different ways now but it just doesn’t seem to be working.
Thanks
-Lars
Anonymous on July 7th, 2009
THANK YOU
yotes on July 23rd, 2009
Hi Mike, I just want to say thanks a lot!!!
Anonymous on July 29th, 2009
Hi Mike,
Great stuff!
One question about the rendering … why do the texCoords start bottom-right and the quadCoords start top-right?
Thanks!
Sandbird on July 31st, 2009
Mike your tutorials are like the episodes of “Lost”.
You are thrilled when you start watching then, but then you realize that one day they will finish :(
Big ups and thanks again!
mike on July 31st, 2009
@Anonymouse, Texture2D produces an OpenGL texture for you which is upside down. To show it correctly in the Image class you need to reverse the texture coords.
I’m working on a new texture loader at the moment which will deal with this for you so that you don’t have to invert the texture coords when rendering something :o)
@Sandbird, thanks for the kind words. I am hoping that I’m going to be able to continue for a while with the tutorials and find other topics about iPhone Game development to make tutorials on. As you may have seen I’ve currently writing a book to teach the basics of creating your first iPhone Game. Once this is done there is a whole world of advanced topics which I’m going to start looking at such as 3D etc and more advanced OpenGL topics such as OpenGL ES 2.0 using shaders rather than the fixed pipeline used in OpenGL ES 1.1.
For this reason I’m hoping I’ll be able to keep learning myself and continue providing what assistance I can with the tutorials.
Mike
Incredible iPhone Game Programming Tutorials With Video | iPhone Development Tutorials and Tips on August 11th, 2009
[...] Game Programming – Tutorial 1 iPhone Game Programming – Tutorial 2 – Image Class iPhone Game Programming – Tutorial 3 – SpriteSheet Class iPhone Game Programming [...]
birthnight on August 19th, 2009
Hello from Los Angeles!
I’m extremely grateful for having found your site! I have one question. I am using Xcode 3.1.3 (current as of August 19th, 2009) and I don’t have the NSObject subclass template under the iPhone OS > Cocoa Touch Classes. Is there a logical reason for this? I have a “Python” NSObject subclass under the Mac OSX > Cocoa templates. Please forgive me, for I am only in my second week of programming :)
Thank you VERY much!
narender.mudgal on August 19th, 2009
Hi Mike,
i just saw the first tutorial and it forced me to see your second one. I am in iphone application development for last one year. but not a single openGL application i created yet and for a long time i was trying to see something like it. I saw many tutorials but there are over my head. but here i liked it and getting what exactly is going on. i think now i am on the right track.
wei lu on August 19th, 2009
Hi Mike,
Hello from China :)
Thanks for your tutorials, really good :)
I have a question about tutorial 2 project.
I copied and run “Tutorial 2 Project” but I got a bug. iPhone SDK reports like this:
————————————————
… …
Application Specific Information:
iPhone Simulator 3.0 (138), iPhone OS 3.0 (7A341)
*** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘*** -[Texture2D initWithImage:filter:]: unrecognized selector sent to instance 0xd466a0′
…
————————————————-
I use iphone SDK 3.0 and Xcode 3.1.3, all code is download from your webside. Before this, I run “Tutorial 1 project” successful.
Could you give me any suggestion about this bug. Thanks again.
- wei
wei lu on August 19th, 2009
Sorry Mike, please ignore my previous comment. I copied your code again and then the bug is fixed. I missed some code before.
so…….. go ahead your job :D
mike on August 19th, 2009
Hi wei lu. I’m glad you managed to get the code working and good luck with the rest of the tutorials. Thanks for the great feedback.
Mike
iPhone Game Programming – Tutorial 2 – Image Class | 71² – The … | IPhoneMate on September 4th, 2009
[...] is the original post: iPhone Game Programming – Tutorial 2 – Image Class | 71² – The … Share and [...]
youke on September 17th, 2009
hi mike
another chinese coming
felix on October 12th, 2009
Hi,
I would like to thank you for the tutorials. These are tutorials are mighty helpful :) and it is so much better when we can actually see n listen to it. I am havin a little doubt with the tutorials. I am not sure about the purpose of the offset argument in the renderSubImageAtPoint method. If “point” argument is the place from which we are going to render and it is going to be rendered till(subImageWidth,subImageHeight), then can you please tell me where we use the offset. I might have understood things incorrectly.kindly explain :)
Thorsten on November 30th, 2009
Hi Mike,
thank you again for your great tutorials!
I have a (maybe a little stupid) question: I am able to use Images when i initialize them before the main loop is executed. If i try to initialize an image within the main loop exactly the same way, i can only use ist once, next time the part of the memory is overwritten (i think ;o). I can’t figure out what the reason for this is.
Maybe an answer would help me to understand Obj-C/Pointers a lot better …
Thank you in advance,
Thorsten
Exerion on December 2nd, 2009
Hi Mike,
Your Image class allow to perform the Z-axis rotation of Image(Texture) but I have a following question:
How can I perform an X-axis rotation?
I have a square image that I would like to rotate in X-axis and I know that after this rotation it should look like a trapezium. How should I modify the Image class?
mike on December 3rd, 2009
Hi Exerion
I’ve not done any work on rotating around x or y. In the current Image class it would be a simple matter of using glRotate to rotate around the x rather than z axis.
The one thing that would need to be set up would be the OGLES settings to provide depth and perspective. It’s not that tough but I’ve not looked at doing that yet.
Mike
Raymon on March 21st, 2009
Just wanted to say thanks for a great lesson. Hope you feel better looking forward to the next one