Japanese

PLUG COCOS-2DX 適用ガイド

Quick Start

最新バージョンダウンロード

1. プロジェクト設定

  1. ダウンロードしたサンプルプロジェクトに含まれているsample/Classes/plugincafeフォルダを、ゲームプロジェクトにコピーします。

  2. OSに合うPLUG SDKプロジェクトをゲームプロジェクトに追加します。

    • Android：sample/proj.android-studio/app/libsフォルダにあるPLUG SDKプロジェクトを、ゲームプロジェクトにライブラリで追加します。

    • iOS：lib/iOSフォルダにあるPLUG SDKプロジェクトを、ゲームプロジェクトに追加します。

2. 初期化

PLUG SDKが対応する言語に応じて、次のようにPLUG SDKを初期化します。

2.1 PLUG SDK初期化(韓国語のみ対応 - NAVER Cafe)

韓国語のみ対応のPLUG SDKを初期化する時は、次のような初期化情報を設定します。

  • • NAVER IDでログイン開発者センターにてアプリケーションを登録し、受け取ったクライアントID(ClientId)とクライアントシークレット(ClientSecret)

  • NAVER Cafeでカフェを開設し、受け取ったCafe ID

cafe::CafeSdk::init("U5ZHoj_OStOHOJ8mec_s", "piPHPA9i4E", 28334359 );

2.2 PLUG SDK初期化(外国語のみ対応)

外国語のみ対応のPLUG SDKを初期化する時は、次のような初期化情報を設定します。

  • consumerKey: コミュニティを開設して受け取ったコンシューマーキー(Consumer Key)

  • consumerSecretKey: コミュニティを開設して受け取ったコンシューマーシークレットキー(Consumer Secret Key)

  • cummunityNo: コミュニティを開設して受け取ったコミュニティNo(cummunityNo)

  • loungeNo: ラウンジを開設して受け取ったコミュニティNo(loungeNo)

cafe::CafeSdk::initGlobal("PLUGTESTKEY", "PLUGTESTSECRET", 1, 58);

3. PLUG SDK 開始

初期化が完了したら、PLUG SDKを実行します。

3.1 startHome() メソッド

startHome()メソッドは、PLUG SDKを開始するメソッドです。

cafe::CafeSdk::startHome();

Android Studio サンプルプロジェクト

  1. sample/proj.android-studioフォルダ内のプロジェクトをAndroid Stuidoで開きます。

  2. プロジェクトをビルドします。

  3. アプリケーションでPLUGが正常に実行されることを確認します。

iOS サンプルプロジェクト

  1. sample/proj.ios_macフォルダ内のプロジェクトをXCodeで開きます。

  2. プロジェクトをビルドします。

  3. 애플리케이션에서 플러그가 정상적으로 실행되는 것을 확인한다.

グローバルコミュニティと韓国内NAVER Cafeに対応するPLUGの初期化

グローバルコミュニティと韓国内NAVER Cafeにすべて対応する時は、グローバルコミュニティに対応するための初期化と、韓国内NAVER Cafeに対応するための初期化をすべて設定します。

PLUGの開始と終了

PLUGを特定のタブが選択された状態で開始、または終了します。

startHome() メソッド

ホームタブが選択された状態でPLUGを始めます。

static void startHome()

次の例はstartHome()メソッドを実装した例です。

   /**
   * ホームタブで開始
   */
  cafe::CafeSdk::startHome();

横画面モード、縦画面モード

PLUGは横画面モードと縦画面モードのどちらも対応しています。

Android

Android環境では別途に設定をしなくても、画面の向きに合わせて、横画面モード、縦画面モードが自動で適用されます。

iOS

iOS環境ではsetOrientationIsLandscape：メソッドで縦画面モードと横画面モードを適用します

次の例はPLUGを横画面モードで実行した例です。

// 既定値はYES
// 横画面モード
[[NCSDKManager getSharedInstance] setOrientationIsLandscape:YES];

次の例はPLUGを縦画面モードで実行した例です。

