[Tutorial] How to use AdMob with Cocos2d-js and Android
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
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:
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:
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:
On frameworks/runtime-src/Classes/AppDelegate.cpp, edit your file and pay attention to add the lines in the correct place:
On frameworks/runtime-src/proj.android/build-cfg.json, edit:
Add this new path to ndk_module_path :
Add following paths to copy_resources:
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:
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:
And before your </application> add the following activity:
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:
On AdMob.showAds(m, 2);, you can use the following numbers:
- Top-center banner
- Top-left banner
- Top-right banner
- Bottom-center banner
- Bottom-left banner
- Bottom-right banner
That’s it, if you have any problem, feel free to ask. Thanks for reading!