Resources framework for "universal" apps

When I started programming for iOS, the projects I were involved in were all for iPad devices only (only a pack of image resources), but when I started coding I did it in such a way that with the same code it was valid for iPad and iPhone. It was a great idea because later on the iPad apps were turned into universal apps and the changes in the code were just a few details. The idea is the following:

1. Initialize the scale of the background with respect to the current screen size and the resources dimensions and save this ratio.
2. Scale the background and images with the previously calculated ratio. As the iPhone has not the same dimensions of the iPad, it uses scaleX and scaleY, and the images get a bit stretched.
3. Never use points for positions, but use logic of dynamic positions with respect to the screen: top-left corner of the screen is (size.width*0, size.height*1) and the center-right point is (size.width*1, size.height*0.5).

One of the problems I found in my way was the memory constraint, the iPad 1 couldn't load big files of images. I had to change the resources target from iPad retina to iPad non-retina screen. Enabling retina display but without the -hd resources makes the graphics on iPad retina not blurred nor with pixels, so it was a good solution and saved a lot of mega bytes.

Here you have the framework and an example of the usage:

When the iPhone 5 ready apps were mandatory for new submissions (and updates), it was also possible to keep stretching the backgrounds and sprites, but now our characters have got too much fat. I had to think a new way of using only a pack of images and taking advance of all screen sizes. Pen and paper and a calculator for operations, I draw something like this:

The small rectangle should have all the important information for the app (buttons, information, ...) but the background have to fill all the space, in order to take advance of the iPhone screens. The reference size is the dimension of this rectangle in the different devices: in the iPad is the same as its size, while in the iphone will fulfill that 4*iphoneHeight = 3*iphoneWidth. Thus, the left reference point is the (screen size - reference size) / 2 and the point most on the right would be refLeft+refWidht*1.0.

Here there is the new framework and an example of how to use it:

Some useful links:

• iPhone/iPad dimensions:
• http://www.idev101.com/code/User_Interface/sizes.html
• http://upstageapp.com/resources
• Texture packer:
• http://www.codeandweb.com/texturepacker
• http://www.codeandweb.com/texturepacker/tutorials#cocos2d

Adding sound to your game with Cocos2D

If you are developing a game probably you need to add sound to your app.

As many other things, although Apple offers you a library to manage the audio, Cocos2D has it's own class: SimpleAudioEngine. It makes you really easy to insert background music and sound effects. It also allows you to modify basic properties such as pitch, pan and gain, and the possibility of looping a sound.

You can preload the sound (if you have a lot and heavy sounds). For loopings you need a CDSoundsource class:
Playing effects and background is very easy:
Setting other properties is also easy:
Playing around with looping sounds:

I thought I removed the file...

Sometimes, when you are sure that everything is alright because the app runs perfectly on all your devices, one of your testers report a bug saying that the app shuts down while loading in some scene (well, they just say something like "yeah.. I select all the items and then, it closes and I cannot continue"). You have very few information, so you start summarizing:

1. It cannot be memory warning (always first guess, but you test with an iPad 1, the iPad 3 cannot raise this problem)
2. It cannot be a weird behavior of the inner logic because it is just a background and some sprites...
3. This scene had previously worked, and then I changed the background...
4. If the background is not found?
5. (After look in the project) But the background is not in the project... Why is it working in my devices if there is no image?!

It has happened to me to many times so I decided to write this post.

The first time I saw this issue was when refactoring my code and stop using retina resources, so it turned from having background-hd.jpg and background.jpg to just background.jpg. I removed the file from the project, clean the cache and made sure it wasn't the old file there anymore. But, somehow, XCode seemed to remember it, so when I asked for this file in my devices was ok but my testers iPad hadn't that resource and crashed.

I was very crossed, because I didn't want to rename all files to solved the problem. So, I asked the Almighty and found some solutions on Stackoverflow. The problem relied on XCode's derived cache, and there were offered some solutions:

1. Clean via XCode (source)
• The problem remained
2. Going to the folder in your laptop and cleaning the data manually: ~/Library/Developer/Xcode/DerivedData/ (source)
• It didn't worked for me, my corresponding folder was empty
3. Delete app, clean everything, empty caches (source)
• Still there