//縦画面モード
[[NCSDKManager getSharedInstance] setOrientationIsLandscape:NO];

透明度調節

PLUG画面の左上の透明度調節スライダーで透明度を調節すると、ゲームとカフェを同時に使用できます。

透明度

説明

アルファ値100%

PLUGにタッチイベント伝達

アルファ値100%以下

ゲームにタッチイベント伝達

Android

Android環境で透明度調節スライダーの使用の有無は、setTransparentable()メソッドで設定します。

public static void setTransparentable(Activity activity, boolean isTransparentable)

isTransparentableパラメータ値をtrueに設定すると、透明度調節スライダーを使用できます(既定値：true)。

次の例は、透明度調節スライダーを使用するように実装した例です。

/**
   * 透明度調節スライダーの使用の有無を設定します。
   *
   * @param isTransparentable 透明度の調節の使用可否に対するboolean形式の値
   */

  Glink.setTransparentable(activity, true)

iOS

iOS環境で透明度調節スライダーの使用の有無は、disableTransparentSlider：メソッドで設定します。

(void)disableTransparentSlider:(BOOL)disable;

disableパラメータの値をYESで設定すると、透明度調節スライダーを使用できます(既定値：YES)。

次の例は、透明度調節スライダーを使用するように実装した例です。

/*
 透明度調節機能の削除
 既定値：YES
 */
// 透明度機能の使用
[[NCSDKManager getSharedInstance] disableTransparentSlider:YES];

次の例は、透明度調節スライダーを使用しないように実装した例です。

//透明度機能の削除
[[NCSDKManager getSharedInstance] disableTransparentSlider:NO];

ウィジェット

ウィジェットは、PLUGの折り畳みボタンをタップすると自動で画面に表示される要素です。ウィジェットでゲーム内のどこでもPLUGを利用できます。

ウィジェットの表示

PLUGの折り畳みボタンをタップした時に、ウィジェットを表示するかは、showWidgetWhenUnloadSdk()メソッドで設定します。

static void showWidgetWhenUnloadSdk(bool show)

showパラメータの値をtrueに設定すると、PLUGウィンドウを折り畳む時にウィジェットが表示されます(既定値：true)。

次の例はウィジェットが表示されるように実装した例です。

  /**
   * PLUGウィンドウを折り畳む時に、ウィジェットを表示するか決定します。
   *
   * @param show ウィジェットの表示の有無に対するboolean形式の値
   */
  cafe::CafeSdk::showWidgetWhenUnloadSdk(true);

ウィジェットを閉じる

ウィジェットを閉じる場合は、stopWidget()メソッドを使用します。

static void stopWidget()

次の例は、ウィジェットを強制的に閉じる例です。

  /**
   * ウィジェットを閉じます。
   */
  cafe::CafeSdk::stopWidget();

ウィジェットの基本位置の設定

ウィジェットを最初に実行する時は、画面左の中央に表示されます。ウィジェットを最初に実行する時に表示される基本位置を設定する場合は、setWidgetStartPosition()メソッドを使用します。

ただし、ユーザーがウィジェットを移動した後、ウィジェットが再び実行される時は、ユーザーが移動した最後の位置にウィジェットが表示されます。

static void setWidgetStartPosition(bool isLeft, int heightPercentage);

次の例は、ウィジェットの基本位置を画面右側、上から20%の位置に設定した例です。

 /**
   * isLeft：trueであれば左側に、falseであれば右側に表示されます。
   * heightPercentage：縦の位置を%で指定できます。
   */

  cafe::CafeSdk::setWidgetStartPosition(false, 20);

画面キャプチャ

ウィジェットの画面キャプチャボタンをタップすると、ゲーム画面をキャプチャできます。

画面キャプチャボタン

画面キャプチャボタンをタップした時に画面をキャプチャする機能は、onCafeSdkWidgetScreenshotClick()メソッドに、ウィジェットの画面キャプチャボタンのクリックリスナー(onCafeSdkWidgetScreenshotClick)を登録して実装します。

virtual void onCafeSdkWidgetScreenshotClick()

다次の例は、ウィジェットの画面キャプチャボタンのクリックリスナーを実装した例です

  /**
   * リスナーを実装したクラスを登録します。
   */

bool HelloWorld::init()
{
...
    cafe::CafeSdk::setCafeListener(this);
...    
    return true;
}

  /**
   * ウィジェットの画面キャプチャボタンのクリックリスナーを設定します。
   */

void HelloWorld::onCafeSdkWidgetScreenshotClick() {
    CCSize screenSize = Director::getInstance()->getWinSize();
    RenderTexture* texture = RenderTexture::create(screenSize.width,
            screenSize.height);
    texture->setPosition(Vec2(screenSize.width / 2, screenSize.height / 2));

    texture->begin();
    Director::getInstance()->getRunningScene()->visit();
    texture->end();

    std::string fileName = "captured_image.png";
    if (texture->saveToFile(fileName, Image::Format::PNG)) {
        std::string imageUri = FileUtils::getInstance()->getWritablePath()
                + fileName;
        cafe::CafeSdk::startImageWrite(imageUri);
    }
}

画面キャプチャの使用設定

setUseScreenshot()メソッドで、画面キャプチャ機能の使用の有無を設定します。

static void setUseScreenShot(bool use);

useパラメータの値をtrueに設定すると、ウィジェットに画面キャプチャボタンが表示されます(既定値：true)。

次の例は、画面キャプチャ機能を使用するように実装した例です。

  /**
   * 画面キャプチャ機能を使用します。
   */
  cafe::CafeSdk::setUseScreenShot(true);

動画録画ボタン

ウィジェットの動画録画ボタンをタップすると、ゲーム画面を動画で録画できます。

動画録画ボタンをタップした時にゲーム画面を録画する機能は、onCafeSdkOnRecordFinished()メソッドに、ウィジェットの動画録画ボタンのクリックリスナー(onCafeSdkOnRecordFinished)を登録して実装します。

virtual void onCafeSdkOnRecordFinished(const std::string& fileUrl)

次の例は、動画録画ボタンのクリックリスナーを実装した例です。

/**
   * リスナーを実装したクラスを登録します。
   */

bool HelloWorld::init()
{
...
    cafe::CafeSdk::setCafeListener(this);
...    
    return true;
}

  /**
   * ウィジェットの動画録画ボタンのクリックリスナーを設定します。
   */

void HelloWorld::onCafeSdkOnRecordFinished(const std::string& fileUrl) {
    cafe::CafeSdk::startVideoWrite(fileUrl);
}

動画録画

動画録画ボタンをタップすると、ゲーム中にゲーム画面を録画できます。

  • 動画録画機能は、Android 5.0以上のデバイスから対応しています。

  • 動画録画機能は、iOS 9.0以上のデバイスから対応しています。

ウィジェットの動画録画機能の使用

ウィジェットの動画録画ボタンをタップすると、ゲーム中にゲーム画面を録画できます。

動画録画の使用設定

setUseVideoRecord()メソッドで、動画録画機能の使用の有無を設定します。

static void setUseVideoRecord(bool use)

useパラメータの値をtrueに設定すると、ウィジェットに動画録画ボタンが表示されます(既定値：false)。

Android 5.0以下のデバイスと、iOS 9.0以下のデバイスでは、useパラメータの値をtrueに設定しても、ウィジェットに動画録画ボタンが表示されません。

次の例は、動画録画機能を使用するように実装した例です。

 /**
   * 動画録画機能を使用するか決定します。
   *
   * @param use 動画録画機能を使用するかに対するboolean形式の値
   */
  cafe::CafeSdk::setUseVideoRecord(true)

録画完了コールバックリスナー

動画録画が完了した時に、処理する作業はonCafeSdkOnRecordFinishedリスナーを登録して実装します。

virtual void onCafeSdkOnRecordFinished(const std::string& fileUrl)

次の例は、録画完了リスナーを実装した例です。

// 録画完了リスナー登録
cafe::CafeSdk::setCafeListener(this);

   /**
   * 動画録画が完了すると呼び出されます。
   *
   * @param uri 動画が録画されたファイルパスに対するURI(iOSではURIなし)
   */
void HelloWorld::onCafeSdkOnRecordFinished(const std::string& fileUrl) {
    cafe::CafeSdk::startVideoWrite(-1, "", "", fileUrl);
}

ゲームの動画録画機能の使用

ゲーム開発会社で動画録画ボタンを実装し、ゲーム画面を録画できます。

動画録画の開始

動画録画を開始する場合は、startRecord()メソッドを使用します。

Android 5.0以下のデバイスと、iOS 9.0以下のデバイスでは、動画が録画されません。

static void startRecord();

次の例は、動画の録画を開始する例です。

 /**
   * 動画の録画を始めます。
   *
   */

  cafe::Record::startRecord();

動画録画の終了

動画録画を終了する場合は、stopRecord()メソッドを使用します。

static void stopRecord();

次の例は、動画の録画を終了する例です。

  /**
   * 動画の録画を終わります。   *
   */
  cafe::Record::stopRecord();

録画完了コールバックリスナー

動画録画が完了した時に処理する作業は、setRecordListener()メソッドに録画完了リスナー(onSDKRecordFinish)を登録して実装します。

static void setRecordListener(RecordListener* listener);

次の例は、録画完了コールバックリスナーを実装した例です。

    //リスナー登録
    cafe::Record::init();
    cafe::Record::setRecordListener(this);


   /**
   * 動画録画が完了すると呼び出されます。
   *
   * @param uri 動画が録画されたファイルパスに対するURI(iOSではURIなし)
   */

void HelloWorld::onSDKRecordFinish(const std::string& uri) {
    cafe::CafeSdk::startVideoWrite(uri);
}

App Scheme 処理

ゲームでPLUGのホーム画面に表示されるバナー画像をタップすると、App Schemeに移動してゲーム機能を実行させることができます。

App Schemeに移動するバナー画像は、カフェの管理メニューで登録します。

Android

Android環境でApp Schemeに移動するバナー画像がある時に、次のようにonCafeSdkClickAppSchemeBannerリスナーを設定すると、タッチイベントが起きた時にApp Schemeを処理する機能を実装できます。

virtual void onCafeSdkClickAppSchemeBanner(const std::string& appScheme)

次の例は、App Schemeを処理するようにリスナーを実装した例です。

...
// call back設定
cafe::CafeSdk::setCafeListener(this);
...

// App Schemeタッチリスナー設定
void HelloWorld::onCafeSdkClickAppSchemeBanner(const std::string& appScheme) {
    cafe::CafeSdk::showToast(appScheme);
}

iOS

iOS環境でApp Schemeに移動するバナー画像をタップするとopenURL：メソッドを実行し、App Schemeを処理するように次の例のようにAppDelegateを設定します。

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
...
// 管理メニューで登録したSchemeをAppDelegateで処理します。
//ex : gLinkSample://test
    if ([[url scheme] isEqualToString:@"gLinkSample"]) {
        if ([[url host] isEqualToString:@"test"]) {
            //todo
        }
    }
...
}

コールバックリスナー

コールバックリスナーを登録し、PLUGで発生するイベントを処理します。

コールバックリスナー登録

setCafeListener()メソッドで、PLUGで発生するイベントを処理するコールバックリスナーを登録します。

static void setCafeListener(CafeListener* listener)

次の例は、コールバックリスナーの登録を実装した例です。

   // HelloWorld.cpp
void HelloWorld::init() {
    ...
    cafe::CafeSdk::setCafeListener(this);
    ...
}

PLUGの開始リスナー

onCafeSdkStartedは、PLUGを開始する時に発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkStarted()

次の例は、PLUGの開始リスナーを実装した例です。

   // PLUGの開始リスナー設定
