Nape刚体切割贴图

作者: ladeng6666 分类: Nape 发布时间: 2013-06-06 23:11 阅读: 4,760

前两天,一直有同学在问刚体切割教程的效果如何贴图。好的,今天我们就来研究一下刚体切割贴图这个话题。

首先,我们先来看一下拉登大叔实现的效果。在下面的示例中,点击并拖动鼠标实现切割,同时拉登大叔的头像也被切成一块一块的,惨不忍睹啊!

Sorry, either Adobe flash is not installed or you do not have it enabled

这个效果中要解决的问题主要有两个:

  1. 如何切割贴图
  2. 如何随刚体更新贴图坐标

下面我们来自己看看每一个的具体实现方法。

切割贴图

先暂时离开Nape一会儿,忘记rayCast()方法。我们回归到原始的Flash绘图API,当然了,因为切割后的形状不是固定的,所以不能使用像drawRect或drawCircle这样预设的方法了,而是要用moveTo和lineTo沿着每个顶点把形状绘制出来。

那么我们就要知道图形的所有顶点。这个不难在Nape中,任何Polygon形状的顶点都保存在一个叫做worldVerts数组中,我们可以通过遍历这个数组,逐个绘制线条,代码如下:

 

其中b是指刚体body,s是Flash里的一个Shape对象。如果是第一个顶点,即i为0,则调用moveTo将绘制点移动至该顶点处。其他的调用lineTo进行绘制。

绘制完了图形,接下来是填充了拉登大叔的头像了。这里我用的是ActionScript的beginBitmapFill()方法,这也是Flash内置的一个绘图API,可以将一个已有的图像,作为填充图案绘制到图形中。它的结构如下:

每个参数说明如下:

  • bitmap:要填充的图像。
  • matrix:用来移动、缩放和/或旋转位图的Matrix对象,保存了位图变换信息。
  • repeat:如果要填充的图形尺寸比填充图像大,用这个参数定义超出部分的填充方式。
  • smooth:设置这个参数为true,告诉Flash Player绘制图像时如果有放大,要使用平滑算法,减少锯齿和模糊。

第一个bitmap参数实际上是一个BitmapData对象,表示我们用来填充的图像。这里我新建了一个BitmapData对象,并用draw()方法把整个舞台绘制到这个BitmapData中,作为要填充的图像。

图像也填充完了,可以进入下一节了,不过在这之前我要声明一个问题。我们现在绘制的内容都是基于全局坐标的,也就是说贴图的注册点在舞台上左上角(0,0)处,不过这也未必是件外事,下一节,我会详细说明。

更多关于Flash绘图和图像处理的知识,推荐大家去看《Foundation ActionScript3.0 Image Effects》,中文版名称为《ActionScript3.0图像处理基础教程》有拉登大叔执笔翻译,将于近期出版,也期待大家的支持。

 

随刚体更新切割贴图

刚体的切割方法在上一节我们就已经学过了,结合刚刚讲过的刚体切割方法,现在需要随刚体移动更新贴图坐标了。

前面我说过了,刚刚我们绘制的切割图像的注册点是在(0,0)处的,所以当我们旋转时,图像不会绕着自身的中心点旋转。那么我们就要想办法,把图像的注册点移动到图像的中心位置,但是对于非矩形、圆形来说,这并不是一件容易的事,好在Nape可以帮我们解决这个困难。

具体的讲,在我们切割完刚体之后,生成的刚体片段和我们绘制的图像结果是一样的,注册点都在(0,0)处,然后我们可以通过刚体的localCOM属性获取其中心坐标位置。然后我们可以把绘制好的图像反向移动这个距离,然后添加到一个container容器中,就可以实现注册点移动了。说了这么多,还是看代码更好理解些。

这里的container是一个Sprite对象,是我们真正的要用在刚体上的贴图。另外一点要注意的是,在引用localCOM属性时,一定要在调用body.align()方法之前,因为一点调用align()之后,这个localCOM的坐标就成了(0,0)。

然后我们再和正常贴图一样,更新贴图坐标就可以了。下面是完整的代码和源文件。

点击下载源文件

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

8条评论
  • DreamofC

    2013 年 6 月 7 日 下午 5:30

    柔体贴图~~柔体贴图~~柔体贴图~~

    1. ladeng6666

      2013 年 6 月 7 日 下午 10:39

      还在研究中,敬请期待!

      1. mld

        2013 年 7 月 14 日 下午 6:27

        不错,我非常喜欢您的教程!

  • edi

    2013 年 11 月 1 日 下午 11:38

    You are amazing 🙂

    1. ladeng6666

      2013 年 11 月 3 日 下午 11:17

      Thanks, hope my tuts can help you!

  • Yorhom

    2015 年 1 月 24 日 下午 1:48

    大叔能讲讲Box2d中的RayCast以及相关的类的用法吗

    1. ladeng6666

      2015 年 1 月 24 日 下午 9:33

      我在《Box2D物理游戏编程基础》一章有详细的介绍,Box2D中Raycast的4中用法,敬请期待哦!

      1. Yorhom

        2015 年 1 月 24 日 下午 10:56

        我主要想做个爆炸效果,请问大叔能给个思路吗

发表评论

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