Posts Tagged ‘iOS’

Script to produce iPhone app icons at different sizes

Tuesday, May 29th, 2012

The tools for writing iPhone software are really easy to use, and allow you to concentrate on the coding rather than on obscure configuration problems. But one area of iOS development that I found a little tedious whilst writing my Solar Balls game was producing Apple’s mandatory and optional icons, which need to be in a variety of sizes.

The application icons need to be generated at different sizes for the old screen resolutions, retina display resolution and for iPhone/iPad screen types. There are also other sizes you can produce for Spotlight and Settings.

The different icon sizes are described on Apple’s developer website here and here.

If you work for a big company and have access to an art department they may well manually produce optimised version of each icon. I don’t have an art department and don’t have time (or the interest!) to optimise each icon so I just wrote a very simple script to do the resizing for me.

It takes a source image and then resizes it into 8 different icons. It gives them names that fit in with Apple’s old recommended icon naming conventions.

solar balls lite icons

Icon list

57x57 Icon.png
114x114 Icon@2x.png
72x72 Icon-72.png
144x144 Icon-ipad@2x.png
29x29 Icon-Small.png
58x58 Icon-Small@2x.png
50x50 Icon-Small-50.png
100x100 Icon-Small-100.png

Usage

generateIcons.bat sourceicon [tag]
e.g.
generateIcons.bat iTunesArtwork
generateIcons.bat iTunesArtwork Lite

Or you can just drag the source image over the batch file.

If the first example the icons will be generated from your iTunesArtwork image with the names previously listed.

In the second example a tag is inserted into the name. So if the tag is ‘Lite’ then instead of Icon.png, you get IconLite.png. This can be very useful if you are using one XCode project to produce both a full and a lite version of your app.

You’ll need to have ImageMagick installed and on your path for this to work – ‘convert’ is a binary from ImageMagick.

This is a Windows batch file but you could easily convert it to a Mac OS shell script. I just happened to be using Windows at the time I was doing the icons for Solar Balls.

iPhone icon resizing script

goto :skip_functions
:makeAppIcons
	:: iPhone icon generator
	:: Details at https://www.reviewmylife.co.uk/blog/2012/05/29/script-to-produce-iphone-app-icons-at-different-sizes/
	set filename=%1
	set tag=%2
	:: icon sizes from
	:: http://developer.apple.com/library/ios/#qa/qa1686/_index.html
	:: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
	:: App icons
	convert %filename% -thumbnail 57x57 Icon%tag%.png
	convert %filename% -thumbnail 114x114 Icon%tag%@2x.png
	convert %filename% -thumbnail 72x72 Icon%tag%-72.png
	convert %filename% -thumbnail 144x144 Icon%tag%-ipad@2x.png
	:: Spotlight search result icons
	convert %filename% -thumbnail 29x29 Icon%tag%-Small.png
	convert %filename% -thumbnail 58x58 Icon%tag%-Small@2x.png
	convert %filename% -thumbnail 50x50 Icon%tag%-Small-50.png
	convert %filename% -thumbnail 100x100 Icon%tag%-Small-100.png
goto :EOF
:skip_functions
call :makeAppIcons %1 %2
:end

It should be very obvious how to generate any additional sizes that you might need. And you could of course use a very similar script for resizing other app images that you might need for the standard/retina/iPhone/iPad screen resolutions.

Solar Balls game for iOS

Tuesday, May 8th, 2012

solar balls iphone
Today I released my first game for iOS. It is called Solar Balls, and is a simple arcade game where you have to flick coloured balls into the correctly coloured target. The game has:

* 16 mission levels
* 3 bonus levels which become unlocked when your score is high enough
* An arcade mode where you just have to get the highest score possible

The aim of the game is to save the Earth from the Solar Balls. They are heading towards our planet, and the only way to prevent them from destroying our planet is to fire them into the matching targets.

Game background and technical information

I wrote this game for fun, and to learn some iOS programming. It is built on top of the Cocos2D game framework. I tried first coding it using UIKit, but it was far too slow once I had more than 5 balls on screen at once.

solar balls ios 1

Cocos2D is built on top of OpenGL and was easily fast enough to run at 60FPS on my 2G iPod Touch even with 20+ balls on screen.

I did mix in a bit of UIKit for the menu buttons, and also to construct the sprites. Cocos2D has no easy way of drawing simple anti-aliased shapes such is circles, or dotted lines. I therefore drew these offscreen with UIKit and then imported the image data into a Cocos2D sprite.

