文档中心查看飞书原文
本页目录

制作试玩

物料准备(海外试玩)

  • 下载地址

  • Icon

  • 应用名的icon

适配点

横竖屏适配

  1. 集成了指色框架,如果首场景是原Load场景则不需要处理,否则在首个脚本调用
JSON
ScreenUtil.setDesignResolutionSize();
  1. 没有集成指色框架,则可以添加下面的脚本,然后调用setDesignResolutionSize
  • CocosCreator 3.x
TypeScript
import { ResolutionPolicy, screen, view } from "cc";

export class ScreenUtil {

    public static setDesignResolutionSize() {
        this._setDesignResolution();
        screen.on("window-resize", this._setDesignResolution, this);
    }

    private static _setDesignResolution() {
        // 设置适配
        const designResolution = view.getDesignResolutionSize();
        const visibleSize = view.getVisibleSize();
        // 场景适配
        if (visibleSize.width / visibleSize.height < designResolution.width / designResolution.height) {
            view.setDesignResolutionSize(designResolution.width, designResolution.height, ResolutionPolicy.FIXED_WIDTH);
        } else {
            view.setDesignResolutionSize(designResolution.width, designResolution.height, ResolutionPolicy.FIXED_HEIGHT);
        }
    }
}

背景适配

背景不强相关

如果背景与游戏布局不强相关,可以直接缩放。集成了指色框架,则直接将背景节点添加BgFix组件即可,如果没有集成,则可以加入下面脚本,然后绑定

  • 3.x
TypeScript
import { Component, Enum, UITransform, view, _decorator, ccenum } from "cc";

const { ccclass, property, menu, requireComponent } = _decorator;

@ccclass('BgFit')
@menu(DEV && '自定义组件/背景适配' || '')
@requireComponent(UITransform)
export class BgFit extends Component {

    protected onLoad(): void {
        const visibleSize = view.getVisibleSize();
        const transform = this.node.getComponent(UITransform)!;
        let scaleX = visibleSize.width / transform.width;
        let scaleY = visibleSize.height / transform.height;
        scaleX = scaleY = Math.max(scaleX, scaleY);
        this.node.setScale(scaleX, scaleY, this.node.scale.z);
    }
}

背景强相关

建议此时,额外添加一张纯色背景,然后加上上面的组件

代码处理

为了适应各个平台,请进行下面点位的打点

JSON
// 加载完成(即首个脚本已经加载)
window.zsGameReady && window.zsGameReady();
// 游戏开始
window.zsGameStart && window.zsGameStart();
// 游戏结束
window.zsGameEnd && window.zsGameEnd();
// 重新开始
window.zsGameRestart && window.zsGameRestart();

super-html 试玩插件接入(Cocos Creator 3.x)

1. 安装插件

解压附件,把 super-html 文件夹放到目标工程的 extensions/super-html;把 adapter/super_html_playable.ts 放到 assets/super_html_playable.ts。若目标工程尚无此脚本

重启 Cocos Creator,在“扩展”菜单中打开“super html”。

2. 接入游戏接口

在业务脚本中导入适配器(按以上位置放置时):

TypeScript
import super_html_playable from 'db://assets/super_html_playable';

// 初始化时设置当前产品的真实商店地址,尤其是 Unity 渠道
super_html_playable.set_google_play_url('https://play.google.com/store/apps/details?id=你的包名');
super_html_playable.set_app_store_url('https://apps.apple.com/app/id你的应用ID');

// 胜利或失败进入结算时调用,每次结算触发一次
super_html_playable.game_end();

// 在下载 / Install / CTA 按钮的用户点击回调中调用
super_html_playable.download();

Google 渠道可用 super_html_playable.is_hide_download() 判断是否隐藏自定义下载按钮,以使用平台注入的按钮。商店链接需替换为当前产品地址,不要直接沿用示例。

3. 使用 Cocos 构建并自动生成渠道包

使用 Cocos Creator 的“项目 → 构建发布”,选择 Web Mobile(web-mobile),输出到工程 build/web-mobile,然后执行构建。本工程由插件的 onAfterBuild 钩子自动转换 Web 构建结果,生成 build/super-html 下的各渠道文件。日常流程直接使用 Cocos 构建即可。

super html 面板也提供手动打包路径;需要手动转换已有 Web 产物时,路径应指向包含 index.html 的 Web 构建目录。

4. 构建与验收要点

  • 确认构建日志出现 [super-html]、对应渠道输出及结束标记,并检查目标 HTML 的修改时间属于本次构建,避免误交旧包。

  • 若 Web 入口引用缺失的外部脚本(例如 ../../zs.js),先修复真实依赖再构建;不要用空脚本代替业务 SDK。

  • 使用渠道测试环境检查加载、横竖屏、音效、胜负结算和下载跳转;普通浏览器预览不能完整验证渠道 SDK 行为。

  • 包体限制以投放平台当期要求为准(一般要求5M以下),超限时精简纹理、音频和无用资源后重新构建。

插件下载

完整插件与适配脚本见下方 ZIP 附件。

super-html-5.1.0-cocos3-integration.zip下载附件 · 5.33 MB