我們前面講了組件化開發的一些思路以及Cocos Creator的最佳工作流。但真正要做到界面與邏輯分離,開發人員與設計師高效協作,並不是一朝一夕之事,Shawn會在這條道路上繼續前行,也希望大家能多多支持。
今天我們介紹一個比之前稍微複雜點的Demo,先看一段演示視頻:
視頻地址:https://v.qq.com/x/page/p0713nsrnr1.html
本視頻的工程已經上傳github,CreatroPrimer倉庫physics分支,傳送地址:https://github.com/ShawnZhang2015/CreatorPrimer/tree/physics
1. Demo的由來
前兩天有網友楊翔詢問一個物理遊戲的問題,當時爲這位同學解釋了組件化的一些思路,可越解釋他越是不會寫代碼了。想了下不能這樣呀,幫忙反而幫了倒忙!思考了一陣,寫了上面這個Demo例子給他做參考。
我們先看看楊翔同學的遊戲核心玩法:
上面的代碼,如果要實現功能,也不是不行,唯一就是代碼太多,擴展起來會比較麻煩。再看下在編輯器核心Ball組件接口的設計:
上面的代碼,如果要實現功能,也是可以的,唯一就是代碼太多,擴展起來會比較麻煩,再看Ball組件在編輯上暴露的屬性:
LeftBloods、RightBloods是設計的線條,線條與Ball相關聯,之後想擴展出多個Ball會非常的困難。我當時給的思路,看下圖:
我提供的建議反而把楊翔同學帶歪了,他是越做越迷胡!
經過一番溝通,看來從文字上無法給予太多有效的幫助,還是用一個示例Demo來的直接一些,正好自己對物理引擎瞭解的不多,趁此機會學習一下。Demo先給楊翔同學看了,反饋還不錯,看下圖:
有了好的反饋,當然要與大家分享,所以有了今天這篇教程。
2. 從佈局開始
本來是計劃寫一篇關於UI佈局的教程,現在就整合到這個Demo中來一起分享了。 從演示視頻中可以看到整個遊戲界面的佈局和核心元素:圍牆、球、藍框、左右計分標籤、生命值標籤,請看下圖:
界面編輯我相信大多數同學都很熟悉了,但重要的是要讓UI做到屏幕自適應,這裏就需要使用到Widget組件做相對定位:
Widget組件以圖型化的方式顯示了四個邊,就像四根釘子,上圖中將頂部(Top)、右邊(Right)給釘住,不論屏幕怎麼變,總是與頂部相距20像素,與右邊相距30像素。我們再看中間紅色標籤,它是居中對齊的,請看下圖:
注意Wiget組件下方Horizontal Center屬性,它是設置垂直居中,Vertical Center是水平居中,選中後會出現輸入框,其中的數值表示與中點的偏移,我們這裏是放在正中所以偏移是0。Widget組件還可以按百分比對齊,請看下面的演示視頻:
視頻地址:https://v.qq.com/x/page/j1349q2lhfv.html
3. 小結
本篇主要是做一個開頭,源碼工程已經上傳github存放CreatorPrimer倉庫physics分支。整個Demo的場景和代碼都在assets/test/physics目錄下,看下圖:
本篇主要介紹了Widget組件的使用,請參考工程源碼,瞭解各關鍵節點的Widget組件的設置。下一篇我會介紹物理組件:剛體(RigidBody)、物理碰撞(PhysicsCollider)組件的簡單使用,所有操作都不涉及編程寫代碼,希望非程序員同學能堅持跟着Shawn走下去,這是升值加薪有效途徑,把程序員的活給端了!有機會將Demo中的美術素材換的好看一點,在此感謝大家的關注與支持!
如果覺得公衆號上的文章對你或你的朋友有所幫助,請記得分享給大家,願我們一起成長!