Phaser3.50 examples Actions 笔记

Published by 雪夜不下雪 on 共 12720 个字

Table of Contents

这里记录的是 Phaser3.50 示例中的 Actions 部分 api 的用法。详情还是看 Phaser api 文档比较好。

Actions

Grid Align

class GridAlign extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.spritesheet(
      'diamonds',
      'assets/sprites/diamonds32x24x5.png',
      {
        frameWidth: 32,
        frameHeight: 24
      }
    )
  }

  create() {
    const group = this.add.group({
      key: 'diamonds',
      frame: [0, 1, 2, 3, 4],
      frameQuantity: 20
    })

    Phaser.Actions.GridAlign(group.getChildren(), {
      width: 10,
      height: 10,
      cellWidth: 32,
      cellHeight: 32,
      x: 100,
      y: 100
    })
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'demo',
  scene: [GridAlign]
}

const game = new Phaser.Game(config)

this.load.baseURL

因为图片资源可能与程序不在一个地方，设置 baseURL 可以为资源统一加上域名路径前缀。

this.load.spritesheet(key [, url] [, frameConfig] [, xhrSettings])

加载精灵图。其中 url 可以是一个数组，第一个元素是精灵图，第二个元素是法线贴图（normal maps）。除了传递参数，还可以传递配置对象。

this.load.spritesheet({
  key: 'bot',
  url: 'images/robot.png',
  frameConfig: {
    frameWidth: 32,
    frameHeight: 38,
    startFrame: 0,
    endFrame: 8
  }
});

配置对象里，法线贴图是属性：normalMap

this.add.group([children] [, config])

添加一群游戏对象。config 对象说明如下：

key指定资源
frame指定每个游戏对象（Game Object）所使用的纹理帧。
frameQuantity指定每一个帧的数量。

Phaser.Actions.GridAlign(items, options)

网格对齐。options 对象说明如下：

配置项说明
width水平方向网格数量
height垂直方向网格数量
cellWidth每个网格像素宽度
cellHeight每个网格像素高度
x网格左上横坐标
y网格左上纵坐标

Inc X Layers

class IncXLayers extends Phaser.Scene {
  constructor() {
    super()
    this.move = 0
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.atlas('atlas', 'assets/tests/fruit/veg.png', 'assets/tests/fruit/veg.json')
  }

  create() {
    this.groupA = this.add.group()
    this.groupB = this.add.group()

    for (let i = 0; i < 1000; i++) {
      this.groupA.create(100 + Math.random() * 600, 100 + Math.random() * 400, 'atlas', 'veg0' + Math.floor(1 + Math.random() * 9))
    }

    for (let i = 0; i < 1000; i++) {
      this.groupB.create(100 + Math.random() * 600, 100 + Math.random() * 400, 'atlas', 'veg0' + Math.floor(1 + Math.random() * 9))
    }
  }

  update() {
    Phaser.Actions.IncX(this.groupA.getChildren(), Math.cos(this.move))
    Phaser.Actions.IncY(this.groupA.getChildren(), Math.sin(this.move))
    Phaser.Actions.Rotate(this.groupA.getChildren(), -0.01)

    Phaser.Actions.IncX(this.groupB.getChildren(), Math.sin(this.move))
    Phaser.Actions.IncY(this.groupB.getChildren(), Math.cos(this.move))
    Phaser.Actions.Rotate(this.groupB.getChildren(), -0.01)

    this.move += 0.01
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'demo',
  scene: [ IncXLayers ]
}

const game = new Phaser.Game(config)

this.load.atlas(key [, textureURL] [, atlasURL] [, textureXhrSettings] [, atlasXhrSettings])

加载纹理图集。atlasURL 是图集描述 json 文件地址。

this.group.create([x] [, y] [, key] [, frame] [, visible] [, active])

创建游戏对象并添加到群组

参数说明
x新对象在世界中的水平像素位置
y新对象在世界中的垂直像素位置
key对象所使用的资源
frame帧/json 文件中的帧名称
visible新对象是否可见。默认 true
active新对象是否激活。默认 true

Phaser.Actions.IncX(items, value [, step] [, index] [, direction])

