上一篇我們介紹了 Cocos Creator 2.x 項(xiàng)目升級(jí) 3.x 的大流程。
但最后一步栓撞，還需要手動(dòng)將之前 2.x 寫的函數(shù)注釋一處處的放開。
并將 2.x 的代碼寫法改成 3.x 的，下面我們就來看一下有那些差異绩卤。
1. 模塊引入
在 Creator 3.x 中廢棄了 cc.Node、cc.Sprite 這種全局形式的 API 調(diào)用江醇。
取而代之的是濒憋，先要在腳本頂部 import 模塊，代碼如下：
//從 cc 模塊中解構(gòu)出 Node陶夜、Sprite 變量
import { Node, Sprite } from 'cc'
好在 VSCode 編輯器凛驮，它會(huì)自動(dòng)幫助我們添加 import 模塊。
但你需要先在 3.x 引擎主菜單 開發(fā)者→Export.d.ts 安裝 VSCode 提示文件条辟，看下圖：
2. Node 基礎(chǔ)屬性變化
Creator 3.x 中 Node 的屬性變的極其的簡(jiǎn)潔了黔夭，只剩下 position、rotation羽嫡、scale 這三個(gè)屬性被保留本姥。
而且它們都變成了 Vec3 類型，看下面使用方法杭棵。
設(shè)置節(jié)點(diǎn)位置
//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分量設(shè)置節(jié)點(diǎn)位置
//需要使用 position 屬性或 setPosition 方法
this.node.position = v3(100, 100, 100);
//注意需要同時(shí)設(shè)置 xyz 三個(gè)分量
this.node.setPosition(100, 100, 100);
設(shè)置節(jié)點(diǎn)縮放
//Creator 2.x
this.node.scale = 1.5;
//Creator 3.x
//注意 scale 不在是一個(gè) number 而是 Vec3
this.node.scale = v3(1.5, 1.5, 1.5);
//注意 需要同時(shí)設(shè)置 xyz 三個(gè)分量
this.node.setScale(1,1,1);
節(jié)點(diǎn)在二維上的旋轉(zhuǎn)
//Creator 2.x rotation 屬性在 2.3.x 之后是使用 angle 屬性
this.node.angle = 1.5;
//Creator 3.x
//節(jié)點(diǎn)的 rotation 屬性其實(shí)是一個(gè) Quat 類型
//2D節(jié)點(diǎn)在屬性檢查器中的 rotation
//對(duì)應(yīng)的是節(jié)點(diǎn)的 angle 屬性
this.node.angle = 10
//也可以使用 eulerAngles 來設(shè)置颜屠，注意它是設(shè)置的Z軸的旋轉(zhuǎn)
this.node.eulerAngels = v3(0, 0, 10);
3. 節(jié)點(diǎn)顏色與透明
我們?cè)?3.x 場(chǎng)景中添加一個(gè) 2D 精靈辰妙，你可以看到，節(jié)點(diǎn)的顏色與透明甫窟，已經(jīng)分離到別的組件上了密浑。
- opacity 屬性移到 cc.UIOpacity 組件
- color 屬性移到 cc.Sprite 組件
- size、anchor point 屬性移到 cc.UITransform 組件
因此之前的 node.opacity粗井、node.scale尔破、node.color街图、node.width，這些接口都不能使用了懒构，取而代之的是下面這些樣的接口方法餐济。
設(shè)置節(jié)點(diǎn)透明度
//Creator 2.x
this.node.opacity = 200;
//Creator 3.x
this.node.getComponent(UIOpacity).opacity = 200;
設(shè)置節(jié)點(diǎn)顏色
//Creator 2.x
this.node.color = cc.Color.RED;
//Creator 3.x
this.node.getComponent(Sprite).color = Color.RED;
設(shè)置節(jié)點(diǎn)大小
//Creator 2.x
this.node.setContentSize(100, 100);
//Creator 3.x
let transform = this.node.getComponent(UITransform);
//使用方法設(shè)置節(jié)點(diǎn)大小
transform.setContentSize(100, 100)
//也可以使用contentSize屬性
transform.contentSize = Size(100, 100);
//還可以使用width、height屬性
transform.width = 100;
transform.height = 100;
雖然 3.x 中 Node 的 position胆剧、scale絮姆、rotation 屬性還在，但代碼接口也有所變化秩霍，我們來看下他們的區(qū)別篙悯。
節(jié)點(diǎn)坐標(biāo)轉(zhuǎn)換
還有，在 2D 中常用的節(jié)點(diǎn)坐標(biāo)轉(zhuǎn)換
- Node.convertToNodeSpaceAR
- Node.convertToWorldSpaceAR
- Node.getBoundingBox
這些接口移到了 UITransform 組件對(duì)象上了铃绒，看下面代碼：
//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的參數(shù)為 Vec3 類型
//但 location 為 Vec2 類型
let p = transform.convertToNodeSpaceAR(v3(location.x, location.y));
節(jié)點(diǎn)層級(jí)
在 2.x 中 Node.zIndex 是用來控制節(jié)點(diǎn)顯示層級(jí)，數(shù)值越大在最底層颠悬。
而在 3.x 中 Node.zIndex 接口已被廢棄矮燎，需要使用 Node.setSiblingIndex() 方法，與 2.x 是相反的赔癌，數(shù)值最小的在最底層诞外。
4. Tween 動(dòng)畫
在 Creator 2.x 中 Tween 動(dòng)畫主要是控制節(jié)點(diǎn)的位移、旋轉(zhuǎn)届榄、縮放浅乔、透明度倔喂、顏色等屬性铝条。
移植到 Creator 3.x 后要注意的是：
- 有些屬性已經(jīng)不在 Node 對(duì)象上了，需要獲取相關(guān)組件來控制
- 位移席噩、旋轉(zhuǎn)班缰、縮放屬性使用 Vec3 類型而非 Vec2，不然會(huì)出現(xiàn)一些意想不到的問題悼枢。
例如：
...
let node = item.node;
tween(node)
.to(0.1, { scale: v2(1.1, 1.1) }) //放大
.to(0.1, { scale: v2(1, 1)}) //還原埠忘，這里會(huì)出錯(cuò)！
.start();
上面運(yùn)行效果也都正常馒索，但是會(huì)導(dǎo)致一些交互事件失效莹妒，比如：按鈕無法響應(yīng)點(diǎn)擊事件。需要改成下面這樣：
...
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. 編輯器加載資源
項(xiàng)目中旨怠，有時(shí)我們會(huì)用到編輯器內(nèi)資源加載，什么意思呢蜈块？
就是說希望在編輯器狀態(tài)鉴腻，就能看一些界面效果迷扇，而不用跑H5預(yù)覽。
而且使用到的圖片資源爽哎，并不是在編輯器中手動(dòng)拖放的蜓席，而是用代碼加載。
上圖中课锌，通過 GameBoard 組件的 Level 屬性切換關(guān)卡編號(hào)厨内，可看直接看到場(chǎng)景變化。
不會(huì)的同學(xué)可能會(huì)問产镐，這是怎么做到的呢隘庄？
** 1. 為組件腳本添加 executeInEditMode 裝飾器 **
import { _decorator } from 'cc';
const {ccclass, executeInEditMode} = _decorator;
@ccclass('GameBoard')
@executeInEditMode //添加編輯器模式執(zhí)行
export default class GameBoard extends Component {
onLoad() {
//代碼將在編輯器狀態(tài)執(zhí)行
}
start() {
//代碼將在編輯器狀態(tài)執(zhí)行
}
update() {
//代碼將在編輯器狀態(tài)執(zhí)行
}
}
注意，在編輯器中執(zhí)行代碼可能會(huì)出現(xiàn)一些副作用癣亚，比如對(duì)象未初化丑掺、update被頻繁調(diào)起。
在 2.x 這時(shí)你可以使用 CC_EDITOR 變量做檢查述雾，代碼如下：
//Creator 2.x 使用 CC_EDIDTO 全局變量檢查
update() {
if (CC_EDITOR) {
return街州；
}
...
}
3.x 中已經(jīng)不存在全局 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 目錄下的資源，不能在編輯器狀態(tài)下被加載黍翎。
因此需要將文件移出 resouces 目錄面徽，并使用 assetManager.loadAny 這個(gè)萬能加載 API，代碼如下：
//Creator 3.x 加載圖集中的圖片
assetManager.loadAny({uuid:'xxx', type: SpriteAtlas}, (err, res) => {
let sprite = this.getComponent(Sprite);
sprite.spriteFrame = res.getSpriteFrame(this.imageName);
})
在我的測(cè)試中使用 assetManager.loadAny({{uuid:...}})這種接口形式加載成功匣掸。
如何獲得資源UUID趟紊，看下圖：
以上是都是我在升級(jí) 2.x 項(xiàng)目到 3.x 時(shí)遇到的 API 接口差異情況，在此做個(gè)記錄碰酝，也希望能對(duì)你有所幫助霎匈。
更多精彩請(qǐng)關(guān)注Creator星球游戲開發(fā)社區(qū)
