技术

H5游戏平台接入踩坑记录

, ,

H5游戏平台接入踩坑记录

做H5游戏开发几年了，接了不少平台。记录一下主流平台的接入方法和踩过的坑。

市场概况

H5游戏用户规模挺大，主要优势：

  • 不用安装，即点即玩
  • 跨平台，一次开发多处运行
  • 容易分享传播
  • 接广告就能变现
指标 数据
全球用户 20亿+
年增长率 15-20%
平均游玩时长 5-15分钟

CrazyGames

CrazyGames是全球最大的H5平台之一，月活几千万。

平台信息

特性 详情
用户规模 2000万+
游戏数量 数千款
变现方式 广告分成
SDK支持 Cocos Creator 2.x/3.x

SDK下载：

接入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 初始化
CrazyGames.SDK.init({
    debug: false  // 发布时设为false
});

// 横幅广告
CrazyGames.SDK.banner.requestBanner({
    id: 'banner-container'
});

// 激励视频
function showRewardedAd(callback) {
    CrazyGames.SDK.ad.requestAd("rewarded", {
        adStarted: () => {
            console.log("广告开始播放");
            cc.director.pause();  // 暂停游戏
        },
        adFinished: () => {
            console.log("广告播放完成");
            cc.director.resume();  // 恢复游戏
            if (callback) callback(true);  // 发放奖励
        },
        adError: (error) => {
            console.log("广告播放出错:", error);
            cc.director.resume();
            if (callback) callback(false);
        }
    });
}

// 插屏广告
function showInterstitial() {
    CrazyGames.SDK.ad.requestAd("midgame", {
        adStarted: () => cc.director.pause(),
        adFinished: () => cc.director.resume(),
        adError: () => cc.director.resume()
    });
}

最佳实践

  • 广告展示时机：关卡结束、暂停、复活
  • 激励视频用于双倍奖励、复活、解锁内容
  • 广告加载时显示Loading提示

Poki

Poki是老牌的在线游戏平台，月活3000万+，覆盖10亿玩家。

平台信息

特性 详情
成立时间 2013年
月活 3000万+
代表作品 神庙逃亡、地铁跑酷、火柴人跳跃
SDK支持 Cocos Creator 2.x/3.x

SDK下载：

接入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
class PokiManager {
    init() {
        PokiSDK.init().then(() => {
            console.log("Poki SDK初始化成功");
        }).catch((err) => {
            console.error("Poki SDK初始化失败:", err);
        });
    }

    // 游戏加载开始
    gameLoadingStart() {
        PokiSDK.gameLoadingStart();
    }

    // 游戏加载完成
    gameLoadingFinished() {
        PokiSDK.gameLoadingFinished();
    }

    // 游戏开始
    gameplayStart() {
        PokiSDK.gameplayStart();
    }

    // 游戏暂停（显示广告）
    gameplayStop() {
        PokiSDK.gameplayStop();
    }

    // 商业广告（插屏）
    showCommercialBreak() {
        return PokiSDK.commercialBreak().then(() => {
            console.log("广告播放完成");
        });
    }

    // 激励视频
    showRewardedAd(callback) {
        return PokiSDK.rewardedBreak().then((success) => {
            if (success) {
                console.log("用户观看完广告，发放奖励");
                if (callback) callback(true);
            } else {
                console.log("广告未播放或播放失败");
                if (callback) callback(false);
            }
        });
    }
}

// 使用
const poki = new PokiManager();
poki.init();
poki.gameLoadingStart();
// ... 加载资源 ...
poki.gameLoadingFinished();
poki.gameplayStart();

生命周期管理

Poki的生命周期管理比较严格：

1
SDK初始化 -> gameLoadingStart -> 资源加载 -> gameLoadingFinished -> gameplayStart -> gameplayStop（广告）-> gameplayStart（恢复）

必须按这个流程调用，否则审核不过。

GamePix

GamePix是超级H5游戏平台，10000+游戏，覆盖全球休闲玩家。

平台信息

特性 详情
游戏数量 10000+
变现模式 广告分成
用户群体 全球休闲玩家

SDK下载：

接入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 初始化
GamePix.init({
    id: 'your-game-id'
});

// 暂停游戏（显示广告）
GamePix.pause();

// 恢复游戏
GamePix.resume();

// 游戏结束（显示广告）
GamePix.gameOver();

// 关卡完成
GamePix.levelComplete(levelNumber);

WORTAL

WORTAL是免费的超休闲H5游戏平台，主打开发者社区。

平台信息

特性 详情
变现功能 广告、好友邀请、排行榜、内购
社区导向 注重开发者社区建设
SDK功能 完整数据统计

SDK下载：

接入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class WortalManager {
    init() {
        wortal.initialize();
    }

    // 插屏广告
    showInterstitial() {
        wortal.showInterstitial();
    }

    // 激励视频
    showRewarded(callback) {
        wortal.showRewarded(callback);
    }

    // 排行榜
    getLeaderboard(name) {
        return wortal.getLeaderboard(name);
    }

    // 好友邀请
    inviteFriend() {
        wortal.invite();
    }

    // 内购
    purchase(productId) {
        wortal.purchase(productId);
    }
}

GameDistribution

GameDistribution专注网页游戏，支持手机和PC跨端发行。

平台信息

特性 详情
知名客户 Ubisoft、Gameloft、YAD
技术特点 支持iframe嵌入
发行方式 付费分销网络

SDK下载：

iframe嵌入

