« SDKBOX Home

SDKBOX for Cocos Creator

How to integrate SDKBox Plugin to Cocos Creator project


Environment

Before you start, make sure you have both CocosCreator and SDKBox Installer

Create new Cocos Creator Project

Create Project SDKBoxTutorial like follow:

Add buttons

add two button to scene, design ui like follow:

Create JavaScript Component

create javascript commponent, name it AdMob.js, i will integrate AdMob the this project. add three empty function to AdMob.js, also add admob initialize code in onLoad function like follow:

cc.Class({

    ...

    onLoad: function () {
        //Add this line to onLoad
        this.admobInit();
    },

    ...

    admobInit: function() {
        //finish it after import admob, let it empty for now
    },

    cacheInterstitial: function() {
        //finish it after import admob, let it empty for now
    },

    showInterstitial: function() {
        //finish it after import admob, let it empty for now
    },

    ...

});

Attach AdMob.js to Canvas

associate button click event to AdMob.js

Run In Simulator

check if every thing is ok.

Build Project

open build window Menu->Project->Build or (Command + Shift + B)

Build iOS

Build Android

Build->Compile

Make sure everything is okey

Import AdMob to CocosCreate project

Configuration AdMob

Important: Make sure backup sdkbox_config.json, ./build/jsb-default/res will be removed every time after Build Project in Cocos Creator build windows

Finish AdMob.js empty function

cc.Class({

    ...

    admobInit: function() {
        if(cc.sys.isMobile) {
            var self = this
            sdkbox.PluginAdMob.setListener({
                adViewDidReceiveAd: function(name) {
                    self.showInfo('adViewDidReceiveAd name=' + name);
                },
                adViewDidFailToReceiveAdWithError: function(name, msg) {
                    self.showInfo('adViewDidFailToReceiveAdWithError name=' + name + ' msg=' + msg);
                },
                adViewWillPresentScreen: function(name) {
                    self.showInfo('adViewWillPresentScreen name=' + name);
                },
                adViewDidDismissScreen: function(name) {
                    self.showInfo('adViewDidDismissScreen name=' + name);
                },
                adViewWillDismissScreen: function(name) {
                    self.showInfo('adViewWillDismissScreen=' + name);
                },
                adViewWillLeaveApplication: function(name) {
                    self.showInfo('adViewWillLeaveApplication=' + name);
                }
            });
            sdkbox.PluginAdMob.init();
        }
    },

    cacheInterstitial: function() {
        if(cc.sys.isMobile) {
            sdkbox.PluginAdMob.cache('gameover');
        }
    },

    showInterstitial: function() {
        if(cc.sys.isMobile) {
            sdkbox.PluginAdMob.show('gameover');
        }
    },

    ...

});

Build Cocos Creator Again

Menu->Project->Build or (Command + Shift + B)

Build->Compile

make sure AdMob.js will sync to ./build/jsb-default project

Build & Run

Test AD

Admob provide some test ad IDs.

AdMob iOS Test Ad: https://developers.google.com/admob/ios/test-ads

Android iOS Test Ad: https://developers.google.com/admob/android/test-ads

IMPORTANT

Make sure backup sdkbox_config.json, ./build/jsb-default/res will be removed every time after Build Project in Cocos Creator build windows