【Phaser+Ts+Webpack】手把手教你使用phaser-曲线和路径跟随（四）

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情

曲线

之前的教程已经设涉及到了一部分曲线，比如说圆和椭圆，除此之外我们还有一些其它类型曲线，比如说贝塞尔曲线，下面我们会详细介绍这些曲线。

Spline 根据点的集合创建一条曲线

new Phaser.Curves.Spline(x1,y1,x2,y2,x3,y3...)

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    const curve = new Phaser.Curves.Spline([100, 100, 300,100, 150, 200, 300, 300]);
    curve.draw(graphics)

Tips：curve.draw(graphics, pointsTotal) 如果想让这个路径显示出来可以调用此方法，非必须，pointsTotal越大显示的曲线越平滑。

新增曲线上面的点

• addPoint(x, y)
• addPoints([x, y, x2, y2...])

返回一条新的曲线

getBounds()

返回一个能将曲线包含在内的矩形

getEndPoint()、getStartPoint()

返回曲线的最后(第一个)一个点

获得曲线的长度

• getLength：获得曲线总长度
• getLengths：获得曲线的分段长度，第一个点p0，第二个点P1.....距离第一个点的长度

getPoint(percent)

返回一个点，这个点的位置占曲线percent(0-1)

getPointAt(percent)

返回一个点，这个点的位置占曲线弧长percent(0-1)

getPoints(divisions, stepRate) 获取构成曲线所有的点

• divisions：返回多少个点
• stepRate：每隔多远返回一个点，divisions要设置为0

getRandomPoint()

获取曲线上随机一个点

getSpacedPoints(divisions, stepRate)

获取构成曲线等距点的集合

getTangent(t)

返回一个点t(number)在曲线上位置向量的法线向量

getUtoTmapping(u, distance)

• u(0-1)：将曲线作为一个整体，一段弧长占曲线的百分比，返回这个点处的百分比
• distance：如果设置长度则把这个当为总长度

toJSON()、fromJSON(data)

• toJSON：转换为json数据
• fromJSON：将json数据抓换为对象，注意这个方法是静态方法

Line 创建一条线段

new Phaser.Curves.Line(Vector2 p1, Vector2 p2)

p1、p2为向量，p2可以不写，则默认从原点开始

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    graphics.fillStyle(0xFF00FF, 1)
    const line = new Phaser.Curves.Line(new Phaser.Math.Vector2(100, 100), new Phaser.Math.Vector2(400, 400));
    line.draw(graphics);

Line的常用方法和上面Spline基本相同

Ellipse 椭圆

new Phaser.Curves.Ellipse(x, y, width, height, startAngle, endAngle, rotation)

• x、y：椭圆中心的坐标
• width、height：椭圆的长宽，如果相同则是圆
• startAngle、endAngle：椭圆的开始角度和结束角度
• rotation：椭圆的整体旋转角度

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    graphics.fillStyle(0xFF00FF, 1)
    const ellipse = new Phaser.Curves.Ellipse(200, 200, 100, 50, 0, 90)
    ellipse.draw(graphics)

Ellipse的常用方法和上面Spline基本相同

QuadraticBezier 二次贝塞尔曲线

new Phaser.Curves.QuadraticBezier(p1, c1, c2)

• 三个参数都是Vector2类型
• p1：起始点
• c1、c2：控制点1、2

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    const be = new Phaser.Curves.QuadraticBezier(new Phaser.Math.Vector2(100, 100), new Phaser.Math.Vector2(70, 50), new Phaser.Math.Vector2(80, 150))
    be.draw(graphics)

QuadraticBezier的常用方法和上面Spline基本相同

CubicBezier 高阶贝塞尔曲线

new Phaser.Curves.CubicBezier(p1, c1, c2, p2)

• 三个参数都是Vector2类型
• p1：起始点
• p2：结束点
• c1、c2：控制点1、2

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    const be = new Phaser.Curves.CubicBezier(new Phaser.Math.Vector2(100, 100), new Phaser.Math.Vector2(70, 50), new Phaser.Math.Vector2(80, 150), new Phaser.Math.Vector2(200, 100))
    be.draw(graphics)

CubicBezier的常用方法和上面Spline基本相同

Path 路径

new Phaser.Curves.Path(x, y)

• x、y：一般不写，路径的起始点

路径创建好之后需要调用add方法去加入曲线才能显示出来，可以理解成把其它曲线转换为Path

Path的常用方法和上面Spline基本相同，部分不支持，大家可以自己试试，下面会介绍一些新的方法

add(curves) 添加曲线

路径创建好需要向里面添加曲线，可以调用多次添加多个曲线

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    graphics.fillStyle(0xFF00FF, 1)
    const path = new Phaser.Curves.Path();
    path.add(new Phaser.Curves.Spline([50, 50, 70, 70, 90, 50, 110, 70, 130, 50]))
    path.add(new Phaser.Curves.Line(new Phaser.Math.Vector2(100, 100), new Phaser.Math.Vector2(100, 300)))
    path.draw(graphics)

circleTo(radius) 路径末尾位置追加一个圆形曲线

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    graphics.fillStyle(0xFF00FF, 1)
    const path = new Phaser.Curves.Path();
    path.add(new Phaser.Curves.Spline([50, 50, 70, 70, 90, 50, 110, 70, 130, 50]))
    path.circleTo(10)
    path.add(new Phaser.Curves.Line(new Phaser.Math.Vector2(50, 100), new Phaser.Math.Vector2(200, 100)))
    path.draw(graphics)

closePath() 关闭曲线

将最后一个曲线的结束点和第一个曲线的开始点链接

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    graphics.fillStyle(0xFF00FF, 1)
    const path = new Phaser.Curves.Path();
    path.add(new Phaser.Curves.Spline([50, 50, 70, 70, 90, 50, 110, 70, 130, 50]))
    path.circleTo(10)
    path.add(new Phaser.Curves.Line(new Phaser.Math.Vector2(50, 100), new Phaser.Math.Vector2(200, 100)))
    path.closePath()
    path.draw(graphics)

cubicBezierTo()、ellipseTo()、lineTo()、splineTo()

追加其他类型的曲线，效果和用法与追加圆形相同

destroy() 清除内部曲线的引用

Tips：以上方法的调用都需要在draw()之前

路径跟随 PathFollower

PathFollower是一个游戏物体对象，所以可以直接添加 this.add.follower(path, x, y, texture, frame)

• path：要跟随的路径
• x、y：跟随物体的起始世界坐标
• texture：跟随物体的纹理
• frame：物体纹理帧

    const graphics = this.add.graphics();
    graphics.lineStyle(1, 0xff0000)
    graphics.fillStyle(0xFF00FF, 1)
    const curve = new Phaser.Curves.Ellipse(200, 200, 100, 100);
    
    const path = new Phaser.Curves.Path()
    path.add(curve)
    path.draw(graphics)

    const follower = this.add.follower(path, 100, 100, 'img').setDisplaySize(30, 30)
    follower.startFollow({
      positionOnPath: true,
      duration: 2000,
      yoyo: false,
      repeat: -1,
      rotateToPath: true
    })

startFollow(option) 开始跟随

• option
  • positionOnPath：是否使用路径的偏移量，如果设置为true则会把curve的位置当做偏移量
  • rotateToPath：是否使用路径旋转的偏移量
  • delay：延迟多少毫秒开始运动
  • duration：一次完整的跟随持续多长时间
  • ease：渐变方式
  • repeat：重复次数
  • yoyo：是否开启往返运动
  • repeatDelay：每次重复延迟多少毫秒
  • onComplete(tween, targets, param)：动画完全执行完毕的回调函数
  • onCompleteParams：动画完成时候传递的参数数组
  • from：起始位置 0-1
  • to：结束位置 0-1
  • onRepeat(tween, targets, param)：每次重复运动的回调函数
  • onRepeatParams：动画每次重复时候传递的参数数组
  • onStart\onStop(tween, targets, param)：开始、停止的回调函数
  • onStartParams\onStopParams(tween, targets, param)：开始、停止时候传递的参数数组
  • onUpdate(tween, targets, param)：运动过程时候的回调函数
  • onUpdateParams：运动过程时候传递的参数数组
  • onYoyo(tween, targets, param)：每次yoyo时候的回调函数
  • onYoyoParams：每次yoyo传递的参数数组

本节的目的主要是让大家了解如何进行路径跟随以及跟随运动，可以制作一些自动寻路功能。