Last week I quit my job at Nascom to become a Freelancer. It was a tough decision. Nascom was my second home for more than 6 years. As a developer I worked on apps in a lot of different technologies: JAVA, Flex, Silverlight (yes, seriously!), JavaScript and iOS. I also got the chance to be a Project Manager for a while, which was am interesting experience. But in the end, what I liked the most was creating apps, and especially mobile apps. I worked for Studio 100 on the Bumba and Piet Piraat apps, and had a lot of fun doing it. That’s why I decided to create something of my own. Last year these two little apps, Wee Rockets & Wee Subs were born. I found out during that year that I really love making stuff. It’s so great when people tell us their kids love playing our apps. So you can definitely expect some more Wee Taps apps this year. We have already some good ideas in the pipeline.

Next to working on my own apps, I am also looking for interesting and challenging projects. I’ll be available for client work starting in June. For more details about me, please look at my project portfolio, and don’t hesitate to contact me.

Thank you Nascom for everything, and now it’s up to me!

With the launch of Windows 8 this year, we saw an opportunity to be present in the Windows Store from day one. And because we built the app using cocos2d for iOS which is a native iOS framework, we could not just reuse the code and compile to Windows 8 SDK. Another constraint was the timing. We had only a month to get our app ready and uploaded to the Windows Store. If not we would miss the launch. I will go through some of the choices we made before explaining the final solution.

The platform shift

cocos2dx-win8

The obvious choice was cocos2d-x, the cross-platform version of the framework we used to build the original. Obvious, well not completely. I did some testing porting one of the mini games from Objective-C to C++ and that worked pretty well. I did not have a lot of C++ knowlegde, but I managed to create a working demo that worked on iOS.

We did not want to build a cross platform version of our app, but a Windows 8 version. And then I discovered that the main branch did not support Windows 8. There is however a separate repository for the Windows 8 version. But this version worked on older versions of the API. I had to re-write some code and got the demo working on Windows 8.

So not a bad solution. The framework was still a but unstable and I had to learn C++, but doable.

cocos2dx-html5

But wait, Windows 8 supports JavaScript/HTML apps out of the box, so why not use JavaScript. It’s hot and a lot more people at Nascom have some kind of knowledge of JavaScript.

I ported the same games from the original app to the JavaScript version of the Framework. After half a day I managed to hack together a workable demo. Next you can see 2 simple demos that I created to see what’s possible.

• Demo 1: Shadow Game
• Demo 2: Bubble Game

So that seemed to work fine in the browser, but after porting the code from a website to a Windows 8 App we got some errors. Also Windows 8 apps need to support Touch and this framework didn’t behave as expected. It looks like most of the code was optimized for Webkit based browsers, and because a Windows 8 JavaScript app uses IE 10 internally it cause some problems that were not that easy to fix. More info about cocos2dx-html5 can be found here.

CreateJS

After talking to the Microsoft gaming specialist David Rousset, we decided to try out the CreateJS Framework from Grant Skinner. This framework fully supports the latest Microsoft browsers and some pretty impressive games are already available on the internet. Checkout Pirates Love. Daisies and Atari Arcade.

The framework is more lightweight because you can just use the libraries that you need. And it’s pretty easy to learn if you have a Flash background. We did some experiments and they all worked fine inside the context of a Windows 8 app, so we decided abandon the coco2d framework and port our code to CreateJS.

Developing the App

Development Environment

Our development environment was setup so that we could easily develop in the browser and and still run the app from Visual Studio on Windows 8. Most of the application’s functionality can be run in modern browsers like Chrome, Safari and Internet Explorer 9/10.

We only had to write specific code for Windows 8 specific logic such as handling the different states: Fullscreen, Filled, Snapped, … This also made it possible to have the functionality approved very quickly by the client.

Some tips & tricks

While developing the app we ran into some limitations, issues. Here are some tips and tricks:

• The general application’s architecture was the first challenge. The cocos2d engine we used provided a mechanism to switch between different scene, but the CreateJS framework does not have something similar. We created a general framework that managed loading and unloading different scenes onto the <canvas> element.
• Cleaning up is important. Our app uses one <canvas> element where we add and remove assets during the game. These assets are bitmaps, sounds and various JavaScript objects. CreateJS provides some cleanup methods, but we had to optimize the memory management at the end of the project. It’s basically the same as in iOS: what you create, you must destroy. The only difference is that it’s pretty hard to profile this in JavaScript without the proper tooling.
• Testing on the device is essential. We did not have any Windows 8 Touch devices at the start of the project, but Microsoft was able to provide us a test machine which we could use.
• Implement the platform specifics: Windows 8 provides some additional views that have to be supported: Full screen, Filled and Snapped. Because the game could not be played in snapped mode, we had to implement something special to indicate the user that this mode is not supported.
• Different screen sizes and aspect ratios: we had to find a solution how to tackle the different aspect ratios. And we didn’t want to letterbox our game. So we decided that the playable area was always visible and we filled the rest of the screen with the background. This way the application always looks nice on all resolutions. We went for the resolution of 1366×768 as the standard supported resolution because this is the resolution most tablets will have.
• Reusing assets: because both frameworks work with 2D assets we could reuse most assets in the game. This was a huge time saver because designing assets is a big part of the budget when you create a game.