solar balls 2

The physics is coded using Box2D. Originally I wrote the ball bouncing and collision code myself, but once I started adding angles and obstacles into the level it became obvious that I really should just use a physics engine to save me a lot of pain. As Box2D is written in C++ this has the knock on consequence that any parts of the game that interface with it also have to be written in C++ instead of Objective C.

I used the Particle Designer tool to make some of the explosion particle effects.

The game sounds use the OpenAL framework for low latency, and the background sounds use the simple AVAudioPlayer. I used the Finch wrapper to simplify using OpenAL, but had to customise it to handle automatically pausing/restarting the audio when necessary (e.g. if an incoming call occurs, or the game is backgrounded).

I found that the audio was the biggest user of memory. I had to re-convert many of the samples to lower bitrates to reduce the app size. Also I found that it was best to completely unload all audio and the audio framework if the game was backgrounded. I then reloaded all the audio again if the game was brought back to the front.

I’m not an audio or sound person so I made use of free images and sound effects. For the background I was able to make use of NASA great collection of copyright free images. As an extra touch I added information about each of the images to the start screen of each level (click on the level location at the bottom to see it).

It can be time consuming to produce multiple sets of images (original iOS screen resolution / retina display / menu buttons), so I wrote a script using ImageMagick to automatically convert each source image into the correct resolutions and to give them the correct names.

The sounds all come from freesound.org. This is a great resource for free game audio, but make sure you understand the licence terms for each sample. They have several different licences in use on the site.

XCode was really easy to use, as was debugging on hardware. In fact debugging on hardware is just as easy as debugging on the simulator which certainly encourages you to continually test on the real hardware.

Update: Solar Balls is not currently available on the App Store.



McGaijin Software interview – Learn Hiragana Now!

Thursday, September 30th, 2010

McGaijin Software have just released their first iOS app “Learn Hiragana Now!” to help you learn the Japanese hiragana alphabet. Here is my interview with them.

1. Tell us about your new iOS app.

‘Learn Hiragana Now!’ is my little app to help people to read and write hiragana (one of the Japanese syllabaries) in as fast a time as possible.

learn hiragana now

2. How did you get the idea for Learn Hiragana Now?

My husband and I love Japan, and while we both spoke enough Japanese to get around, on our first trip we soon realised that being able to read would be a massive benefit. When we got back home we made an effort to learn hiragana, but if you don’t use what you learn regularly it quickly disappears from your memory. We made up some mnemonics (memory aids) to assist learning, and found that the learning became more permanent. When we both bought iPod Touches we got the idea for the app. It is the perfect platform – it’s portable so you can learn anywhere, and the touch interface makes it very easy to use.

3. What challenges did you face with creating it?

Everything! I bought a second-hand Mac laptop to develop it on, and I’d never used a Mac before so it was a steep learning curve. I’d also never done any programming!

4. What tools did you use?

  • PhoneGap to compile the application (a package to allow you to use HTML & JavaScript within iPhone apps).
  • PaintShop Pro for the images.
  • CoffeeCup HTML editor to create the bones of the app.

5. What testing did you do for the app?

Everything was tested by hand. As the app was mainly HTML it was easy to test in a normal web browser. Once it was compiled on an actual iPod Touch I just made sure that every link went to the correct place – it was more time consuming than I thought, so hopefully there are no bugs!

6. How did you become interested in programming?

Creating this app was my first programming experience.

7. Will you be porting this app to other platforms?

PhoneGap allows compilation to Android, and Blackberry if I remember correctly. I’ve got an Android phone but to be honest I’ve not had chance to sit down and look at this properly – real life tends to get in the way of things!

8. What would you like to see changed or added to the iPhone SDK?

As a complete beginner when it comes to programming (and Macs!) I would love to see a beyond-simple set of video tutorials that you can use to get up and running, and teach programming basics.

9. What next for McGaijin Software?

I’m working on ‘Learn Katakana Now!’ – a similar app with a new set of mnemonics to learn katakana. Again, this is taking longer than I originally thought, but it will get there eventually.

10. Are there any other iOS apps you’d recommend for learning Japanese?

Kana LS – it’s a perfect companion for Learn Hiragana Now. It allows you to practise actually writing the kana on the screen with your finger, great for revision!
Human Japanese – a great introduction to the Japanese language, filled with tons of interesting facts.

Learn Hiragana Now! is available on the App Store now.

Learn

You can get the latest information about them McGaijin Software on the McGaijin Software website.