PLUG Cocos-2dx Guide

Quick Start

Download latest version

https://github.com/naver/cafe-sdk-cocos2dx/releases/download/4.4.8/cocos2dx_4_4_8.zip

1. Project settings

1. Copy the sample/Classes/plugincafe folder included in the sample project to the game project.

2. Add the PLUG SDK project to the game project according to the operating system.

   • Android: Add the PLUG SDK project in sample/proj.android-studio/app/libs

     folder to the game project as a library.

   • iOS: Add the PLUG SDK project in lib/iOS folder to the game project.

2. Initialization

Initialize PLUG SDK according to the language that is being supported, as explained below.

2.1 PLUG SDK initialization (only supports Korean - Naver cafe)

When initializing PLUG SDK that only supports Korean, set the initialization settings like indicated below.

• Client ID and Client Secret received when registering an application on the login developer center using a Naver ID

• Cafe ID received by opening a Naver cafe

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

2.2 PLUG SDK initialization (only supports a foreign language)

When initializing PLUG SDK that only supports foreign languages, set the initialization setting like indicated below.

• consumerKey: Consumer key received by opening the community

• consumerSecretKey: Consumer secret key received by opening the community

• cummunityNo: Community No. received by opening the community

• loungeNo: Lounge No. received by opening the lounge

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

3. Start PLUG SDK

Run PLUG SDK after initialization is complete.

3.1 startHome() method

The StartHome() method is used for starting PLUG SDK.

cafe::CafeSdk::startHome();

Android studio sample project

1. Open the project in the sample/proj.android-studio folder on Android Studio.

2. Build the project.

3. Check if the plugin is running normally in the application.

iOS sample project

1. Open the project in the sample/proj.ios_mac folder on XCode.

2. Build the project.

3. Check if the plugin is running normally in the application.

Initialization of a plugin that supports the global community and a domestic Naver cafe

When it supports both the global community and a domestic Naver cafe, the initialization setting should be set for both the global community and domestic Naver cafes.

Start / Close PLUG

Start or close the plugin while a certain tab is selected.

startHome() method

Start the plugin while home tab is selected.

static void startHome()

The following is an example of the startHome() method.

   /**
   * Start with home tab.
   */
  cafe::CafeSdk::startHome();

Horizontal mode, vertical mode

The plugin supports both horizontal and vertical modes.

Android

In the Android environment, horizontal and vertical modes are automatically applied without having to apply the setting separately.

iOS

In the iOS environment the setOrientationIsLandscape method is used for applying horizontal and vertical modes.

The following is an example of using the horizontal mode on PLUG.

//Default value is Yes
//Horizontal mode
[[NCSDKManager getSharedInstance] setOrientationIsLandscape:YES];

The following is an example of using the vertical mode on the plugin.

// Vertical mode
[[NCSDKManager getSharedInstance] setOrientationIsLandscape:NO];

Adjust transparency

If you adjust transparency using the adjustment slider on the upper left side of the plugin screen, you can use the game and the cafe at the same time.

transparency	Description
Alpha value 100%	deliver touch events to the plugin
Alpha value 100% below	deliver touch events to the game

Android

You can set the setTransparentable() method to enable the transparency adjustment slider in the Android environment.

public static void setTransparentable(Activity activity, boolean isTransparentable)

If you set "true" for the isTransparentable parameter value, you can use the transparency adjustment slider (default value: true).

The following is an example of using the transparency adjustment slider.

  /**
   * You can set whether or not to use the transparency adjustment slider.
   *
   * Boolean type value for enabling @param isTransparentable transparency adjustment
   */
  Glink.setTransparentable(activity, true)

iOS

Apply the disableTransparentSlider: method setting to use transparency adjustment slider in iOS environment.

(void)disableTransparentSlider:(BOOL)disable;

If you set YES as the disable parameter value, you can use the transparency adjustment slider (default value: YES).

The following is an example of using the transparency adjustment slider.

/*
 Remove the function for adjusting transparency
 Default value: YES
 */
// Use the transparency function
[[NCSDKManager getSharedInstance] disableTransparentSlider:YES];

The following is an example of not using the transparency adjustment slider.

// Remove the transparency function
[[NCSDKManager getSharedInstance] disableTransparentSlider:NO];

Widget

A widget is an element that is automatically displayed on the screen when the fold button is pressed on the plugin. You can use the plugin anywhere in the game by using a widget.

Widget Display

You can apply the showWidgetWhenUnloadSDK() method setting in order to display the widget when the fold button is pressed on the plugin.

static void showWidgetWhenUnloadSdk(bool show)

If you set "true" as the show parameter value, the widget will be displayed when the plugin window is folded (default value: true).

The following is an example of displaying the widget.

  /**
   * You can decide whether or not to display the widget when the plugin window is folded.
   *
   * Boolean type value for displaying @param show widget
   */
  cafe::CafeSdk::showWidgetWhenUnloadSdk(true);

Close widget

Use the stopWidget() method to close the widget.

static void stopWidget()

The following is an example of force closing the widget.

  /**
   * Close the widget.
   */
  cafe::CafeSdk::stopWidget();

Default position settings for the widget

When the widget is first run, it is displayed on the center-left part of the screen. If you wish to set the default position settings when the widget is first run, use the setWidgetStartPosition() method. However, when the widget is run again after the user has moved the widget, the widget will be displayed in the position where the user last moved it.

static void setWidgetStartPosition(bool isLeft, int heightPercentage);

The following is an example for setting the widget's default position to 20% from top, on the right side of the screen.

  /**
   * isLeft: If the value is true, it is displayed on the left. If the value is false, it is displayed on the right.
   * heightPercentage: You can designate the vertical position using %.
   */
  cafe::CafeSdk::setWidgetStartPosition(false, 20);

Screen capture

You can capture the game screen by pressing the screen capture button on the widget.

Screen capture button

The screen capture function is run by registering the widget screen capture button click listener (onCafeSdkWidgetScreenshotClick) with the onCafeSdkWidgetScreenshotClick() method.

virtual void onCafeSdkWidgetScreenshotClick()

The following is an example of running the widget screen capture button click listener.

  /**
   * Register the class where the listener is being used.
   */
bool HelloWorld::init()
{
...
    cafe::CafeSdk::setCafeListener(this);
...    
    return true;
}

  /**
   * Set the widget screen capture button click listener.
   */
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);
    }
}

Screen capture settings

You can use the setUseScreenshot() method to enable screen capture functionality.

static void setUseScreenShot(bool use);

If you set the parameter value as true, the screen capture button is displayed on the widget (default value: true).

The following is an example of using the screen capture function.

  /**
   * Use the screen capture function.
   */
  cafe::CafeSdk::setUseScreenShot(true);

Video recording button

If you press the video recording button on the widget, you can record the game screen.

The game screen recording function is run by pressing the video recording button, but only works after registering the widget video recording button click listener (onCafeSdkOnRecordFinished) with the onCafeSdkOnRecordFinished() method. virtual void onCafeSdkOnRecordFinished(const std::string& fileUrl)

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

The following is an example of using the video recording button click listener.

  /**
   * Register the class where the listener is being used.
   */
bool HelloWorld::init()
{
...
    cafe::CafeSdk::setCafeListener(this);
...    
    return true;
}

  /**
   * set the settings for the widget video recording button click listener.
   */
void HelloWorld::onCafeSdkOnRecordFinished(const std::string& fileUrl) {
    cafe::CafeSdk::startVideoWrite(fileUrl);
}

Video recording

If you press the video recording button, you can record the game screen while playing the game.

• The video recording function is supported on Android 5.0 or above.

• Video recording functionality is supported on iOS 9.0 or above.

Use the video recording function on the widget

If you press the video recording button on the widget, you can record the game screen while playing the game.

Video recording settings

You can use the setUseVideoRecord() method to enable the video recording function.

static void setUseVideoRecord(bool use)

If you set the use parameter value as true, the video recording button will be displayed on the widget (default value: false).

The video recording button is not displayed on the widget for devices using Android 5.0 or below and iOS 9.0 or below, even if you set the use parameter value as true.

The following is an example of using the video recording function.

  /**
   * You can decide whether or not to use the video recording function.
   *
   * Boolean type value for enabling @param use video recording function
   */
  cafe::CafeSdk::setUseVideoRecord(true)

Recording ended callback listener

Tasks that should be processed when the video recording is stopped are carried out by registering the onCafeSdkOnRecordFinished listener.

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

The following is an example of using the recording ended listener.

// Register the recording ended listener
cafe::CafeSdk::setCafeListener(this);

   /**
   * It is called when video recording is stopped.
   *
   * URI (there is no URI for iOS) for the file route where the @param uri video is stored.
   */