Conclusion

We achieved the goal of being in the Windows Store before launch, so I would say mission accomplished.

• CreateJS is a great framework for building small games. For heavy duty games, it’s still better to go for C++.
• The app we now have can also run perfect in the browser with some minor changes.
• It’s difficult to really know the limitations of the game you are building because at the time of development no real Devices are available. This is especially important for the low-end devices.

Presentation on Windows App Day

I also gave a little presentation about our Bumba app on the Windows App Day.

You can watch it here:

References

Some useful links and references for further reading:

• CreateJS: A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5
• Handling Fullscreen, Snapped and Filled states in Windows 8 Metro Style apps using CSS3 and JavaScript
• HTML5 Gaming: How to animate sprites in Canvas with EaselJS
• Guidelines for scaling to screens (Windows Store apps)
• Creating a Simple Windows 8 Game with JavaScript: Game Basics & CreateJS/EaselJS

I was asked for the AppMeet, a Podcast were App Developers from Belgium and the Netherlands talk about the apps they built. There were some interesting Apps like Parking, Flitsmeister en Juf Jannie (an educational app for little kids). It was fun talking again about my passion project and I got to demo an exclusive preview of our upcoming app.

A nice surprise that day was being asked by the guys from One More Thing to do a small interview for their OMT LIVE. You can see my interview together with Tom Nijs from Netwalk. It was pretty short, but fun experience.

Thanks to the organizers of the MacBeurs for having me, and see you next year!

After releasing the Wee Rockets app, we were trying all possible channels to promote our application. Obviously we wrote to a lot of review sites. Some of them wrote a lovely review, others asked for money but most of them never replied. If you want to read some nice reviews check the Wee Rockets Project page.

So we decided to enter in the AppsMarathon organized by Mobile Monday. It’s an event where Belgian App Developers can pitch their app for 6 minutes and win some prizes. We were selected to present our app among apps like de Snelste Quiz ter wereld (In The Pocket), The BeatBlaster, YouKnowMe? (Boondoggle Life Labs), PatternPanda, … We were up second and it was quite a challenge to keep it under 6 minutes. I guess the presentation went ok, because we got some great feedback afterwards. We also go to talk to a lot of interesting people, and at the end of the night we scored another presentation.

We tweaked our presentation a wee bit, and presented the next day a second time before a group of lovely ladies on the Brussels Girl Geek Dinner organized by Boondoggle Life Labs. It was a great audience and people were very enthusiastic about our app. We event jumped to the Nr1 position in the Kids Games section of the Belgian App Store for a couple of hours. So thanks a lot for having us!

I loved talking about our little passion project. Our next presentation will be at the MacBeurs on November 18th. We’ll be present for the AppMeet with some other Belgian and Dutch App Developers.

You can check out our presentation on Speakerdeck. If you are interested, we would love to tell our story again.

So what’s new in the update:

• More rockets! We launched with a set of 4 rockets and 4×4 different rocket pieces. We doubled the rockets so it’s now twice as much fun to play and create your favorite rockets. Also there is something extra for the little girls playing our game.
• Cute new astronauts! Yes, there is one more little blonde boy astronaut, so now both my sons have their character in the game. How cool is that, being able to launch yourself into space on the iPad. Besides that we added some more ‘wild’ astronauts to the game. They are not human, so you’ll have to play the game to check them out.
• iPhone and iPod support: we made the app universal so now you can also install the app on your iPhone or iPod Touch. We waited for this until version 1.1 because we wanted to get the iPad app out as soon as possible. So if you have bought the iPad app, you now get the iPhone version for free.
• We got some feedback on small issues, so they are fixed too in this version.
• The price will be lowered for a limited amount of time to 0,79€.

What are you waiting for, download it now in the App Store!

Why is this one so special?

Because it’s the first time one of own ideas has come to life as a finalized product. The idea started when I bought this little rocket toy for my youngest son Arthur. It’s a wooden rocket that can be taken apart, and all the parts snap back together through magnets. This toy and the fact that rockets and space are just a very cool subject to work with, made me think about creating a small App for iPad that had to have rockets in it. And the target audience for my App are little boys (and girls) of ages 2/3 and up.

An idea is born!

