我们前面讲了组件化开发的一些思路以及Cocos Creator的最佳工作流。但真正要做到界面与逻辑分离，开发人员与设计师高效协作，并不是一朝一夕之事，Shawn会在这条道路上继续前行，也希望大家能多多支持。

今天我们介绍一个比之前稍微复杂点的Demo，先看一段演示视频：

demo演示，点击下面连接打开

视频地址：https://v.qq.com/x/page/p0713nsrnr1.html

本视频的工程已经上传github，CreatroPrimer仓库physics分支，传送地址：https://github.com/ShawnZhang2015/CreatorPrimer/tree/physics

1. Demo的由来

前两天有网友杨翔询问一个物理游戏的问题，当时为这位同学解释了组件化的一些思路，可越解释他越是不会写代码了。想了下不能这样呀，帮忙反而帮了倒忙！思考了一阵，写了上面这个Demo例子给他做参考。

我们先看看杨翔同学的游戏核心玩法：

代码太复杂了，成了控制型组件

上面的代码，如果要实现功能，也不是不行，唯一就是代码太多，扩展起来会比较麻烦。再看下在编辑器核心Ball组件接口的设计：

image.png

上面的代码，如果要实现功能，也是可以的，唯一就是代码太多，扩展起来会比较麻烦，再看Ball组件在编辑上暴露的属性：

组件接口

LeftBloods、RightBloods是设计的血条，血条与Ball相关联，之后想扩展出多个Ball会非常的困难。我当时给的思路，看下图：

我的建议

我提供的建议反而把杨翔同学带歪了，他是越做越迷胡！

问题来了

经过一番沟通，看来从文字上无法给予太多有效的帮助，还是用一个示例Demo来的直接一些，正好自己对物理引擎了解的不多，趁此机会学习一下。Demo先给杨翔同学看了，反馈还不错，看下图：

image.png

有了好的反馈，当然要与大家分享，所以有了今天这篇教程。

2. 从布局开始

本来是计划写一篇关于UI布局的教程，现在就整合到这个Demo中来一起分享了。 从演示视频中可以看到整个游戏界面的布局和核心元素：围墙、球、蓝框、左右计分标签、生命值标签，请看下图：

游戏界面

界面编辑我相信大多数同学都很熟悉了，但重要的是要让UI做到屏幕自适应，这里就需要使用到Widget组件做相对定位：

Widget为Label做相对定位

Widget组件以图型化的方式显示了四个边，就像四根钉子，上图中将顶部(Top)、右边(Right)给钉住，不论屏幕怎么变，总是与顶部相距20像素，与右边相距30像素。我们再看中间红色标签，它是居中对齐的，请看下图：

生命值Label居中对齐

注意Wiget组件下方Horizontal Center属性，它是设置垂直居中，Vertical Center是水平居中，选中后会出现输入框，其中的数值表示与中点的偏移，我们这里是放在正中所以偏移是0。Widget组件还可以按百分比对齐，请看下面的演示视频：

看视频请点击下面链接

视频地址：https://v.qq.com/x/page/j1349q2lhfv.html

3. 小结

本篇主要是做一个开头，源码工程已经上传github存放CreatorPrimer仓库physics分支。整个Demo的场景和代码都在assets/test/physics目录下，看下图：

demo文件

本篇主要介绍了Widget组件的使用，请参考工程源码，了解各关键节点的Widget组件的设置。下一篇我会介绍物理组件：刚体(RigidBody)、物理碰撞(PhysicsCollider)组件的简单使用，所有操作都不涉及编程写代码，希望非程序员同学能坚持跟着Shawn走下去，这是升值加薪有效途径，把程序员的活给端了！有机会将Demo中的美术素材换的好看一点，在此感谢大家的关注与支持！

---

如果觉得公众号上的文章对你或你的朋友有所帮助，请记得分享给大家，愿我们一起成长！

image