  给每一个对象的横坐标（x）增加相应的值。

参数说明
items游戏对象
value增加的值
step步进。该值乘以索引后增加到 value 上。默认 0
index开始索引。默认0
direction遍历方向。1–正序，-1–倒序。默认 1

Phaser.Actions.IncY(items, value [, step] [, index] [, direction])

对纵坐标（y）操作。同上。

Phaser.Actions.Rotate(items, value [, step] [, index] [, direction])

对旋转角操作。同上。

Place On A Circle Multi

class PlaceOnACircleMulti extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.spritesheet(
      'balls',
      'assets/sprites/balls.png',
      {
        frameWidth: 17,
        frameHeight: 17
      }
    )
  }

  create() {
    const circle = new Phaser.Geom.Circle(400, 300, 220)
    this.group = this.add.group({
      key: 'balls',
      frame: [0, 1, 5],
      repeat: 10
    })
    Phaser.Actions.PlaceOnCircle(this.group.getChildren(), circle)
    this.tween = this.tweens.addCounter({
      from: 220,
      to: 100,
      duration: 3000,
      delay: 2000,
      ease: 'Sine.easeInOut',
      repeat: -1,
      yoyo: true
    })
  }

  update() {
    Phaser.Actions.RotateAroundDistance(
      this.group.getChildren(),
      {
        x: 400,
        y: 300,
      },
      0.02,
      this.tween.getValue()
    )
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'demo',
  scene: [ PlaceOnACircleMulti ]
}

const game = new Phaser.Game(config)

new Phaser.Geom.Circle([x] [, y] [, radius])

创建圆形。注意，几何图形不是游戏对象，无法添加到展示列表（display list），也没有纹理。

this.add.group([children] [, config])

这里有一个属性：repeat。repeat 指的是 frame 整体重复次数。而之前的 frameQuantity 指的是每帧个数。

Phaser.Actions.PlaceOnCircle(items, circle [, startAngle] [, endAngle])

把游戏对象均匀地放到圆边界。

参数说明
items游戏对象数组
circle圆
startAngle开始弧度。默认 0
endAngle结束弧度。默认 6.28

this.tweens.addCounter(config)

创建数字动画（Number Tween）并添加到动画列表。config 配置如下：

配置项说明
from开始数字。默认 0
to结束数字。默认 1
delay延迟（毫秒）。默认 0
duration持续时间（毫秒）。默认 1000
ease动画类型。默认 ‘Power0’
repeat重复次数。-1 无限次。默认 0
yoyo反转。动画完成后逆序执行回到原位。默认 false

Phaser.Actions.RotateAroundDistance(items, point, angle, distance)

根据给定的点、角度和距离对一组游戏对象做旋转操作。

参数说明
items游戏对象数组
point含有 x 和 y 的对象
angle旋转角度。弧度
distance与 point 的像素距离

this.tween.getValue([index])

返回指定元素的动画数值。index 默认 0

Place On A Circle Reserved

this.load.image(key [, url] [, xhrSettings])

ActionsPlaceOnEllipse

new Phaser.Geom.Ellipse([x] [, y] [, width] [, height])

创建椭圆

Phaser.Actions.PlaceOnEllipse(items, ellipse [, startAngle] [, endAngle])

把游戏对象均匀地放到椭圆边界。参数类似 PlaceOnCircle

this.tweens.add(config)

创建动画并添加到动画列表。配置与 addCounter 稍有不同。

配置项说明
targets应用动画的对象/对象数组
width目标宽度。（目前 3.2.4 文档中没有）
height目标高度。（目前 3.2.4 文档中没有）
delay延迟（毫秒）。默认 0
duration持续时间（毫秒）。默认 1000
ease动画类型。默认 ‘Power0’
repeat重复次数。-1 无限次。默认 0
yoyo反转。动画完成后逆序执行回到原位。默认 false

Place On Line

new Phaser.Geom.Line([x1] [, y1] [, x2] [, y2])

创建直线。参数为起止点横纵坐标。默认都是 0

Phaser.Actions.PlaceOnLine(items, line)

把游戏对象均匀地放到直线上。

Place On Rectangle