How did I solved the problem? I did not solve it :( I solved my concrete bug manually, by renaming the files and the path names in the code.

Why did I write this post? To show you potential problems you may have with XCode and the resources, and a non-perfect solution for it. Also, if you find a good way to get rid of this ridiculous issue that makes stupid names of our resources, feel free to share it with a comment.

'Kamcording' your app

When you are a programmer, you get used to searching for new tools, fighting with poorly documented frameworks, and searching for solutions of problems that come with new staff. You also end up learning when to discard a tool. Tools may be bad, may not adjust to your problem, may give you more problems than solutions... or may be exactly what you are looking for... But what makes a tool great is the people behind it, a technical support that turns problems into solutions. And that's exactly how I would describe Kamcord.

The moment I saw this tool I knew it could be perfect for the new game we are designing, so I decided to make a project to test it. I had two problems: one with the rotation and the other was causing a crash with certain iOS version. Thus, I wrote to the supporting team. The answer was really fast and solved the orientation issue. They needed more information about my devices and project in order to solve the crashing problem so we exchanged several mails, projects, framework's updates... In just 5 days I had the whole project perfectly working. I didn't have to insist, but they were working on my problem till they got to the solution. And every mail was really polite. I'm very happy with the support I've received :)

Kamcord, this amazing tool, is a framework that allows your app's users to record the flow of the app and share it with friends. Easy and well documented.

Available for Cocos2d and Unity. Download from the web and follow the tutorial, it's well explained.

1. Copy the Kamcord folder into your project.
2. Add the framework and other supporting frameworks (twitter, mediaplayer, ... ).
3. Adjust the settings for iOS < 4 (turn to optional some of the just added frameworks).
4. Add to 'other linker flags': -ObjC -all_load -lxml2

At this point, it should compile, if not, check all the steps. At my first attempt it failed but I realized I  had skipped the third step.

On the other hand, Kamcord uses their own glview, therefore you have to do some changes in your AppDelegate.

5. Make the root view controller extend from KCViewController
6. Instantiate the glview as a KCGLView instead of an eaglview
7. Set the root view controller to the window
8. Configure Kamcord and set your developer key, secret and app name.

Notation for the comments:

Indented // comments: cocos2d autogenerated;

Non-indented // comments: code not anymore needed;

Indented //* comments: Kamcord explanations;

Non-indented //* comments: mine

Now, adding the functionality is really easy:

9. Import the Kamcord framework on each scene you want.
10. Call startRecording when you want to start the video
11. Call stopRecording when you want to stop the recording
12. Call showView (normally after you have record) to show the replay and share options of Kamcord

It will look like this

And you can see the video here :)

Arabic, a language written from right to left

Lately I had to face inserting text in my app in different languages: English, Spanish, German, Chinese, Arabic, ...

What I first thought was how wonderful it would be to have all the texts in a string and change the label content depending on the selected language. Now, how intelligent labels are? Can they "understand odd symbols"? Actually, I was surprised of how simple was with the chinese: copy and paste the symbols. Tip: if you just want to insert Chinese symbols (for example, if you don't have yet the text and just want to try), don't search for "chinese symbols", instead use the google translator ;)
It doesn't depend on the font, it works with all I have tried (in this site)

So, if it's so simple, why did I write a post? Because after that I realized that the Arabic was a bit more complicated than Chinese or Japanese. It's written from right to left!

As the Arabic is written in this different direction, the label must be aligned on the right. In addition, it's not possible to change the property once the label is initialized. For this reason, I had to change the structure of the labels because before I had one label and I changed the text (which, actually, wasn't performing better than creating a new label).

But it wasn't working yet, the text was written backwards, so there was still something I was missing. There was no possibility of changing it in the label. I was surprised I couldn't find in internet any solution for this, what, in my opinion, should be a common problem. Maybe I'm loosing my ability of search in google and find an answer in Stackoverflow.

The solution was given to me by my good fairy, Alejandro, with a Wikipedia article about RLM and the wonderful unicode codes. It was like magic, just inserting \u200f at the beginning of the Arabic text and the problem was fixed. Checking whether a text is correct or not is king of fun when you don't even know the language.

For short, what did I do to insert text in Arabic in Cocos2D?

1. Write in a string the text starting with the rlm unicode mark at the beginning.
2. Create a label with the correct align.
3. Add the label to the corresponding layer

Only three steps and very easy, isn't it? I hope this helps anyone with the same problem

Sending mail inside the app with Cocos2D

First of all, I would like to say that if you are looking for a way of sending mails without using the Apple's mail composer you are not looking in the proper site. However I had the same purpose at the beginning, but I didn't want to deal directly with the SMTP protocol and I couldn't find any supported library.

