As usual, comments or improvements are welcomed. Developing a universal app is pretty straight forward but it helps if you started your design with the smaller screen of the iPhone/iPod touch in mind.
There is also a bit of a gotcha if you use Game Center on an iPhone. It looks like covering up the Codea view with another view stops it animating (which makes sense) but it doesn’t seem to start again when the view is subsequently uncovered. This manifests as the draw loop no longer looping, hence the screen doesn’t get refreshed and appears to freeze. The fix is simple, you just need to tell the renderer to start animating again when you dismiss the Game Center view controller. This is all explained in the tutorial.
.@Reefwing wow, thank you. this tutorial is great. Concerning the iPad Mini screen resolution, thank god its the same as the iPad 1/2. Since I have regular resolution buttons and @2x buttons, would I need to scale down both of them so it would be compatible with the retina iPhones and regular ones?
Also, will this method support making games for the iPhone 5 and iPod Touch 5th Generation?
Hi @veeeralp - sorry it took a while to get this one out. Yeah good news on the iPad mini screen size, I was worried it might be another resolution to support.
Regarding your buttons, it sounds like you are using sprites to represent the button, if so you shouldn’t have to do anything else if you have the normal resolution and @2x images. The buttons may look larger on an iPhone compared to an iPad but as long as the UI fits you should be good.
What I have described in the tute will work on the iPhone 5, but the app will display at the same size as an iPhone 4S. iOS 6 will place two black strips along the top and bottom in portrait mode or the left and right in landscape mode just like a letterbox movie on TV.
If you want to support the iPhone 5 / iPod 5th Gen then you need to supply any full screen images at the new size (640 x 1136px). You also need to add a new default loading image called Default-568h@2x.png. Apparently, if you add this image iOS 6 knows to run your app at full size if it is running on an iPhone 5. I don’t have an iPhone 5 so I haven’t tried this.
Apart from that, the iPhone 5 has a retina resolution, so it will use your other @2x images automatically (e.g. icons and sprites). Depending on what you are displaying you may need to do some conditional formatting like we did for the universal app. Section 22.4 of the Universal App tute provides some Objective C code which will tell you what sort of iPhone you are running on.
.@Reefwing I actually have the iPhone 5, so that’s one reason I’d like to support it for the iPhone. As soon as I saw your comment, I went really quick to a wallpaper site and downloaded an iPhone 5 wallpaper. It did launch with the 4" screen.
Regarding the UI, the buttons are too large and it looks like I’m going to have to scale them. I have a lot of work ahead of me. Also, how did you adjust the button/text coordinates accordingly. One thing that really sucks is that you can’t see how the app will viewed in an iPhone directly from Codea. Did you just end up coding everything from within Xcode.
This is really important to me as I have to change the sprites, button positions, and text position. One of my views has over 30 buttons. ahhh!!!
Yep - I did it all in Xcode using trial and error. I roughed out a design on paper first to get an idea of what I needed to put where and then tweaked it in Xcode.
It is much easier to do the code update → test cycle using Xcode as you can quickly swap between the iPad and iPhone on the simulator. In addition, with all the game center code in MineSweeper it no longer runs in Codea.
If you are going to do it in Xcode I recommend modifying the runtime so that it reloads your Lua files every time you compile. To do this go into the CodifyAppDelegate.m file, find the - (BOOL) migrateProjectAtPath:(NSString*)path toPath:(NSString*)destPath method and comment out the following code as shown below.
For 30 buttons you could use selection drop down menus. You don’t have more than 10 fingers, do you? So you don’t need 30 buttons always on the screen…?
.@Reefwing I got everything working and looking good on the 3GS, i4, i4S, iPad, iPad retina screens. The only thing I need to do now is for the iPhone 5 screen. I’m having some trouble detecting if it’s an iPhone 5. This is what I have so far to detect it
function deviceIsIphone()
if CurrentOrientation == LANDSCAPE_LEFT
or CurrentOrientation == LANDSCAPE_RIGHT then
if WIDTH == 640 then
return true
else
return false
end
else
if WIDTH == 1136 then
return true
else
return false
end
end
end
Because you are in Landscape mode, so the width is the height?
iPhone4 640x960 - width is now 960?
iPhone5 640x1136 - width is now 1136?
Am I missing something obvious?
From iOS 4, dimensions are now measured in “points” instead of pixels. The iPhone screen is 320 x 480 points on both iPhone 4 and older models. The iPhone 4 has a screen resolution of 640 x 960 pixels.
On an iPhone 4 and 5, a point is a four pixel square (2 x 2) so if you draw a one-point line, it shows up as two pixels wide. The theory is that you specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen. This is why you go to the trouble of creating your @2x images.
The iPhone 5 has a physical resolution of 1136 x 640 pixels which equates to 568 x 320 points. Your WIDTH and HEIGHT constants return points not pixels. So the best test for an iPhone 5 is to look for the 568 dimension.
As an aside, to support the iPhone 5 you will need to develop in iOS 6 on Xcode.
