上一篇文章我们介绍了一个CocosCreator2.x项目升级到3.x的过程。但是最后一步需要手动释放2.x写的函数注释。并且把2.x的代码写法改成3.x，我们来看看有什么不同。1.模块介绍在Creator3.x中，全局API调用如cc.Node、cc.Sprite被丢弃。相反，首先在脚本的顶部导入模块，代码如下：//DeconstructtheNodeandSpritevariablesfromtheccmoduleimport{Node,Sprite}from'cc'幸运的是，VSCode编辑器会自动帮助我们添加导入模块。但需要先在3.x引擎主菜单Developer→Export中安装VSCode提示文件。其余位置、旋转、缩放三个属性保留。并且都变成了Vec3类型，下面看如何使用。设置节点位置//Creator2.xthis.node.position=v2(100,100)this.node.x=100;//在3.x中不可用this.node.y=100;//在3.x中不可用//在Creator3.x中，x,y,z组件不能用来设置节点位置//需要使用position属性或者setPosition方法this.node.position=v3(100,100,100);//注意需要同时设置xyz三个分量this.node.setPosition(100,100,100);setnodescaling//Creator2.xthis.node.scale=1.5;//Creator3.x//注意scale不再是数字而是Vec3this.node.scale=v3(1.5,1.5,1.5);//注意需要同时设置xyz的三个分量this.node.setScale(1,1,1);节点在二维中的旋转//Creator2.x2.3.x后，旋转属性使用角度属性this.node.angle=1.5;//Creator3.x//节点的旋转属性其实是aQuat类型//属性检查器中2D节点的旋转//对应最重要的是节点的angle属性this.node.angle=10//也可以使用eulerAngles来设置，注意是设置Z轴的旋转this.node.eulerAngels=v3(0,0,10);3.节点颜色和透明度我们在3.x场景中添加一个2D精灵，可以看到节点的颜色和透明度已经分离到其他组件。不透明度属性被移动到cc.UIOpacity组件，颜色属性被移动到cc.Sprite组件大小，锚点属性被移动到cc.UITransform组件。所以，之前的node.opacity、node.scale、node.color、node.width，这些接口不能用了，取而代之的是下面的接口方法。设置节点透明度//Creator2.xthis.node.opacity=200;//Creator3.xthis.node.getComponent(UIOpacity).opacity=200;设置节点颜色//Creator2.xthis.node.color=cc.Color.RED;//Creator3.xthis.node.getComponent(Sprite).color=Color.RED;设置节点大小//Creator2.xthis.node.setContentSize(100,100);//Creator3.xlettransform=this.node.getComponent(UITransform);//使用方法设置节点大小transform.setContentSize(100,100)//可以还可以使用contentSize属性transform.contentSize=Size(100,100);//也可以使用width和height属性transform.width=100;transform.height=100;Node在3.x中的position、scale、rotation属性虽然还在，但是代码接口也变了。让我们来看看它们的区别。2D中常用的节点坐标转换和节点坐标转换Node.convertToNodeSpaceARNode.convertToWorldSpaceARNode.getBoundingBox这些接口已经移到了UITransform组件对象中，见如下代码：//Creator2.xletp=this.node.convertToNodeSpaceAR(eventTouch.location);//Creator3.xlettransform=this.node.getComponent(UITransform);letlocation=eventTouch.location;//注意3.x中convertToNodeSpaceAR的参数是Vec3类型//但是location是Vec2类型让p=transform.convertToNodeSpaceAR(v3(location.x,location.y));节点层级在2.x中，Node.zIndex用于控制节点显示层级，值越大越靠下。3.x中已经废弃了Node.zIndex接口，需要使用Node.setSiblingIndex()方法，与2.x相反，最小值在最下面。4.Tween动画在Creator2.x中，Tween动画主要控制节点的位移、旋转、缩放、透明度、颜色等属性。移植到Creator3.x后，需要注意的是有些属性已经不在Node对象上了，需要获取相关组件来控制位移、旋转、缩放属性。使用Vec3类型而不是Vec2，否则会出现一些意想不到的问题。例如：...letnode=item.node;tween(node).to(0.1,{scale:v2(1.1,1.1)})//zoomin.to(0.1,{scale:v2(1,1))})//恢复，这里会报错！。开始（）;以上运行效果也是正常的，但是会导致一些交互事件失败，比如：按钮无法响应点击事件。需要改为：...letnode=item.node;tween(node).to(0.1,{scale:v3(1.1,1.1)})//zoomin.to(0.1,{scale:v3(1,1)})//恢复.start();把scale属性的值从Vec2改成Vect3是正常的。5、在编辑器加载资源项目中，有时候我们会用到编辑器中的资源加载，是什么意思？也就是希望在编辑器状态下，不运行H5预览也能看到一些界面效果。而且，所使用的图片资源并不是在编辑器中手动拖拽，而是代码加载。上图中，通过GameBoard组件的Level属性切换关卡编号，可以直接看到场景的变化。不知道的同学可能会问，这是怎么做到的？1.给组件脚本添加executeInEditMode装饰器){//代码会在编辑器状态下执行}start(){//代码会在编辑器状态下执行}update(){//代码会在编辑器状态下执行}}注意，它在编辑器中执行的代码可能会产生一些副作用，例如未初始化的对象和频繁调用更新。在2.x中可以使用CC_EDITOR变量进行校验，代码如下：//Creator2.x使用CC_EDIDTO全局变量进行校验update(){if(CC_EDITOR){return;}...}3.x不再有全局的CC_EDITOR，而是在cc/env模块中，代码如下：//Creator3.x使用EDITOR变量校验import{EDITOR}from'cc/env';...更新（）{如果（编辑器）{返回；}...}2.在编辑器中加载资源//Creator2.4.x在图集中加载图片//注意'path'为资源目录的文件路径cc.resources.load(path,SpriteAtlas,(err,res)=>{letsprite=this.getComponent(Sprite);sprite.spriteFrame=res.getSpriteFrame(this.imageName);});3.x中Bundle目录下的资源无法在编辑器状态下加载。因此，需要将文件移出resouces目录，使用assetManager.loadAny的通用加载接口，代码如下：//Creator3.x加载图集中的图片assetManager.loadAny({uuid:'xxx',type:SpriteAtlas},(err,res)=>{letsprite=this.getComponent(Sprite);sprite.spriteFrame=res.getSpriteFrame(this.imageName);})在我的测试中使用assetManager.loadAny({{uuid:...}})该界面表单加载成功。如何获取资源UUID，见下图：以上是我在2.x项目升级到3.x时遇到的所有API接口差异。在此记录一下，希望对大家有所帮助。更多内容请关注公众号：造物主星球游戏开发社区
