Cocos2d-x

Panduan ini menunjukkan cara mengintegrasikan AdMob dengan Firebase ke dalam project Cocos2d-x yang baru dibuat. Jika belum memiliki project, Anda dapat mengikuti penjelasan dengan mendapatkan prasyarat dan membuat project cocos baru dari baris perintah:

cocos new MyGame -l cpp

Catatan: AdMob hanya mendukung aplikasi Cocos2d-x yang dibuat untuk Android dan iOS. Desktop tidak didukung. Panduan ini mengasumsikan bahwa Anda hanya mengembangkan aplikasi Cocos untuk Android/iOS, namun Anda dapat membungkus seluruh integrasi AdMob sesuai arahan #if berikut untuk memastikannya hanya dijalankan di lingkungan aplikasi seluler:

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID ||
     CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
  ...
#endif

Prasyarat

Komponen berikut harus sudah diinstal di perangkat:

• Cocos2d-x versi terbaru
• Python 2.7 atau yang lebih tinggi
• NDK r10d atau yang lebih tinggi (hanya diperlukan untuk pengembangan Android)
• CocoaPods 1.0.0 atau yang lebih tinggi (hanya diperlukan untuk pengembangan iOS)

Mendapatkan AdMob dengan Firebase C++ SDK

Download Firebase C++ SDK. Ekstrak file tersebut ke direktori level teratas project Cocos2d-x Anda, dalam direktori yang sama dengan yang memuat direktori proj.android-studio dan proj.ios_mac Anda. Namai folder tersebut sebagai firebase_cpp_sdk.

Menyiapkan project iOS

Langkah-langkah berikut menjelaskan cara mengimpor Firebase SDK ke dalam project Cocos2d-x iOS yang baru dibuat.

1. Ikuti langkah-langkah untuk Menambahkan Firebase ke aplikasi Anda. Setelah selesai, project Xcode di dalam direktori proj.ios_mac/ semestinya merujuk ke file GoogleService-Info.plist.

2. Buat Podfile di direktori proj.ios_mac/ dengan isi sebagai berikut:

   source 'https://github.com/CocoaPods/Specs.git'
   
   platform :ios, '7.0'
   
   # Replace "MyGame" with the name of your game.
   target 'MyGame-mobile' do
     pod 'Firebase'
     pod 'Firebase/AdMob'
   end
   

3. Jalankan pod update untuk menginstal CocoaPods dan buka MyGame.xcworkspace sesuai petunjuk dari CocoaPods. Pada tahap ini, SDK iOS Firebase dan AdMob telah diintegrasikan di project Anda.

4. CocoaPods memberi peringatan tentang ketiadaan $(inherited) pada beberapa properti. Buka setelan build untuk target MyGame-mobile di Xcode, dan tambahkan $(inherited) ke bagian paling bawah daftar untuk setiap setelan build berikut:

   • Other Linker Flags
   • Preprocessor Macros
   • Library Search Paths

5. Saat berada di setelan build, tambahkan $(PROJECT_DIR)/../firebase_cpp_sdk/frameworks/ios/universal ke Framework Search Paths dan $(PROJECT_DIR)/../firebase_cpp_sdk/include ke Header Search Paths.

6. Selanjutnya, Anda harus menyertakan referensi ke library yang ingin Anda gunakan. Klik kanan project Anda dan pilih Add Files to "MyGame". Dari direktori firebase_cpp_sdk/frameworks/ios/universal, pilih firebase.framework dan firebase_admob.framework. Sebelum menambahkan framework, hapus centang dari opsi Copy Items if Needed. Setelan build yang Anda tambahkan pada langkah sebelumnya memungkinkan Xcode mengetahui lokasi framework.

7. Tambahkan GameController.framework ke Build Phases > Link Binary with Libraries.

8. Ikuti panduan App Transport Security AdMob untuk memastikan semua iklan berperilaku dengan benar pada iOS 9 dan yang lebih baru.

Checkpoint: Anda seharusnya sudah bisa membuat dan menjalankan aplikasi iOS dari Xcode.

Catatan: Efek samping penggunaan CocoaPods adalah Anda tidak dapat lagi membuat aplikasi iOS menggunakan cocos run -p dari command line.

Kini, project iOS Anda telah disiapkan dan terintegrasi dengan AdMob dan Firebase. Anda siap untuk menyiapkan project Android.

Menyiapkan project Android

Langkah-langkah berikut menjelaskan cara mengimpor Firebase SDK ke dalam project Cocos2d-x Android yang baru dibuat.

