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 速查表。