Cocos Creator 2.x 转 3.x 过程分享

Creator 3.x
#1

首先使用3.x的导入功能导入2.x工程

image

然后就是解决问题

1.i18n使用不了，要转ts。这个已经手动转好了，见：

https://github.com/mapic91/CocosCreator2to3Tools/tree/master/ts/i18n

2.prefab 里的Label字体文件丢失，lineheight比fontsize小

image
image311×526 14 KB

解决方法：

先手动把字体加上，然后看prefab文件内容的前后变化

之前：

image
image343×645 9.65 KB

手动调整之后：

image
image516×672 11.5 KB

这样就找到规律了，之后就写个脚本，把所有的prefab文件里的label加上字体就行了。

脚本见：https://github.com/mapic91/CocosCreator2to3Tools/blob/master/tools/correctfont.py

3.因为工程使用的是protobuff，原来是js，我也手动转为ts了，文件见：

https://github.com/mapic91/CocosCreator2to3Tools/tree/master/ts/protobuf

4.然后就是修正代码，也写了脚本，加快修正速度。

https://github.com/mapic91/CocosCreator2to3Tools/blob/master/tools/js2ts.py

这个脚本主要是function转lambda，添加any

https://github.com/mapic91/CocosCreator2to3Tools/blob/master/tools/slashb2f.py

这个脚本是把impornt里的\转为/

其它可以使用VS Code里的自动功能，比如自动import，add all missing member

5.然后跑起来后，发现按钮点击不了，经过和正常按钮的对比，发现原来是prefab转换的时候，节点的z scale是0，导致点击不了，改为1就可以点击。

https://github.com/mapic91/CocosCreator2to3Tools/blob/master/tools/correctnodezscale.py

用这个脚本，就可以把所有prefab里的z scale为0的，改为1

6.因为代码里用了很多2.x的老接口和类的属性，3.x里面没有了，不过我们可以加回来。

https://github.com/mapic91/CocosCreator2to3Tools/blob/master/ts/cocosextend.ts

参考这个文件，就可以扩展cocos 里的类，把2.x的接口和属性加上。比如加上zIndex

declare module "cc" {

    interface Node {

        zIndex: number;

    }

}

Object.defineProperty(Node.prototype, "zIndex", {

    get: function() {

        let t = this.getComponent(UITransform)

        return t ? t.priority : 0

    },

    set: function(priority:number) {

        let t = this.getComponent(UITransform)

        if(!t) {

            t = this.addComponent(UITransform)

        }

        t.priority = priority

    },

    enumerable: true,

    configurable: true,

})
9赞
2.x升级3.3的完整教程 (保留js文件)
#2

大佬牛逼啊，正好也在 2.x转 3.1

#3

大佬，牛逼

#4

感谢大佬分享，已star

#5

感谢大佬分享。请问crypto-js怎么转ts啊？

#6

我都是手动转的，转成class

#7

https://github.com/mapic91/CocosCreator2to3Tools/tree/master/ts/crypto-js
帮你转好了，其实也不用转成class，在开头写个export就可以。我没跑过，你跑跑看，看行不行

#8
#9

这个protobuf怎么用？

#10

大佬牛皮(破音)

#11

我现在的用法是将 proto 转成js。然后生成 *.d.ts 文件。是否可以直接生成 ts

#12

用这个client，https://github.com/mapic91/CocosCreator2to3Tools/blob/master/ts/protobuf/protobuf-client.ts

#13

多谢，我跑跑看

#14

我试过，ts文件js也认的，转ts只要把js文件后缀改为ts，然后加一个export就可以。
比如js里是这样的

(function (global, factory) {

    /* AMD */ if (typeof define === 'function' && define["amd"])
        define(["long"], factory);
    /* CommonJS */ else if (typeof require === 'function' && typeof module === "object" && module && module["exports"])
        module['exports'] = (function () {
            let Long; try { Long = require("long"); } catch (e) { }
            return factory(Long);
        })();
    /* Global */ else
        (global["dcodeIO"] = global["dcodeIO"] || {})["ByteBuffer"] = factory(global["dcodeIO"]["Long"]);

})(this, function (Long) {
    "use strict";

    let ByteBuffer = function (capacity, littleEndian, noAssert) {
		...............
    };  
	............
    return ByteBuffer;
});

改成ts就是这样的：

import {Long} from "./long"

export let ByteBuffer = function () {
    "use strict";

    let ByteBuffer = function (capacity, littleEndian, noAssert) {
		...............
    };  
	............
    return ByteBuffer;
}()
1赞
#15

多谢。我试试。

#16

你的方法应该是正确的方法，可否分享下，我转ts都是手动写class的，不是自动的

#17

这样转也能跑，就是在vs code里没有自动提示

#18

我是直接pbjs 生成 js文件.然后使用pbts命令 按照js文件 生成 .d.ts 声明。这样。只是在vscode中使用的时候有代码提示。其实我在想如果能够用什么工具直接转成 ts文件（不要js）那样感觉更好。这里说的ts就是ts的写法，但是不是.d.ts声明文件

#19

image
pbjs不是能直接生成ts文件吗？

#20 
_decodeBuf (key: any, buff: any, len?:any) {

        let Message = protonet.getProto(key);

        let msg = Message.decode(buff);

        if ((msg.ret || msg.ret == 0) && _notNeedProcessRet[key] == undefined) {

            this._disposeErrorMsg(msg.ret)

        }

        if(key != "cs.S2C_MockFights"){

            console.log("【recv】 " + key, msg, Math.floor((new Date().getTime()) / 1000));

        }

        return msg;

    }

    _encodeBuf (key: any, msg: any) {

        if (key != "cs.C2S_KeepAlive" && key != "cs.C2S_MockFights") console.log("【send】 " + key, msg, Math.floor((new Date().getTime()) / 1000));

        let Message = protonet.getProto(key);

        let message = new Message();

        for (let k in msg) {

            message.set(k, msg[k]);

        }

        return message.encode().toBuffer();

    }