-- >> Chin Cheng Hong << --: August 2015

Welcome

I had google a lot tutorial about how to use AdMob with your Cocos2D-X 3.7 which are the version Cocos2d-JS is merged into Cocos2d-x, we are going to use Plugin-x to easily integrate with banner ads. The only nearest tutorial I can get is this which is Jan/2015 using Cocos 3.0. So I refer it and modify to 3.7.

Let’s take a look!

Tools Version Used :

Windows : 8.1 64bits

Android : 4.4W

Android SDK : adt-bundle-windows-x86_64-20140702 (android-20 only

NDK : android-ndk-r10e(64-bits) or NDK home

ANT : apache-ant-1.9.6
JDK : JDK1.7.0_55

Cocos : cocos2d-x-3.7 (Download from Cocos Site, not from Cocos Shop)

CocosForWin : v2.3.1.1
Cocos Code IDE : 2.0.0-beta

Python : 2.7.10

CgyWin : cygwin-setup-x86.exe must with Devel - MAKE

Cocos Code IDE Setting page

Cocos Setting

Cocos Framework Setting

New Cocos JS Project

Name it

Add Native Codes Support

SDK Manager
Go to adt-bundle-windows-x86_64-20140702/SDK Manager.exe download Google Play Services

Files / Folders we deal with ...
1. Frameworks \ Cocos2d-x
2. Frameworks \ runtime-src
3. Src \ app.js

1. Frameworks \ Cocos2d-x
Because I only install android-20 (API20) 4.4W, so I have to change the Admob plugin target to android-20. If you are downloading full android SDK, just ignore this.

frameworks/cocos2d-x/plugin/protocols/proj.android/
project.properties
frameworks/cocos2d-x/plugin/plugins/admob/proj.android/
project.properties

Open Cygwin cd frameworks/cocos2d-x/plugin/tools/
publish.sh

NDK Path

SDK Path

ANT Path

2. Frameworks \ runtime-src
frameworks/runtime-src/proj.android/jni/
Android.mk(25,29)

	LOCAL_PATH := $(call my-dir)

	include $(CLEAR_VARS)

	LOCAL_MODULE := cocos2djs_shared

	LOCAL_MODULE_FILENAME := libcocos2djs

	LOCAL_ARM_MODE := arm

	LOCAL_SRC_FILES := \
	../../Classes/AppDelegate.cpp \
	../../Classes/ide-support/SimpleConfigParser.cpp \
	../../Classes/ide-support/RuntimeJsImpl.cpp \
	hellojavascript/main.cpp

	LOCAL_C_INCLUDES := \
	$(LOCAL_PATH)/../../Classes \
	$(LOCAL_PATH)/../../../cocos2d-x/tools/simulator/libsimulator/lib \
	$(LOCAL_PATH)/../../../cocos2d-x/tools/simulator/libsimulator/lib/protobuf-lite


	LOCAL_STATIC_LIBRARIES := cocos2d_js_static
	LOCAL_STATIC_LIBRARIES += cocos2d_simulator_static
	LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static //<-- Add This

	include $(BUILD_SHARED_LIBRARY)

	$(call import-module,plugin/jsbindings) //<-- Add This
	$(call import-module,scripting/js-bindings/proj.android)
	$(call import-module,tools/simulator/libsimulator/proj.android)

view raw android.mk hosted with ❤ by GitHub

frameworks/runtime-src/proj.android/jni/hellojavascript/
main.cpp(8,19-21)

	#include "AppDelegate.h"
	#include "cocos2d.h"
	#include "platform/android/jni/JniHelper.h"
	#include <jni.h>
	#include <android/log.h>
	#include "ide-support/SimpleConfigParser.h"
	// Add This
	#include "PluginJniHelper.h"

	#define LOG_TAG "main"
	#define LOGD(...) __android_log_print(ANDROID_LOG_DEBUG,LOG_TAG,__VA_ARGS__)

	using namespace cocos2d;

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


	extern "C"
	{
	bool Java_org_cocos2dx_javascript_AppActivity_nativeIsLandScape(JNIEnv *env, jobject thisz)
	{
	return SimpleConfigParser::getInstance()->isLanscape();
	}

	bool Java_org_cocos2dx_javascript_AppActivity_nativeIsDebug(JNIEnv *env, jobject thisz)
	{
	#if (COCOS2D_DEBUG > 0)
	return true;
	#else
	return false;
	#endif
	}
	}

view raw main.cpp hosted with ❤ by GitHub

frameworks/runtime-src/Classes/

	LOCAL_PATH := $(call my-dir)

	include $(CLEAR_VARS)

	LOCAL_MODULE := cocos2djs_shared

	LOCAL_MODULE_FILENAME := libcocos2djs

	LOCAL_ARM_MODE := arm

	LOCAL_SRC_FILES := \
	../../Classes/AppDelegate.cpp \
	../../Classes/ide-support/SimpleConfigParser.cpp \
	../../Classes/ide-support/RuntimeJsImpl.cpp \
	hellojavascript/main.cpp

	LOCAL_C_INCLUDES := \
	$(LOCAL_PATH)/../../Classes \
	$(LOCAL_PATH)/../../../cocos2d-x/tools/simulator/libsimulator/lib \
	$(LOCAL_PATH)/../../../cocos2d-x/tools/simulator/libsimulator/lib/protobuf-lite


	LOCAL_STATIC_LIBRARIES := cocos2d_js_static
	LOCAL_STATIC_LIBRARIES += cocos2d_simulator_static
	LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static //<-- Add This

	include $(BUILD_SHARED_LIBRARY)

	$(call import-module,plugin/jsbindings) //<-- Add This
	$(call import-module,scripting/js-bindings/proj.android)
	$(call import-module,tools/simulator/libsimulator/proj.android)

view raw android.mk hosted with ❤ by GitHub

AppDelegate.cpp(16-19,24-27)

	#include "AppDelegate.h"
	#include "SimpleAudioEngine.h"

	#if (CC_TARGET_PLATFORM != CC_PLATFORM_LINUX)
	#include "ide-support/CodeIDESupport.h"
	#endif

	#if (COCOS2D_DEBUG > 0) && (CC_CODE_IDE_DEBUG_SUPPORT > 0)
	#include "runtime/Runtime.h"
	#include "ide-support/RuntimeJsImpl.h"
	#else
	#include "js_module_register.h"
	#endif

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

	...
	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();
	sc->runScript("script/jsb_boot.js");
	...

	return true;
	}