After that I started creating some sketches on paper how the game should work. The main goal of the game would be building rockets with different combinations of rocket parts. The more parts, the more rockets are possible. And this should be easy to extend afterwards with new rocket parts. But only creating rockets is not enough, you should be able to launch that rocket you just assembled into space and fly with it. Everything must be easy enough that every child in the world should be able to do this without any instructions, because there is no text or voice anywhere in the app.

How did I build it?

I have a fulltime job as a developer at Nascom, so this is a free time project that I worked on in the weekend and evenings. At Nascom I already has some experience by creating applications like Bumba, Bumba in Afrika and Piet Piraat. These apps were targeted at small children and also built with the Cocos2d Game Engine.

I really like the Cocos2d Engine. It’s very powerful and you can quickly get something built that runs smoothly. It was also a very good excuse to experiment with things like particles, animations and parallax scrolling. I used some tools that helped me a lot during the development process. You can read more about that in my post: Must-have Tools for an iOS Game Developer.

I also had some excellent help from my 3 year old son Robbe who was always willing to test out every version of the App. I even had a very early version tested by his class mates and got some excellent feedback.

Why does it look so good?

As you can see from my drawing skills I couldn’t create those stunning assets myself, so I teamed up with Paddy Donnelly who is a great designer but also has some pretty awesome illustration skills. Paddy created all the artwork and animations, and also the very lovely soundtrack of the game.

Where can I get it?

It’s available in the App Store. It’s not free, but I hope that the small fee to download this app won’t stop you from checking it out. We are open for feedback and are already thinking about the next release. Talk to us through Twitter or our Facebook page. One thing is already sure: there will be more different rocket parts to choose from in the next releases.

And remember: This is just a start!

None of these solutions worked for me because the bank account number format probably depends on the country. So for people desperately looking for the solution, this could help if you want to add a bank account for a Belgian Bank (in my case KBC should that matter).

So what do you have to do?

• Go to Contracts, Tax and Banking in iTunes Connect
• Select “Add Bank Account”
• Select the country
• After that you can try to enter the IBAN number, but that didn’t work for me. I tried adding my number (ex. BE20735012345678) without any hyphens. The first 4 characters are the country and bank code, and the next 12 numbers are actually your bank account.
• So I selected the option to look up my Bank, which gave me a long list of choices. I selected option with the 735 number in it, because those are the numbers my account starts with.
• So far so good. But on the next screen you’ll have to add your bank account number. And this is where I got stuck. The solution for me was this. Although the validation specifies that the account number is 12 numbers long, you have to specify the hyphens at the correct position. For example: 735-0123456-78.
• Besides that you also have to enter your IBAN number again. That should be without hyphens and spaces.

That’s it! I hope it can prevent somebody from pulling out his hair

Texture Packer

In Game development everything starts with assets and cocos2d has very good support for texture files. A texture file bundles a lot of graphics for the game in order to optimize memory usage. But creating these file can be very boring if you have to do this manually. And that’s where Texture Packer shines. It’s very difficult to count how many times assets are updated, resized, changes,… during the development process. So in Texture Packer you can automate these tedious jobs into a bash file.

I usually keep one folder that contains all exported graphics called ‘Art’. Every folder inside my Art folder will be converted by my scrip to a texture file. This makes it easy to swap images around. Texture Packer takes care of the rest. The assets are rotated and optimized so that the texture file contains as much assets as possible.

Download Texture Packer

Here you can find a snippet of my script that I use to create the iPad and iPad Retina texture files.

CocosBuilder

Creating scenes through code can be very boring and repetitive work. CocosBuilder is a very basic tool to design these scene already without writing code. It does not add interactivity, but it allows you to position the CCSprites, CCNodes, … using a drag an drop interface. The application reads the assets from the Texture File.

I used it to create the levels for my game. I could easily position all sprites to the scene. Every Level was saved as a ‘.ccb’ file which can be loaded dynamically into your game.

Download CocosBuilder

Particle Designer

If you need particles like I did and don’t want to manually do this, use Particle Designer. You can tweak the particles while a live preview is shown. Your result can be save to a .plist and loaded into your application.

Particles solved a lot of problems form me. We didn’t have to create frame based animations for things like engine fire, explosions, rewards, stars, … There are a lot of examples which you can sue to start from.

Download Particle Designer

Bitbucket

A Version Control System is also one of the most important tools you’ll need from the beginning. There are a lot of free and paying options in the cloud, but currently I am using Bitbucket. Bitbucket is free private Git hosting for a maximum of 5 users, so it’s ideal for small teams.

I mostly use the command line interface for Git to manage my source files. But there are very good dektop apps available like GitX (L) and Github for Mac which can also be used for Git repositories that are not Github.

TestFlight