1. Buka proj.android-studio/app/jni/Android.mk dan tambahkan baris-baris yang bercetak tebal di bawah ini. Pastikan menyetel FIREBASE_CPP_SDK_DIR ke lokasi lokal pada Firebase C++ SDK yang baru Anda download.

   LOCAL_PATH := $(call my-dir)
    
   # The path to the Firebase C++ SDK, in the project's root directory.
   FIREBASE_CPP_SDK_DIR := ../../../firebase_cpp_sdk
    
   APP_ABI := armeabi-v7a x86
   STL := $(firstword $(subst _, ,$(APP_STL)))
   FIREBASE_LIBRARY_PATH := $(FIREBASE_CPP_SDK_DIR)/libs/android/$(TARGET_ARCH_ABI)/$(STL)
    
   include $(CLEAR_VARS)
   LOCAL_MODULE := firebase_app
   LOCAL_SRC_FILES := $(FIREBASE_LIBRARY_PATH)/libapp.a
   LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)/$(FIREBASE_CPP_SDK_DIR)/include
   include $(PREBUILT_STATIC_LIBRARY)
    
   include $(CLEAR_VARS)
   LOCAL_MODULE := firebase_feature
   LOCAL_SRC_FILES := $(FIREBASE_LIBRARY_PATH)/libadmob.a
   LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)/$(FIREBASE_CPP_SDK_DIR)/include
   include $(PREBUILT_STATIC_LIBRARY)
    
   include $(CLEAR_VARS)
    
   $(call import-add-path,$(LOCAL_PATH)/../../../cocos2d)
   $(call import-add-path,$(LOCAL_PATH)/../../../cocos2d/external)
   $(call import-add-path,$(LOCAL_PATH)/../../../cocos2d/cocos)
   $(call import-add-path,$(LOCAL_PATH)/../../../cocos2d/cocos/audio/include)
    
   LOCAL_MODULE := MyGame_shared
   LOCAL_MODULE_FILENAME := libMyGame
    
   LOCAL_SRC_FILES := hellocpp/main.cpp \
                      ../../../Classes/AppDelegate.cpp \
                      ../../../Classes/HelloWorldScene.cpp
    
   LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../../Classes
    
   # _COCOS_HEADER_ANDROID_BEGIN
   # _COCOS_HEADER_ANDROID_END
    
   LOCAL_STATIC_LIBRARIES := cocos2dx_static
   LOCAL_STATIC_LIBRARIES += firebase_app
   LOCAL_STATIC_LIBRARIES += firebase_feature
    
   # _COCOS_LIB_ANDROID_BEGIN
   # _COCOS_LIB_ANDROID_END
    
   include $(BUILD_SHARED_LIBRARY)
    
   $(call import-module,.)
    
   # _COCOS_LIB_IMPORT_ANDROID_BEGIN
   # _COCOS_LIB_IMPORT_ANDROID_END
   

2. Pastikan bahwa Anda masih bisa mengompilasi aplikasi Cocos:

   cocos compile -p android --ap android-24 --android-studio --app-abi armeabi-v7a
   

3. Ikuti langkah-langkah untuk Menambahkan Firebase ke aplikasi Anda yang berada di direktori proj.android-studio/.

4. Sertakan paket iklan dalam app/build.gradle Anda:

   implementation 'com.google.firebase:firebase-ads:18.0.0'
   

5. Periksa apakah Anda masih bisa mengompilasi aplikasi Cocos:

   cocos compile -p android --ap android-42 --android-studio --app-abi armeabi-v7a
   

Project Android Anda sekarang merujuk ke komponen AdMob dalam Firebase C++ SDK.

Integrasi C++

Kini project iOS dan Android Anda telah direferensikan di Firebase C ++ SDK, langkah selanjutnya adalah mulai menggunakan SDK dan memuat beberapa iklan.

Menginisialisasi Firebase dan AdMob

Sebaiknya inisialisasi Firebase dan AdMob sedini mungkin dalam siklus proses aplikasi. Tempat paling alami untuk menambahkan kode inisialisasi untuk project Cocos2d-x adalah dalam file AppDelegate.cpp:

AppDelegate.cpp

#include "firebase/app.h"
#include "firebase/admob.h"

USING_NS_CC;

bool AppDelegate::applicationDidFinishLaunching() {

  ...

  #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
  // Initialize Firebase for Android.
  firebase::App* app = firebase::App::Create(
  firebase::AppOptions(), JniHelper::getEnv(), JniHelper::getActivity());
  // Initialize AdMob.
  firebase::admob::Initialize(*app, "INSERT_YOUR_ADMOB_ANDROID_APP_ID");
  #elif (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
  // Initialize Firebase for iOS.
  firebase::App* app = firebase::App::Create(firebase::AppOptions());
  // Initialize AdMob.
  firebase::admob::Initialize(*app, "INSERT_YOUR_ADMOB_IOS_APP_ID");
  #endif
  // Initialize AdMob.
  firebase::admob::Initialize(*app);
  // Create a scene. it's an autorelease object.
  auto scene = HelloWorldScene::createScene();
  // run
  director->runWithScene(scene);
  return true;
}