GameDistribution的特色是可以iframe嵌入：

1
2
3
4
5
6
<iframe
    src="https://html5.gamedistribution.com/your-game-id/"
    width="800"
    height="600"
    frameborder="0">
</iframe>

接入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// 初始化
gdApi.init({
    gameId: 'your-game-id',
    onInit: () => {
        console.log("GD SDK初始化完成");
    }
});

// 显示广告
gdApi.showAd();

// 预加载广告
gdApi.preloadAd();

平台对比

平台 用户规模 变现效率 技术支持 特色功能
CrazyGames 高 中 好 专业支持
Poki 高 高 好 生命周期管理
GamePix 中 中 中 游戏数量多
WORTAL 中 中 中 社区功能
GameDistribution 高 中 中 iframe嵌入

选择建议

新手开发者：

  • Poki：生命周期管理完善
  • CrazyGames：文档详细，支持好

休闲游戏：

  • CrazyGames、Poki

社交游戏：

  • WORTAL（好友、排行榜）

品牌游戏：

  • GameDistribution（iframe嵌入方便推广）

广告变现策略

广告类型对比

类型 适用场景 eCPM 用户体验
激励视频 复活、奖励 高 最好
插屏广告 关卡结束 中 中等
横幅广告 游戏界面 低 一般

激励视频最佳实践

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class RewardedAdManager {
    static REWARD_TYPES = {
        REVIVE: 'revive',           // 复活
        DOUBLE_REWARD: 'double',    // 双倍奖励
        UNLOCK_CONTENT: 'unlock',   // 解锁内容
        BONUS_COIN: 'bonus'         // 额外金币
    };

    showRewardedAd(type, callback) {
        // 1. 检查广告是否准备好
        if (!this.isAdReady()) {
            this.showToast("广告加载中，请稍后再试");
            return;
        }

        // 2. 显示奖励预览
        this.showRewardPreview(type);

        // 3. 播放广告
        this.platform.showRewardedAd((success) => {
            if (success) {
                this.grantReward(type);
                callback(true);
            } else {
                this.showToast("广告播放失败，请重试");
                callback(false);
            }
        });
    }

    showRewardPreview(type) {
        const rewards = {
            [this.REWARD_TYPES.REVIVE]: "观看广告即可复活继续游戏！",
            [this.REWARD_TYPES.DOUBLE_REWARD]: "观看广告获得双倍金币！",
            [this.REWARD_TYPES.UNLOCK_CONTENT]: "观看广告解锁新角色！",
            [this.REWARD_TYPES.BONUS_COIN]: "观看广告获得1000金币！"
        };

        this.showDialog(rewards[type]);
    }
}

广告频率控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class AdFrequencyController {
    constructor() {
        this.lastInterstitialTime = 0;
        this.interstitialInterval = 120000; // 2分钟
        this.sessionAdCount = 0;
        this.maxAdsPerSession = 20;
    }

    canShowInterstitial() {
        const now = Date.now();
        const timeSinceLast = now - this.lastInterstitialTime;

        if (timeSinceLast < this.interstitialInterval) {
            return false;
        }

        if (this.sessionAdCount >= this.maxAdsPerSession) {
            return false;
        }

        return true;
    }

    recordInterstitial() {
        this.lastInterstitialTime = Date.now();
        this.sessionAdCount++;
    }
}

发布流程

1
游戏开发 -> SDK集成测试 -> 打包构建 -> 平台注册 -> 提交审核 -> 上线运营

审核注意事项

  • 内容合规：无暴力、色情、赌博
  • 广告配置：确保广告正常展示
  • 性能优化：加载时间、帧率
  • 用户体验：无卡顿、闪退

性能优化

优化项 建议 工具
包体大小 < 20MB 纹理压缩
加载时间 < 5秒 资源分包
运行时内存 < 200MB 对象池
帧率 稳定60fps Profiler

资源优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 纹理压缩
const textureCompressor = {
    compress(image) {
        return image.toWebP({
            quality: 80,
            method: 6
        });
    }
};

// 音频压缩
const audioOptimizer = {
    compress(audio) {
        return audio.resample(22050).toMP3({
            bitrate: 96
        });
    }
};

数据统计

关键指标

指标 说明 健康值
DAU 日活跃用户 > 1000
留存率 次日/7日/30日 > 40%/20%/10%
平均游戏时长 每次游玩 5-15分钟
ARPU 每用户平均收入 > $0.01
eCPM 每千次展示收入 > $2

分析工具

  • 平台自带分析：基础统计
  • Google Analytics：用户行为分析
  • GameAnalytics：游戏专用分析

常见问题

SDK加载失败

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class SDKLoader {
    load(timeout = 10000) {
        return new Promise((resolve, reject) => {
            const timer = setTimeout(() => {
                reject(new Error("SDK加载超时"));
            }, timeout);

            window.SDKReady = () => {
                clearTimeout(timer);
                resolve(window.SDK);
            };
        });
    }
}

广告填充率低

  • 检查网络连接
  • 确认广告单元配置正确
  • 考虑使用多个广告网络
  • 优化广告展示时机

H5游戏平台接入整体来说流程比较成熟，但每个平台有自己的特点和坑。建议：

  1. 多平台同时发布，最大化收入
  2. Poki的生命周期管理要严格按照流程
  3. 广告频率控制好，别影响用户体验
  4. 包体和性能优化要做好，加载慢用户会流失
  5. 留存和eCPM是关键指标，持续优化

有问题的欢迎留言讨论。