On my last post, I mentioned the definition of Augmented Reality (AR). Now I’m adding the word Mobile to it.
At the current time, platforms that I’ve tried to developed upon supporting AR are iPhone and Android. Well actually I coded once and used Titanium Developer to make the actual executable files for each platform.
Titanium offers current web standards as a mean to create those mobile applications. I’m now using Titanium Developer 1.0 with the 1.1 Mobile SDK. The requirements to be able to run Titanium and produce for iPhone & Android are:
- A decent Mac running Snow Leopard (Leopard will do). I used my Macbook and a Hackintosh hehe.
- Xcode. Get it from your installation cd that comes with your Mac.
- iPhone SDK 3.0 minimal. I used 3.1.2 on my Hackintosh and 3.1.3 on my Macbook.
- Android SDK R5
- Titanium Developer 1.0
[caption id=“attachment_205” align=“alignnone” width=“297” caption=“Step 1 - New Project”]
[/caption]
Next up, it will show a screen showing metadata and configurations for the application. Choose Mobile as the project type. Type in the application name on the name column; I’m naming it Mobile AR Demo. Identify our application and in this case, it’s com.mf.ardemo. Choose the directory where our application will reside and enter a URL for it. I’m using Titanium 1.1 so I choose 1.1.0 as the Titanium SDK Version. Now if Titanium successfully found your iPhone and Android SDK path, it will show a check mark on both, if not, you will have to specify the path. Click on Create Project afterwards and it will show another screen displaying editable fields.
[caption id=“attachment_208” align=“alignnone” width=“412” caption=“Step 2 - Project Metadata & Configuration 1”]
[/caption]
[caption id=“attachment_211” align=“alignnone” width=“407” caption=“Step 3 - Project Metadata & Configuration 2”]
[/caption]
The most important part on Step 3 will be specifying your Application Icon. Use any 57x57 pixels icon of your choosing. It will default to Titanium’s icon if not specified.
Next up, you may wanna change the default splash screen when the application is launched. To do this, go to the directory where your application resides. In my case it will be /Users/Tista/Development/iPhone/Mobile AR Demo. When you’re in there, go to the Resources sub folder. That is where we’re gonna put all our JavaScript files along with all other resources. Inside the directory, you will find an android and an iphone directory. Make a 320x480 pixels splash screen and you’re set. Put your splash screen there replacing the Default.png file. What’s interesting is that you can specify different Application Icons and Splash Screens for both platforms, just put them in the respective directories and Titanium will automatically configure.
[caption id=“attachment_213” align=“alignnone” width=“386” caption=“Step 4 - Application Icon & Splash Screen”]
[/caption]
The 4 steps we did earlier is already enough to show a Hello World application on your device. If you wanna test it, you can go ahead and use the emulators. Back in Titanium, click on the Test & Package tab. I will try running on an iPhone emulator, it’s chosen by default so I go ahead and choose the SDK I’m aiming for which is 3.1.2 and just click Launch. Afterward Titanium will show verbose output of what it’s currently doing on the blank window. Upon success, it will immediately launch the application on the emulator.
[caption id=“attachment_214” align=“alignnone” width=“350” caption=“Step 5 - Run on Emulator 1”]
[/caption]
[caption id=“attachment_215” align=“alignnone” width=“375” caption=“Step 5 - Run on Emulator 2”]
[/caption]
OK so the 5 steps above wraps up Part 1 of the tutorial. Should you have any questions, drop a comment or tweet me. Thanks for tuning in ;)