cocos2d-x | Admob [1] 배너광고 호출하기

| 코코스2dx + 파이어베이스 + 애드몹(배너광고)

코코스2d-x 프로젝트에서 애드몹 배너광고를 호출할 수 있도록 작업해봅시다.

파이어베이스 SDK를 통해 애드몹 광고를 호출하기 때문에 애드몹과 Firebase와 연결하는 과정이 선행되어야 합니다.

그 방법은 https://mynameisdabin.tistory.com/2 에서 설명하였습니다.

---

| 애드몹 콘솔에서 광고단위 추가하기

애드몹 콘솔에서 광고를 추가하고자 하는 앱의 광고 단위 탭에 들어갑니다.

시작하기 를 눌러 광고 단위를 만들어 줍시다.

광고 형식은 배너 를 선택합니다. 

입맛대로 설정을 선택하고 저장 을 클릭합니다.

마지막 단계에서 앱 ID와 광고 단위 ID를 알려주는데 광고 호출시 이 두가지 정보를 요구하기 때문에 따로 복사해둡니다.

---

| 안드로이드 스튜디오에서 구현

배너광고를 호출할때 요구하는 정보는 애드몹 앱 id와 애드몹 광고 id 입니다.

프로젝트 안에서 이 두가지 정보를 가져다 쓸 수 있도록 <project>/res/values/strings.xml 에 추가합니다.

<resources>

    <string name="app_name">SampleProject</string>

    <string name="google_admob_app_id">ca-app-pub-1010101010101010~1234512345</string>

    <string name="google_banner_ad_id">ca-app-pub-1010101010101010/1234512345</string>

</resources>

위에서 따로 복사해둔 정보를 각각 넣어주시면 되는데 까먹고 복사해두지 않았더라도 애드몹 콘솔에서 확인이 가능합니다.

그리고 배너광고의 뷰로 사용할 레이아웃 xml 을 res/layout 폴더에 한장 만들어 줍시다. (layout 폴더가 없으면 새로 만드세요!)

생성한 banner_layout.xml 에 다음 코드를 넣어주시고..

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="@+id/bannerLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">

<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:visibility="gone"

ads:adSize="BANNER"
ads:adUnitId="@string/google_banner_ad_id"

android:background="@android:color/transparent">
</com.google.android.gms.ads.AdView>

</RelativeLayout>

자바 코드상에서 AdView 를 직접 생성하도록 할 수 있지만 xml 로 작성하면 스튜디오 상에서 대강 레이아웃이 어떻게 배치될지 확인할 수 있습니다. 그리고 무엇보다 구글에서 이 방식을 더 선호합니다.

대충 이런 위치에 배치될 것임을 예측할 수 있겠죠.

표시할 배너광고의 뷰가 준비되었으니 AppActivity.java 파일에 배너광고 호출을 위한 다음 3가지 함수를 구현하면 됩니다.

• 배너광고를 불러오는 기능의 initBannerAd() 함수

• 배너광고를 보여주는 기능의 showBannerAd() 함수

• 배너광고를 숨기는 기능의 hideBannerAd() 함수

먼저 필요한 변수와 함수를 정의해야 합니다.<project>/src/org/cocos2dx/cpp/AppActivity.java 에 다음 코드를 추가합니다.

package org.cocos2dx.cpp;

import android.os.Bundle;

import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;
import org.cocos2dx.lib.Cocos2dxActivity;

import app.hello.sample.R;

public class AppActivity extends Cocos2dxActivity {

    public static AppActivity appActivity;
    private AdView mAdView;
    boolean isLoadedBannerAd = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        appActivity = this;

        MobileAds.initialize(this, getResources().getString(R.string.google_admob_app_id));
        initBannerAd();
    }

    public void initBannerAd() {

    }

    public void showBannerAd() {

    }

    public void hideBannerAd() {

    }

    public static void Native_ShowBannerAd() {

    }

    public static void Native_HideBannerAd() {

    }

}

appActivity 변수는 현재 액티비티에 접근하기 위해 필요한 스태틱 변수고 'Native_' 로 시작하는 함수 명을 가진 함수들은 전부 jni 호출을 위해 정의한 함수들 입니다.

배너광고를 초기화/로드 하는 initBannerAd() 함수에 다음 내용 추가하세요.

public void initBannerAd() {
        LayoutInflater inflater = getLayoutInflater();
        View bannerView = (View)inflater.inflate(R.layout.banner_layout, null);
        bannerView.bringToFront();
        mFrameLayout.addView(bannerView);

        mAdView = (AdView)findViewById(adView);
        mAdView.loadAd(new AdRequest.Builder().
                addTestDevice(AdRequest.DEVICE_ID_EMULATOR).
                build());

        mAdView.setAdListener(new AdListener() {
            @Override
            public void onAdLoaded() {
                // 광고 로딩이 끝나면 호출되는 코드
                isLoadedBannerAd = true;
                Log.i("Ads", "onAdLoaded");
            }
            @Override
            public void onAdFailedToLoad(int errorCode) {
                //광고 요청이 실패했을때 호출되는 코드
                Log.i("Ads", "onAdFailedToLoad");
            }
            @Override
            public void onAdOpened() {
                // 광고가 완전히 화면에 노출될 때 호출되는 코드
                Log.i("Ads", "onAdOpened");
            }
            @Override
            public void onAdLeftApplication() {
                // 유저가 앱을 종료할때 호출되는 코드
                Log.i("Ads", "onAdLeftApplication");
            }
            @Override
            public void onAdClosed() {
                // 유저가 광고를 보고 다시 앱으로 돌아올때 호출되는 코드
                Log.i("Ads", "onAdClosed");
            }
        });
}

배너광고를 보여주는 showBannerAd() 함수에 다음 내용 추가.

public void showBannerAd() {
        if (isLoadedBannerAd && mAdView != null)
            mAdView.setVisibility(View.VISIBLE);
}

배너광고를 숨겨주는 hideBannerAd() 함수에 다음 내용 추가.

public void hideBannerAd() {
        if (isLoadedBannerAd && mAdView != null)
            mAdView.setVisibility(View.GONE);
}

Native 함수들도 다음 내용과 같이 구현합니다.

public static void Native_ShowBannerAd() {
        appActivity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                appActivity.showBannerAd();
            }
        });
    }

    public static void Native_HideBannerAd() {
        appActivity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                appActivity.hideBannerAd();
            }
        });
    }

이제 안드로이드 스튜디오에서의 작업은 모두 끝났습니다.

---

| C++ 에서의 구현

이제 위에서 만들어 놓은 Java 함수들을 cocos2d-x 에서 사용하기 좋게 C++함수로 호출 가능한 형태로 만들어야 합니다. JNI 를 사용하면 C++코드 상에서 Java 코드를 호출할 수 있습니다.

배너광고의 init 은 안드로이드에서 하도록 하고 C++ 코드상에서는 배너광고를 보여주고 감출수만 있도록 다음 두가지 함수만 만들면 될 듯 합니다.

• 광고를 보여주는 showBannerAd() 함수

• 광고를 숨겨주는 hideBannerAd() 함수

여기서는 편의를 위해서 HelloWorldScene.h 에 함수를 정의하고 HelloWorldScene.cpp 에 구현했지만 좋은 코드를 위해 당연히 클래스를 따로 만드시는게 좋습니다.

HelloWorldScene.h 에 두 줄의 코드를 추가합니다.

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();
    
    void showBannerAd(); //추가
    void hideBannerAd(); //추가

    // a selector callback
    void menuCloseCallback(cocos2d::Ref* pSender);
    
    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp 상단에 JniHelper를 사용하기위한 헤더를 include 합니다.

#include "HelloWorldScene.h"
#include "SimpleAudioEngine.h"

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

USING_NS_CC;
...중략

그리고 HelloWorldScene.cpp 에 showBannerAd() 와 hideBannerAd() 를 구현합니다.

void HelloWorld::showBannerAd()
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
	JniMethodInfo mInfo;

	if (JniHelper::getStaticMethodInfo(mInfo
		, "org/cocos2dx/cpp/AppActivity"
		, "Native_ShowBannerAd"
		, "()V"))
	{
		mInfo.env->CallStaticVoidMethod(mInfo.classID, mInfo.methodID);
		mInfo.env->DeleteLocalRef(mInfo.classID);
	}
#endif
}

void HelloWorld::hideBannerAd()
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
	JniMethodInfo mInfo;

	if (JniHelper::getStaticMethodInfo(mInfo
		, "org/cocos2dx/cpp/AppActivity"
		, "Native_HideBannerAd"
		, "()V"))
	{
		mInfo.env->CallStaticVoidMethod(mInfo.classID, mInfo.methodID);
		mInfo.env->DeleteLocalRef(mInfo.classID);
	}
#endif
}

이제 원하는 시점에 hideBannerAd() 함수를 호출하면 배너광고를 감출 수 있습니다!

※ 이 글에서는 jni 에 대한 자세한 설명은 다루지 않습니다. 궁금하시다면 구글링하시거나 하세요? 아시겠습니까? 하핳

---

HelloWorldScene.h

strings.xml

AppActivity.java

HelloWorldScene.cpp

banner_layout.xml