Cocos Creator之基本概念


游戲開發和我們平時前端開發有很大的區別,雖然都是運行在瀏覽器中的,但是在開發過程中的也會有自己一些專屬名詞,特別是每個框架都會自己給自己創造出很多專屬名詞,因此為了讓我們后面開發過程中理解和溝通順暢,我先把里面的一些名詞給大家簡單說一下,可能會有一些我的理解錯誤,大家如果覺得有問題一定要大聲的給我指出來,多謝了!!!

先提前聲明一下:這里講的名詞是 Cocos Creator 里面的,可能和其他框架有區別。

先說一下最關鍵的三個概念:場景節點組件

這三者的關系是:場景中添加節點,節點中添加組件,場景 > 節點 > 組件

場景

場景 在游戲中是非常重要的一個概念,必須先有場景,才能往場景里面放節點,不然節點都沒有地方放。類似你需要做一個 HTML 頁面,你必須要有 .html 文件,才能在里面添加 HTML 標簽。

一個游戲可以有多個場景,例如:加載場景、登錄場景、選擇游戲類型場景、選擇英雄場景、開始游戲場景......如果看成網頁就是:登錄界面、選擇模塊頁面、管理界面、增刪改查界面......並且場景和網頁一樣,不同的場景之間也可以跳轉切換,在 Cocos Creator 里面切換場景有兩種方式:

cc.director.loadScene("場景名");    // 加載場景,加載完成后自動運行
cc.director.runScene("場景名");     // 運行場景

Cocos Creator 中,場景是一個 .fire 文件。

節點

Cocos Creator 里面游戲就是由各種節點組成的。動畫也是操作節點的各個屬性:xyscaleangle...因此節點在 Cocos Creator 中處處可見,非常重要。你可以把節點看成是 HTML 中的標簽,HTML 文件就是各種標簽堆積起來的,Cocos Creator 也是由各種節點堆積起來的。

Cocos Creator 中,有很多不同類型的節點:

空節點

空節點沒有特殊的內容,可以用來做父級,可以往上面添加任何組件。類似 HTML 中的 div 標簽。

渲染節點

渲染節點主要是用來顯示資源:圖片、文字、地圖...類似 HTML 中的 imgpmap...

Sprite(精靈)

Sprite(精靈) 用來顯示圖片,支持 jpegpngwebp...就是不支持 gif,這個比較坑爹。

Sprite(單色)

Sprite(單色) 主要用來是顯示單一顏色,可以用來做遮罩層或者顏色塊。

Label(文字)

Label(文字) 用來顯示文字,可以控制文字大小、換行、是否自動截取、行高...

RichText(富文本)

RichText(富文本) 可以通過 BBCode 標簽 來設置文字的樣式。目前支持的樣式有:顏色(color)字體大小(size)字體描邊(outline)加粗(b)斜體(i)下划線(u)換行(br)圖片(img)點擊事件(on),並且不同的 BBCode 標簽支持相互嵌套。

ParticleSystem(粒子)

ParticleSystem(粒子) 是用來讀取 粒子資源 數據,並且對其進行一系列例如播放、暫停、銷毀等操作。粒子我們下面有介紹。

TiledMap(地圖)

TiledMap(地圖)用於在游戲中顯示 TMX 格式的地圖。

TiledTile(地圖塊)

TiledTile 組件可以單獨對某一個地圖塊進行操作。

UI節點

UI節點主要是一些布局節點、特定功能的 UI 組件...

Layout(布局)

Layout(布局) 是一種容器節點,容器能夠開啟自動布局功能,自動按照規范排列所有子物體,方便用戶制作列表、翻頁等功能。

Button(按鈕)

Button(按鈕) 可以響應用戶的點擊操作,當用戶點擊 Button 時,Button 自身會有狀態變化。另外,Button 還可以讓用戶在完成點擊操作后響應一個自定義的行為。可以使用 click 事件。

Canvas(畫布)

能夠隨時獲得設備屏幕的實際分辨率並對場景中所有渲染元素進行適當的縮放。場景中的 Canvas 同時只能有一個,建議所有 UI 和可渲染元素都設置為 Canvas 的子節點。

ScrollView(滾動視圖)

ScrollView 是一種帶滾動功能的容器,它提供一種方式可以在有限的顯示區域內瀏覽更多的內容。如果有需要滾動條的內容,就可以放到這里面顯示。

Slider(滑動器)