Pada Android, pembuatan aplikasi Firebase memerlukan Aktivitas dan lingkungan JNI. Contoh kode di atas menggunakan kelas JniHelper dari Cocos2d-x untuk memasok parameter ini.

Mendapatkan induk iklan

AdMob memerlukan objek firebase::admob::AdParent untuk menginisialisasi setiap format iklan. Objek ini berhubungan dengan Activity di Android dan UIView di iOS. Kelas helper berikut membuat metode getAdParent() tunggal yang menampilkan objek yang sesuai tergantung pada platformnya.

FirebaseHelper.h

#ifndef __FIREBASE_HELPER_H__
#define __FIREBASE_HELPER_H__

#include "firebase/admob/types.h"

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
#include <jni.h>
#elif (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
extern "C" {
#include <objc/objc.h>
}  // extern "C"
#endif

// Returns a variable that describes the ad parent for the app. On Android
// this will be a JObject pointing to the Activity. On iOS, it's an ID pointing
// to the root view of the view controller.
firebase::admob::AdParent getAdParent();

#endif // __FIREBASE_HELPER_H__

FirebaseHelper.cpp

#include "FirebaseHelper.h"

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
#include "platform/android/jni/JniHelper.h"
#endif

USING_NS_CC;

firebase::admob::AdParent getAdParent() {
  #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
  // Returns the iOS RootViewController's main view (i.e. the EAGLView).
  return (id)Director::getInstance()->getOpenGLView()->getEAGLView();
  #elif (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
  // Returns the Android Activity.
  return JniHelper::getActivity();
  #else
  // A void* for any other environments.
  return 0;
  #endif
}

Tambahkan kelas FirebaseHelper ini ke folder Classes/ project Anda. Pastikan menambahkan file ini ke project Xcode untuk iOS dan update file sumber lokal di Android.mk untuk Android:

LOCAL_SRC_FILES := hellocpp/main.cpp \
                   ../../../Classes/AppDelegate.cpp \
                   ../../../Classes/HelloWorldScene.cpp \
                   ../../../Classes/FirebaseHelper.cpp

Memuat iklan banner

Contoh lengkap dari cara memuat iklan banner ditampilkan di bawah, menggunakan metode getAdParent() yang dijelaskan di atas.

#include "FirebaseHelper.h"

#include "firebase/admob.h"
#include "firebase/admob/types.h"
#include "firebase/app.h"
#include "firebase/future.h"
#include "firebase/admob/banner_view.h"

#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
#include <android/log.h>
#include <jni.h>
#include "platform/android/jni/JniHelper.h"
#endif

USING_NS_CC;

bool HelloWorld::init()
{
  // General scene setup ...

  #if defined(__ANDROID__)
  // Android ad unit IDs.
  const char* kBannerAdUnit = "ca-app-pub-3940256099942544/6300978111";
  #else
  // iOS ad unit IDs.
  const char* kBannerAdUnit = "ca-app-pub-3940256099942544/2934735716";
  #endif

  // Create and initialize banner view.
  firebase::admob::BannerView* banner_view;
  banner_view = new firebase::admob::BannerView();
  firebase::admob::AdSize ad_size;
  ad_size.ad_size_type = firebase::admob::kAdSizeStandard;
  ad_size.width = 320;
  ad_size.height = 50;
  banner_view->Initialize(getAdParent(), kBannerAdUnit, ad_size);

  // Schedule updates so that the Cocos2d-x update() method gets called.
  this->scheduleUpdate();
  return true;
}

void HelloWorld::update(float delta) {
  // Check that the banner has been initialized.
  if (banner_view->InitializeLastResult().status() ==
      firebase::kFutureStatusComplete) {
    // Check that the banner hasn't started loading.
    if (banner_view->LoadAdLastResult().status() ==
        firebase::kFutureStatusInvalid) {
      // Make the banner visible and load an ad.
      CCLOG("Loading a banner.");
      banner_view->Show();
      firebase::admob::AdRequest my_ad_request = {};
      banner_view->LoadAd(my_ad_request);
    }
  }
}

Apa selanjutnya?

Sekarang setelah Anda mengintegrasikan Firebase dengan AdMob SDK ke dalam project Cocos2d-x, Anda dapat Berinteraksi dengan Google Mobile Ads SDK dan menerapkan format yang Anda sukai:

• Iklan Banner
• Iklan Interstisial
• Video Reward