view raw AppDelegate.cpp hosted with ❤ by GitHub

frameworks/runtime-src/proj.android/
build-cfg.json
ndk_module_path
copy_resources
build-cfg.json

	{
	"ndk_module_path" :[
	"../../cocos2d-x",
	"../../cocos2d-x/cocos",
	"../../cocos2d-x/external",
	"../../cocos2d-x/plugin/publish"
	],
	"copy_resources": [
	{
	"from": "../../../src",
	"to": "src"
	},
	{
	"from": "../../../res",
	"to": "res"
	},
	{
	"from": "../../../main.js",
	"to": ""
	},
	{
	"from": "../../cocos2d-x/plugin/jsbindings/script",
	"to": ""
	},
	{
	"from": "../../cocos2d-x/plugin/protocols/proj.android/src",
	"to": "../src"
	},
	{
	"from": "../../cocos2d-x/plugin/plugins/admob/proj.android/src",
	"to": "../src"
	},
	{
	"from": "../../cocos2d-x/plugin/plugins/admob/proj.android/sdk",
	"to": "../libs"
	}
	],
	"must_copy_resources": [
	{
	"from": "../../cocos2d-x/cocos/scripting/js-bindings/script",
	"to": "script"
	},
	{
	"from": "../../../config.json",
	"to": ""
	},
	{
	"from": "../../../project.json",
	"to": ""
	}
	]
	}

view raw build-cfg.json hosted with ❤ by GitHub

frameworks/runtime-src/proj.android/src/org/cocos2dx/javascript/
AppActivity.java(36,66,67)

	/****************************************************************************
	Copyright (c) 2008-2010 Ricardo Quesada
	Copyright (c) 2010-2012 cocos2d-x.org
	Copyright (c) 2011 Zynga Inc.
	Copyright (c) 2013-2014 Chukong Technologies Inc.

	http://www.cocos2d-x.org

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in
	all copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	THE SOFTWARE.
	****************************************************************************/
	package org.cocos2dx.javascript;

	import org.cocos2dx.lib.Cocos2dxActivity;
	import org.cocos2dx.lib.Cocos2dxGLSurfaceView;
	import android.content.pm.ActivityInfo;
	import android.net.wifi.WifiInfo;
	import android.net.wifi.WifiManager;
	import android.os.Bundle;
	import android.view.WindowManager;
	import org.cocos2dx.plugin.PluginWrapper; // Add This


	// The name of .so is specified in AndroidMenifest.xml. NativityActivity will load it automatically for you.
	// You can use "System.loadLibrary()" to load other .so files.

	public class AppActivity extends Cocos2dxActivity{

	static String hostIPAdress = "0.0.0.0";
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	// TODO Auto-generated method stub
	super.onCreate(savedInstanceState);

	if(nativeIsLandScape()) {
	setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
	} else {
	setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT);
	}
	if(nativeIsDebug()){
	getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON, WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
	}
	hostIPAdress = getHostIpAddress();
	}

	@Override
	public Cocos2dxGLSurfaceView onCreateView() {
	Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);
	// TestCpp should create stencil buffer
	glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);
	PluginWrapper.init(this); // add this
	PluginWrapper.setGLSurfaceView(glSurfaceView); // add this
	glSurfaceView.setKeepScreenOn(true); // Keep Your App Always ON
	return glSurfaceView;
	}

	public String getHostIpAddress() {
	WifiManager wifiMgr = (WifiManager) getSystemService(WIFI_SERVICE);
	WifiInfo wifiInfo = wifiMgr.getConnectionInfo();
	int ip = wifiInfo.getIpAddress();
	return ((ip & 0xFF) + "." + ((ip >>>= 8) & 0xFF) + "." + ((ip >>>= 8) & 0xFF) + "." + ((ip >>>= 8) & 0xFF));
	}

	public static String getLocalIpAddress() {
	return hostIPAdress;
	}

	private static native boolean nativeIsLandScape();
	private static native boolean nativeIsDebug();

	}

