1. 程式人生 > >Cocos Creator 3D 打磚塊圖文教程(一)

Cocos Creator 3D 打磚塊圖文教程(一)

線上體驗連結:
http://example.creator-star.cn/block3d/

上面圖中是打磚塊遊戲的主要 3D 節點元素,Shawn 這兩天在學習 Unity 與 Creator3D 感受到製作 3D 遊戲與 2D 遊戲最大的不同是 3D 遊戲是在模擬一個真實世界,下面我對打磚塊遊戲場景中的主要 3D 節點做個簡要說明。

主燈光

當我們建立場景時,引擎為會我們預設建立兩個節點:燈光、攝像機。
Main Light它是一隻平行燈光,模擬真實世界中的太陽,你將它放在任何位置場景效果的變化都不大,調整角度會影響3D物體的表面的光澤。

3D攝像機

Camera 攝像機所照攝的介面就是我們執行時所看到的畫面。


我們這裡使用的是透視視角,它像一個錐體,通過錐體能視覺化地控制攝像機的引數表現:

  1. 控制錐體底部的四個點可以調節攝像機的視野;
  2. 控制底部的中心點調節攝像機的遠近;
  3. 控制攝像機的position、rotation調整攝像機的位置與角度;

在【主選單】 > 【Develop】> 【Camera Privew】可以觀察到實時的攝像機畫面,請看下圖:

地面

ground 是用 Plane 3D 節點模擬的地面,可以通過下面選單建立:

Plane 像一張紙,只有x、y,可以設定 Plane 的大小,不論怎麼設定它的 Scale y 他在場景中的高度都不會變。

我們重點看一下地塊節點和它的元件:

可以看到在 Creator 3D 中節點屬性已經被精簡了,只有基本的Postion、Rotation、Scale三個基本的屬性(Layer屬性還沒了解作用)。

溫馨提示:2D 節點同樣如此,2D節點中的錨點、Size屬性被移到名為 cc.UITransformComponent 的元件上了,color 被移到 cc.SpriteComponent 元件上,而且沒有Opacity屬性,由 color 屬性統一接管。

3D 物理最為重要的是它的 cc.ModelComponent 元件,其中Mesh屬性是控制 3D 物體的形狀,比如:立方體、球體、膠囊體等,引擎內建瞭如下 Mesh 資源:

像"#"井號一樣的圖示就是 Mesh 資源了,它主要儲存的是模型的頂點資料。除了 Mesh 屬性,還有一個與 3D 物體表現有關的就是材質了,看下圖:

這裡為了實驗地面不同的貼圖,我這裡自定一個材質資源,在資源管理器中,滑鼠右鍵建立 Material:

從 2D 遊戲開發過渡到 3D 有一個關鍵的點就是理解材質系統,當建立一個材質資源,看到密密麻麻的屬性時,心都麻了半截:

經過 Shawn 的連蒙帶猜,將 ground 地塊的材質設定如下:

需要注意,這樣設定的材質顏色比較暗,還要把材質屬性面板拉到底部,將 Emissive 顏色屬性設定為白色,地板看起來就亮了。

我之前還有一種做材質的做法,使用的是無光照的材質,比使用標準材質要簡單一些:

嘗試了這麼多,總算是把地面材質給弄的像點樣子了,下面是為地塊新增碰撞元件:

在 Creator 3D 中物理引擎不需要使用程式碼啟用,直接將 cc.BoxColliderComponent 元件掛在節點上即可,需要注意地面只需要掛上碰撞元件就行了,如果添加了物理剛體元件,地面會向下掉落,這不是我們想要的。

磚塊

磚塊是使用的 Cube 3D節點建立,它的 cc.ModelComponent 預設為 box.mesh 看下圖:

磚塊的材質需要重新定製一個,方法與前面的地面材質相同,只要我們一修改這個材質資源,場景中的所有磚塊都會發生變化,這裡就不在嘮叨了。

下面我們為磚塊新增 cc.RigidbodyComponent 元件,在節點屬性面板下方點選 Add Component 按鈕,看下圖:

Creator 3D 目前還是預覽版本,元件沒分類,看起來顯的有點亂,RigidBody 元件在倒數第3個,還需要再新增上 BoxCollider 在倒數第5個,節點元件屬性如下:

在 RigidBody 元件上,將 Mass 設定小一點,它表示物理的質量。BoxCollider元件預設就好,IsTrigger 屬性不能勾上,勾上之後物理碰撞效果就沒有了,但可以用程式碼接收到碰撞事件。

在空中的磚塊,當你執行起來發現他會自然掉落,與地面接觸會產生碰撞,而這一切我們都不用編寫程式碼哦!

小結

將磚塊節點多複製一些在場景中,製作成一堵牆我們的遊戲場景就差不多了,我們下次繼續子彈球體的製作與建立,以及使用鍵盤控制攝像機移動。

感謝你的關注與閱讀,歡迎你來「Creator星球遊戲開發社群」公眾號分享你的技術與經驗,願我們在前進的道路上砥礪前行,共同成長!

本文由部落格一文多發平臺 OpenWrite 釋出!