专栏首页Creator星球游戏开发社区CreatorPrimer(16)|物理小游戏(开篇)

CreatorPrimer(16)|物理小游戏(开篇)

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

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

本视频的工程已经上传github,CreatroPrimer仓库physics分支,传送地址:

https://github.com/ShawnZhang2015/CreatorPrimer/tree/physics

1. Demo的由来

前两天有网友杨翔询问一个物理游戏的问题,当时为这位同学解释了组件化的一些思路,可越解释他越是不会写代码了

。想了下不能这样呀,帮忙反而帮了倒忙!思考了一阵,写了上面这个Demo例子给他做参考。

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

再看看核心代码Ball组件的代码结构:

在Ball组件上监听各种碰撞

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

Ball组件属性

LeftBloods、RightBloods是设计的血条,血条与Ball相关联,之后想扩展出多个Ball会非常的困难。

我当时给的思路,看下图:

我提供的建议

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

问题来了

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

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

2. 从布局开始

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

游戏界面

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

Widget为right节点做相对定位

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

生命值Label居中对齐

注意Wiget组件下方Horizontal Center属性,它是设置垂直居中,Vertical Center是水平居中,选中后会出现输入框,其中的数值表示与中点的偏移,我们这里是放在正中所以偏移是0。

Widget组件还可以按百分比对齐,请看下面的演示视频:

Wiget是UI适配的必杀技,请大家多多练习,特别想主导游戏内容设计的同学一定要好好利用!

3. 小结

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

实现Demo的所用文件

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

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star),作者:张晓衡

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CreatorPrimer|组件编码心得(上)

    Cocos Creator的核心是组件化,如何编写出高质量的组件代码值得程序员们不断探索,Shawn今天分享一点组件编码的心得供大家参考:“怎样才是一个合格的组...

    张晓衡
  • Creator组件化的编程探索

    使用CocosCreator已经一年了,在此期间一直在摸索,如何才是组件化编程的最优实践。Shawn属于半野生的路子,水平不高,但不时会陷入一些问题瞎琢磨。我根...

    张晓衡
  • CreatorPrimer(17)|物理小游戏(物理组件)

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

    张晓衡
  • 这 10 个技巧让你成为一个更好的 Vue 开发者

    我比较喜欢使用 Vue 来开发,所以有时会深入研究其功能和特性。 通过这篇文章,向你们介绍十个很酷的窍门和技巧,以帮助大家成为更好的 Vue 开发者。

    前端小智@大迁世界
  • Vue 开发必须知道的 36 个技巧【近1W字】

    Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版; 所...

    火狼1
  • iOS-CUICatalog: Invalid asset name supplied:

    用户1890628
  • 经验|怎么写好一份数据分析报告?

    分析报告的输出是你整个分析过程的成果,是评定一个产品、一个运营事件的定性结论,很可能是产品决策的参考依据。 ? 我认为一份好的分析报告,有以下一些要点: 首先,...

    CDA数据分析师
  • 写好一份数据分析报告的13个要点

    先说说写一份好的数据分析报告的重要性,很简单,因为分析报告的输出是是你整个分析过程的成果,是评定一个产品、一个运营事件的定性结论,很可能是产品决策的参考依据,既...

    华章科技
  • 涨姿势 | 怎么写好一份数据分析报告?

    先说说写一份好的数据分析报告的重要性,很简单,因为分析报告的输出是你整个分析过程的成果,是评定一个产品、一个运营事件的定性结论,很可能是产品决策的参考依据,既然...

    华章科技
  • 写出优秀的数据分析报告,应具备的13个要点!

    先说说写一份好的数据分析报告的重要性,很简单,因为分析报告的输出是你整个分析过程的成果,是评定一个产品、一个运营事件的定性结论,很可能是产品决策的参考依据,既然...

    1480

扫码关注云+社区

领取腾讯云代金券