Magpie = Cocos2d-X + Cordova Plugins

Framework for Cocos2d-X C++ based game to call hundreds of Cordova/PhoneGap plugins

Taking advantage of both projects:

  • Cocos2d-X, the most popular open source game engine. Develop game with C++/javascript/lua, hardware acceleration with OpenGL, excellent performance.
  • Cordova, hundreds of existing plugins to access native functionalities and 3rd party SDKs.

Note: it's NOT a plugin for normal Cordova/PhoneGap app, but a plugin framework for Cocos2d-X.

Project Status

  • Framework works on Android and iOS.
  • Utility CLI magpie.js finished.
  • Documentation and example code.


Magpie Bridge Architecture

How to Use?

Requirement: Following tools need be installed first.

  • git
  • node.js
  • cordova

Step 1: Download Magpie Framework and CLI:

git clone ~/magpie

Step 2: Migrate Cocos2d-X project and add Magpie Framework:

Usually, a cocos2d-x project is located at: COCOS2DX/projects/GameName. Run following commands:

~/magpie/cli/magpie.js /path/to/cocos2d-x/projects/GameName

A new project root will be created at.

# <project_root> = /path/to/cocos2d-x/proj_GameName

Step 3: Use Cordova CLI to add Plugins

cd <project_root>
cordova plugin add <plugin_id_or_path>

Step 4: Write C++ code to call Plugins, build and run.

Folder Structure

Cocos2d-X Project After Migrate to Magpie
Screenshot Screenshot

Interface of Cordova Plugin

A typical folder structure of a Cordova plugin looks like:

Screenshot is the documentation for plugin. Example:

The .js file under www, describe the call interface, like:

cordova.exec( successCallback, failureCallback, 'AdMob', 'createBanner', [ options ] );


In Cocos2d-X project, using Magpie to call the plugin interface with C++, see following example code.

Example C++ Code

This is an example to use C++ to call Cordova AdMob Plugin in Cocos2d-X game.

#define BANNER_ADID         "ca-app-pub-6869992474017983/9375997553"
#define INTERSTITIAL_ADID   "ca-app-pub-6869992474017983/1657046752"
#define BANNER_ADID         "ca-app-pub-6869992474017983/4806197152"
#define INTERSTITIAL_ADID   "ca-app-pub-6869992474017983/7563979554"

bool GameScene::init() {
    if ( ! BaseScene::init() ) {
        return false;

    // create banner
    string args = "";
    args = args + "[{"
        "\"adId\":\"" + BANNER_ADID + "\","
    Magpie::instance()->execute("AdMob", "createBanner", args.c_str(), NULL, NULL);

    return true;

void GameScene::onGameStart() {
    string args = "";
    args = args + "[{\"adId\":\"" + INTERSTITIAL_ADID + "\", \"autoShow\":false}]";
    Magpie::instance()->execute("AdMob", "prepareInterstitial", args.c_str(), NULL, NULL);

void GameScene::onGameOver() {
    Magpie::instance()->execute("AdMob", "showInterstitial", "[]", NULL, NULL);

Project Example

Here is a demo project "MagpieDemo", use Cordova AdMob Plugin in Cocos2d-X Game.

Where to Get More Cordova Plugins?

Apache Cordova Official Plugin Registry:


There are more than 300+ plugins so far, including Apache Cordova official plugins for camera, contacts, motion, etc.

Why named "Magpie"?

It comes from the Chinese legend, Magpie Bridge over the the Milky Way, which bring the separated lovers together.

Magpie Bridge


Magpie project is created by Raymond Xie. (floatinghotpot @ github)

It's based on the Cordova/Phonegap Framework.