SuperAPI AI 工具集

graphics-and-shapes

设计与创作

查看项目

更新于 10-15 15:58

技能介绍

Phaser 4 的 Graphics and Shapes 技能用于在不使用纹理的情况下绘制图形,提供两套方案:Graphics 游戏对象和 Shape 形状对象。

用途:适合绘制基础图形、UI 元素、指示器,或为游戏生成可复用的纹理。

主要能力:

  • Graphics 游戏对象:通过 this.add.graphics() 创建,是命令式绘图表面。支持路径绘制、圆弧、渐变、圆角矩形、画布变换(translateCanvas、scaleCanvas、rotateCanvas)和 save/restore,并可用 generateTexture(key, width, height) 生成纹理。它包含 AlphaSingle、BlendMode、Depth、Lighting、Mask、RenderNodes、Transform、Visible、ScrollFactor 等组件,但不包含 Origin 或 GetBounds。
  • Shape 游戏对象:独立的游戏对象,通过 this.add.rectangle(...)、this.add.circle(...) 等专用工厂方法创建。涵盖 Arc、Curve、Ellipse、Grid、IsoBox、IsoTriangle、Line、Polygon、Rectangle、Star、Triangle。它们可被补间、缩放、加入组或容器、启用输入与物理,通过 setFillStyle 和 setStrokeStyle 设置样式,并包含 Origin 和 GetBounds。但不支持渐变、路径细节阈值和画布变换。

使用方式:

  • Graphics 先调用 fillStyle 或 lineStyle 设置样式,再调用 fillRect、strokeCircle 等绘制方法;路径用 beginPath、moveTo、lineTo、closePath、fillPath/strokePath。注意 Graphics 的 arc 角度用弧度,this.add.arc 工厂的角度用度。
  • Shape 对象可通过构造参数或 setFillStyle、setStrokeStyle 设置填充与描边;部分形状提供专用方法,如 Star 的 setPoints、setInnerRadius、setOuterRadius,Line 的 setLineWidth,Grid 的 setAltFillStyle 等。

适用场景:

  • Graphics 适合动态绘制、复杂路径、单对象上绘制多个形状、渐变,或生成纹理。
  • Shape 对象适合单个 UI 元素、简单指示器、需要物理或输入的形状,以及需要原点与边界等游戏对象特性的场景。

限制与注意:

  • Graphics 渲染开销较大,复杂形状尤为明显;静态形状可先 generateTexture 再作为 Sprite 使用,并尽量合并 Graphics 对象以减少批次切换。
  • generateTexture 使用 Canvas API,渐变填充不会出现在生成的纹理中。
  • Graphics 的 fillStyle 与 lineStyle 只对后续绘制生效,不追溯之前已绘制的图形。
  • Shape 对象的 isStroked 默认 false,需显式调用 setStrokeStyle;Line 仅支持描边;IsoBox/IsoTriangle 仅支持填充;Shape 不支持 setTint 等着色方法。
  • Polygon 在点包含负坐标时 getBounds() 返回错误值,可用 Phaser.Geom.Polygon.GetAABB 代替。
  • 详细方法签名与工厂参数请参考文档中的 API 速查表。