最近竣稽，我將之前用 Cocos Creator 2.x 寫(xiě)的一個(gè)微信小游戲《球球要回家》移植到了 Cocos Creator 3.6.2 上囱怕。
編程語(yǔ)言也從 JavaScript 遷移到了 TypeScript，并成功上線(xiàn)微信小游戲毫别。
不過(guò)在升級(jí)過(guò)程中娃弓，也踩到不少坑。
一是如何將 JS 代碼高效地翻譯成 TS 代碼岛宦。
另外是忘闻，我在使用 Creator 3.6.2 自帶的 2.x 項(xiàng)目升級(jí)工具存在 BUG，差點(diǎn)讓我放棄升級(jí)恋博。
不過(guò)還好齐佳，遇到的問(wèn)題通過(guò) Cocos 論壇、文檔都能解決债沮，在此做個(gè)記錄炼吴，希望對(duì)你也有所幫助。
1. 升級(jí)項(xiàng)目到 2.4.x 引擎版本
因?yàn)?Creator 3.x 已經(jīng)不在支持 JavaScript 語(yǔ)言疫衩，而且 2.4.x 最新版本的 API 接口與 3.x相近硅蹦。
所以，我的策略是首將代碼移植到 2.4.x TypeScript 上闷煤。
這一步童芹，主要是解決一些廢棄 API 的問(wèn)題。
在 2.4.10 上鲤拿，廢棄 API 它不會(huì)報(bào)錯(cuò)假褪，但會(huì)以警告的方式提示你。
據(jù)了解 95% 的 2.4.x 以下的項(xiàng)目近顷，升 2.4.5+ 是可以平滑升級(jí)的生音。
2. JS轉(zhuǎn)TS腳本
這一步是個(gè)體力活，一是對(duì)將 JS 腳本翻譯為 TS 腳本窒升，二是將新的 TS 腳本重新掛載節(jié)點(diǎn)缀遍。
我的做法是，比如：看到有個(gè)腳本為：GameScene.js饱须，先在它旁邊生成一個(gè) GameSceneTS.ts 照著 JS 代碼邏輯域醇，按 TS 語(yǔ)法重寫(xiě)一遍代碼。
雖然這是個(gè)體力活，但是在 VSCode 中寫(xiě) TS 代碼還是很享受的譬挚，智能提示非常的方便锅铅。
3. 升級(jí)項(xiàng)目引擎到 3.6.x
重點(diǎn)來(lái)了，這一步需要使用 Creator 3.x 提供的升級(jí)工具來(lái)升級(jí)項(xiàng)目殴瘦。
使用升級(jí)工具狠角，我們可以不必重新去編輯游戲場(chǎng)景和預(yù)制體号杠，重新去掛載腳本蚪腋，能省去不少時(shí)間。
新建一個(gè) Creator 3.x 工程，從編輯器主菜單上 文件→導(dǎo)入 Cocos Creator 2.x 項(xiàng)目，看下圖：
瀏覽需要升級(jí)的 2.x 工程目錄躏啰，會(huì)彈出下面這樣一個(gè)面板：
注意：這里有一個(gè)坑點(diǎn)丑蛤！我最初在導(dǎo)入球球要回家 2.4.10 工程后發(fā)現(xiàn)，場(chǎng)景中的 Button 按鈕點(diǎn)不動(dòng)蚂维。
為了排除是因?yàn)槟_本引起的問(wèn)題，我使用 2.4.10 重新建了一個(gè) Hello World 工程，添加上 Button 按鈕灌旧，再導(dǎo)入 3.6.2 依然有這個(gè)問(wèn)題，
試了多次無(wú)解绰筛，我再停下來(lái)看導(dǎo)入面板上的說(shuō)明枢泰，打開(kāi)一個(gè) Github 倉(cāng)庫(kù)，是這個(gè) 2.x 導(dǎo)入工具的插件最新版本铝噩。
看 README 中的更新說(shuō)明衡蚂，正好解決了按鈕不能點(diǎn)擊的問(wèn)題，以及其他 BUG 的修復(fù)骏庸。
果斷下載插件安裝上毛甲，再次嘗試使用 Hellow World 工程導(dǎo)入 3.x 引擎 Button 點(diǎn)擊問(wèn)題解決！
4. 升級(jí) 3.x 腳本代碼
UI 完美再現(xiàn)......OK
組件腳本節(jié)點(diǎn)綁定在......OK
組件屬性具被、節(jié)點(diǎn)引用玻募、組件方法調(diào)用一切 OK！
但是一姿，這時(shí)點(diǎn)擊游戲中的按鈕是沒(méi)有反應(yīng)的补箍，看代碼如下：
從上圖可以看到，升級(jí)工具將所有代碼函數(shù)體全部注釋起來(lái)了啸蜜，現(xiàn)在要做的就是將所有函數(shù)體一個(gè)個(gè)地放開(kāi)坑雅。
在 2.x 時(shí)使用的 cc.xxx 這種寫(xiě)法不能再用了，必須在腳本頂部做導(dǎo)入模塊導(dǎo)入：
//從 cc 模塊中解構(gòu)出 Node衬横、Sprite 變量
import { Node, Sprite } from 'cc'
在使用 VSCode 編寫(xiě)代碼時(shí)裹粤，并不需要我們手動(dòng)一個(gè)個(gè)敲 import 引入的模塊，編輯器會(huì)自動(dòng)添加，看下面：
小結(jié)
從 Creator 2.x 移植 3.x 的整體過(guò)程遥诉，主要為下面四步：
- 升級(jí)項(xiàng)目到 2.4.10 或最新版拇泣；
- 移植腳本到 TypeScript；
- 在 Creator 3.x 中使用 2.x 項(xiàng)目導(dǎo)入工具（注意使用github上的最新版本）矮锈；
- 修改 3.x 項(xiàng)目中不兼容 2.x 的相關(guān)接口代碼霉翔。
后續(xù)我還會(huì)有更多 Creator 2.x 升級(jí) 3.x 的經(jīng)驗(yàn)分享，如果本文對(duì)你有用苞笨，感謝點(diǎn)贊留言债朵！
更多精彩請(qǐng)關(guān)注Creator星球游戲開(kāi)發(fā)社區(qū)
