# **Cocos Creator說明**
Cocos Creator 是一個跨平台遊戲引擎，全球有許多開發人員都在使用。您可以利用這個遊戲引擎，以高效率方式建立 2D、3D 遊戲和應用程式。

它會在移動設備上生成一個真正的本機應用程序。不僅僅是像 Apache Cordova 這樣的混合應用程序。

:::info
文件說明版本：
Cocos Creator：穩定版3.8.2
Cocos Dashboard：3.8.2
:::

**==版本==**
- [Cocos各版本官方下載](https://cocos2d-x.org/download)
- [Cocos穩定版](https://www.cocos.com/en/creator-download)
- [Cocos Creator舊版本下載](https://forum.cocos.org/t/topic/126246/2)

**==進度==**

- [X] cocos 版本選擇 (穩定版)
- [ ] cocos 的熟悉以及如何分工
- [ ] cocos 的熟悉
- [X] 完成官方2D遊戲示例(2024/3/5)
- [X] 基本UI組件認識(2024/3/6)
- [ ] 範例遊戲三倍猴子功能
- [x] 滾動效果
- [ ] 跑馬燈效果(90% 2024/3/6)
- [x] 燈箱功能
- [x] 輪播功能
- [x] 側選單
- [x] Tab頁籤
- [X] 表單(核選框)(2024/3/6)
- [x] 基本動畫(Scale Animation、Rotate Animation)
- [x] 音效設定功能(音效開啟關閉、音量大小設定)
- [ ] Api請求
- [ ] Cocos公司HackMD文檔(30%)
- [ ] 開發分工流程
- [ ] 設計
- [ ] 圖檔素材
- [製作可任意伸縮的 UI 影像](https://docs.cocos.com/creator/3.2/manual/zh/ui/sliced-sprite.html)
- [ ] 動畫素材
- [ ] 前端
- [ ] 用 ai 輔助生圖生成元件， 試做一款沒有串接 api 的 demo
- [ ] 串接 api Demo

:::info
參考遊戲
- [slot-machine-demo](https://maxmariodev.itch.io/slot-machine-demo-made-with-cocos-creator)
- https://github.com/alchimya/cc-crazy-monkey
:::

# **模組說明**

**==共用元件==**

# **開發-2D畫面**

**==專案檔案結構==**

- assets資料夾
- Scene資料夾：存放遊戲場景
- Animation資料夾：存放動畫
- Prefabs資料夾：存放預製體 ( 類似 component 的概念 )
- Scripts資料夾：存放遊戲各元件程式碼

**==Cocos核心模組==**

- Game
- Sys
- View
- Screen
- cc/env

**==UI元件==**

**Canvas元件(顯示畫面元件)**
用於掛載所有2D子元件

**SafeArea元件**
用於自動處理Iphone、Android可安全渲染範圍的功能元件

**Layout元件**
一種Container元件，可掛載子元件並開啟自動排版、自動縮放的功能

- Type - HORIZONTAL
- Align Horizontal：讓子元件水平對齊
- Resize Mode
- CHILDREN：子元素大小會依父層來調整
- CONTAINER：父層大小會依子元素大小來調整

[實踐指南-自動布局容器](https://docs.cocos.com/creator/manual/zh/ui-system/components/engine/auto-layout.html)

**PageView元件**
頁面元件，可用來達成類似Swiper輪播切換頁面的效果。pagination的點點指標則需要搭配PageViewIndicator元件來實現

**ScrollView元件**
類似CSS裡針對元素設置overflow: auto。本元件可用在燈箱內容太多時可出現卷軸的情況。

**Widget元件(對齊用途元件)**
用來控制元件要如何對齊於父層、限制元件本身的尺寸。
- 可以直接在要對齊的元件的`Inspector面板`按下`Add Component`來新增
- 點擊單位圖示可以切換單位(px、%)

import { Widget } from 'cc';

...other code....

const widget = this.getComponent(Widget);
// 設定預設對齊單位是 px
widget!.bottom = 50;
widget!.top = 50;

// 設定對齊單位是 %
widget!.isAbsoluteTop = false;
widget!.isAbsoluteBottom = false;
widget!.bottom = 0.1; // 10%
widget!.top = 0.1; // 10%

...other code....

:::warning
大部分情況下只有在初始化時需要對齊畫面上的元件，初始化後Widget元件就用不到了。
因此效能考量下，Widge組件的Align Mode建議設置為ONCE或ON_WINDOW_RESIZE
:::

**UITransform元件**
用於控制UI的尺寸、位置

import { UITransform } from 'cc';

...other code....

const uiTransform = this.getComponent(UITransform);
// 方法一
uiTransform.setContentSize(200, 120);
uiTransform.setAnchorPoint(0, 0.5);

// 方法二
uiTransform.width = 200;
uiTransform.height = 120;
uiTransform.anchorX = 0;
uiTransform.anchorY = 0.5;

...other code....

**Button元件**

- 為按鈕的不同狀態(normal、pressed、hover、disabled)設定樣式。可在Inspector面板>transition選項設定
- [按鈕元件的click事件監聽 - 方法一(設定較繁瑣但功能完整)](https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/button.html#%E9%80%9A%E8%BF%87%E8%84%9A%E6%9C%AC%E4%BB%A3%E7%A0%81%E6%B7%BB%E5%8A%A0%E5%9B%9E%E8%B0%83)
- 按鈕元件的click事件監聽 - 方法二(較為簡便快速)

this.button.node.on(Button.EventType.CLICK, this.callback, this);

**EditBox元件(輸入框)**
即Input元件

**Toggle元件**
即checkbox、radio。可設定勾選時要顯示的圖片

- 要使用radio需要同時搭配Toggle Container元件
- [按鈕元件的toggle事件監聽 - 方法一(設定較繁瑣但功能完整)](https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/toggle.html#%E6%96%B9%E6%B3%95%E4%B8%80)
- 按鈕元件的toggle事件監聽 - 方法二(較為簡便快速)

this.toggle.node.on('toggle', this.callback, this);

**Slider元件**
可用來當作調整音量大小的元件
- [按鈕元件的slide事件監聽 - 方法一(設定較繁瑣但功能完整)](https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/slider.html#%E6%96%B9%E6%B3%95%E4%B8%80)
- 按鈕元件的slide事件監聽 - 方法二(較為簡便快速)

this.slider!.node.on('slide', this.callback, this);

**BlockInputEvents元件**
假設滿版燈箱開啟後，原先畫面上的按鈕被燈箱所蓋住，但此時該按紐仍然可以偵測到點擊事件。
顯示燈箱時為了要避免點擊燈箱的時候，點擊事件被燈箱蓋住的元件所偵測到，則可以使用此元件。

**Video Player元件**

:::warning
Video Palyer目前只支持mp4格式影片
:::

**AudioSource元件**

**Sprite元件**
用來顯示圖片。是2D/3D 遊戲最常見的顯示影像的方式
[Sprite 組件官方文件](https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/sprite.html)

**Label元件**
用來顯示一段文字

**Mask元件**
[Mask（遮罩）组件参考](https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/mask.html)

**Graphics元件**
即Canvas畫布

**RichText元件**
用來顯示一段文字，與Label的差異是內容可設定類似html的字串來格式顯示樣式(BBCode)
[BBCode 标签格式](https://docs.cocos.com/creator/manual/zh/ui-system/components/editor/richtext.html#bbcode-%E6%A0%87%E7%AD%BE%E6%A0%BC%E5%BC%8F)

**UIStaticBatch元件**

**Spine Skeleton元件**

**DragonBones ArmatureDisplay元件**

**TiledMap元件**

**MotionStreak元件**

**UIOpacity元件**
通過代碼控制節點透明度

const opacityComp = this.node.getComponent(UIOpacity);
opacityComp.opacity = 157;

:::warning
Line元件是用於3D場景的組件，在2D請改用graphics
* [3.8 2D裡面Line組件怎麼用？ 為什麼沒效果？]()
:::

:::success
在處理多語系時會遇到不同語系的長度導致文字截斷
可以用 自动缩小（Shrink）來處理
**
自动缩小模式下，如果文字按照原定尺寸渲染会超出约束框时，会自动缩小文字尺寸以显示全部文字。
注意：自动缩小模式不会放大文字来适应约束框。
**

詳細調整可參考文件: [文字排版文件](https://docs.cocos.com/creator/manual/zh/ui-system/components/engine/label-layout.html)
:::

:::success
#### [制作动态生成内容的列表](https://docs.cocos.com/creator/manual/zh/ui-system/components/engine/list-with-data.html)
可利用在製作模板上 ( Prefab 模板 )
利用腳本來動態產出節點並做相關判斷
詳細使用方法可參考官方文件
:::

**==元件渲染模式(Type)==**

**Simple**
**Sliced**
**Tiled**
**Filled**

**==組件生命週期==**

按觸發先後順序：

- onLoad
- onEnable
- start
- update
- lateUpdate
- onDisable
- onDestroy

**onLoad**
觸發時機：節點首次啟動時觸發，例如所在的場景被載入，或是所在節點被啟動的情況下。

export class test extends Component {
    onLoad(){
        // 執行初始化相關的工作
    }
}

**onEnable**
觸發時機：元件的 enabled 屬性從 false 變成 true 時，或當所在節點的 active 屬性從 false 變成 true 時

**start**
觸發時機：元件第一次啟動前，也就是第一次執行 update 之前

export class test extends Component {
    start (){
        // 執行初始化數據相關的工作
    }
}

**update**
觸發時機：每一幀渲染更新物體時

export class test extends Component {
    update (dt: number){
        // dt 是上一個frame完成渲染所花費的秒數 ex: 0.016700000000000728
        // 更新畫面的操作
    }
}

**lateUpdate**
觸發時機：組件的update執行完之後

export class test extends Component {
    lateUpdate (dt : number){
        // dt 是上一個frame完成渲染所花費的秒數 ex: 0.016700000000000728
        // 更新畫面的操作
    }
}

**onDisable**
觸發時機：元件的 enabled 屬性從 true 變成 false 時，或當所在節點的 active 屬性從 true 變成 false 時

**onDestory**
觸發時機：當元件或所在節點呼叫了 destroy()

**==常用操作==**

**取得元件當前節點**

start() {
    let node = this.node
    node.setPosition(0.0, 0.0, 0.0)
}

**取得其他元件**

import { _decorator, Component, Label } from 'cc';

// 取得同個節點上的其他組件
@ccclass("Cannon")
export class Cannon extends Component {
    start() {
        let label = this.getComponent(Label)
        label.string = 'Label文字'
    }
}

// 取得同個節點上的其他組件
@ccclass("Cannon")
export class Cannon extends Component {
    start() {
        let label = this.getComponent(Label)
        label.string = 'Label文字'
    }
}


// 使用名稱取得組件
@ccclass("Cannon")
export class Cannon extends Component {
    start(){
        let rotate = this.getComponent("SinRotate");
    }
}

// 使用屬性檢查器搭配Cocos create面板預先設置程式所需要存取的元件
@ccclass("Cannon")
export class Cannon extends Component {
    // 注意：除了以下程式，還需要到Cocos create面板做元件的關聯
    @property({ type: Node })
    private player = null;
    start() {
        // 做好設定後，在此即可取得元件
        console.log('The player is ' + this.player.name);
    }
}

// 取得子元件
@ccclass("CannonManager")
export class CannonManager extends Component {
    start() {
        // 所有子節點
        let cannons = this.node.children;
        // 使用名稱抓取
        this.node.getChildByName("Cannon 01");
        // 透過路徑抓取層級較深的元件
        let item = find("Cannon 01/Barrel/SFX", this.node);
    }

}

// 取得全局元件
@ccclass("CannonManager")
export class CannonManager extends Component {
    start() {
        let item = this.backNode = find("Canvas/Menu/Back");
    }

}

**節點相關操作**

// 更改父節點 - 方法一
this.node.parent = parentNode

// 更改父節點 - 方法二
this.node.removeFromParent()
parentNode.addChild(this.node)

//更新節點位置 - 方法一
this.node.setPosition(100, 50, 100) 或 this.node.setPosition(new Vec3(100, 50, 100))

//更新節點位置 - 方法二
this.node.position = new Vec3(100, 50, 100)

//旋轉結點
this.node.setRotation(90, 90, 90)

//縮放結點
this.node.setScale(2, 2, 2)

//創建新結點
let node =new Node('box');
node.setPosition(0,0,-10);

//複製場景中已存在的結點

//創建預製結點

//銷毀結點

**==自訂節點==**

@property({ type: Node })
public customNode: Node | null = null;


**元件常用方法**

// 計時器
this.schedule(function() {
    // 这里的 this 指向 component
    this.doSomething();
}, 5);

//取消計時器
this.callback = function () {
 this.doSomething();
}
this.schedule(this.callback, 1); // 建立
this.unschedule(this.callback); // 取消

**事件監聽**

**click Event**
UI Button > 組件屬性檢查器 > Click Events 選擇 1 (也可以觸發一個一上的 funtion)

**==遮罩==**
1. 先創一個節點(空節點 Node)
2. 在這個節點的添加組件中搜尋 Mask
3. 設定這個節點的 content size 就會是遮罩的範圍了
4. 這個節點底下的圖片或文字就會只顯示在遮罩範圍內 (或是勾選 Mask 的 Inverted 就會反過來)

**==動畫素材、資源的引用==**

就如同節點一樣，各種資源/素材也能使用decorator的方式預先在cocos dashboard綁定好程式所會用到的資源

- [取得和載入資源](https://docs.cocos.com/creator/manual/zh/scripting/load-assets.html)

**==音樂/音效==**

Cocos的音檔有分為音樂、音效，差異參考[AudioSource 组件参考](https://docs.cocos.com/creator/manual/zh/audio-system/audiosource.html)

**==地圖==**

在 2D 遊戲裡面絕大多數的可見物都可以用圖像來描述。 地圖也可以用圖片來代替

**==動畫==**

- 製作 2D 動畫時，有幾種辦法：
- 关键帧动画：通过引擎制作，常用于如 UI 动画、序列帧动画等
- 骨骼动画：通过第三方 2D 动作制作工具导出并使用

- 如果要播放对应的动画，必须将该动画配置在 Animation 组件的 Clips 属性内

**==動態對Node塞指定動畫==**

// 需要引入的項目
import { Animation } from 'cc';

// 型別賦值
@property({ type: Animation })
public scaleAnimate: Animation | null = null;

private autoPlay: boolean = false;

private interval
autoPlayHandler() {
    // 切換是否播放動畫
    this.autoPlay = !this.autoPlay
    if (this.autoPlay) {
        this.interval = setInterval(() => {
            this.spinHandler()
        }, 1000)
        if (this.scaleAnimate) {
                                // 此為專案內動畫的名稱             
            this.scaleAnimate.play('scaleAnimate')
        }
    } else {
        clearInterval(this.interval)
        if (this.scaleAnimate) {
            this.scaleAnimate.stop()
        }
    }
}

動畫編輯器可以由此編輯循環模式，腳本就負責開始以及停止的判斷即可

**==Spine/DragonBones==**

**Spine**

// 播放指定動畫
// 切換皮膚

**==切換頁面==**

[官方文件](https://docs.cocos.com/creator/manual/zh/scripting/scene-managing.html)

// 需引入的項目
import { director } from 'cc';

goGamePage() {
                    // 此為專案 Scence (場景資料夾) 場景的名稱
    director.loadScene("roll-002");
}

再設定 trigger 這個 funtion 的按鈕即可跳轉到指定場景

**==資源載入==**

- 載入本地資源
- 使用 resources.load
- 檔案要放在指定目錄 assets/resources底下
:::warning
需要注意載入資源的路徑要照以下格式：
resources.load(**路徑/載入資源種類**)
1. Sprite : resources.load(路徑/spriteFrame, SpriteFrame)
2. Prefab : resources.load(路徑/prefab, Prefab)
3. AnimationClip: resources.load(路徑/anim, AnimationClip)
:::

         resources.load('images/background/spriteFrame', SpriteFrame, (err, asset) => {
           this.getComponent(Sprite).spriteFrame = asset;
         });

- 使用 Asset Bundle

**==功能實作==**

- Loading頁面
- 使用[director.preloadScene](https://docs.cocos.com/creator/3.8/api/zh/class/Director)在Loading頁面預先加載遊戲頁面。有預先加載的頁面使用director.loadScene跳轉時會立即跳轉，不會有頓一下、等一下的感覺。
- [手把手教你製作微信小遊戲的下載進度條-適用於cocos3D](https://forum.cocos.org/t/cocos3d/89614)
- TabView頁籤：參考Cocos-test-projects3.8.2 casest/assets/test-bundle/sub-scene
- 下拉框
- [實作下拉方塊按鈕ComboBox控件](https://mp.weixin.qq.com/s?__biz=MzI4ODEyNTU5Mw==&mid=2651588637&idx=1&sn=1d1c11c303dd6e4c4df26fd3a18f1bd6&chksm=f03b8febc74c06fdffaafa971bf1f183464100757b7d97a2f44601e80124c76eaa23a36dc188&token=1561877047&lang=zh_CN#rd)
- 列表/表格
- 參考官方文件[製作動態生成內容的列表](https://docs.cocos.com/creator/manual/zh/ui-system/components/engine/list-with-data.html)
:::warning
須注意添加列表項目的同時也需要設定container的高度，內容才能正確的使用scrollbar功能
:::
- 效果
- Border邊框：
- [編輯器不帶這些功能，可以使用shader來做](https://forum.cocos.org/t/topic/111464)
- Table 邊框效果: [表格的線框該用什麼做？](https://forum.cocos.org/t/topic/43572)
- 連線效果
- [自定义渲染cc.Graphics](https://forum.cocos.org/t/topic/119268)
- [用LineComponent做一個閃電鏈效果](https://forum.cocos.org/t/linecomponent/87092)
- [如何在3d遊戲場景中實現連結兩點的閃電效果](https://forum.cocos.org/t/topic/146339)
- 物體掉落
- 使用tween搭配[bounce easing function](https://easings.net/#easeOutBounce)
- 火焰
- 使用粒子
- 使用Spine
- [使用shader](https://caogtaa.gitee.io/ccdemos/?scene=SceneSDF)
- 滑鼠wheel後畫面縮放:參考cocost-test-project/particle-renderer
- 碰撞偵測: 使用PhysicsSystem2D，參考cocos-test-projects/SpineCollider
- [畫面抖動程式碼參考](https://forum.cocos.org/t/topic/65921/38)

          shakeCamera(camera?: cc.Camera, param?: { times?: number; duration?: number; amp?: number; srcPos?: cc.Vec2 }) {
            camera = camera || cc.Canvas.instance.getComponentInChildren(cc.Camera)
            this.shakeNode(camera.node, param)
          }
          shakeNode(node: cc.Node, param?: { times?: number; duration?: number; amp?: number; srcPos?: cc.Vec2 }) {
            if (!param) {
              param = { times: 6 * 5, duration: 0.2 * 5, amp: 10 * 0.25 }
            }
            const times = param.times || 6
            const duration = param.duration || 0.2
            const amp = param.amp || 10
            const srcPos = param.srcPos || node.getPosition()
            const destPos = new cc.Vec2()
            const arr: cc.FiniteTimeAction[] = []
            for (let i = 0; i < times; ++i) {
              if (i == times - 1) {
                destPos.x = destPos.y = 0
              } else {
                cc.Vec2.random(destPos, amp)
              }
              arr.push(cc.moveTo(duration / times, srcPos.add(destPos)))
            }
            node.runAction(cc.sequence(arr))
          }

        // 使用方式
        this.shake()

- loading 進度條
平铺模式（Tiled）：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复，就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。

- 畫線可以利用九宮格模式處理
九宫格模式（Sliced）：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。详细信息请阅读 使用 Sprite 编辑器制作九宫格图像 一节。

- 外發光的線條
[graphics画的线条能否做外发光？](https://forum.cocos.org/t/graphics/93003)

**==Debug==**

1. 用編輯器預覽模式，底下就會出現控制台
可以在 code 裡面加上 console 來 debug
但是編輯完一次就要重啟一次 ( 播放停止按鈕 )
2. 用瀏覽器預覽也可以用 F12 看 console 的內容來 debug
3. [Cocos Inspector](https://store.cocos.com/app/detail/2940)

**==跨裝置尺寸==**

- [不同螢幕尺寸的處理方式](https://docs.cocos.com/creator/manual/zh/ui-system/components/engine/multi-resolution.html)
- [螢幕旋轉實現方案，支援全平台](https://forum.cocos.org/t/topic/79780/35)
- 打包時在手機板設定勾選Orientation為橫向
- 範例遊戲手機板layout參考

- [文字自動縮放的設定](https://docs.cocos.com/creator/manual/zh/ui-system/components/engine/label-layout.html)
- 文字overflow的處理方式：
- SHRINK：自動縮放。若有搭配自動換行選項，則可能會自動換行而非完全縮小尺寸
- 是否自動換行
[範例遊戲](https://grdemoweb.richgaming.net/)的RWD文字示意圖(文字太長則shrink至可塞下的尺寸)
- 關於圖片尺寸RWD的作法
- 需自行計算並由程式更新，參考[spriteframe 圖片尺寸自適應
- [自適應主題](https://forum.cocos.org/search?q=%E8%87%AA%E9%80%82%E5%BA%94)

**==路由==**

**==i18n==**

多語系可使用2種方式實現：
- 第三方翻譯服務商自動翻譯(Google Cloud、有道智雲平台)
- 手動翻譯

參考教學：
- [國際（L10N）全流程使用](https://forum.cocos.org/t/topic/153082)

:::warning
多語系常見問題：
- [不同語系切換後的布局調整沒有內建支援，需自行處理](https://forum.cocos.org/t/topic/153954/9)
- 切換不同語系後文字overflow的處理可參考「跨裝置尺寸-文字自動縮放的設定」
:::

**==SVG==**

- [Creator + SVG 解析渲染擴充元件](https://forum.cocos.org/t/topic/100568)

**==資料儲存==**

- [儲存和讀取用戶數據](https://docs.cocos.com/creator/manual/zh/advanced-topics/data-storage.html)

**==WebSocket==**

- [Cocos Creator 通用框架設計 —— 網絡](https://forum.cocos.org/t/topic/84649/1)
- [詳解 Cocos Creator 如何使用websocket](https://zhuanlan.zhihu.com/p/616718383)

**==熱更新==**

WEB 版本可以透過伺服器直接進行版本更新，所以資源熱更新只適用於**原生發布版本**

- [熱更新官方文檔](https://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html)
- [熱更新參考程式](https://github.com/cocos-creator/cocos-tutorial-hot-update/tree/master)

**==常見問題==**

:::warning
- 小心规划物体的层级，需要调整相机的 Visiblity 属性来让不同的 Canvas 分开渲染
- [使用Hybrid App的方式發布app](https://forum.cocos.org/t/webview/96544)
:::

# **元件複用**

說明如何將Cocos組件抽離成可複用的方式

- [搭建CocosCreator元件庫](https://segmentfault.com/a/1190000016880252)

第三方元件庫：
- [cocos creator 3.0元件庫](https://github.com/lllyin/cocos-components/blob/main/docs/components/README.md)
- [遊戲開發工具包](https://gitee.com/ichenpipi/cocos-eazax-kit)

# **快速開發/最佳實踐**

- [開發入門最佳實踐](https://forum.cocos.org/t/topic/90146)
- [CocosCreator 快速開發輕量級遊戲框架](https://github.com/TopDiscover/QuickFramework)
- [全域類別 最佳音效、音樂播放控制管理](https://forum.cocos.org/t/topic/66471)
- [Import Maps 使用](https://docs.cocos.com/creator/manual/zh/scripting/modules/import-map.html?h=import-map)

    // import-map.json
    // 資料夾alias - @assets/結尾的/不可省略
    {
      "imports": {
          "@assets/": "./assets/"
      }
    }

    // tsconfig.json
    {
        "compilerOptions":{
            "paths": {
                "@assets/*": ["./assets/*"]
            }
        }
    }

    // 使用範例
    import {scaleToggle} from '@assets/Module/cocos-utils.ts';

:::danger
- 有改動import-map.json須重啟cocos讓編輯器吃到最新的設定
- 如果是`資料夾的alias`，則import-map.json中的設定要注意`/`不可省略
:::
# **效能優化**

- [【效能優化】共享節點-動效復用方案](https://forum.cocos.org/t/topic/144350)

# **遊戲測試**

- https://forum.cocos.org/t/topic/49988

# **打包發布**

# **常見問題**

- [【CocosCreator 常見問題歸納】第十二期](https://forum.cocos.org/t/topic/131843)
- [嘗試用 cocos 做一款小遊戲，感覺很難受](https://www.v2ex.com/t/921276)
- UUID
Creator 用來管理遊戲資源的。 它會為每個檔案分配一個唯一的 id，圖集則會產生多個
- UUID變化問題
- [只要 meta 檔案沒有遺失，是不會變的](https://forum.cocos.org/t/uuid/40433/16)
- [資源管理注意事項 --- meta 文件](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/meta.html?h=uuid)
- 替換文件、圖檔
- 請使用**直接覆蓋取代**原文件的方式
:::danger
先刪除後新增的方式會出發cocos提示找不到對應文件並將meta移除
:::
- Spine使用[setEventListener](https://docs.cocos.com/creator/2.4/api/zh/classes/Skeleton.html#seteventlistener)綁定的監聽沒有被觸發
- [可能是spine沒有設定到事件](https://forum.cocos.org/t/topic/147703)
- PageView的設定
- PageView本身的寬高要設定為視窗的寬高，手機版為例就是720x1280
- view的尺寸也是比照PageView
- content的尺寸不用動，調整頁面時此區會自動更新
- 頁面的尺寸設定為實際想要顯示的大小，例如698x1260
- 頁面尺寸需要考慮到content中設定的SpacingX每個頁面的間距，例如SpacingX設為22、頁面尺寸是720，則頁面的尺寸最多只能為698(720-22)

# **資源**

- [Cocos套件Top 10](https://mp.weixin.qq.com/s/WTLBMjv0uoA4XPneLcjC-w)
- [Cocos 资料大全](https://github.com/fusijie/Cocos-Resource)
- [Cocos 使用者手冊](https://docs.cocos.com/creator/manual/zh/)
- [遊戲製作常用UI範例](https://github.com/cocos/cocos-example-ui/)
- [Cocos 引擎各用法教學](https://github.com/cocos/cocos-test-projects)
- [Cocos 官方各元件範例Demo](https://github.com/cocos/cocos-test-projects/tree/v3.8.2)
- 須注意版本號要對應不同cocos creator編輯器版本
- [Cocos Creator 3.X 教學大全](https://forum.cocos.org/t/topic/122399)
- [通用大廳框架](https://forum.cocos.org/t/topic/155773)
- [Cocos Store資源大整理－插件工具篇](https://forum.cocos.org/t/topic/131241)
- [老虎【持續更新】Cocos Creator原始碼分享－針對遊戲中的各種功能](https://forum.cocos.org/t/topic/87522)
- 開發框架
- [oops-framework](https://github.com/a1076559139/cocos-creator-frame-3d)
- [CocosCreator3.8(以上)前端開發框架](https://forum.cocos.org/t/topic/150588)
- [貝塞爾曲線編輯網站](https://www.desmos.com/calculator/cahqdxeshd?lang=zh-CN)
- [Spine預覽工具](https://store.cocos.com/app/detail/3023)
- [圖檔pixel化](https://store.cocos.com/app/en/detail/4001)
- [介面動畫系統](https://store.cocos.com/app/en/detail/4333)
- [Shader編輯器](https://store.cocos.com/app/en/detail/2749)
- [菜鳥的筆記：實用功能小記（原始碼分享）](https://forum.cocos.org/t/topic/88049)

# **教學**
- [免費課程](https://shop1157275030.v.weidian.com/item.html?itemID=3766874060)
- [cocoscreator實現 跑馬燈 / 滾動公告](https://forum.cocos.org/t/cocoscreator/99238)
- 遮罩(mask)使用
- [Building Your First 2D Game with Cocos Creator (Part One)](https://www.udemy.com/course/building-your-first-2d-game-with-cocos-creator-part-one/)
- [背景無限滾動(圖片)](https://blog.csdn.net/lizhong2008/article/details/133620877)
- [爆肝200+小時，總結出的 Creator 3.x 入門修練指南！ 全免費](https://segmentfault.com/a/1190000043491726)
- [shader教學](https://mp.weixin.qq.com/s/K2jlmFgt1HLYN-B3jtroHA)
- [shader教學](https://forum.cocos.org/t/topic/148105)
- [shader教學](https://forum.cocos.org/t/topic/99659/30)

# **名詞**
- Cocos2d-X：Cocos的多平台版本(2019 年停止更新)
- Cocos Creator：它是一個完整的遊戲開發解決方案，包含了輕量高效的跨平臺遊戲引擎，以及能讓你更快速開發遊戲所需要的各種圖形介面工具，底層由 Cocos2d-x 演化而來(3.x 完全摒弃了 Cocos2d-x 底层)
- Cocos Dashboard
- Cocos Service：官方或第三方提供的額外服務，獲得更多引擎之擴充能力，讓遊戲開發工作變得更簡單(例如廣告、定位)
- Camera：遊戲中的玩家視角
- 遊戲管理器（GameManager）：用來保存遊戲的數據，例如將生成的過程和結果保存起來
- 層級管理器
- 預製體
- Gizmo：就是3D軸向，而3D軟件主要為XYZ三個軸向所控制，物件在一個三維空間內擁有：X(長)、Y(寬)、Z(高)：在這個三維軸向內物件則稱之為三維物件(3D Object)
- 碰撞器

# **Cocos Creator編輯器操作**

- 移動畫面：
- 2D模式：[按住滑鼠右鍵併拖曳畫面](https://docs.cocos.com/creator/manual/zh/editor/scene/#2d-%E8%A7%86%E5%9B%BE)
- 3D模式：[按住空白鍵]
- 快速定位到選取的元件：左側Hierachy面板點選元件後，按下F鍵
- 快速定位到設計的畫面：左側Hierachy面板點選Camara後，按下F鍵
- 找到使用Script元件的節點: 在script按右鍵>在層級管理器中顯示
- 找到使用Script元件的Prefab: 在script按右鍵>查找使用。旁邊列出來的就是有使用到此script的資源(目前仍沒辦法用atlas裡圖檔的id來找到使用該圖檔的atlas，故須注意)
- 找特定節點: 使用名稱搜尋是最方便的
- 修改資源名稱: Cocos編輯器 > 資源管理器 > 在要換名稱的資源上按右鍵 > 重命名
:::danger
要換名稱請務必在Cocos的資源管理器操做，cocos會自動同步更新所有綁定的資源。
如果直接在windows的資料夾操作，會因為有資料沒同步到而跳出以下警告:
:::

:::info
- 使用Vscode更動程式碼後，自動觸發畫面重渲染：

- Vscode安裝[File Watcher套件](https://marketplace.visualstudio.com/items?itemName=appulate.filewatcher)
- Cocos Creator > Developer > Visual Studio Code Workflow > Add Compile Task
- 根目錄.vscode資料夾settings.json加入以下設定

    {
      "filewatcher.commands": [
        {
            "match": "\\.ts*",
            "isAsync": true,
            "vscodeTask": ["workbench.action.tasks.runTask", "Cocos Creator compile"],
            "event": "onFileChange"
        }
      ]
    }

完成以上步驟後，更新程式碼即會自動更新畫面

- 使用[快閃-程式碼編輯器](https://store.cocos.com/app/detail/2313)則可直接在Cocos Creator編輯器修改程式碼
:::

# **TODOS**

- Layout元件的使用說明
- @property 說明
- 共用元件加上字體縮放設定
- 動畫編輯器的曲線
- 一個Scence的主要main.ts要掛載同一個地方。不然都會要找一下
- 生命周期回调的順序跟文件寫得不一致(onLoad、start)
- [html5 adapter](https://store.cocos.com/app/en/detail/6049)
- [從JSON跟圖檔拆掉Sprite圖檔](https://discuss.cocos2d-x.org/t/how-do-i-split-an-existing-sprite-sheet-into-individual-frames/44110)

# **Memos**

- 是用甚麼初始框架/樣板下去搭建遊戲的，還是模板是自己寫的
- 有看到oops-framework這套框架
- 連線的效果會是怎麼處裡的
- 是否Sharder或粒子擇一使用
- PC版跟手機板怎麼做RWD
- PC、手機分開做Scene。然後下去做切換? (共用元件拉出來當預製體，2個scene可以共用)
- 目前要採用app包Webview的方式，實際這樣處裡遊戲操作是否會有問題?
- 共用元件(預製體管理)
- 整理共用元件/預製體有甚麼需要注意的嗎(從預製體拉了10個燈箱，如何同步樣式設定，改了預製體無法套用全部)
- 如何断开预制体的关联
- 列表的處理

# **參考**

- [Android平台上關於Cocos的介紹](https://developer.android.com/games/engines/cocos/cocos-overview?hl=zh-tw)