void HelloWorld::onCafeSdkStarted() {
    cafe::CafeSdk::showToast("onCafeSdkStarted");
}

PLUGの終了リスナー

onCafeSdkStoppedは、PLUGを終了する時に発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkStopped()

次の例は、PLUGの終了リスナーを実装した例です。

   // PLUGの終了リスナー設定
void HelloWorld::onCafeSdkStopped() {
    cafe::CafeSdk::showToast("onCafeSdkStopped");
}

App Schemeリスナー

onCafeSdkClickAppSchemeBannerは、Android環境でゲームユーザーが、App Schemeに移動するバナー画像をタップした時に発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkClickAppSchemeBanner(
            const std::string& appScheme)

次の例は、App Schemeリスナーを実装した例です。

   // App Schemeリスナー設定
void HelloWorld::onCafeSdkClickAppSchemeBanner(const std::string& appScheme) {
    cafe::CafeSdk::showToast(appScheme);
}

カフェ登録リスナー

onCafeSdkJoinedは、ゲームユーザーがPLUGでカフェに登録した時に発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkJoined()

次の例は、カフェ登録リスナーを実装した例です。

   // カフェ登録リスナー設定
void HelloWorld::onCafeSdkJoined() {
    cafe::CafeSdk::showToast("onCafeSdkJoined");
}

投稿登録リスナー

onCafeSdkPostedArticleは、ユーザーがPLUGで投稿を登録した時に発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkPostedArticle(int menuId, int imageCount, int videoCount)

次の例は、投稿登録リスナーを実装した例です。

   /** 投稿登録リスナー設定
     * @param menuId 投稿が登録されたmenuId
     * @param imageCount 添付した画像ファイルの数
     * @param videoCount 添付した動画ファイルの数
     **/

void HelloWorld::onCafeSdkPostedArticle(int menuId, int imageCount, int videoCount) {
    cafe::CafeSdk::showToast("onCafeSdkPostedArticle " + StringUtils::format("%d, %d, %d", menuId, imageCount, videoCount));
}

コメント登録リスナー

onCafeSdkPostedCommentは、ユーザーがPLUGで投稿にコメントを登録した時に発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkPostedComment(int articleId)

次の例は、コメント登録リスナーを実装した例です。

// コメント登録リスナー設定
void HelloWorld::onCafeSdkPostedComment(int articleId) {
    cafe::CafeSdk::showToast("onCafeSdkPostedComment " + StringUtils::format("%d", articleId));
}

投票完了リスナー

onCafeSdkDidVoteは、ユーザーがPLUGで投票がある投稿の投票を完了した時に発生するイベントを処理するコールバックリスナーです。

投票完了リスナーは、PLUG 1.6.0以上から対応しています。

virtual void onCafeSdkDidVote(int articleId)

次の例は、投票完了リスナーを実装した例です。

// 投票完了リスナー設定
void HelloWorld::onCafeSdkDidVote(int articleId) {
    cafe::CafeSdk::showToast("onCafeSdkDidVote " + StringUtils::format("%d", articleId));
}

画面キャプチャボタンのクリックリスナー

onCafeSdkWidgetScreenshotClickは、ユーザーがウィジェットで、画面キャプチャボタンをタップした時に発生するイベントを処理するコールバックリスナーです。画面キャプチャボタンに関しては「ウィジェット」をご参照ください。

virtual void onCafeSdkWidgetScreenshotClick()

次の例は、画面キャプチャボタンのクリックリスナーを実装した例です。画面をキャプチャする機能をコールバックリスナーに実装すると、画面キャプチャボタンをタップした時に画面をキャプチャできます。

  /**
   * ウィジェットスクリーンショットボタンのクリックリスナー設定
   */
