fkworld / cocos-to-playable-ad

将 cocos creator 构建出来的 web-mobile 项目打包为 playable-ad 项目，即单 html 文件。

2020.7.28，最近工作较忙，没有精力将版本支持到2.4，更多的支持会在2020年9月后更新。

cocos-to-playable-ad

将 cocos creator 构建出来的 web-mobile 项目打包为 playable-ad 项目，即单 html 文件。 一些说明：

• 参考资料：
  • https://github.com/chongshengzhujue/playableFBCompile
  • https://www.ifeelgame.net/cocoscreator/%E4%BD%BF%E7%94%A8cocoscreator%E5%88%B6%E4%BD%9Cfacebook%E7%9A%84playable-ad/
  • 其他网络资料
• 改进部分：
  • 支持 cocos creator 到 2.1.3
  • 完善了核心算法描述（请参考 README.md）
  • 精简了使用流程，并将游戏项目与打包项目完全分开，游戏项目只需要提供 web-mobile 文件夹即可
  • 使用 node.js 完成，完善了开发环境描述，代码注释
• 本项目不包括对图片，声音资源的压缩，需要自行压缩。
• 本项目不包括使用 cocos creator 打包时的模块选择，需要自行筛选。
• 如果使用过程中出现问题，请提交到项目下的 Issues，或者参与论坛讨论，https://forum.cocos.com/t/cocos-creator-web-mobile-playable-ad-html/84260

如何使用？

• 开发环境：
  • macOs Cataline 10.15
  • node.js 12.9.0
  • cocos creator 2.1.3
  • Chrome 77
• 输入：使用 cocos creator 构建出来的 web-mobile 项目文件夹。
• 输出：index.html。
• 使用方法：
  1. 将构建出来的 web-mobile 整个文件夹整个放入项目的 src 目录下。此时目录为：src/web-mobile/...
  2. 修改 src/web-mobile/main.js，注释掉 154 到 163 行，目的是不在代码中载入 project.js，而是在流程中载入。
     • 特别说明：考虑不同版本下打出来的 main.js 代码位置可能会有差异，未必在相应的行，所以我把需要注释掉的代码补充进来。

     // jsList
     var jsList = settings.jsList;
     
     // var bundledScript = settings.debug ? 'src/project.dev.js' : 'src/project.js';
     // if (jsList) {
     //     jsList = jsList.map(function (x) {
     //         return 'src/' + x;
     //     });
     //     jsList.push(bundledScript);
     // }
     // else {
     //     jsList = [bundledScript];
     // }

  3. 在根目录下执行 npm run build，会显示流程执行过程以及相应的消耗时间。
  4. 点击输出文件 dist/index.html，检查在浏览器中是否显示正常。

核心算法

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

依赖模块：

• https://github.com/GoalSmashers/clean-css 压缩 css。
• https://github.com/mishoo/UglifyJS2 压缩 js。
• fs 模块，读写文件。
• path 模块，处理路径相关（其实在项目中只用来获取文件的后缀名）。
• typescript 相关，本项目使用 ts 编写，使用 ts-node 执行。

cocos-to-playable-ad's Issues

Uncaught SyntaxError: Unexpected token '<'

使用了您的工具之后 能生成文件 但是报错了

我的Cocos Creator 版本是2.2.2 请问这是版本导致的问题吗

如何将3d项目，打包成html里。烦请大神更新，以供小弟学习

因为你的打包项目，让我多了一就业机会，在这里十分的感谢。最近我也在研究如何将3d项目，打包成html里。目前还没研究明白，大神看到了要是不麻烦，烦请大神更新，以供小弟学习。

cocos如何将物理和骨骼模块打包进单html

请问大神。cocos如何将物理和骨骼模块打包进单html呢？

打包完会有个问题找不到tagName

cocos creator2.4.1版本，怎么打包成单html呢

cocos creator版本更新到2.4.1后。资源管理方式不一样了。还请求大佬及时能看到，并更新。

CocosCreator2.4.2，打包失败

大佬还更新吗，使用的CocosCreator v2.4.2，node v15.0.1，提示遇到这些error：

npm ERR! code 127
npm ERR! path /Users/admin/Downloads/cocos-to-playable-ad-master
npm ERR! command failed
npm ERR! command sh -c ts-node ./src/start.ts

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/admin/.npm/_logs/2020-10-28T09_19_00_989Z-debug.log
adminMacBook-Pro:cocos-to-playable-ad-master admin$ npm run build

怎么转视频呢MP4

怎么转视频呢

怎么把3d项目打包进html里

尝试了下用引擎cocos creator打包3d项目，发现是FBX模型资源打包后是 .bin 结尾的压缩包形式。还烦请大神更新2.4的时候，建议时间允许也能把3d项目更新下。3dPlayable是个很重要的趋势。再这里先感谢老哥。(不是cocos creator3D，当然要是大神能研究出来cocos creator3D能打包出来，那真是万分佩服了)

使用ttf字体，加载失败

使用TTF字体，加载不到资源。

1.9.3 编译报错：Uncaught TypeError: Cannot read property 'debug' of undefined

Cocos Creator 版本：1.9.3

main.js 注释部分

报错信息：