Archive for the ‘Development’ Category

Photoshop Template and Instructions to Apply Apple’s Mirror Reflection Effect to Your iPhone / iPad App Icons

Saturday, May 1st, 2010
Omegasoft Sample Mirrored App Icon
Download Template

Follow the step by step instructions below to make a mirror reflection version of your 512 x 512 iTunes store app icon, like the ones used on this website. It should literally take only a few minutes, if even that, to use this template and create a nice mirrored app icon. If you feel there is anything confusing or that graphical guidelines would benefit these instructions please drop us a line from the support tab above or leave a comment below; thanks!

Step 1:  Double click on the .psd template to open it up in Photoshop; make sure the topmost layer in the layers pane (the one that says “Drag Right Part”) is highlighted by clicking on it.

Step 2: Open your 512×512 iTunes store icon for your app in Photoshop as well. They should now be in two seperate windows or tabs within photoshop.

Step 3:  In your 512×512 icon window/tab select all and copy (from the menu or apple/command a then apple/command c). Now click on the template window/tab and paste (apple/command v) to paste your icon into the template window. It should also have appeared as the topmost layer in your layers pane as well; if it has not, drag this new layer to the top so the pasted image is in front.

Step 4:  Drag the pasted image from the center upwards until it snaps to the top of the canvas, directly over the upper omegasoft template icon. You can hold shift while you do this to help keep everything lined up.

Step 5:  Once again paste (apple/command v) to paste another copy of your icon into the template window.

Step 6:  Enter transform mode (apple/command t) and right click your newly pasted icon, selecting “Flip Vertical” from the menu that appears. Press enter to apply the transformation.

Step 7:  Drag the inverted icon from the center downwards until it is directly over the lower mirrored omegasoft template icon, there should be about a 2 pixel space between the top icon and the inverted icon. Again you can hold shift while you do this to help keep everything lined up.

Step 8:  Now, from the layer menu, drag the right box (to the right of the chain link) of the layer called "Drag Right Part" up to the layer with your inverted icon. This will apply the fade out gradient to that image, giving it the mirror effect.

Step 9: From the layer menu, delete (or make invisible) the layer called “Drag Right Part” and the two layers called “Delete When Done”.

Step 10:  Save your image out as a .png file and you’re finished!

How to build multiple targets (as in Lite Version and Full Version of an iPhone or iPad app) from a single Xcode Project

Tuesday, April 13th, 2010

There are times you may find yourself needing to create multiple variations of an Xcode project, the most common example of which being a Lite Version and a Full Version of an iPhone app or iPad app. One option to accomplish this is to simply copy the project folder and rename it, working with each project separately from that point on. This is not a good idea, as now you have twice the work to manage things going forward, and confusions are bound to arise. My friend Smasher puts it succinctly: “in that path lies madness!”, and with this he is correct.

A much better plan is to configure your single Xcode project with multiple targets, so that you can develop multiple versions of the project concurrently and selectively build the one you need at a given moment. Here is a step by step guide to do just this, synthesized from the info in various threads at iphonedevsdk coupled with personal trial and error, and using the case of Lite Version / Full Version:

Step 1: Make a copy of your original target by right clicking the existing target and selecting “duplicate”. Rename this target to YourAppLite

Step 2: When you created the second target; a new pList file should have appeared in the resources folder YourApp-info_copy.pList or something similar; rename this to YourAppLite-info.pList

Step 3: Edit this new pList to have a different Bundle Identifier, com.yourcompany.YourAppLite, for example. If you do not do this both versions of your app will be seen as the same app instead of two unique ones, and when you build the light version it will overwrite your full version in the simulator or testing device.

Step 4: If you are going to use a different application icon for the light version (as you should), edit this new pList’s Icon file property to reference a different icon from the full version, IconLite.png for example. Obviously you must create this asset and add it to your project for this new icon to appear for the lite version.

