Skip to content

Latest commit

 

History

History
executable file
·
233 lines (181 loc) · 8.63 KB

README.md

File metadata and controls

executable file
·
233 lines (181 loc) · 8.63 KB
Raw

21点游戏 - Cocos Creator 制造

「21点游戏」是 Cocos Creator 的 Demo 项目之一。由腾讯游戏和触控科技联合开发，用于教学和展示 Cocos Creator 快速开发游戏界面和玩法的目的。

游戏内容包括：

  • 完整的菜单、排行榜和游戏循环
  • 大量需要通过数据动态读取修改的图片和字体资源
  • 高质量的帧动画特效
  • 多分辨率自适应的 UI 布局
  • 外部导入的状态机代码库
  • 使用曲线动画和脚本混合呈现的动效细节

关于本项目中使用的资源，请阅读资源授权声明。

本仓库已是优化后版本

optimization目录存放优化后小游戏项目

下面介绍下cocos 21点游戏的优化过程。

初始项目

将demo打包到小游戏平台，看初始情况下文件大小分布

构建设置及目录结构

主包代码接近3.42MB（不包括cocos目录，这是引擎插件目录）

.
├── adapter-min.js
├── assets
│   ├── internal // cocos默认资源
│   └── main // 场景目录
├── ccRequire.js
├── cocos // 引擎插件目录
│   ├── cocos2d-js-min.js
│   ├── plugin.json
│   └── signature.json
├── game.js
├── game.json
├── main.js
├── project.config.json
└── src
    └── settings.js

优化包体

快速优化版

快速优化版本指的是通过修改cocos构建方式即可实现的优化。

  • 主包压缩类型改为小游戏分包：可将assets中非引擎资源压缩为小游戏分包
  • 初始场景分包：将首场景资源快速剥离，放到主包中加载，提升首场景启动速度

可见，只是简单的构建修改，就能减小1.3MB

.
├── adapter-min.js
├── assets
│   ├── internal
│   └── start-scene // 初始场景
├── ccRequire.js
├── cocos
│   ├── cocos2d-js-min.js
│   ├── plugin.json
│   └── signature.json
├── game.js
├── game.json
├── main.js
├── project.config.json
├── src
│   └── settings.js
└── subpackages
    └── main // 其他场景及文件

极限优化版

经过快速优化后，主包中还是有2.16MB，但这还不是优化的极限。理论上，主包中只需包含首帧所需图片，用非引擎的方式先渲染首帧图片，其余资源，都可在首帧渲染后加载。因此可以进一步优化。

可优化项：

  • 初始场景也放分包加载
  • adapter-min.js放分包
  1. 初始场景放分包加载 在快速优化版中，通过勾选初始场景分包，可将初始场景拆分出来放主包加载，但同时也增加了主包体积。 通过cocos官方文档-Asset Manager了解到如何将场景单独分包、以及如何处理场景间资源依赖。

在构建时，配置为 Asset Bundle 的文件夹中的资源（包含场景、代码和其他资源）以及文件夹外的相关依赖资源都会被合并到同一个 Asset Bundle 文件夹中。比如场景 A 放在 a 文件夹中，当 a 文件夹配置为 Asset Bundle 后，场景 A 以及它所依赖的资源都会被合并到 Asset Bundle a 文件夹中。

  • 当同个资源被不同优先级的多个 Asset Bundle 引用时，资源会优先放在优先级高的 Asset Bundle 中，低优先级的 Asset Bundle 只会存储一条记录信息。此时低优先级的 Asset Bundle 会依赖高优先级的 Asset Bundle。 如果你想在低优先级的 Asset Bundle 中加载此共享资源，必须在加载低优先级的 Asset Bundle之前先加载高优先级的 Asset Bundle。
  • 当同个资源被相同优先级的多个 Asset Bundle 引用时，资源会在每个 Asset Bundle 中都复制一份。此时不同的 Asset Bundle 之间没有依赖关系，可按任意顺序加载。所以请尽量确保共享的资源（例如Texture、SpriteFrame、Audio等）所在的 Asset Bundle 优先级更高，以便让更多低优先级的 Asset Bundle 共享资源，从而最小化包体

据此对cocos工程进行改造。

  • 新建menu目录，将menu场景从scenes目录移动到menu目录，menu目录配置为bundle，并将优先级设置为2，目标平台微信小游戏，压缩类型小游戏分包
  • 新建table目录，将table场景从scenes目录移动到table目录，table目录配置为bundle，优先级默认为1，目标平台微信小游戏，压缩类型小游戏分包

将scripts/Menu.js改为如下

cc.Class({
    extends: cc.Component,

    properties: {
        audioMng: cc.Node
    },

    // use this for initialization
    onLoad: function () {
        this.audioMng = this.audioMng.getComponent('AudioMng');
        this.audioMng.playMusic();
        // 预载bundle和场景
        cc.assetManager.loadBundle('table', (err, bundle) => {
            bundle.preload('table');
        });
    },

    playGame: function () {
        // 加载场景
        const bundle = cc.assetManager.getBundle('table');
        bundle.loadScene('table', (err, scene) => {
            cc.director.runScene(scene);
        })
    },

    // called every frame
    update: function (dt) {

    },
});

做以上改动后，不需要再勾选初始场景分包，重新构建项目

此时项目结构如下

.
├── assets
│   └── internal
├── ccRequire.js
├── adapter-min.js
├── cocos
│   ├── cocos2d-js-min.js
│   ├── plugin.json
│   └── signature.json
├── game.js
├── game.json
├── main.js
├── project.config.json
├── src
│   └── settings.js
└── subpackages
    ├── main
    ├── menu // menu场景及其依赖文件
    └── table // table场景及其依赖文件

因为导出时没有初始场景，而是作为分包加载，因此需要对main.js做一定改动。

// main.js，游戏运行前先加载menu分包
var bundleRoot = [INTERNAL, 'menu'];

至此场景作为分包加载改动已经完成，游戏已可运行，各包体大小如下

  1. adapter放分包加载 adapter放分包加载有两个好处
  • 主包再次减小100KB
  • adapter分包加载完成后才需要加载引擎，启动时不需要引擎代码注入。

开始改造

  • 在subpackages/下新建adapter目录
  • subpackages/adapter新建game.js
  • 将adapter-min.js移动到subpackages/adapter
  • game.json新增adapter分包配置
  • game.js改造
"use strict";
wx.loadSubpackage({
  complete: () => {},
  fail: (err) => {
    console.error('load adapter error ', err)
  },
  name: 'adapter',
  success: () => {
    require('subpackages/adapter/adapter-min.js')
    __globalAdapter.init();
    requirePlugin('cocos');
    __globalAdapter.adaptEngine();
    require('./ccRequire');
    require('./src/settings');
    require('./main');

    cc.view._maxPixelRatio = 4;

    if (cc.sys.platform !== cc.sys.WECHAT_GAME_SUB) {
      // Release Image objects after uploaded gl texture
      cc.macro.CLEANUP_IMAGE_CACHE = true;
    }

    window.boot();
  },
})

改造完成，再看下各分包大小

主包排除引擎插件后，仅不到70KB。相比之下，优化前3.42MB；快速优化版2.16MB

不过极限优化版本需要对原项目进行手动更改，cocos提供定制项目构建流程的能力。