提供一个解决方案:将 cocos creator 构建出来的 web-mobile 项目打包为 playable-ad 项目,即单 html 文件。

需求
制作 playable ad,即单个 html 文件。

代码
https://github.com/fkworld/cocos-to-playable-ad

说明
完整的说明请参考项目的 README.md 文件。
但是我怕字少了没人看,所以粘贴一些我个人认为比较重要的部分。


基础说明

  • 本项目参考了一些网络上的资料,进行了以下改进:
    • 支持 cocos creator 到 2.1.3
    • 完善了核心算法描述(请参考 README.md)
    • 使用 node.js 完成,完善了开发环境描述,代码注释
  • 本项目不包括对图片,声音资源的压缩,需要自行压缩。
  • 本项目不包括使用 cocos creator 打包时的模块选择,需要自行筛选。

如何使用?

  • 开发环境:
    • macOs Cataline 10.15
    • node 12.9.0
    • cocos creator 2.1.3
  • 输入:使用 cocos creator 构建出来的 web-mobile 项目文件夹。
  • 输出:index.html。
  • 使用方法:
    1. 将构建出来的 web-mobile 整个文件夹整个放入项目的 src 目录下。此时目录为:src/web-mobile/…
    2. 修改 src/web-mobile/main.js,注释掉 154 到 163 行,目的是不在代码中载入 project.js,而是在流程中载入。
    3. 在根目录下执行 npm run build,会显示流程执行过程以及相应的消耗时间。
    4. 点击输出文件 dist/index.html,检查在浏览器中是否显示正常。

核心算法

  • 将项目所依赖的资源读取并写入到 window.res,保存为 res.js。
  • 通过 cc.loader.addDownloadHandlers 修改资源载入方式,从 window.res 中载入资源。
  • 将 index.html 中所依赖的 css 和 js 文件,包括一些新的 js 文件写入到 html 文件本身。
25赞

是将打出来的所有的资源压缩在同一个html中吗?
如果是的话,图片,字体,动画等资源是怎么压缩进一个html的?

mark …

读取资源文件,部分文件保存为字符串,部分文件保存为base64编码后的字符串。

很有用的,对于目前的手机网速来说,合并成单文件避免了多次request,插个眼,以后用得到的

mark…楼主威武。

mark

Mark

Thank you for providing a great tool. If I add a 3D model to my project and encode it, it is not possible to execute it in single html. Would you please suggest a solution? it seems like 3d model is extracted to a .bin file and it doesn’t seem to get encoded in base64.

感谢您提供出色的工具。如果我将3D模型添加到项目中并对其进行编码,则无法在单个html中执行它。您能否提出解决方案?似乎3d模型已提取到.bin文件中,并且似乎没有在base64中进行编码

1赞

战略插:eyes:

mark

mark1

插个眼 也行后面会用到 感谢分享

牛逼啊 韩国人?

1赞

是的,韩国新手开发人员。 没有来自CocosCreator的数据。 感谢您的帮助。

mark

在win10系统里面,打包好之后不能正常运行dist/index.html,提示找不到"cc"和"window.boot"。我手动把"web-mobile"里面的"cocos2d-js-min.js"和"main.js"中的代码添加到dist/index.html里,才可以正常运行。

好像之前不能正常运行,跟cocos的“项目-项目设置”有关,cocos第一次的打包的时候,默认是把全部模块都打包了。然后我把没用到的模块取消勾选,再构建项目。这个时候构建的项目再用你的打包工具打包,就可以正常运行。

ccc2.1.2, node.js v13.1.0报错:

Error: ENOENT: no such file or directory, open ‘dist/res.js’
at Object.openSync (fs.js:440:3)
at Object.writeFileSync (fs.js:1281:35)

楼主厉害!工具很实用。但是报错 cc 和 window.boot 找不到,应该是混淆的原因,这两个字段能不能默认不混淆呢?