关于typescript:Creator-2x-升级-3x-基础-API-差异总结

上一篇咱们介绍了 Cocos Creator 2.x 我的项目降级 3.x 的大流程。

但最初一步，还须要手动将之前 2.x 写的函数正文一处处的放开。

并将 2.x 的代码写法改成 3.x 的，上面咱们就来看一下有那些差别。

1. 模块引入

在 Creator 3.x 中废除了 cc.Node、cc.Sprite 这种全局模式的 API 调用。

取而代之的是，先要在脚本顶部 import 模块，代码如下：

// 从 cc 模块中解构出 Node、Sprite 变量
import {Node, Sprite} from 'cc'

好在 VSCode 编辑器，它会主动帮忙咱们增加 import 模块。

但你须要先在 3.x 引擎主菜单 开发者 →Export.d.ts 装置 VSCode 提醒文件，看下图：

2. Node 根底属性变动

Creator 3.x 中 Node 的属性变的极其的简洁了，只剩下 position、rotation、scale 这三个属性被保留。

而且它们都变成了 Vec3 类型，看上面应用办法。

设置节点地位

//Creator 2.x
this.node.position = v2(100, 100)
this.node.x = 100;  //3.x 中不可用
this.node.y = 100;  //3.x 中不可用

//Creator 3.x 中不能应用 x、y、z 重量设置节点地位
// 须要应用 position 属性或 setPosition 办法
this.node.position = v3(100, 100, 100);
// 留神须要同时设置 xyz 三个重量
this.node.setPosition(100, 100, 100);

设置节点缩放

//Creator 2.x
this.node.scale = 1.5;

//Creator 3.x 
// 留神 scale 不在是一个 number 而是 Vec3
this.node.scale = v3(1.5, 1.5, 1.5);
// 留神 须要同时设置 xyz 三个重量
this.node.setScale(1,1,1);

节点在二维上的旋转

//Creator 2.x rotation 属性在 2.3.x 之后是应用 angle 属性
this.node.angle = 1.5;

//Creator 3.x
// 节点的 rotation 属性其实是一个 Quat 类型
//2D 节点在属性查看器中的 rotation 
// 对应的是节点的 angle 属性
this.node.angle = 10
// 也能够应用 eulerAngles 来设置，留神它是设置的 Z 轴的旋转
this.node.eulerAngels = v3(0, 0, 10);

3. 节点色彩与通明

咱们在 3.x 场景中增加一个 2D 精灵，你能够看到，节点的色彩与通明，曾经拆散到别的组件上了。

1. opacity 属性移到 cc.UIOpacity 组件
2. color 属性移到 cc.Sprite 组件
3. size、anchor point 属性移到 cc.UITransform 组件

因而之前的 node.opacity、node.scale、node.color、node.width，这些接口都不能应用了，取而代之的是上面这些样的接口办法。

设置节点透明度

//Creator 2.x
this.node.opacity = 200;

//Creator 3.x
this.node.getComponent(UIOpacity).opacity = 200;

设置节点色彩

//Creator 2.x 
this.node.color = cc.Color.RED;

//Creator 3.x
this.node.getComponent(Sprite).color = Color.RED;

设置节点大小

//Creator 2.x
this.node.setContentSize(100, 100);

//Creator 3.x 
let transform = this.node.getComponent(UITransform);
// 应用办法设置节点大小
transform.setContentSize(100, 100)
// 也能够应用 contentSize 属性
transform.contentSize = Size(100, 100);
// 还能够应用 width、height 属性
transform.width = 100;
transform.height = 100;

尽管 3.x 中 Node 的 position、scale、rotation 属性还在，但代码接口也有所变动，咱们来看下他们的区别。

节点坐标转换

还有，在 2D 中罕用的节点坐标转换

• Node.convertToNodeSpaceAR
• Node.convertToWorldSpaceAR
• Node.getBoundingBox

这些接口移到了 UITransform 组件对象上了，看上面代码：

//Creator 2.x 
let p = this.node.convertToNodeSpaceAR(eventTouch.location)；//Creator 3.x
let transform = this.node.getComponent(UITransform);
let location = eventTouch.location;
// 留神 3.x 中 convertToNodeSpaceAR 的参数为 Vec3 类型
// 但 location 为 Vec2 类型
let p = transform.convertToNodeSpaceAR(v3(location.x, location.y));