void HelloWorld::onCafeSdkWidgetScreenshotClick() {
    CCSize screenSize = Director::getInstance()->getWinSize();
    RenderTexture* texture = RenderTexture::create(screenSize.width,
            screenSize.height);
    texture->setPosition(Vec2(screenSize.width / 2, screenSize.height / 2));

    texture->begin();
    Director::getInstance()->getRunningScene()->visit();
    texture->end();

    std::string fileName = "captured_image.png";
    if (texture->saveToFile(fileName, Image::Format::PNG)) {
        std::string imageUri = FileUtils::getInstance()->getWritablePath()
                + fileName;
        cafe::CafeSdk::startImageWrite(-1, "", "", imageUri);
    }
}

録画完了リスナー

onCafeSdkOnRecordFinishedは、PLUGで動画録画が完了すると発生するイベントを処理するコールバックリスナーです。

virtual void onCafeSdkOnRecordFinished(const std::string& fileUrl)

次の例は、録画完了リスナーを実装した例です。

  /** 録画完了リスナー設定
   * 動画録画機能を使用するか決定します。
   *
   * @param uri 動画が録画されたファイルパスに対するURI
   */

void HelloWorld::onCafeSdkOnRecordFinished(const std::string& fileUrl) {
    cafe::CafeSdk::startVideoWrite(-1, "", "", fileUrl);
}

ゲームIDの連携

ユーザーのゲームIDとCafe IDを連携して管理できます。連携したゲームIDとCafe IDのリストは、カフェの管理メニューから確認できます。

ゲームIDをCafe IDと連携する場合は、syncGameUserId()メソッドを使用します。

static void syncGameUserId(std::string gameUserId)

次の例は、ゲームIDとCafe IDを連携する例です。

 /**
   * ゲームIDとCafe IDを連携します。
   *
   * @param gameUserId ゲームID
   */

  cafe::CafeSdk::syncGameUserId("usergameid");

テーマカラー変更

PLUGのテーマカラーを変更できます。

テーマカラーを変更する場合は、setThemeColor()メソッドを使用します。

/** 
* themeColorCSSString パラメータの既定値は「#00c73c」です。
* tabBackgroundColorCSSString パラメータの既定値は「#44484e」です。
* tabBackgroundColorCSSString パラメータは既定値を使用することを推奨します。
**/

void cafe::CafeSdk::setThemeColor(std::string themeColorCSSString, std::string tabBackgroundColorCSSString)

  • themeColorCSString: テーマで基本的に使用する色(既定値：#00c73c)

  • tabBackgroundColorCSSString: タブメニューの背景色(既定値：#44484e)既定値を使用することを推奨します.

    注意

    CSSカラー値にアルファ値を入れてはいけません。

    o 正しい例: #ff9800

    o 間違った例: #e2ff9800

次の例は、テーマカラーを変更する例です。

cafe::CafeSdk::setThemeColor("#00c73c", "#44484e");

リソース画像変更

NAVER CafeのPLUGライブラリに含まれたリソース画像を変更できます。

Android

Android環境でNAVER CafeのPLUGライブラリに含まれたリソース画像は、次のように変更できます。

  1. NAVER CafeのPLUGライブラリファイル(.aarファイル)の圧縮を解凍します。

  2. 圧縮を解凍したフォルダの/res/drawable-xhdpiフォルダにある画像をお好きな画像に変更します。

  3. 圧縮を解凍したフォルダを再びライブラリファイル(.aarファイル)に圧縮します。

  4. 新しく圧縮したNAVER CafeのPLUGライブラリを適用し、プロジェクトをビルドします。

注意 画像を変更する時に、画像のサイズは既存の画像と同じ物を使用してください。

iOS

iOS環境でNAVER CafeのPLUGライブラリに含まれたリソース画像は、次のように変更できます。

  1. NaverCafeSDK.bundleパッケージにある画像をお好きな画像に変更します。

  2. 修正したパッケージをNAVER CafeのPLUGライブラリに適用し、プロジェクトをビルドします。

注意 画像を変更する時に、画像のサイズは既存の画像と同じ物を使用してください

PreviousPLUG UNREAL 適用ガイドNextPLUG ANDROID 適用ガイド

Last updated