我們前面講了組件化開發的一些思路以及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中的美術素材換的好看一點，在此感謝大家的關注與支持！
如果覺得公衆號上的文章對你或你的朋友有所幫助，請記得分享給大家，願我們一起成長！
