【Phaser+Ts+Webpack】手把手教你使用phaser-grid（三）

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

什么是grid网格

我们可以用网格去做一些策略地图，或者一些其它的战旗游戏，使用 this.add.grid() 可以快速生成一个网格，如下图：

Tips：phaser中任何的游戏物体对象Gameobjects都可以通过this.add创建

下面会介绍grid相关的api，我会尽量去介绍完整的api，英语好的童鞋可以去查看官方文档

创建一个网格

this.add.grid(x, y, width, height, cellWidth, cellHeight, fillColor, fillAlpha, outlineColor, outlineAlpha)

• x、y：网格对象的起点坐标
• width、height：网格对象的总体宽高
• cellWidth、cellHeight：网格中每个小格的宽高
• fillColor, fillAlpha：小格子的填充颜色，和颜色的透明度
• outlineColor, outlineAlpha：小格子的外边框颜色，和颜色的透明度

const grid = this.add.grid(0, 0, 800, 500, 50, 50, 0xffffff, 0, 0xffffff, 1).setOrigin(0);

setOrigin(0)的意思是将网格的锚点设置为左上角，默认是中心点即：0.5

grid成员变量和相关方法

Tips：成员变量一般是获取grid属性信息，部分的成员变量是可以直接设置，但是最好不要直接去设置，而是调用其提供的成员方法去设置，如果没有成员方法去修改才考虑直接修改。

获取、设置网格的交叉颜色

• altFillColor、altFillAlpha
• setAltFillStyle(color, alpha)

    const grid = this.add.grid(0, 0, 800, 500, 50, 50, 0xffffff, 0, 0xffffff, 1).setOrigin(0);
    grid.setAltFillStyle(0xff0f00, 0.5);

获取、设置网格的旋转角度

• angle
• setAngle(angle)：angle是弧度

获取、设置叠加模式

• blendMode
• setBlendMode(BlendMode)：BlendMode有四种
  • Phaser.BlendModes.ADD
  • Phaser.BlendModes.MULTIPLY
  • Phaser.BlendModes.SCREEN
  • Phaser.BlendModes.ERASE

获取物理组件（刚体）

• body：如果该物体设置了刚体等物理组件，返回这个组件

获取、设置摄像机渲染层级

• cameraFilter：摄像机默认渲染层级是0，默认返回也是0，可以修改此值来控制摄像机是否渲染这个物体。

获取、设置格子的宽高

• cellHeight、cellWidth

为这个游戏对象设置（获取）额外的信息

• setData({key:value, ......})
• getData(key)、getData([key1, key2,......])

    grid.setData({ name: 'myGrid', a: 123, b: 666 })
    console.log(grid.getData(['name', 'a'])); // ['myGrid', 123]

设置改游戏对象在场景的层级

• depth
• setDepth(number)

设置、获取宽高

• displayHeight、displayWidth：缩放的宽高
• setDisplaySize(width, height)：设置时候为缩放，不是裁剪，格子会被压缩

设置、获取填充颜色和透明度

• fillAlpha、fillColor
• setFillStyle(color, alpha)

设置、获取宽高

• width、heght：不缩放的宽高

忽略销毁对象

• ignoreDestroy：设置为true场景切换不会销毁

设置、获取边框颜色和透明度

• outlineFillAlpha、outlineFillColor
• setOutlineStyle(color, alpha)

设置、获取缩放

• scale：返回(scaleX + scaleY) / 2
• scaleX、scaleY
• setScale(x, y)

设置、获取是否跟随摄像机移动

• scrollFactorX、scrollFactorY：默认为1，1会移动，0不会移动
• setScrollFactor(x, y)

判断是否交叉渲染格子、是否填充、是否有描边

• showAltCells
• showCells
• showOutline

新增事件监听

1. 首先要设置 grid.setInteractive()
2. 然后监听事件 addListener/on

grid.setInteractive()
grid.addListener('pointerdown', (e: PointerEvent) => {
  console.log(e);
})

grid常用的api就这些，如果想要获取格子对象，我们还需要自己去封装一个方法来判断当前点击在哪个格子，完整的文档大家可以去官网查看。