Cocos Creator 3D

生命周期函數

按以下順序調用

Function	調用時機
onLoad	腳本初始化時調用
onEnable	組件的 enabled 屬性從 false 變為 true 時調用
start	組件第一次激活時調用
update	每一幀渲染前更新物體調用
lateUpdate	在所有組件的 update 都執行完之後調用
onDisable	組件的 enabled 屬性從 true 變為 false 時調用
onDestroy	組件或者所在節點銷毀時調用

3D向量計算

pseudo code

Vec3(0, 0, 0) + Vec3(0, 0, 1) * 10

cocos

let startPos:Vec3 = new Vec3(0, 0, 0);
let moveDir:Vec3 = new Vec3(0, 0, 1);
let endPos:Vec3 = new Vec3();

Vec3.multiplyScalar(endPos, moveDir, 10);
Vec3.add(endPos, startPos, endPos)

// 方法二 out = A + B x scale
Vec3.scaleAndAdd(endPos, startPos, moveDir, 10);

UI

• alignOnce - Widget效能
• 对节点位置、尺寸的限制- runtime 修改 Widget 的限制
• 文本缓存类型（Cache Mode） - 經常修改的 Label 選用 CHAR 可能較佳

Script

• 使用 babel 而非 tsc 编译 TypeScript 脚本。
• 不吃 tsconfig.json
• @property({ type: AnimationComponent }) 在大多情況下直接寫成 @property(AnimationComponent) 即可.

物理

分組與掩碼 (Group and Mask)

只要符合

GroupA & MaskB > 0
GroupB & MaskA > 0

A 與 B 才會檢測碰撞

範例

Cube：

Layer = 4
Group = 272 // (1 << 4) + (1 << 8)
Mask = 256 Plane 的 Layer

Plane：

Layer = 8
Group = 272 // (1 << 4) + (1 << 8)
Mask = 16 Cube 的 Layer

在這個情況下，Cube與Plane可以互相碰撞，但是無法與其他物體的 Collider 碰撞

---

解決 rigidbody 接觸 kinematic rigidbody 會穿過去

問題

rigidbody A -> isKinematic = false
rigidbody B -> isKinematic = true

A 完全靜止時, B 接觸到 A 會直接穿過去

解法

避免讓 A 進入休眠 (回收再強制設成休眠)

allowSleep = false

---

VS 和 VS Code 隱藏 meta 檔

打開 .gitignore
在 Cocos Creator 3D Project 區塊新增

*.meta

---

集合 Module

當我們需要引用特定 module 時

import aModule from "aModule"

但如果我們需要引用到多個 module 時

import aModule from "aModule"
import bModule from "bModule"
import cModule from "cModule"
import dModule from "dModule"
import eModule from "eModule"
import fModule from "fModule"
...

一來看起來不夠整潔，二來很麻煩(你必須要指定每個 module path)
這時候可以透過集合 module(若這些 module 隸屬於同一體系，類似同一個 namespace 的概念)
來讓外部取用方便些

// myModule.ts
import aModule from "aModule"
import bModule from "bModule"
import cModule from "cModule"
import dModule from "dModule"
import eModule from "eModule"
import fModule from "fModule"
...
export default {
    aModule,
    bModule,
    cModule,
    dModule,
    eModule,
    fModule,
    ...
}

這時引入 myModule 就可以直接使用那些零碎的 module

import myModule from "myModule"

myModule.aModule
myModule.bModule 
etc..

或者是

// myModule.ts
import aModule from "aModule"
import bModule from "bModule"
import cModule from "cModule"
import dModule from "dModule"
import eModule from "eModule"
import fModule from "fModule"
...
export { aModule, bModule, cModule, ... }

import { aModule, bModule, etc.. } from "myModule"

---

Path Mapping

上面的集合 Module 還是有一個不方便的地方，就是路徑問題，
要引用 Module 還得知道他的存放位置，若結構深一點看起來也很醜

import myModule from "./first/second/third/.../myModule"

為了解決這個問題，可以透過 tsconfig 設定路徑 map

{
  /* Base configuration. Do not edit this field. */
  "extends": "./temp/tsconfig.cocos.json" ,

  /* Add your custom configuration here. */
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "myModule": ["assets/first/second/third/.../myModule"],
    }
  }
}

設定完就可以直接透過名稱取用

import myModule from "myModule"

也可以指定資料夾位置

{
  /* Base configuration. Do not edit this field. */
  "extends": "./temp/tsconfig.cocos.json" ,

  /* Add your custom configuration here. */
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "myModules/*": ["assets/first/second/third/.../myModules/*"],
    }
  }
}

import aModule from "myModules/aModule"

PS.以上寫法在純TypeScript專案正常，但cocos專案會噴錯

---

import error

假設如下code

aModule內容:

import { bModule } from "myModules"; //PS: import方式需對應測試方式

export class aModule {
    public static enabled:boolean = bModule.EnableLog;
    public static warning:boolean = bModule.EnableLog;
}

bModule內容:

export class bModule
{
    public static EnableLog: boolean = false;
}

myModules錯誤的格式

import { aModule } from "./aModule"
import { bModule } from "./bModule"

export { aModule, bModule }

不論tsconfig怎麼設定paths都會噴錯 Uncaught (in promise) Error:: Error loading xxx

正確的內容:

export { aModule } from "./aModule"
export { bModule } from "./bModule"

測試tsconfig的設定
測試1:
tsconfig設定用如下的編譯路徑:

"compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "myModules": ["assets/Module/myModules"],
      }
    }

執行結果正常

測試2
tsconfig設定用如下的編譯路徑:

"compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@myModules/*": ["assets/Module/*"],
      }
    }

執行結果正常

測試3
tsconfig設定同時使用範例1和2的編譯路徑:

"compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "myModules": ["assets/Module/myModules"],
        "@myModules/*": ["assets/Module/*"],
      }
    }

會出現如下錯誤:

[Scene] Possible circular-reference in {asset(db://assets/Module/aModule.ts)}:
when import Module from myModules.

[Build] Error: Error loading project:///assets/Module/myModules.js
from project:///assets/Module/myModules.js

PS. 一旦出現上述錯誤，直接修改code到正常版本，並執行也不會正常。
需重新啟動Creator 3D

---

參考連結：
Path Mapping
Path Aliases
CC Manual

---

tags: Creator3D