Phaser.Actions.PlaceOnRectangle(items, rect [, shift])

将游戏对象均匀地按顺时针放到矩形边界上。shift 为偏移量（位置，非像素）。

Place On Triangle

class PlaceOnTriangle extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.image('ball', 'assets/sprites/chunk.png')
  }

  create() {
    const triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 100, 300)
    // const triangle = new Phaser.Geom.Triangle.BuildRight(200, 400, 300, 200)
    const group = this.add.group({
      key: 'ball',
      frameQuantity: 64
    })
    Phaser.Actions.PlaceOnTriangle(group.getChildren(), triangle)
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: 'demo',
  scene: [ PlaceOnTriangle ]
}

const game = new Phaser.Game(config)

new Phaser.Geom.Triangle.BuildEquilateral(x, y, length)

创建等边三角形（equilateral）。

参数说明
x顶点横坐标
y顶点纵坐标
length边长

new Phaser.Geom.Triangle.BuildRight(x, y, width, height)

创建直角三角形（right triangle）

参数说明
x直角横坐标
y直角纵坐标
width底边长度。正右负左
height高。正上负下

Random Circle

Phaser.Actions.RandomCircle(items, circle)

将游戏对象随机放到圆内

Random Ellipse

Phaser.Actions.RandomEllipse(items, ellipse)

将游戏对象随机放到椭圆内

Random Line

Phaser.Actions.RandomLine(items, line)

将游戏对象随机放到直线上

Random Rectangle

Phaser.Actions.RandomRectangle(items, rectangle)

将游戏对象随机放到矩形内

Random Triangle

Phaser.Actions.RandomTriangle(items, triangle)

将游戏对象随机放到三角形内

Rotate Around X Y

class RotateAroundXY extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.spritesheet(
      'diamonds',
      'assets/sprites/diamonds32x24x5.png',
      {
        frameWidth: 32,
        frameHeight: 24,
      }
    )
  }

  create() {
    this.group = this.add.group()
    
    for (let i = 0; i < 256; i++) {
      this.group.create(
        Phaser.Math.Between(200, 600),
        Phaser.Math.Between(100, 500),
        'diamonds',
        Phaser.Math.Between(1, 4)
      )
    }

    this.geomPoint = new Phaser.Geom.Point(400, 300)

    this.input.on('pointermove', function(pointer) {
      this.geomPoint.setTo(pointer.x, pointer.y)
    }, this)
  }

  update() {
    Phaser.Actions.RotateAroundDistance(this.group.getChildren(), this.geomPoint, 0.1, 100)
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'demo',
  scene: [RotateAroundXY]
}

const game = new Phaser.Game(config)

Phaser.Math.Between(min, max)

生成最大（max）最小（min）值之间的随机数。闭区间。

new Phaser.Geom.Point([x] [, y])

创建一个点。

参数说明
x横坐标。默认 0
y纵坐标。默认 x

this.input.on(event, fn [, context])

添加事件监听。支持的事件可以在 Phaser.Input.Events 看到。

参数说明
event事件名称
fn回调
context上下文。默认 this

Rotate Around

Phaser.Actions.RotateAround(items, point, angle)

根据给定的点和角度离对一组游戏对象做旋转操作。

Rotate Container Facing Point

class RotateContainerFacingPoint extends Phaser.Scene {
  constructor() {
    super()

    this.container = null
    this.center = {
      x: 400,
      y: 300
    }
    this.rotateSpeed = 0.02
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.spritesheet(
      'diamonds',
      'assets/sprites/diamonds32x24x5.png',
      {
        frameWidth: 32,
        frameHeight: 24
      }
    )
  }

  create() {
    this.add.sprite(this.center.x, this.center.y, 'diamonds', 1)
    this.container = this.add.container(600, 300)
    const text = this.add.text(-25, -50, 'Phser')
    const diamond1 = this.add.sprite(0, 0, 'diamonds', 1)
    diamond1.setScale(2)
    const diamond2 = this.add.sprite(15, 0, 'diamonds', 2)
    diamond2.setScale(2)
    const diamond3 = this.add.sprite(-15, 0, 'diamonds', 3)
    diamond3.setScale(2)

    this.container.add([diamond1, diamond2, diamond3, text])

    this.input.on('pointerdown', function() {
      if (this.rotateSpeed > 0) {
        this.rotateSpeed = 0
      } else {
        this.rotateSpeed = 0.02
      }
    }, this)
  }