Instead of a custom mail scene, you are going to have the Apple's standard mail composer. Something like that:

Implementing this is not difficult using MFMailComposeViewController, but with Cocos2D you have to pay attention at several points.

The general idea is simple: create the composer, check if it can send mails, set the delegate, fill the mail and tell the controller to show the composer.

So, the steps to follow are;

1. Add the MessageUI framework to the project.
2. Make your class implement MFMailComposeViewController.
3. Instantiate the mail composer
4. Check if the device can send the mail. This checks whether the iPhone Mail app is synchronized with an account or not. In this last case, you should break here and show an error.
5. Set the delegate to self. Your class now must contain the method mailComposeController:didFinishWithResult:error:
6. Fill the mail with the subject, recipients, body...
7. Tell the UI view controller to show the composer

The main problems with Cocos2D are the animation and that you don't work with view controllers, instead you have scenes, layers, ...
For the first problem, it's as easy as pausing the director before showing the composer and resuming it after the mail is sent.
For the controller issue, I found in the cocos-2d forum a solution which involved creating a view controller and setting the view to the openGL view. That worked pretty fine with iOS5, but arise a uncaught exception when testing in iOS6. More than one view controller cannot be associated with the same view.

I finally got to the solution, take the view controller, stored in the appDelegate (it implies a little modification in the appDelegate class), and use it to show the mail view.

Finally, the code should be like that:
Remark. All of this is assuming that you are working with cocos2d 1.x. This is reasonable assumption since the new version in cocos2d is quite recent, it has several changes from the older version and doesn't support iOS <4 or iPhone <3GS.
With Cocos2d 2.x and this documentation, I suppose (I haven't tried it yet) that the problem is no more there, because our SharedDirector will be itself our view controller (we don't need to ask the AppDelegate nor create the rootViewController variable)

Add a framework in a XCode project

Since I started programming with more advanced tools (video, mails, analytics, ...)  I've had to add new frameworks to my project.

It's very easy, but I always spend a lot of time looking for the place where I can press this plus button.

On the project navigator select your project (the blue sheet)

Then go to the project-target panel and select your target

On the left grey big panel, on the top menu select the summary tab

Now, look for Linked Frameworks and Libraries and press the plus button

You will see a new window where you can write the new library or framework you want to add

Once you added the framework, you will see it in the project navigator

The beginning: Cocos2D

I didn't have any previous knowledge of Objective-C before I started programming with the framework Cocos2d. I only read a tutorial of the basics of this programming language which was provided by our mentors in the Praktikum I was starting.

It wasn't difficult for me because of my experience in C and OOP in Java. The most difficult thing was remembering the order of the arguments and colons in the signature ;-)

For me it was important to learn on demand. Do you like (or just know, it may be sufficient) functional programming in Haskell? I'm like lazy evaluation ;-) No, just kidding... But it's true in some sense. I started in small team and each one had assigned some tasks with features to be developed. I looked for it in the internet, in my book, ask teammates, ...
The first week I learnt how to set the scene and characters, the next one, how to make an animation with frames, ... All of this tasks were surely not completely correct at the beginning but the knowledge have grown with my experience and I still like learning new ways of doing what I had implemented before.
Thus, my tip for you would be to think a simple game or app and try to develop it in order to learn.

Installing Cocos2D is not difficult, just download from the official site, read the instructions contained in the folder and run the instal-templates.sh.
Now, creating a project using this framework is really easy: You just have to choose a Cocos2D template. There are three options:

Which one should you use? It depends on your needs and your programming skills on C or C++:

• The basic "cocos2d": recommended for beginners and for projects without physics. Don't be confused with the name, professional games have been developed with this template.
• Cocos2d with Box2D: the most widely used in projects with physics because it's written in C++. It demands a change of the extension to .mm to all files importing this library. An advantage of this library is that there are a lot of documentation, tutorials, ...
• Cocos2d with Chipmunk: my favorite for projects with physics. It doesn't affect the code and you don't need to change any extension. It's simple, easy and it's written in C.

The main bibliography I've used as reference are:

• The tutorial I mentioned at the beginning of the post
• A digital version of a Cocos2D book

Also, it's very useful to check in the oficial site forum and sometimes at the Apple's web for developers (like this). This last one only as reference. 

But this is just the beginning. The fun starts now...