During development you will need to have your application tested by other users. TestFlight is the best tool out there. I have worked on projects where we had to send ‘.ipa’ files and the user had to install the app through iTunes. With TestFlight this is all a lot easier. Just let your users register their devices through TestFlight, add these devices to your Ad Hoc Provisioning Profile (yes, you’ll still need these) and your are ready to go. Your users can now install the app trough the TestFlight website and are also notified if there is a new version available.

The team recently launched a little desktop app that makes it even easier to upload your build to TestFlight.

Conclusion

I could have created the app without all these tools, but the end result would be a lot less. Now I could focus on developing the app and I didn’t have to worry about creating texture files, figuring out which parameters to tweak for particles and explain my testers how to install the beta version of my app. If you don’t already know these tools, please check them out.

Toca Boca

I mentioned apps from Toca Boca in my previous post, but they keep on releasing amazing digital toys. They also put a lot of though into the design and interactions. The characters are crazy and a little weird sometimes, but they are very original. It’s obvious that all of their apps are great, but here is my favorite top 3 out of their new apps. Yes, you can say I’m a fan and so is my son. So guys if you are listening, we would love to become beta testers.

Toca Store

It’s just the digital version of a Store Play Set that you can take everywhere. The great thing about this app is that your kid will have to play together with you, their sibling or friends.

Toca Kitchen

This app let’s your kid play around with food. They can pick different characters and each character has his or her favorite foods and dislikes. Pick your ingredients from the fridge and prepare them in anyway you like. One more thing: there is also a version with Monsters and it’s Free!

Toca House

Toca House is a great collection of mini games where you’ll have to help the characters do chores around the house. Let your kids do the dishes, ironing, sweeping or planting flowers in the garden. It is a lot of fun.

Sprinkle Jr

Sprinkle Junior is the little brother of the original Sprinkle game. The goal of the game is to put out fires with your little fire engine. I love the interactions and the work they put into creating all those different levels. All levels are completely different and fun. And even I like to pick up this game and play it myself sometimes.

Rocket Speller

Another great idea: Rocket Speller. Who doesn’t love rockets! Well this game isn’t about rockets, it’s about spelling. And although my son doesn’t speak English he still loves to play this game. I guess that has everything to do with the rocket reward system and the little green alien. Too bad that this app isn’t localized, because that would make it even better. So Little Big Thinkers, if you need any help localizing your app for Dutch please contact me. I also do a little development myself, as you can see.

Alien Buddies

Alien Buddies is yet another cool educational app that uses aliens to make learning more fun. It’s a fun way of learning about letters, numbers, colors and shapes. The interface is very easy and all you have to do is to drag the correct alien into the little spaceship.

Pepi Bath

Pepi Bath teaches kids stuff about normal tasks like washing, pooping, taking a bath, … It is a funny app with nice graphics.

Letterschool

Last but not least another educational app that helps kids to write letters: LetterSchool. It’s an awesome app with lots of animations and fun interactions. And the best part is that there is a Dutch version! So thanks @jhml for the tip!

This list is far from complete, so you can expect some more blog posts around this topic. If you have any other good apps for kids to share with me, please comment.

Disney’s AppMATEs

One of the latest games built by Disney uses little toy cars to play the game. The characters all behave a bit different and have their own features. So it’s an excellent example on how to connect a physical toy with a video game. I haven’t tried it out yet, but when I do I will let you know.

LEGO: Life Of George

There have been some LEGO apps in the App Store for some time, but the next app is a prefect bridge between the real world of LEGO and the virtual LEGO world in the App Store. The goal is to recreate the image you get on the phone as fast as you can. When you finish the job, take a picture and the app will tell you how correct it was.

Griffin: RC Helicopter

Yes, the AR Drone Parrot is Awesome. But if you want a more affordable toy, then checkout this remote controlled Helicopter by Griffin. You can find more information about the Helicopter here.

Thinkgeek: iCade

If you like Arcade games then this is the Ultimate asset to your Geek collection. It has support for a lot of games in the App Store. So replay all the Atari games from when you were young with this amazing iPad “Dock”.

Griffin: Crayola ColorStudio HD

This is a great idea because I find drawing and coloring apps on an iPad not that useful because you have to use your finger. It’s not that natural to draw with your finger and you cannot get that much detail. So the idea of a stylus that can be used to draw/color/write is great. Does it work that good in reality, I have no clue?

Bamboo Stylus for iPad

If you want to really throw away your paper notebooks, the Bamboo Stylus by Wacom looks like one of the best options to buy. And they have their own awesome notes app.

Conclusion

There are a lot of innovative developers out there and if you have the resources to create the extra necessary hardware, you can do a lot of interesting stuff with the iDevices. This list is brief and there are certainly a lot more cases like this. If you have anything interesting like this please feel free to comment on my post.