  update() {
    Phaser.Actions.RotateAroundDistance([this.container], this.center, this.rotateSpeed, 250)
    const angleDeg = Math.atan2(
      this.container.y - this.center.y,
      this.container.x - this.center.x
    ) * 180 / Math.PI
    this.container.angle = angleDeg + 90
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'demo',
  scene: [RotateContainerFacingPoint]
}

const game = new Phaser.Game(config)

this.add.sprite(x, y, texture [, frame])

创建一个精灵对象并添加到场景中。

this.add.container([x] [, y] [, children])

创建一个游戏对象容器并添加到场景中。

参数说明
x横坐标。默认 0
y纵坐标。默认 0
children游戏对象数组。

this.container.add(child)

  添加游戏对象到容器。

参数说明
child游戏对象/游戏对象数组

添加后的游戏对象的位置会变成相对于容器的位置。

Math.atan2(y: number, x: number): number

返回原点到给定点的线段与 x 轴正方向之间的平面角度（弧度值）。

this.container.angle

容器的旋转角度。如果要使用弧度，需要设置 rotation 属性。

Phaser 使用顺时针旋转系统。0 度为右，90 度为下。

Set Alpha

class SetAlpha extends Phaser.Scene {
  constructor() {
    super()
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.spritesheet(
      'diamonds',
      'assets/sprites/diamonds32x24x5.png',
      {
        frameWidth: 32,
        frameHeight: 24
      }
    )
  }

  create() {
    const group = this.add.group({
      key: 'diamonds',
      frame: 0,
      frameQuantity: 50,
      setXY: {
        x: 32,
        y: 32,
        stepX: 14
      }
    })
    Phaser.Actions.SetAlpha(group.getChildren(), 0, 1 / 50)
  }
}

const config = {
  type: Phaser.WEBGL,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'demo',
  scene: [SetAlpha]
}

const game = new Phaser.Game(config)

this.add.group([config])

这里有一个之前没有碰到的 setXY 属性。

配置项说明
x每个游戏对象的横坐标。默认 0
y每个游戏对象的纵坐标。默认 0
stepX横坐标步进。默认 0
stepY纵坐标步进。默认 0

Phaser.Actions.SetAlpha(items, value [, step] [, index] [, direction])

设置游戏对象透明度。

参数说明
items游戏对象数组
value透明度
step步进。默认 0
index开始索引。默认0
direction遍历方向。1–正序，-1–倒序。默认 1

Set X Y

Phaser.Actions.SetXY(items, x [, y] [, stepX] [, stepY] [, index] [, direction])

设置游戏对象位置。

Shift Position

class ShiftPosition extends Phaser.Scene {
  constructor() {
    super()
    this.move = 0
    this.x = 0
    this.y = 0
  }

  preload() {
    this.load.baseURL = globalConfig.baseUrl
    this.load.image('sky', 'assets/skies/deepblue.png')
    this.load.image('ball', 'assets/demoscene/ball-tlb.png')
  }

  create() {
    this.add.image(0, 0, 'sky')
        .setOrigin(0)
    this.group = this.add.group({
      key: 'ball',
      frameQuantity: 128
    })

    this.input.on('pointermove', function(pointer) {
      this.x = pointer.x
      this.y = pointer.y
    }, this)
  }