view raw AppActivity.java hosted with ❤ by GitHub

frameworks/runtime-src/proj.android/
AndroidManifest.xml(28,29,30)
Before </application> put

Full(28,29,30)

	<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="org.cocos2dx.AdmobBlog"
	android:versionCode="1"
	android:versionName="1.0"
	android:installLocation="auto">

	<uses-sdk android:minSdkVersion="9"/>
	<uses-feature android:glEsVersion="0x00020000" />

	<application android:label="@string/app_name"
	android:icon="@drawable/icon">

	<!-- Tell NativeActivity the name of our .so -->
	<meta-data android:name="android.app.lib_name" android:value="cocos2djs" />

	<activity android:name="org.cocos2dx.javascript.AppActivity"
	android:label="@string/app_name"
	android:screenOrientation="landscape"
	android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
	android:configChanges="orientation">

	<intent-filter>
	<action android:name="android.intent.action.MAIN" />
	<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
	</activity>
	<activity
	android:name="com.google.ads.AdActivity"
	android:configChanges="keyboard\|keyboardHidden\|orientation\|screenLayout\|uiMode\|screenSize\|smallestScreenSize"/>
	</application>

	<supports-screens android:anyDensity="true"
	android:smallScreens="true"
	android:normalScreens="true"
	android:largeScreens="true"
	android:xlargeScreens="true"/>

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

	<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
	</manifest>

view raw AndroidManifest.xml hosted with ❤ by GitHub

make sure got

LAST ONE !
3. Src \ app.js(68-76)


	var HelloWorldLayer = cc.Layer.extend({
	sprite:null,
	ctor:function () {
	//////////////////////////////
	// 1. super init first
	this._super();

	/////////////////////////////
	// 2. add a menu item with "X" image, which is clicked to quit the program
	// you may modify it.
	// ask the window size
	var size = cc.winSize;

	// add a "close" icon to exit the progress. it's an autorelease object
	var closeItem = new cc.MenuItemImage(
	res.CloseNormal_png,
	res.CloseSelected_png,
	function () {
	cc.log("Menu is clicked!");
	}, this);
	closeItem.attr({
	x: size.width - 20,
	y: 20,
	anchorX: 0.5,
	anchorY: 0.5
	});

	var menu = new cc.Menu(closeItem);
	menu.x = 0;
	menu.y = 0;
	this.addChild(menu, 1);

	/////////////////////////////
	// 3. add your codes below...
	// add a label shows "Hello World"
	// create and initialize a label
	var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
	// position the label on the center of the screen
	helloLabel.x = size.width / 2;
	helloLabel.y = 0;
	// add the label as a child to this layer
	this.addChild(helloLabel, 5);

	// add "HelloWorld" splash screen"
	this.sprite = new cc.Sprite(res.HelloWorld_png);
	this.sprite.attr({
	x: size.width / 2,
	y: size.height / 2,
	scale: 0.5,
	rotation: 180
	});
	this.addChild(this.sprite, 0);

	this.sprite.runAction(
	cc.sequence(
	cc.rotateTo(2, 0),
	cc.scaleTo(2, 1, 1)
	)
	);
	helloLabel.runAction(
	cc.spawn(
	cc.moveBy(2.5, cc.p(0, size.height - 40)),
	cc.tintTo(2.5,255,125,0)
	)
	);

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

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

	/*

	Location :
	1- Top-center banner
	2- Top-left banner
	3- Top-right banner
	4- Bottom-center banner
	5- Bottom-left banner
	6- Bottom-right banner

	AdmobSizeEnum :
	ADMOB_SIZE_BANNER = 1;
	ADMOB_SIZE_IABMRect = 2;
	ADMOB_SIZE_IABBanner = 3;
	ADMOB_SIZE_IABLeaderboard = 4;
	ADMOB_SIZE_Skyscraper = 5;

	*/

	return true;
	}
	});

	var HelloWorldScene = cc.Scene.extend({
	onEnter:function () {
	this._super();
	var layer = new HelloWorldLayer();
	this.addChild(layer);
	}
	});

view raw app.js hosted with ❤ by GitHub

Location :
1- Top-center banner
2- Top-left banner
3- Top-right banner
4- Bottom-center banner
5- Bottom-left banner
6- Bottom-right banner

DONE !
Must compile the project to release mode, debug mode not working.

cocos run -p android -m release

Reference link

-- >> Chin Cheng Hong << --

Google tag

Pages

Android get user account email

How to set android Full Screen

How to change the default preloader image in cocos2d-JS 3.7

How to add Admob to Cocos2d-x 3.7 JS