[Tutorial] How to use AdMob with Cocos2d-js and Android

Welcome!

In this post, I’m going to show you how to use AdMob with your Cocos2d-js or Cocos2d-html5 game! We are going to use Plugin-x to easily integrate with banner ads. Here I’ll show how to use AdMob with Android, but it’s also compatible with iOS.

Let’s take a look!

I - About Cocos2D-js

To write this post, I tested with this game, you can check it working here: banner

Cocos2d-JS https://github.com/cocos2d/cocos2d-js is an open source game engine for web games and native games. It has a high performance, is user-friendly and supports multi-platform development. Supported platforms include web, Android, iOS, Windows Phone 8, Mac, Windows, etc. Cocos2d-JS makes 2D game programming easier and faster. It clarifies the key components of 2D game programming by being easy to learn and having an easy to use API. All of this combined makes it an outstanding framework compared to others. Cocos2d-JS is the HTML5 version of Cocos2d-x, includes Cocos2d-html5 and Cocos2d-x JavaScript Binding (JSB). Using Cocos2d-JS, you can write games in JavaScript and run your games on browsers that support HTML5. The API is completely compatible between Cocos2d-html5 and Cocos2d-x JSB. This means that Cocos2d-JS games can be run using Cocos2d's "JavaScript Binding" on Cocos2d-x without or with very little modification.

It’s my favorite game engine! And now, Cocos support 3D game development! Ok, let’s return to the tutorial…

You can read this forum post, it’s my source to this post.

II - Plugin-X

We are going to use Cocos2d-x Plugin-x.

This plugin is also compatible with iOS, but I tested only on Android. To use this plugin, your system needs:

III - Build plugins

Go to your Cocos2d-js game folder and execute the script bellow:

frameworks/js-bindings/cocos2d-x/plugin/tools/publish.sh

This script will ask you the ant, ndk and sdk paths, and then build the lib. Check the output, to try to identify possible errors.

IV - Linking Android AdMob with Android cocos project

Now, to link the Plugin-x with your Android project, add the next lines in your frameworks/runtime-src/proj.android/jni/Android.mk:

LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static
$(call import-module,cocos2d-x/plugin/jsbindings)

Just make sure to add the $(call …) to the last line of the file and LOCAL_… before the include $(BUILD_SHARED_LIBRARY) line.

This is my Android.mk:

LOCAL_PATH := $(call my-dir)
include $(CLEAR_VARS)
LOCAL_MODULE := cocos2djs_shared
LOCAL_MODULE_FILENAME := libcocos2djs
LOCAL_SRC_FILES := hellojavascript/main.cpp \
../../Classes/AppDelegate.cpp
LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes
LOCAL_STATIC_LIBRARIES := cocos_jsb_static
LOCAL_EXPORT_CFLAGS := -DCOCOS2D_DEBUG=2 -DCOCOS2D_JAVASCRIPT
LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static

include $(BUILD_SHARED_LIBRARY)
$(call import-module,bindings)
$(call import-module,cocos2d-x/plugin/jsbindings)

Now, on frameworks/runtime-src/proj.android/jni/hellojavascript/main.cpp, add:

#include "PluginJniHelper.h"

void cocos_android_app_init (JNIEnv* env, jobject thiz) {
	LOGD("cocos_android_app_init");
	AppDelegate *pAppDelegate = new AppDelegate();
	JavaVM* vm;
	env->GetJavaVM(&vm);
	PluginJniHelper::setJavaVM(vm);
}

On frameworks/runtime-src/Classes/AppDelegate.cpp, edit your file and pay attention to add the lines in the correct place:

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
#include "jsb_cocos2dx_pluginx_auto.hpp"
#include "jsb_pluginx_extension_registration.h"
#endif

bool AppDelegate::applicationDidFinishLaunching() {

	ScriptingCore* sc = ScriptingCore::getInstance();

	...

		// Add these lines before sc->start()
		#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS || CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
		sc->addRegisterCallback(register_all_pluginx_protocols);
		sc->addRegisterCallback(register_pluginx_js_extensions);
	#endif

	sc->start();

	...

	return true;
}

On frameworks/runtime-src/proj.android/build-cfg.json, edit:

Add this new path to ndk_module_path :

../../js-bindings/cocos2d-x/plugin/publish

Add following paths to copy_resources:

  
{
	"from": "../../js-bindings/cocos2d-x/plugin/jsbindings/script",
	"to": ""
},
{
	"from": "../../js-bindings/cocos2d-x/plugin/protocols/proj.android/src",
	"to": "../src"
},
{
	"from": "../../js-bindings/cocos2d-x/plugin/plugins/admob/proj.android/src",
	"to": "../src"
},
{
	"from": "../../js-bindings/cocos2d-x/plugin/plugins/admob/proj.android/sdk",
	"to": "../libs"
}

Now, edit the file: frameworks/runtime-src/proj.android/src/ … /AppActivity.java

We need to add a new import: org.cocos2dx.plugin.PluginWrapper;

And edit your onCreateView() method like this one:

	@Override
	public Cocos2dxGLSurfaceView onCreateView() {
		Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);
		glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);
		PluginWrapper.init(this);
		PluginWrapper.setGLSurfaceView(glSurfaceView);
		return glSurfaceView;
	}

V - Almost done

Now, copy the following folders:

  • copy js-bindings/cocos2d-x/plugin/jsbindings/auto  to js-bindings/bindings/auto
  • copy js-bindings/cocos2d-x/plugin/jsbindings/manual to js-bindings/bindings/manual

In your Android.manifest, make sure to have the following permissions:

<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

And before your </application> add the following activity:

<activity
	android:name="com.google.ads.AdActivity"
	android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/>

This activity is required to show the AdMob ads in your Android cocos project.

VI - Let’s show it!

Now, you are probably able to monetize your Cocos2d-js app with AdMob! Before adding some banner, first check if it is working. Just build and run your app on Android. If you get any error, feel free to comment here and I can try to help you. If everything is working, you can use the following js to show a banner:

	var AdMob = plugin.PluginManager.getInstance().loadPlugin(&amp;quot;AdsAdmob&amp;quot;);
	var m = {
		'AdmobID' : 'your_admob_id',
		'AdmobType' : '1',
		'AdmobSizeEnum' : '1'
};

	AdMob.configDeveloperInfo(m);
	AdMob.showAds(m, 2);

On AdMob.showAds(m, 2);, you can use the following numbers: 1. Top-center banner 2. Top-left banner 3. Top-right banner 4. Bottom-center banner 5. Bottom-left banner 6. Bottom-right banner

That’s it, if you have any problem, feel free to ask. Thanks for reading!

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Developing Android Background Services

### Welcome!In this post, I'll show you how to develop background services on Android Studio. We'll see two type of services: `Service` a...… Continue reading