Slider 是一個滑動器組件。

PageView(頁面視圖)

PageView(頁面視圖) 是一種頁面視圖容器。可以實現分頁或者幻燈片效果...

ProgressBar(進度條)

ProgressBar(進度條)經常被用於在游戲中顯示某個操作的進度。

Toggle(復選按鈕)

Toggle(復選按鈕) 是一個 CheckBox,當它和 ToggleContainer 一起使用的時候,可以變成 Radio。

ToggleContainer(單選按鈕)

ToggleContainer 不是一個可見的 UI 組件,它可以用來修改一組 Toggle 組件的行為。當一組 Toggle 屬於同一個 ToggleContainer 的時候,任何時候只能有一個 Toggle 處於選中狀態。

ToggleGroup(舊版單選按鈕)
EditBox(輸入框)

EditBox 是一種文本輸入組件,該組件讓你可以輕松獲取用戶輸入的文本。

VideoPlayer(播放器)

VideoPlayer 是一種視頻播放組件,可通過該組件播放本地和遠程視頻。

WebView(網頁視圖)

WebView 是一種顯示網頁的組件,該組件讓你可以在游戲里面集成一個小的瀏覽器。由於不同平台對於 WebView 組件的授權、API、控制方式都不同,還沒有形成統一的標准,所以目前只支持 Web、iOS 和 Android 平台。

3D

我用的比較少就不講了

  • 3D節點
    • 3D Stage
    • 3D Particle
    • Box(長方體)
    • Capsule(膠囊)
    • Cone(圓錐體)
    • Cylinder(圓柱體)
    • Plane(平台)
    • Quad(方形面片)
    • Sphere(球體)
    • Torus(圓環面)

攝像機

攝像機就像我們的眼睛,攝像機走到哪里就看到哪里,如果碰到很大的地圖,我們就可以通過移動攝像機來查看地圖。

2D 攝像機

查看 xy

3D 攝像機

查看 xyz

燈光

主要用在 3D 游戲中,用來處理光線問題。

  • 燈光
    • Directional
    • Spot
    • Point
    • Ambient

組件

上面我們講了 節點,組件的作用就是賦予節點特殊能力。

比如我們希望給節點添加圖片,我們就需要在節點上加上 Sprite 組件,如果你希望給節點添加文字,就需要給節點添加 Label 組件。

到這里你是不是有點奇怪了,為啥上面的節點中有 Sprite 節點 和 Label 節點,而組件里面也有 Sprite 組件 和 Label 組件?

其實上面的 Sprite 節點就是已經添加了 Sprite 組件的節點,可以理解成是已經封裝好的節點直接給我們使用,我們不需要自己來添加組件。

並且,我們可以在一個節點上添加 N 個組件。但是要注意的是,同類型的組件在節點中只能有一個,例如:你如果綁定了 Sprite 組件,就不能綁定 Label 組件,因為他們都屬於 渲染組件,同樣的 UI組件 也不能同時綁定。

小結

看了上面的內容大家應該能了解到了一些基本的知識:

  • 場景最大、節點次之、組件最小;
  • 游戲中可以用多個場景,場景之間可以切換;
  • 場景中可以有多個節點;
  • 節點中可以有多個組件;
  • 一個節點上不能綁定同樣類型的組件;

下面我們開始講游戲中的名詞

精靈

精靈 在很多游戲框架中都有,基本上屬於游戲的專屬名詞,其實就是用來顯示圖像的。

圖集

圖集(Atlas)也成為 Sprite Sheet,是游戲開發中常見的一種美術資源,圖集是通過專門的工具將多張圖片合並成一張大圖。類似 CSS 中的 CSS Sprite

不同的游戲框架用到的圖集文件格式都不同:

  • Cocos Creator 里面圖集文件格式是 .plist
  • Phaser 里面可以用 .png.json
  • 白鷺里面用到的是 .png.json

不同的框架可能圖集格式不同,可能 json 的數據結構不同,所以我們要根據不同的框架采用不同的圖集,並且框架的圖集互相之間不能兼容使用。

每一個框架都有自己的圖集生成工具,並且我們可以用通用工具幫我們解決生成圖集,例如: TexturePacker

SpriteFrame

所有的動畫都是由一張一張的圖片組成的,然后按照一定頻率來切換這些圖片達到動畫的效果,游戲里面也是一樣的,人物的跑動以及攻擊都是由不同的圖片切換過來的。