void HelloWorld::onCafeSdkOnRecordFinished(const std::string& fileUrl) {
    cafe::CafeSdk::startVideoWrite(-1, "", "", fileUrl);
}

Use the video recording function on the game

You can run the video recording button from the game developer to record the game screen.

Start video recording

Use the startRecord() method to start video recording.

Video recording is not available in devices using Android 5.0 or below or using iOS 9.0 or below.

static void startRecord();

The following is an example of starting video recording.

  /**
   * Start video recording.
   *
   */
  cafe::Record::startRecord();

Stop video recording

Use the stopRecord() method to stop video recording.

static void stopRecord();

The following is an example of stopping video recording.

  /**
   * Stop video recording.
   *
   */
  cafe::Record::stopRecord();

Recording ended callback listener

Tasks that should be processed after completing video recording are run by registering the recording ended listener (onSDKRecordFinish) with the setRecordListener() method.

static void setRecordListener(RecordListener* listener);

The following is an example of using the recording complete callback listener.

    // Register listener
    cafe::Record::init();
    cafe::Record::setRecordListener(this);


   /**
   * It is called when video recording is stopped.
   *
   * URI (there is no URI for iOS) for the file route where @param uri video is stored
   */
void HelloWorld::onSDKRecordFinish(const std::string& uri) {
    cafe::CafeSdk::startVideoWrite(uri);
}

App scheme processing

When you press the banner image that is displayed on the home screen of the game plugin, you can go to the App scheme to run game functions.

You can register the banner image for moving to the App scheme from the cafe management menu.

Android

If you set the onCafeSdkClickAppSchemeBanner listener on Android environment while there is a banner image that goes to App scheme, the App scheme processing function can be operated when a touch event has occurred. virtual void onCafeSdkClickAppSchemeBanner(const std::string& appScheme)

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

The following is an example of using a listener to process the App scheme.

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

// App scheme touch listener settings.
void HelloWorld::onCafeSdkClickAppSchemeBanner(const std::string& appScheme) {
    cafe::CafeSdk::showToast(appScheme);
}

iOS

When pressing a banner image that goes to App scheme in the iOS environment, set the App delegate on openURL: method on the App delegate to process the App scheme as indicated below.

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
...
// A scheme that is registered in management menu is processed in the App delegate.
//ex : gLinkSample://test
    if ([[url scheme] isEqualToString:@"gLinkSample"]) {
        if ([[url host] isEqualToString:@"test"]) {
            //todo
        }
    }
...
}

Callback listener

Register the callback listener to process events that have occurred in the PLUG

Register callback listener

Use the setCafeListener() method to register a callback listener that processes events that have occurred in the PLUG

static void setCafeListener(CafeListener* listener)

The following is an example of registering a callback listener.

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

PLUG startup listener

onCafeSdkStarted is a callback listener that processes events that have occurred during PLUG startup.

virtual void onCafeSdkStarted()

The following is an example of using the plugin startup listener.

   // PLUG startup listener settings
void HelloWorld::onCafeSdkStarted() {
    cafe::CafeSdk::showToast("onCafeSdkStarted");
}

PLUG closing listener

OnCafeSdkStopped is a callback listener that processes events that have occurred when the PLUG is closed.

virtual void onCafeSdkStopped()

the following is an example of using the PLUG closing listener.

   // PLUG closing listener settings
void HelloWorld::onCafeSdkStopped() {
    cafe::CafeSdk::showToast("onCafeSdkStopped");
}

App scheme listener

onCafeSdkClickAppSchemeBanner is a callback listener that processes events that have occurred when pressing a banner image that goes to the App scheme in an Android environment.

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

The following is an example of using the App scheme listener.

   // App scheme listener settings
void HelloWorld::onCafeSdkClickAppSchemeBanner(const std::string& appScheme) {
    cafe::CafeSdk::showToast(appScheme);
}

Cafe registration listener

onCafeSdkJoined is a callback listener that processes events that have occurred when game users join the cafe on the PLUG.

virtual void onCafeSdkJoined()

The following is an example of using the cafe registration listener.

   // Cafe registration listener settings
void HelloWorld::onCafeSdkJoined() {
    cafe::CafeSdk::showToast("onCafeSdkJoined");
}

Post registration listener

OnCafeSdkPostedArticle is a callback listener that processes events that have occurred when users register posts on the plug.

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