  update(time, delta) {
    this.move += delta
    if (this.move > 6) {
      Phaser.Actions.ShiftPosition(this.group.getChildren(), this.x, this.y)
      this.move = 0
    }
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: 'demo',
  scene: [ShiftPosition]
}

const game = new Phaser.Game(config)

this.add.image(x, y, texture [, frame])

创建图片对象并添加到场景。

setOrigin([x] [, y])

设置游戏对象的原点。参数值在 0 ~ 1 之间。为对象宽高的比例。

参数说明
x水平原点位置。默认 0.5
y垂直原点位置。默认 x

update(time, delta)

场景的生命周期钩子：update。

参数说明
time当前时间。毫秒
delta与上一帧的时间偏移。毫秒

Phaser.Actions.ShiftPosition(items, x, y [, direction] [, output])

遍历游戏对象数组，将元素的位置设置为其前一个或后一个元素的位置。

参数说明
items游戏对象数组
x第一项的横坐标
y第一项的纵坐标
direction遍历方向。1–正序，-1–倒序。默认 0
output最后一项的位置。

比如如下简化示例：

// 位置数组
[[0, 0], [0, 0], [0, 0]]
// 设置初始位置为 1, 1
// 第一帧
[[0, 0], [0, 0], [1, 1]]
// 第二帧
[[0, 0], [1, 1], [1, 1]]
// 第三帧
[[1, 1], [1, 1], [1, 1]]
// 在遍历设置每一项位置的时候，会将当前项位置保存，作为下一个元素要设置的位置，再改变当前项的位置。

Spread

Phaser.Actions.Spread(items, property, min, max [, inc])

对游戏对象的某个属性进行渐变处理。比如设置 alpha 为 0 ~ 1

参数说明
items游戏对象数组
property要改变的属性
min最小值
max最大值
inc是否原值增加。默认 false

Wrap In Camera Bounds

class WrapInCameraBounds extends Phaser.Scene {
  constructor() {
    super()
  }

  create() {
    this.graphics = this.add.graphics()

    this.shapes = new Array(15).fill(null).map(() => {
      return new Phaser.Geom.Circle(
        Phaser.Math.Between(0, 800),
        Phaser.Math.Between(0, 600),
        Phaser.Math.Between(25, 75)
      )
    })

    this.rect = Phaser.Geom.Rectangle.Clone(this.cameras.main)
  }

  update() {
    this.shapes.forEach(function(shape, i) {
      shape.x += (1 + 0.1 * i)
      shape.y += (1 + 0.1 * i)
    })

    Phaser.Actions.WrapInRectangle(this.shapes, this.rect, 72)

    this.draw()
  }

  color(i) {
    return 0x001100 * (i % 15) + 0x000033 * (i % 5)
  }

  draw() {
    this.graphics.clear()

    this.shapes.forEach((shape, i) => {
      this.graphics
        .fillStyle(this.color(i), 0.5)
        .fillCircleShape(shape)
    }, this)
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: 'demo',
  scene: [WrapInCameraBounds]
}

const game = new Phaser.Game(config)

this.add.graphics([config])

创建图形游戏对象并添加到场景中。

配置项说明
x横坐标
y纵坐标

Phaser.Geom.Rectangle.Clone(source)

克隆矩形。source 包含 x、y、width、height 属性。

this.cameras.main

场景摄像机管理器里的主要摄像机。默认情况下，摄像机的尺寸等于游戏世界的尺寸。详情见 Phaser.Cameras.Scene2D. CameraManager

Phaser.Actions.WrapInRectangle(items, rect [, padding])

将对象限制在矩形内。

参数说明
items游戏对象数组
rect矩形
padding外延边距。默认 0

该方法会对游戏对象的位置进行求余操作。超出范围的会从另一侧进入（修正）。

color(i)

这是个色值计算函数。0x001100 * (i % 15) 会得到 #000000 ~ #00ee00 这些色值（跨度：001100）。0x000033 * (i % 5) 会得到 #000000 ~ #0000cc 这些色值（跨度：000033）。最终得到 #000000 ~ #00eecc 这些色值。

this.graphics.clear()

清空命令缓冲区（command buffer），重置填充样式和线条样式。在这个 demo 中，如果不调用这个方法，原来已经绘制的图形不会清除，新绘制的图形不断叠加。

this.graphics.fillStyle(color [, alpha])

设置图形填充颜色。透明度默认 1

this.graphics.fillCircleShape(circle)

填充给定的圆。

Wrap In Rectangle

Phaser.Actions.RandomRectangle(items, rect)

将游戏对象随机放到矩形内。

Phaser.Actions.IncXY(items, x [, y] [, stepX] [, stepY] [, index] [, direction])

给每一个对象的平面坐标增加相应的值。