在游戲中,我們每一幀都是存放在圖集里面的,然后根據動畫需要到圖集里面取獲取對應的幀圖片,在 Cocos Creator 里面每一幀都是存放在 SpriteFrame 里面,就是說獲取到幀圖片后然后將圖片放到 SpriteFrame 里面。

Prefab(預制)

Cocos Creator 中存在一個資源是 Prefab(預制),它是預先配置好的游戲對象。它是將創建好的節點放到資源管理中。可以看成是我們寫的可重用的 HTML 結構。

Prefab(預制) 創建的方式就是將 層級管理器 中的節點拖到下面的 資源管理器 中,就變成 Prefab(預制) 了。

Prefab(預制) 可以手動更新,也可以自動更新。

如果是手動更新就是每次更新了節點就需要在對應的 Prefab(預制) 中更新一下;

如果自動更新就是更新節點后 Prefab(預制) 就會自動更新。

但是,如果你把 Prefab(預制) 對應的節點刪掉了,就需要雙擊 Prefab(預制) 進去來修改。如果需要添加已有的節點,可以到 菜單欄 中的 節點 中的 關聯節點到預制,將已有的節點放到 Prefab(預制) 中。

Prefab(預制) 一般來說應用的場景就是動態生成節點,例如動態列表、動態圖片列表...

粒子

粒子 在所有游戲中都有,一般應用的場景就是例如:火焰、彗星的尾巴、攻擊效果...它對性能要求很高,一般我們創建的方式就是在將粒子的 .plist 文件拖到 粒子系統(ParticleSystem)File 字段中。

最后我們講一下游戲中的各種系統:

動畫系統

Cocos Creator 中有一套很牛逼的動畫系統。並且是可視化界面的,我們可以在里面創建動畫讓節點動起來。

設置關鍵幀,然后設置需要動的屬性,多設置幾個關鍵幀,就可以看到節點動起來了。

在屬性列表可以設置多個屬性變化。

我們還可以在動畫過程中添加事件,就是動到哪里的時候執行事件。

碰撞系統

我們可以對一個節點添加碰撞組件,碰撞組件分了很三種,一種是矩形碰撞,一種是圓形碰撞,一種是自定義碰撞區域。

矩形碰撞 就是說按照矩形形狀來產生碰撞回調

圓形碰撞 就是以節點中心為原型,然后設置圓的半徑,就設置了碰撞區域。

自定義碰撞區域 就是自己定義碰撞的形狀和區域。

碰撞需要設置 Group,碰撞之后有三個回調:當碰撞產生的時候調用 onCollisionEnter當碰撞產生后,碰撞結束前的情況下,每次計算碰撞結果后調用 onCollisionStay當碰撞結束后調用 onCollisionExit

在使用碰撞檢測前,需要將碰撞檢測開啟:

var manager = cc.director.getCollisionManager();
manager.enabled = true;
manager.enabledDebugDraw = true;

物理系統

在游戲里面最重要的東西就是這個 物理系統,因為有了 物理系統 就可以在游戲中模擬真實世界中的環境,比如:重力加速度、水平加速度、物理碰撞...

如果需要開啟了 物理系統,需要將節點添加一個 剛體,才能去使用物理配置,因為在 Cocos Creator 中剛體是組成物理世界的基本對象,你可以將剛體想象成一個你不能看到(繪制)也不能摸到(碰撞)的帶有屬性的物體。

在物理系統中,有一套 物理碰撞組件物理碰撞組件 繼承自 碰撞組件,因此編輯和設置 物理碰撞組件 的方法和 編輯碰撞組件 是基本一致的。

物理碰撞組件 中,也有碰撞回調:

// 只在兩個碰撞體開始接觸時被調用一次
onBeginContact: function (contact, selfCollider, otherCollider) {
},

// 只在兩個碰撞體結束接觸時被調用一次
onEndContact: function (contact, selfCollider, otherCollider) {
},

// 每次將要處理碰撞體接觸邏輯時被調用
onPreSolve: function (contact, selfCollider, otherCollider) {
},

// 每次處理完碰撞體接觸邏輯時被調用
onPostSolve: function (contact, selfCollider, otherCollider) {
}

結語

好了,基本上游戲中的一些基本概念都介紹完了,大家如果有不清楚的可以給我留言,我肯定是知無不言言無不盡,如果我寫的有問題,也請大家給我留言,我一定及時更改。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM