Integrate Audience Network with Cocos2d-x Games (Beta)

You can use Audience Network C++ SDK to display ads in your C++ apps. This guide demonstrates how to include Audience Network C++ SDK (v1.0.3 beta) into a newly created Cocos2d-x project.

Download Audience Network C++ SDK

Prerequisites

iOS

Ensure that you have the latest Xcode installed.

Android

Ensure that you have the latest Android Studio installed.

Cocos2d-x

Check Cocos2d-x setup page to configure and create a new Cocos2d-x project.

Getting Started Steps

Step 1: Creating a Sample Cocos2d-x Game

Step 2: Setup for iOS

Step 3: Setup for Android

Step 1: Creating a Sample Cocos2d-x Game

  1. Download the latest Cocos2d-x platform. We will use Cocos2d-x-3.15.0 in this document. Check Cocos2d-x sample setup

  2. Download Audience Network C++ SDK, extract the file and save it to cocos2d-x-3.15.0-x folder.

  3. To create a sample Cocos2d-x Game, go to cocos2d-x-3.15.0-x folder and run the following command:
    cocos new {AppName} -p com.{MyCompanyName}.{AppName} -l cpp -d ./{MyCompanyName}
    We will use {AppName} and {MyCompanyName} to refer the parameters you used here.

  4. Verify that {MyCompanyName}/{AppName} is created by cocos2d-x-3.15.0-x, extract and copy facebook_audiencenetwork_cpp_sdk to {MyCompanyName}/{AppName} folder.
  5. Copy assets files as following:
    cp facebook_audiencenetwork_cpp_sdk/samples/assets/* {MyCompanyName}/{AppName}/Resources/

After the Cocos2d-x platform is setup and the Audience Network C++ SDK is downloaded, you can choose to setup for iOS target or Android target in the following section.

This setup guide would assume that you have created the project as described above. The exact folder paths would differ according to your projects.

Step 2: Setup for iOS

The following steps explain how to import the Audience Network C++ SDK into a newly created Cocos2d-x iOS project.

  1. Go to {MyCompanyName}/{AppName}/proj.ios_mac folder and open {AppName}.xcodeproj.
    Set target to be your iOS device. Build and run the {AppName} using latest Xcode.
    You should be able to get the sample HelloWorldScene running on the iOS device.

  2. Copy the source code of the sample app and asset files to {MyCompanyName}/{AppName}/Classes folder.
    After the files are copied, drag and drop Classes/*.cpp and *.h files to the Classes group folder in {MyCompanyName}/{AppName}/proj.ios_mac.
    Drag and drop facebook_audiencenetwork_cpp_sdk/samples/assets to {MyCompanyName}/{AppName}/proj.ios_mac/ios.
    cp facebook_audiencenetwork_cpp_sdk/*.cpp to {MyCompanyName}/{AppName}/Classes
    cp facebook_audiencenetwork_cpp_sdk/*.h to {MyCompanyName}/{AppName}/Classes 
    cp facebook_audiencenetwork_cpp_sdk/samples/assets to {MyCompanyName}/{AppName}/proj.ios_mac/ios

  3. Add the native AudienceNetworkSDK and AudienceNetwork C++ library to your app:
    Drag and drop /facebook_audiencenetwork_cpp_sdk/libs/ios/libFBAudienceNetwork.a and /facebook_audiencenetwork_cpp_sdk/frameworks/ios/FBAudienceNetwork.framework to the Frameworks group folder in the {AppName}.xcodeproj in Xcode.

    Click "copy items if needed". This will copy the library files to the project folder.


  4. In the Build Settings tab, add the following to Search Paths section:
    Header Search Paths: ../facebook_audiencenetwork_cpp_sdk/include

  5. In the General tab, add the following to the Linked Frameworks and Libraries section: StoreKit.framework, CoreMedia.framework, CoreVideo.framework
    In the Device Orientation section: select "Portrait" only.

  6. Set target to iOS device and run. You should be able to load and show InterstitialAd and RewardedVideo ads in this sample app on your iOS device as following:

Step 3: Setup for Android

The following steps explain how to import the Audience Network C++ SDK into a newly created Cocos2d-x Android Studio project.

  1. Open Android Studio and choose import the project using Gradle.
    Select the Gradle file from {MyCompanyName}/{AppName}/proj.android-studio folder.
    Set target to be your Android device. Build and run the {AppName} using latest Android Studio.
    You should be able to get the default cocos sample HelloWorldScene running on the Android device.

  2. Copy the source code of the sample app and native AudienceNetwork SDK to your Cocos2d-x app:
    cp facebook_audiencenetwork_cpp_sdk/include/*.h {MyCompanyName}/{AppName}/Classes/
    cp facebook_audiencenetwork_cpp_sdk/samples/*.h {MyCompanyName}/{AppName}/Classes/
    cp facebook_audiencenetwork_cpp_sdk/samples/*.cpp {MyCompanyName}/{AppName}/Classes/
    cp facebook_audiencenetwork_cpp_sdk/samples/android/*.java {MyCompanyName}/{AppName}/proj.android-studio/app/src/org/cocos2dx/cpp/
    cp facebook_audiencenetwork_cpp_sdk/frameworks/android/ads-release.aar {MyCompanyName}/{AppName}/proj.android-studio/app/libs/
    cp facebook_audiencenetwork_cpp_sdk/frameworks/android/android-support-v4.jar  {MyCompanyName}/{AppName}/proj.android-studio/app/libs/
  3. Open Android Studio and import the project using Gradle from {MyCompanyName}/{AppName}/proj.android-studio
    Open build.grandle from project level and add the following to repositories:
    flatDir {
       dirs 'libs'
    }
  4. Open build.gradle from app level. Make sure the following is set. After that, sync build.gradle to make sure it passed successfully.
    android {
        compileSdkVersion 22
        buildToolsVersion "22.0.1"
        defaultConfig {
        applicationId "com.{MyCompanyName}.{AppName}"
        minSdkVersion 11
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ...
        }
    }
    
    // Add Audience Network Android SDK 'ads-release.aar' to the dependencies:
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        compile(name: 'ads-release', ext: 'aar')
        compile project(':libcocos2dx')
    }
    // Set the targets of ndkBuild of externalNativeBuild to your app name as follows:
    
    externalNativeBuild {
        ndkBuild {
            if (!project.hasProperty("PROP_NDK_MODE") || PROP_NDK_MODE.compareTo('none') != 0) {
                // skip the NDK Build step if PROP_NDK_MODE is none
                targets '{AppName}'
                //...
            }
        }
    }
  5. Check Android.mk from facebook_audiencenetwork_cpp_sdk/samples folder as reference.
    Open Android.mk from app/jni folder in Project Files panel. Set Facebook Audience Network C++ SDK path as follows:
    LOCAL_PATH := $(call my-dir)
    
    FBAUDIENCENETWORK_CPP_SDK_DIR := ../../../facebook_audiencenetwork_cpp_sdk/
    
    APP_ABI := armeabi-v7a x86
    FBAUDIENCENETWORK_LIBRARY_PATH := $(FBAUDIENCENETWORK_CPP_SDK_DIR)/libs/android/$(TARGET_ARCH_ABI)
    
    include $(CLEAR_VARS)
    LOCAL_MODULE := facebook_audiencenetwork_app
    LOCAL_SRC_FILES := $(FBAUDIENCENETWORK_LIBRARY_PATH)/libFBAudienceNetwork.so
    LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)/$(FBAUDIENCENETWORK_CPP_SDK_DIR)/include
    include $(PREBUILT_SHARED_LIBRARY)
    
    include $(CLEAR_VARS)

    This setup guide assumes that you have created the project as described above. The exact SDK folder paths might be different if you didn't follow the same setup.

  6. In Android.mk file, set local source files path as follows:
    LOCAL_MODULE := {AppName}_shared
    LOCAL_MODULE_FILENAME := lib{AppName}
    LOCAL_SRC_FILES := hellocpp/main.cpp \
    ../../../Classes/AppDelegate.cpp \
    ../../../Classes/InterstitialAdScene.cpp \
    ../../../Classes/RewardedVideoAdScene.cpp
  7. In Android.mk file, set local shared libraries as follows:
    LOCAL_SHARED_LIBRARIES := facebook_audiencenetwork_app
    include $(BUILD_SHARED_LIBRARY)
  8. In AndroidManifest.xml, change android:screenOrientation to "portrait".
    Make sure your app name {AppName} is set correctly to tell Cocos2dxActivity the name of our .so as follows:
    <meta-data android:name="android.app.lib_name" android:value="{AppName}" /> 
  9. From cmd window in cocos2d-x-3.15.0-x dir, run the following to compile the project for armeabi-v7a architecture:
    cocos compile -s ~/cocos2d-x-3.15.0/{MyCompanyName}/{AppName} -p android --android-studio --ap android-22 --app-abi armeabi-v7a -o ~/cocos2d-x-3.15.0/{MyCompanyName}/{AppName}/bin
  10. From Android Studio, click run and set the target to your Android device. You should be able to load and show InterstitialAd and RewardedVideo ads in this sample app on your Android device as following: