SDKBOX for Cocos Creator

Installation

  1. Download SDKBoxHelper Windows or SDKBoxHelper Mac

  2. install SDKBox Installer by run command sdkboxhelper

  3. install SDKBox GUI For Creator by run command sdkboxhelper -t creator -p path/to/creator_project

Note:

Install SDKBox GUI For Creator Manually

sdkboxhelper -t creator -p path/to/creator_project will install SDKBox GUI For Creator locally.

if you want to install SDKBox GUI For Creator global.

packages
|--sdkbox
    |--app
    |--main.js
    |--package.json

Starting Cocos Creator 1.4 developer can install SDKBOX plugin from Extension Store

Once installed successfully, a new menu entry named "SDKBox" will be added to Cocos Creator

Integration

Before integrating SDKBOX plugins make sure you generate the iOS/Android build for your Cocos Creator projects first

After Intergration

Once you finish integrate the SDK, you should be able to use it with javascript code. Here we'll use Admob SDK as an example

Add buttons

add two button to scene, design ui like follow:

Create JavaScript Component

create javascript commponent, name it AdMob.js, 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

Configuration AdMob

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