Cocos Creator 2.4+ 打包单Html

Cocos-Creator-Build-Tool

\underline{可以解决 Cocos Creator 2.4x 版本 Web包 跨域问题 打包成单Html}

html在线预览

需要翻墙的哦: https://badapple001.github.io/web_mobile_environment/

构建预览

环境配置

工具

icon-16@2x \color{blue}Cocos Creator 2.4+

Python \color{blue}Python 3.x

vscode \color{blue}VScode

文件结构

main.py: 入口文件

bin: 配置文件目录

cc_web_mobile: web包父目录

publish: 输出目录 打包后的html输出目录

log: 程序运行后自生成 程序运行日志 同一天的日志将输出在一个文件内部

源码介绍

处理流程

您需要依次包含

  • style-mobile.css

  • settings.js

  • cocos2d-js-min.js

  • physics-min.js <需要判断是否存在 仅在勾选物理模块后存在此文件>

  • 资源内嵌assets目录下的所有资源转换成base64 并 以assets为相对目录作为key值 存入 window.resMap对象中

  • downloader.js 将新的加载方法注入

  • main.js

  • window.boot() 启动

资源内嵌处理


    def HashAssets(dir, filter='', resMap={}):

            def convert2base64(url, str1):

                binBuffer = IUtils.fromFile(url,'rb',None)

                return str1 +  str(base64.b64encode(binBuffer), encoding='utf-8')

            def convert2text(url):

                return IUtils.fromFile(url)

            pConvertFunctor = {

                '.json': lambda x: convert2text(x),

                '.js': lambda x: convert2text(x),

                '.wasm': lambda x: convert2base64(x, ''),

                '.png': lambda x: convert2base64(x, ''),

                '.jpg': lambda x: convert2base64(x, ''),

                '.gif': lambda x: convert2base64(x, ''),

                '.wav': lambda x: convert2base64(x, ''),

                '.bin': lambda x: convert2base64(x, ''),

                '.plist':lambda x: convert2text(x),

                '.mp3': lambda x: convert2base64(x, ''),

                '.ttf': lambda x: convert2base64(x,''),

                '.pem':lambda x: convert2text(x),

                '.dbbin':lambda x: convert2base64(x,''),

                '.mp4':lambda x: convert2base64(x,''),

                '.atlas':lambda x: convert2text(x)

            }

          

            for root, dirs, files in os.walk(dir):

                path = root.replace(filter, '', 1).replace('\\', '/')

                for f in files:

                    url = '%s/%s' % (path, f)

                    ext = os.path.splitext(f)[1]

                    resMap[url] = pConvertFunctor[ext](root + '/' + f)

            return resMap

        bar.step()

        resMap = HashAssets(project_root+"/assets",project_root+"/")

        resMapContent = json.dumps(resMap, ensure_ascii=False)

        resMapContent = IUtils.JavaScript('window.resMap = ' + resMapContent)

资源加载处理

\color{#EE7E2A}通过 cc.assetManager.downloader.register 接口重写 资源加载处理


    function loadScript(url) {

        let source = window.resMap[url];

        var d = document,

            s = document.createElement('script');

        s.type = 'text/javascript';

        s.text = source;

        d.body.appendChild(s);

    }

    function downloadBundleHandler(nameOrUrl, options, onComplete) {

        let bundleName = cc.path.basename(nameOrUrl);

        var version = options.version || cc.assetManager.downloader.bundleVers[bundleName];

        let suffix = version ? version + '.' : '';

        let url = `assets/${bundleName}`;

        let js = `assets/${bundleName}/index.${suffix}js`;

        if (!loadedScripts[js]) {

            loadScript(js);

            loadedScripts[js] = true;

        }

        options.__cacheBundleRoot__ = bundleName;

        var config = `${url}/config.${suffix}json`;

        downloadJson(config, options, function(err, data) {

            if (err) {

                onComplete && onComplete(err);

                return;

            }

            data.base = url + '/';

            onComplete && onComplete(null, data);

        });

    };

    function downloadText(url, options, onComplete) {

        let data = window.resMap[url];

        onComplete(null, data);

    };

    cc.assetManager.downloader.register('bundle', downloadBundleHandler);

    cc.assetManager.downloader.register('.plist', downloadText);

downloader.js文件

输出

\color{blue}log

\color{blue}单html路径

publish

\underline{ 程序结束后 运行输出的日志 保存在log 目录下 您可以通过日志检查相关异常 }

案例

案例Html文件

开源仓库链接

gitee
github

16赞

请问大佬,这个可以处理.mp4文件吗?刚才读了您的源码,似乎没有对.mp4文件的处理

后面有时间 会更新补上

:+1::+1::+1:

请问一下,对于fbx类型的3D模型可以支持吗

可以成功,正在尝试拆分成多个js

mp4格式的打包进去好像还是得添加静态资源包诶

抱歉 近期有些小伙伴咨询3.x相关的打包工具
由于部分原因 3.x版本的打包工具不能公开
QQ图片20210924112648

你成功了吗?我这边一直报错Cannot set properties of undefined (setting ‘x’),加载不进去。还有一个项目能加载进去,但是预制资源都不显示,触摸事件也没反应

facebook试玩广告,Prefab资源不显示,直接在浏览器打开正常,上传之后就不显示这种资源

mark 明天研究下

找到了一部分原因,
@property(cc.Vec2)
firstBallPos: cc.Vec2 = new cc.v2(0, 0);
这种写法在其它地方都正常,在facebook上传之后报错。
然后Prefab资源不加载原因是start函数并没有执行,目前还在找原因

我是用的typescript写的代码,是这个原因吗?感觉不像,项目导出之后都是js,目前还没解决,不知道各位有经验吗

资源不加载问题解决了,由于start()没有执行,想到了是不是没有引用到,然后继续找发现引用到但是没生效,继续查看原因,r = document.createElement(“script”);r.type = “text/javascript”, r.text = n, a.body.appendChild®;这一段,r.type在浏览器正常,上传到facebook中,就不生效,最后添加到body中的script标签的type就变为“jascript/blocked”。本人PHP后端,对前端不了解,只知道这里有问题,然后console.log®,里面有个setAttribute(name,value),试着用,然后解决
解决办法:把r.type = "text/javascript"改成 r.setAttribute(‘type’, “text/javascript”)就行了

我之前也是这个问题,上传后脚本不执行
可以试下我整理另一种方法
https://gitee.com/song_satellite/cocos-creator-24-build-tool

谢谢,不用了,今天中午解决了,顺便也一样把py脚本改了,改成打包成单html静态引用一个css和6个js,能直接打包上传

you look look :stuck_out_tongue_winking_eye:

mark~~

请管理员删帖