信手绘制线条刚体

作者: ladeng6666 分类: Box2D 发布时间: 2012-07-28 08:08 阅读: 8,805

来自天地会的wkyjoey同学问道如何做一个重力大师游戏(如下图)。这里要特意表示一下歉意,最近一直忙于工作,没有及时更新教程。

对于重力大师游戏,试玩之后,不难发现,我们在运行时可以创建的刚体有两种,线条刚体和多边形刚体。今天我们来一起研究一下线条刚体的创建。多边形刚体会在下次教程中讨论。

 

这里我们要绘制的线条不是直线而是曲线,所以简单的矩形刚体无法实现这个效果。在圆形边界教程中,我们同样接触到了曲线。解决方法是用多个线段组合起来模拟一个圆圈。庆幸的是这个方法同样适用于本例中的曲线。下面我们详细讨论一下。

线条是又无数个点组成的,把点放大一些就成了线段,所以一个线条可以变成多个线段的组合。

如上图,我们假设每个先断掉长度为segmentLength,线段的长度越短,segmentLength越小,线条模拟就越逼真。

在线条绘制过程中,持续检测鼠标坐标curPoint与前一个点prePoint之间的距离distance,当distance大于线段长度时,创建一个新的线段,并将curPoint赋值给prePoint。

好吧,下面我介绍一下具体的步骤:

  1. 定义线段的长度segmentLength
  2. 在鼠标点下后,卡是绘制线条,并记录之前的鼠标坐标位置为prePoint
  3. 在绘制过程中。如果鼠标坐标与prePoint之间的距离distance大于segmentLength,则将鼠标坐标赋值给prePoint,创建新的线段,并添加到segmentList中
  4. 鼠标弹起后,遍历所有的线段,并利用多边形组合法,创建对于的线段刚体,然后组合成一个完整的线条。

效果如下,点击并拖动鼠标开始绘制,其中的红点是线段的坐标位置。另外这里我没有限制线段的交叉,所以在绘制时尽量避免交叉,防止意外的错误,后续我们再讨论如何防止绘制线段时交叉。

源码中用到了LDEasyBox2D来简化代码。完整的代码及注释如下:

源代码下载

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

9条评论
  • wssmrw

    2012 年 8 月 1 日 上午 5:47

    有意思

    1. ladeng6666

      2012 年 8 月 1 日 下午 12:49

      谢谢你的关注!

  • xiaopang125

    2012 年 8 月 9 日 下午 2:09

    能不能画个石头把他们轧碎,感觉像薯片很干脆的样子,

    1. ladeng6666

      2012 年 8 月 9 日 下午 4:23

      画石头可以了,在这里http://www.ladeng6666.com/blog/index.php/2012/08/01/create-concave-and-convexpolygon-on-fly/
      但是杂碎效果,还得研究研究,请持续关注我的博客,谢谢

  • wAe]大兵

    2012 年 11 月 13 日 下午 11:02

    拉登兄,我可否为这么精彩的教程提个小小的建议:D。就如浏览emanueleferonato网站一样,我发现国外读者和我有着一个想法,就是在每个演示中,加入reset按钮,这样当我们把舞台画满或者需要重新演示的时候就不用重新刷新网页了,有时候带宽不是很好。
    希望能把reset功能加进去o(∩_∩)o 哈哈

    1. ladeng6666

      2012 年 11 月 14 日 上午 6:52

      好的,我以后会注意这个问题,谢谢你的建议!

  • tian

    2014 年 4 月 11 日 上午 12:21

    您好 请问源码怎么删除了呢 我想用java实现这个效果 但是不明白Segment是什么东西 能给我讲讲么 谢谢

  • 天琅古琊

    2015 年 3 月 17 日 上午 11:29

    源代码没有了诶

  • 程序小凯子

    2017 年 12 月 1 日 上午 11:52

    拉登老师,请问“”限制线段的交叉”的教程有没有啊,根据您的教程学到这一步,百思不得其解,特来求助

发表评论

电子邮件地址不会被公开。 必填项已用*标注