Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Game development, HTML5, iOS, Javascript and Monetize.

In a previous post I showed you how to go from HTML5 to iOS native game with PhoneGap in order to publish your HTML5 games on the App Store, now it’s time to see how to include ads into your free game.

If you follow me on Facebook or Twitter, you know I had a lot of trouble in including ads into my PhoneGap games, mostly because I was trying to use the official Leadbolt plugin which did not work as it seems to be a little outdated – in their tutorial they also say to use phonegap local plugin add when local is deprecated.

So, thanks to some suggestions from loyal readers and fans I really want to thank, I was pointed to AdMob and the whole process was really easy, let me explain how to do that. If you didn’t already, register for an AdMob account.

Let’s start clicking on “Monetize new app” button.

If it’s a new app, one you still have to publish, select “Add your app manually” tab, give your app a name, select the platform – iOS in this case – then click on “Add app”

Now it’s time to choose ad format, I am showing you how to create an interstitial, giving it a name and saving it, but the process is the same for the banner. You should add them both.

Write down your ad unit ID, then create the banner Ad type if you didn’t already. You should end with two Ad unit IDs, one for the banner and the other for the interstitial.

Time to switch to our terminal and apply some of the concepts already seen in the post from HTML5 to iOS native game with PhoneGap, starting with the creation of the project:

phonegap create ninJump com.emanueleferonato.ninjump ninJump -d

Then once the project has been created, let’s move in its folder

cd ninjump

and then install the AdMob plugin

phonegap plugin add com.google.cordova.admob

this will automatically install the plugin “AdMob Plugin Pro“.

Add your HTML5 game as shown in the previous step and launch the build

phonegap build ios

your Xcode project is finally ready.

Finally it’s time to open Xcode, and to check if the plugin has been correctly installed, check “Plugins” folder and “config.xml” file inside “Staging” folder. This file should have something like this:

<feature name="AdMob">
	<param name="ios-package" value="CDVAdMobPlugin" />
	<param name="onload" value="true" />
</feature>

With the latest versions of PhoneGap, plugins are listed in config.xml as “feature” while previously were listed as “plugin“.

Now we are ready to include banners and interstitials into our game, but we need to pay some attention to a couple of code tricks: first, in the index.html file you should include the call to cordova.js. This is what I made in my Phaser game:

<!DOCTYPE html>
<html>
    <head>
        <script src="cordova.js"></script>
        <script src="phaser.min.js"></script>
        <script src = "game.js"></script>
        <style>
            body{
                margin:0px;
                padding:0px;
            }
        </style>
    </head>
    <body>
    </body>
</html>

The game itself should start with a “deviceready” event listener, this way:

document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady(){
	// my game
}

To show a banner, use createBanner method:

AdMob.createBanner({
	adId: "ca-app-pub-2062493463858889/7200177030", // AdMob banner ID
	position: AdMob.AD_POSITION.BOTTOM_CENTER, // position
	autoShow: true, // show it once it's ready
	overlap:true, // overlap the game, so it won't steal space to canvas
	isTesting: true // show a demo ad
});

Look how does it look in the emulator:

To create an interstitial, first preload it some time before it’s needed, such as at the beginning of a level

AdMob.prepareInterstitial({
	adId:"ca-app-pub-2062493463858889/4944714634", // AdMob interstitial ID
	autoShow:false // don't show now
});

then show it!

AdMob.showInterstitial();

And here it is how this stuff will look in your emulator:

And now you are able to use AdMob ads in your HTML5 games ported to iOS with PhoneGap.

Next stop, Game Center.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.