Step 5: Highlight the new target (YourAppLite) and right click to “Get Info”, then navigate to the build tab and set Configuration to “All Configurations”. Now scroll down a bit until you find the “Info.plist file” parameter under the Packaging group; alter this to reference the new lite version pList we created above instead of the original pList.

Warning-Potential Gotcha:You may have noticed when you duplicated the target another product with the same name as the first appeared in the products folder. You may, like I was, be tempted to name the second one YourAppLite and change some properties in the pList to reflect this. Do NOT do this; there appears to be a bug which makes the debugger unable to launch the executable when you build. Furthermore, once you have done this even if you change the product name back it still gives the error. Perhaps this was just me being silly, but others have run into a similar issue; at any rate it is not necessary to change the product name for everything to work correctly, so I recommend leaving it alone.

Now you should be all ready to built multiple targets, but there are still some things we want to do to make managing both branches as seamless as possible. Go grab a drink, then resume the adventure.

Step 6: Once again highlight the new target (YourAppLite) and right click to “Get Info”, then navigate to the build tab and make sure Configuration is still on “All Configurations”. Now scroll down quite a ways until you find the “Other C Flags” parameter under the GCC Language group; alter this to be “-DLITE_VERSION” (the leading -D is necessary). What this does is allow you to do things like:

// Code unique to your lite version
// Code unique to your full version

in your code, just like a normal if statement.

Step 7: For any project resources that only need to be in the lite version OR the full version, you can “Get Info” on the file and then navigate to the “Targets” tab, deselecting the unnecessary target. This will help to keep each respective bundle size down, and is especially useful for large packages like adMob (which you’d likely only want in your lite version). Keep in mind that removing assets from a target in this way will likely coincide with the type of branching code described in step 6.

Step 8 (Optional): If you want a separate Default.png file for your lite version, first create the file and name it DefaultLite.png and add it to your project along side the regular Default.png. Now, right click on your YourAppLite target, select Add –> New Build Phase –> New Run Script Build Phase and paste the following in the script field:


Now close the window and expand the arrow next to YourAppLite target. You should see the run script you created, now grab it and move it just below “Copy Bundle Resources”. This will overwrite your Default.png with the DefaultLite.png at run time when you are building your lite version, just as you want.

Warning-Potential Weird Gotcha: Whenever I duplicate a target I notice that any Library Search Paths get slightly altered, so if you are using Library Search Paths and are getting strange errors, make sure you have the same values there in your Lite and Full version targets.

And there you have it; multiple targets at your fingertips. Please feel free to leave some comments or point out any mistakes or gotchas. I hope you found this useful; good luck!

Using PVRTC images to keep RAM and bundle size down.

Thursday, March 18th, 2010

The App 3G download limit was recently changed to 20 megs (from 10), but there will still be times when you may find yourself needing to squeeze down that bundle size to make the cut; RAM usage is something you will always want to keep as low as possible.  Thankfully there is something you can do to your app to give you some more breathing room in both departments: use PVRTC images.

PVRTC images use far less ram then .jpg or .png images, support transparency, and compress much better in the bundle.  Unfortunately they are a little unwieldy to use, so I’ve compiled a few tips to help.  Firstly, you can pick up a nice PVRTC image converter in our resource section HERE, which was created during the development of Amazing Ninja Buddy.  This will let you convert your existing images into PVRTC form.  Now, in order to incorporate them into your project I recommend you use Apple’s Texture2D image processing class, or whatever the equivalent is in any of Apple’s newer OpenGL based sample projects.

PVRTC images do have one fatal flaw…they are quite ugly and have a tendency to contain nasty transparency artifacts.  Thankfully there is a good way to to address this:

1) initially have your assets created at double the size you need them at (so for instance 512×512 for a 256×256 desired end result).
2) convert the file to PVRTC
3) draw it in your project at half scale

This will result in images that are very close to the quality of your originals, take up less hard disk space, and use roughly 40% of the RAM…that’s a big difference!