cocos creater 3.x 构建QQ小游戏

٩(⁎ ́ი ̀⁎)۶:.✧

已于 2023-02-24 18:27:08 修改

阅读量1.1k

点赞数 2

分类专栏：微信小程序前端 JavaScript 文章标签：小程序游戏程序 cocos2d 游戏引擎前端

于 2023-02-17 18:49:53 首次发布

本文链接：https://blog.csdn.net/qq_26069551/article/details/129091998

版权

JavaScript 同时被 3 个专栏收录

34 篇文章 1 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

微信小程序

5 篇文章 0 订阅

订阅专栏

一、目前 cocos creater 不支持直接构建QQ小游戏，需要构建成微信小游戏，然后修改成QQ小游戏

构建QQ小游戏

二、构建QQ小游戏不能勾选分离引擎的选项，勾选分离引擎的选项，需要安装cocos微信小游戏引擎插件，这个插件似乎目前只支持微信小游戏平台。

qq小程序开发者工具

// 赋值 globalThis.System
globalThis.System = global.System;

三、在QQ小程序中全局 globalThis.System 变量并未定义，到 game.js 文件里，在引入 SystemJS 支持的下一行，加入代码：globalThis.System = global.System，赋值globalThis.System。

四、进入build/wechatgame,找到game.json文件, 如果是竖屏，修改 “deviceOrientation”: “landscapeRight” 为 “deviceOrientation”: “landscape” 。

"deviceOrientation": "landscape",

qq小程序开发者工具

五、在QQ小程序开发者工具上面预览打包好的页面，图片拉伸变形，不用慌张，可能是QQ小程序开发者工具的问题，用手机预览看看。

qq小程序开发者工具

1、横屏游戏适配屏幕高度，竖屏游戏适配屏幕宽度

cocos项目设置

2、cocos creater 3.x 分辨率动态适配代码


import { _decorator, Component, view, ResolutionPolicy, CCBoolean } from 'cc';
const { ccclass, property } = _decorator;


@ccclass('AutoResolutionRules')
export class AutoResolutionRules extends Component {
    @property(CCBoolean)
    private isCanvas: boolean = false;
    onLoad() {
        if (this.isCanvas) {
            this.initResolutionRules();
        }
    }

    // 屏幕适配规则
    initResolutionRules() {
        var _desWidth = view._designResolutionSize.width;
        var _desHeight = view._designResolutionSize.height;

        var _realWidth = view.getVisibleSize().width;
        var _realHeight = view.getVisibleSize().height;

        var _ratioDes = _desWidth / _desHeight;
        var _ratioReal = _realWidth / _realHeight;

        if (_ratioReal >= _ratioDes) {
            view.setResolutionPolicy(ResolutionPolicy.FIXED_HEIGHT);
        } else {
            view.setResolutionPolicy(ResolutionPolicy.FIXED_WIDTH);
        }
    }
}