the following is an example of using the post registration listener.

   /** Post registration listener settings
     * MenuId is where @param menuId posts are registered
     * The number of image files in which @param imageCount is attached
     * The number of video files in which @param videoCount is attached
     **/
void HelloWorld::onCafeSdkPostedArticle(int menuId, int imageCount, int videoCount) {
    cafe::CafeSdk::showToast("onCafeSdkPostedArticle " + StringUtils::format("%d, %d, %d", menuId, imageCount, videoCount));
}

Comment registration listener

onCafeSdkPostedComment is a callback listener that processes events that have occurred when users register comments on posts in the PLUG.

virtual void onCafeSdkPostedComment(int articleId)

The following is an example of using the comment registration listener.

   // Comment registration listener settings
void HelloWorld::onCafeSdkPostedComment(int articleId) {
    cafe::CafeSdk::showToast("onCafeSdkPostedComment " + StringUtils::format("%d", articleId));
}

Voting ended listener

onCafeSdkDidVote is a callback method that processes events that have occurred when users vote on comments in the PLUG.

virtual void onCafeSdkDidVote(int articleId)

The following is an example of using the voting ended listener.

   // Voting ended listener setting
void HelloWorld::onCafeSdkDidVote(int articleId) {
    cafe::CafeSdk::showToast("onCafeSdkDidVote " + StringUtils::format("%d", articleId));
}

Screen capture button click listener

onCafeSdkWidgetScreenshotClick is a callback listener that processes events that have occurred when the users pressed the screen capture button on the widget. Refer to "widget” for details about the screen capture button.

The screen capture button click listener is supported on PLUG 1.7.0 or above.

virtual void onCafeSdkWidgetScreenshotClick()

The following is an example of using the screen capture button click listener. By using the screen capture function on the callback listener, you can capture the screen when you press the screen capture button.

  /**
   * Widget screenshot button click listener settings
   */
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);
    }
}

Recording ended listener

onCafeSdkOnRecordFinished is a callback listener that processes events that have occurred when the video recording is stopped on the PLUG.

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

다음은 녹화 완료 리스너를 구현한 예다.

  /** Recording ended listener settings
   * You can decide whether or not to use the video recording function.
   *
   * URI for the file route where the @param uri video is stored
   */
void HelloWorld::onCafeSdkOnRecordFinished(const std::string& fileUrl) {
    cafe::CafeSdk::startVideoWrite(-1, "", "", fileUrl);
}

Game ID linkage

By linking the user’s game ID and cafe ID, they can be managed. You can check for the list of linked game ID and the cafe IDs from the cafe management menu.

In order to link a game ID and cafe ID, the syncGameUserId() method should be used.

static void syncGameUserId(std::string gameUserId)

The following is an example of linking the game ID and cafe ID.

  /**
   * Link the game ID and cafe ID.
   *
   * @param gameUserId game ID
   */
  cafe::CafeSdk::syncGameUserId("usergameid");

Change theme color

You can change the theme color for the PLUG.

In order to change the theme color, the setThemeColor() method is used.

/** 
* The default value for the themeColorCSSString parameter is ‘#00c73c.'
* The default value for the tabBackgroundColorCSSString parameter is ‘#44484e.’
* It is recommended that you use the default value for the tabBackgroundColorCSSString parameter.
**/

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

• themeColorCSSString: The default color that is used on the theme (default value: #00c73c)

• backgroundCSSString: the background color for the tab menu (default value: #44484e). It is recommended that you use the default value.

  Caution Do not apply alpha values for the CSS color value.

  • Correct example: #ff9800

  • Incorrect example: #e2ff9800

The following is an example of changing the theme color.

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

Change resource image

The resource image that is included in Naver cafe PLUG library can be changed as indicated below.

Android

The resource image that is included in Naver cafe PLUG library from Android environment can be changed as indicated below.

1. Unzip the Naver cafe PLUG library file (.aar file).

2. Change the image in the /res/drawable-xhdpi folder to the desired image.

3. Compress the unzipped folder to a library file (.aar file).

4. Apply the new Naver cafe PLUG library to build the project.

Caution When changing the image, the new image's size should be identical with the previous image.

iOS

The resource image that is included in Naver cafe PLUG library in an iOS environment can be changed as indicated below.

1. Change the image in the NaverCafeSDK.bundle package to the desired image.

2. Apply the new package to the Naver cafe PLUG library and build the project.

Caution When changing the image, the new image's size should be identical with the previous image.