当前位置：首页 > news >正文

cocosCreator 1.8 升级到 2.4

news 来源：原创 2025/6/1 17:43:07

现在负责的一个运营中的商业项目，使用的是 cocosCreator1.8，之前没有做好设计，所以东西都是直接加载在内存中的，到了现在性能问题逐渐暴露出来，讨论之后想进行引擎升级，升级到cocosCreator 2.4。

官方的升级文档：
1.10以后的资源升级 https://docs.cocos.com/creator/2.4/manual/zh/release-notes/raw-asset-migration.html
2.0 升级 https://docs.cocos.com/creator/2.4/manual/zh/release-notes/upgrade-guide-v2.0.html

2.x 相对于 1.x 核心仍然使用的是 cocos2dx，只是在js部分有了一些改动，所以升级应该是没有大问题，但是小问题仍然是有不少，这里我们计划按照：项目能跑起来、打包APK进行全量的玩法测试、有端渠道进行发布、小游戏渠道发布。

升级遇到的问题

1.文本的问题
文本设置了Line Height 之后会发现 Node 的高度比这个值要大一些，1.8版本就没有这个问题。据说是因为TTF纹理的会有点偏移，引擎组为了矫正位置加上了偏移，然后对Node的高度进行放大。这里有两个参数，修改一下即可：

// text_utils.js
-let _BASELINE_RATIO = 0.26;
-let _BASELINE_OFFSET = 0;
+let _BASELINE_RATIO = 0; //0.26;
+let _BASELINE_OFFSET = -0.13;

参考1：解决字体本身携带的向上/向下偏移量问题
参考2: 2.1.2版本label的size不可编辑且固定都是FontSize的1.26倍，是故意设计成这样的么？
参考3: 3.3RichText问题

之前代码中有设置文本string 然后依赖节点的size进行判断的代码，升级后不生效了，因为新版本不会在设置完后立刻进行更新，如果有类似的逻辑，需要手动先调用cc.Label的 _forceUpdateRenderData();

2.EditBox
升级后功能失效，无法点击，是因为新版本 EditBox的子节点Size有问题，我这里代码里直接打补丁把所有都处理一下：

let setupEditBoxWidget = function(node) {let textWidget = node.getComponent(cc.Widget);if (!textWidget) {textWidget = node.addComponent(cc.Widget);textWidget.isAlignTop = true;textWidget.top = 0;textWidget.isAlignBottom = true;textWidget.bottom = 0;textWidget.isAlignLeft = true;textWidget.left = 0;textWidget.isAlignRight = true;textWidget.right = 0;textWidget.updateAlignment();}
}
let oldOnEnable = cc.EditBox.prototype.onEnable
cc.EditBox.prototype.onEnable = function(){oldOnEnable.call(this);setupEditBoxWidget(this.textLabel);setupEditBoxWidget(this.placeholderLabel);
}

3.rotation
这个新版本推荐使用angle 代替 rotation，其中 angle = -rotation; 即之前rotation > 0 是顺时针旋转，而angle >0 是逆时针旋转。这里比较坑的是编辑器里是按照angle的逻辑来的但key显示的却是Rotation。
在这里插入图片描述
4.event
这个官方文档里有提到：

// **v1.x**
eventTarget.on(type, function (event) {// 通过 event.detail 获取 emit 时传递的参数
});
eventTarget.emit(type, message); // message 会被保存在回调函数的 event 参数的 detail 属性上// **v2.0**
eventTarget.on(type, function (message, target) {// 直接通过回调参数来获取 emit 时传递的事件参数
});
eventTarget.emit(type, message, eventTarget); // emit 时可以传递至多五个额外参数，都会被扁平的直接传递给回调函数

camera
这个官方文档之前也有提到，之前是给camera 设置targets, 现在需要通过Mask来实现。这个需要新增一个分组，camera改动比较大，可能业务逻辑也需要修改。

6.shader
一般游戏都会用到变灰之类的shader，需要改成使用material，CCButton里有变灰效果的逻辑可以参考一下

一些废弃的接口按照报错处理掉就行了，其中cc.p用的地方太多了，直接重新定义一下： cc.p = cc.v2;
还有一个是 1.8版本的prefab 如果 js脚本/spriteFrame 等丢失，会有warning，但可以运行，新版本会直接无法实例话对应的prefab，需要删除掉那些无效的引用。