Cocos Creator 三端接入穿山甲 SDK

本文将详细讲解如何在 Cocos Creator（2.x / 3.x）项目中接入穿山甲（Pangle）广告 SDK ，并支持 Android / iOS / Web（三端）。内容包含：

接入流程
原生层封装
JS/TS 调用桥接
激励视频 / 插屏 / Banner 示例
架构设计建议

一、整体架构

1.1 三端接入结构

复制代码

          Cocos Creator (TS/JS)
                  │
          JSB / Bridge 层
        ┌───────────────┐
        │               │
   Android(Java)    iOS(Objective-C)
        │               │
        └──── 穿山甲 SDK（Pangle） ────┘

           Web 端（H5）
                │
           穿山甲 Web SDK

1.2 核心思路

原生端：封装广告能力
Cocos：统一调用接口
通过事件回调处理广告结果

二、准备工作

2.1 注册穿山甲平台

创建应用
创建广告位（激励视频 / Banner / 插屏）
获取：
- AppID
- 广告位ID（CodeId）

三、Android 接入

3.1 导入 SDK

在 proj.android 中：

复制代码

implementation 'com.pangle.cn:ads-sdk:5.6.0.0'

3.2 初始化 SDK

java 复制代码

TTAdConfig config = new TTAdConfig.Builder()
    .appId("你的AppID")
    .useTextureView(true)
    .appName("YourGame")
    .titleBarTheme(TTAdConstant.TITLE_BAR_THEME_DARK)
    .build();

TTAdSdk.init(context, config);

3.3 激励视频封装

java 复制代码

public class AdManager {

    public static void showRewardAd(Activity activity, String codeId) {
        AdSlot adSlot = new AdSlot.Builder()
                .setCodeId(codeId)
                .setSupportDeepLink(true)
                .setRewardName("金币")
                .setRewardAmount(100)
                .build();

        TTAdNative adNative = TTAdSdk.getAdManager().createAdNative(activity);

        adNative.loadRewardVideoAd(adSlot, new TTAdNative.RewardVideoAdListener() {
            @Override
            public void onRewardVideoAdLoad(TTRewardVideoAd ad) {
                ad.showRewardVideoAd(activity);
            }

            @Override
            public void onError(int code, String msg) {
                sendToCocos("ad_error");
            }
        });
    }
}

3.4 回调到 Cocos

java 复制代码

public static void sendToCocos(String msg) {
    Cocos2dxJavascriptJavaBridge.evalString(
        String.format("window.onAdCallback('%s')", msg)
    );
}

四、iOS 接入

4.1 安装 SDK

ruby 复制代码

pod 'Ads-CN', '~> 5.6.0.0'

4.2 初始化

复制代码

BUAdSDKManager *manager = [BUAdSDKManager sharedManager];
manager.appID = @"你的AppID";
[manager startWithAsyncCompletionHandler:nil];

4.3 激励视频

复制代码

BURewardedVideoAd *rewardedVideoAd = [[BURewardedVideoAd alloc] initWithSlotID:@"codeId"];
rewardedVideoAd.delegate = self;
[rewardedVideoAd loadAdData];

播放：

复制代码

[rewardedVideoAd showAdFromRootViewController:self];

4.4 回调 JS

复制代码

NSString *js = @"window.onAdCallback('reward_success')";
se::ScriptEngine::getInstance()->evalString([js UTF8String]);

五、Web 端接入

5.1 引入 SDK

html 复制代码

<script src="https://sf16-muse-va.ibytedtos.com/obj/ad-tetris-site/pangle_sdk.js"></script>

5.2 使用示例

jsx 复制代码

pangle.init({
  appId: '你的AppID'
});

function showReward() {
  pangle.showRewardVideo({
    codeId: '广告位ID',
    onClose: (res) => {
      if (res.isEnded) {
        window.onAdCallback('reward_success');
      }
    }
  });
}

六、Cocos Creator 统一封装（TS）

6.1 广告管理器

tsx 复制代码

class AdManager {

    static showReward() {
        if (cc.sys.isNative) {
            if (cc.sys.os === cc.sys.OS_ANDROID) {
                jsb.reflection.callStaticMethod(
                    "org/cocos2dx/javascript/AppActivity",
                    "showRewardAd",
                    "(Ljava/lang/String;)V",
                    "codeId"
                );
            } else if (cc.sys.os === cc.sys.OS_IOS) {
                jsb.reflection.callStaticMethod(
                    "AppController",
                    "showRewardAd:",
                    "codeId"
                );
            }
        } else {
            window.showReward();
        }
    }
}

6.2 回调处理

tsx 复制代码

(window as any).onAdCallback = function(msg: string) {
    switch (msg) {
        case 'reward_success':
            console.log('发放奖励');
            break;
        case 'ad_error':
            console.log('广告失败');
            break;
    }
}

七、常见问题

7.1 广告不显示

检查 AppID
检查广告位 ID
是否开启测试模式

7.2 iOS 无回调

delegate 未设置
控制器未持有对象

7.3 Android 崩溃

混淆未配置
权限缺失（网络、存储）

八、最佳实践

8.1 架构建议

复制代码

AdManager（TS）
   ↓
NativeBridge
   ↓
Platform AdManager（Java / OC）

8.2 建议

所有广告走统一入口
加缓存（预加载广告）
控制频率（避免封号）

九、总结

接入穿山甲 SDK 的核心就是三点：

原生层正确初始化
JSB 通信打通
统一 TS 管理

完成后即可实现：

激励视频
插屏广告
Banner

并支持三端统一逻辑。