节点层级

在 2.x 中 Node.zIndex 是用来管制节点显示层级，数值越大在最底层。

而在 3.x 中 Node.zIndex 接口已被废除，须要应用 Node.setSiblingIndex() 办法，与 2.x 是相同的，数值最小的在最底层。

4. Tween 动画

在 Creator 2.x 中 Tween 动画次要是管制节点的位移、旋转、缩放、透明度、色彩等属性。

移植到 Creator 3.x 后要留神的是：

1. 有些属性曾经不在 Node 对象上了，须要获取相干组件来管制
2. 位移、旋转、缩放属性应用 Vec3 类型而非 Vec2，不然会呈现一些意想不到的问题。

例如：

...
let node = item.node;
tween(node)
  .to(0.1, { scale: v2(1.1, 1.1) }) // 放大
  .to(0.1, { scale: v2(1, 1)})      // 还原，这里会出错！.start();

下面运行成果也都失常，然而会导致一些交互事件生效，比方：按钮无奈响应点击事件。须要改成上面这样：

...
let node = item.node;
tween(node)
  .to(0.1, { scale: v3(1.1, 1.1) }) // 放大
  .to(0.1, { scale: v3(1, 1)})      // 还原
  .start();

须要将 scale 属性的值从 Vec2 改成 Vect3 就失常了。

5. 编辑器加载资源

我的项目中，有时咱们会用到编辑器内资源加载，什么意思呢？

就是说心愿在编辑器状态，就能看一些界面成果，而不必跑 H5 预览。

而且应用到的图片资源，并不是在编辑器中手动拖放的，而是用代码加载。

上图中，通过 GameBoard 组件的 Level 属性切换关卡编号，可看间接看到场景变动。

不会的同学可能会问，这是怎么做到的呢？

1. 为组件脚本增加 executeInEditMode 装璜器

import {_decorator} from 'cc';
const {ccclass, executeInEditMode} = _decorator;

@ccclass('GameBoard')
@executeInEditMode // 增加编辑器模式执行
export default class GameBoard extends Component {onLoad() {// 代码将在编辑器状态执行}
  start() {// 代码将在编辑器状态执行}
  update() {// 代码将在编辑器状态执行}
}

留神，在编辑器中执行代码可能会呈现一些副作用，比方对象未初化、update 被频繁调起。

在 2.x 这时你能够应用 CC_EDITOR 变量做查看，代码如下：

//Creator 2.x 应用 CC_EDIDTO 全局变量查看
update() {if (CC_EDITOR) {return；}
  ...
}

3.x 中曾经不存在全局 CC_EDITOR，而是在 cc/env 模块，代码如下：

//Creator 3.x 应用 EDITOR 变量查看
import {EDITOR} from 'cc/env';
...
update() {if (EDITOR) {return；}
  ...
}

2. 编辑器中加载资源

//Creator 2.4.x 加载图集中的图片
// 留神 'path' 为 resouces 目录文件门路
cc.resources.load(path, SpriteAtlas, (err, res) => {let sprite = this.getComponent(Sprite);
  sprite.spriteFrame = res.getSpriteFrame(this.imageName);
});

在 3.x 中 Bundle 目录下的资源，不能在编辑器状态下被加载。

因而须要将文件移出 resouces 目录，并应用 assetManager.loadAny 这个万能加载 API，代码如下：

//Creator 3.x 加载图集中的图片
assetManager.loadAny({uuid:'xxx', type: SpriteAtlas}, (err, res) => {let sprite = this.getComponent(Sprite);
  sprite.spriteFrame = res.getSpriteFrame(this.imageName);
})

在我的测试中应用 assetManager.loadAny({{uuid:…}}) 这种接口模式加载胜利。

如何取得资源 UUID，看下图：

以上是都是我在降级 2.x 我的项目到 3.x 时遇到的 API 接口差别状况，在此做个记录，也心愿能对你有所帮忙。

更多内容请关注公众号：Creator 星球游戏开发社区