You may recall that I recently posted some screenshots of Mode (a Flixel based game) on various devices. Well I was going to release the source straight after but decided to wait until Flex SDK 4.5.1 was released as it provided a nice speed bump to iOS (a 4x increase in CPU mode in fact).
Anyway, I’ve now had time to clean up the code and decided that now was as good a time as any to post up my conversion. The key changes I made to the Mode source available from the Flixel GitHub account is as follows:
- The preloader was removed – as this was an AIR app and I didn’t need to worry about preloading the game
- New logic was added to resize the view port of the game based on the dimensions of the device it was present on.
- I altered the ‘attract mode’ code so that the virtual controls weren’t visible when this was playing.
- And I obviously added the aforementioned virtual controls to make the transition from a web based keyboard driven game to a touch based device as painless as possible.
- I also added a registry so I could easily create and manage aspects of the game – primarily to allow for the creation of the controls and managing their visibility – this was a great tip I picked up from Richard Davey.
As I noted in my earlier post, optimization wasn’t top of my priority list; it was more to get a feel for the process and workflow when targeting numerous devices over several device platforms.
If you download the source and try and compile it you will likely get a compiler error. This is to do with the fact that I rolled a version of the Flex SDK 4.5.1 with the latest version of the AIR 2.7 SDK (this fixed a couple of layout bugs when exporting for iOS). The process is pretty easy if you want to do it yourself (see this article on the Adobe Knowledge base). Alternatively you can download a copy of the SDK I used via this link and add it as an SDK in Flash Builder 4.5.
You will also need to put your publisher name in the blackberry-tablet.xml file as it is currently set to [YOUR NAME] as shown below:
1 2 3 4 5 6 7 8 9
<?xml version="1.0" encoding="UTF-8"?> <qnx> <publisher>[YOUR NAME]</publisher> <category>core.games</category> <icon> <image>assets/icons/mode_pb_86.png</image> </icon> </qnx>â€¨
As a final note, I tend to comment out unused icons in the app-config.xml file based on the target device platform, so be aware that you may have to comment/uncomment the relevant icons depending on whether you are targeting iOS or Android.
You can grab the source code for Mode from GitHub here: https://github.com/FlashGen/ModeTouch