本页目录
制作试玩
物料准备(海外试玩)
下载地址
Icon
应用名的icon
适配点
横竖屏适配
- 集成了指色框架,如果首场景是原Load场景则不需要处理,否则在首个脚本调用
ScreenUtil.setDesignResolutionSize();
- 没有集成指色框架,则可以添加下面的脚本,然后调用setDesignResolutionSize
- CocosCreator 3.x
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
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);
}
}
背景强相关
建议此时,额外添加一张纯色背景,然后加上上面的组件
代码处理
为了适应各个平台,请进行下面点位的打点
// 加载完成(即首个脚本已经加载)
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. 接入游戏接口
在业务脚本中导入适配器(按以上位置放置时):
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 附件。