中英双语-桌球小游戏（2）.md

2019-09-11 18:29:55 浏览数 (1)

Cocos Creator入门实战：桌球小游戏（2）

How to make a simple snooker game with CocosCreator (2)

桌球小游戏是 BigBear 老师设计、撰写的中英双语的 Cocos Creator 入门教程，面向 Cocos Creator 初学者，但不论你技术如何，相信你会在 BigBear 老师的文章中有所收获。

Shawn 上周天推送了完整中文版本，为了让大家有一个好的学习体验，我将《Cocos Creator入门实战：桌球小游戏》一文拆分成若干篇中英双语的教程，我们一起学习游戏、学习英语（看我公众号的名字就知道Shawn的英语有多low）！

  • 【完整中文教程】Cocos Creator入门实战：桌球小游戏
  • 【中英双语教程】桌球小游戏（1）

上一次我们介绍的是如何开启物理系统，继续我们的双语桌球教程，今天我们来布局桌球。

桌面节点

在Canvas下面创建一个子节点作为我们的桌面节点。

Create a sprite node named 'table', its parent is 'Canvas' node. This node is our billiard table.

给它添加一个cc.Sprite组件并且给予它显示的spriteFrame

Set its spriteframe proerty used the spriteframe asset named 'bg'

  • 添加RighdBody组件

Now we implement its physics features

  1. 由于桌面是静止不动的，因此我们将Type设置为Static。
  2. 去掉AwakeOnLoad，因为我们并不需要它处于唤醒状态。

  1. Since the table is motionless, we set the Type property with Static.
  2. Unselect the AwakeOnLoad property, because we do not want it awakened.
  • 添加四个边的碰撞组件

Add a 4 four-box collider component

  1. 注意不是使用碰撞组件，而是物理组件中的Collider组件
  2. 勾选Editing选项可在场景编辑器中改变碰撞体的大小和位置

  1. Make sure to select the option Enable Contact listener.
  2. you can select the option Editing , then you can change the collider size or position at scene editor.
  • 添加六个袋口的碰撞组件

add 6 circle collider component

  1. 这里用的碰撞题为CircleCollider
  2. 袋口碰撞体的tag我们设置为1
  3. 这里是为了在碰撞回调中与四周的边区分开来，便于判断

  1. Add six circle collider components. Through these collisions, we can know when the ball goes into the bag.
  2. Set these circle collider tag property to 1.
  3. This property will help us to know which collider is colliding .

最终的节点碰撞体应调整为这样的效果：

When you finish these steps, you will see the table in the scene editor with debug info drawing. Example:

node.js canvas

0 人点赞