SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场game-object-components

game-object-components

编程与开发

查看项目

更新于 10-15 14:09

技能介绍

用途

本技能是 Phaser 4 游戏对象组件（Game Object Components）的参考文档，用于在开发 Phaser 4 游戏时查阅游戏对象通用组件与 mixin 系统的用法。它覆盖为所有游戏对象提供共享行为的组件集合，包括 Alpha、BlendMode、Depth、Flip、GetBounds、Lighting、Mask、Origin、ScrollFactor、Size、Texture、TextureCrop、Tint、Transform、Visible、PathFollower、RenderNodes、RenderSteps、Filters、FilterList。

主要能力

技能按组件逐一列出成员与方法，例如：

  • Alpha：提供逐角透明度，alpha 为 0-1 的全局透明度，设置 0 会禁用渲染；setAlpha 支持单参数统一设置或四参数逐角设置（WebGL）；clearAlpha 重置为 1。AlphaSingle 为简化版，仅支持单一全局 alpha，Container 使用它。
  • BlendMode：控制像素合成方式，setBlendMode 接受 Phaser.BlendModes 常量、字符串或整数；WebGL 支持 NORMAL、ADD、MULTIPLY、SCREEN、ERASE，Canvas 支持额外的浏览器相关模式。
  • Depth：控制渲染顺序（z-index），depth 越高越靠上；提供 setDepth、setToTop、setToBack、setAbove、setBelow。
  • Flip：视觉镜像，不影响物理体；提供 flipX、flipY、setFlipX、setFlipY、setFlip、toggleFlipX、toggleFlipY、resetFlip。
  • GetBounds：计算位置与包围矩形，提供 getCenter、getTopLeft、getTopCenter、getTopRight、getLeftCenter、getRightCenter、getBottomLeft、getBottomCenter、getBottomRight、getBounds；includeParent 为 true 时计入父 Container 变换。
  • Lighting（v4，仅 WebGL）：启用基于光照的渲染，提供 lighting、selfShadow、setLighting、setSelfShadow。
  • Mask（v4 仅 Canvas）：Canvas 渲染器的几何遮罩，提供 mask、setMask、clearMask、createGeometryMask；WebGL 中应改用 Filters.addMask()。
  • Origin：控制位置、旋转、缩放的锚点，归一化 0-1，默认 0.5；提供 originX、originY、displayOriginX、displayOriginY、setOrigin、setOriginFromFrame、setDisplayOrigin、updateDisplayOrigin。
  • ScrollFactor：控制相机滚动对渲染位置的影响，默认 1；0 表示固定于相机（HUD），1 表示随相机移动，0.5 表示半速视差。
  • Size：管理原生与显示尺寸，提供 width、height、displayWidth、displayHeight、setSize、setDisplaySize、setSizeToFrame。
  • Texture：获取与设置纹理和帧，提供 texture、frame、setTexture、setFrame。
  • TextureCrop：在 Texture 基础上增加裁剪支持，Sprite 与 Image 使用它；提供 isCropped、setCrop。
  • Tint（仅 WebGL）：通过逐角顶点颜色为纹理着色，提供 tint、tintTopLeft、tintTopRight、tintBottomLeft、tintBottomRight、tintMode、isTinted、setTint、setTintMode、clearTint；v4 移除了 setTintFill()，改用 setTint(color).setTintMode(Phaser.TintModes.FILL)。
  • Transform：位置、缩放、旋转与坐标变换，提供 x、y、z、w、scale、scaleX、scaleY、angle、rotation、setPosition、copyPosition、setRandomPosition、setRotation、setAngle、setScale、setX、setY、setZ、setW、getLocalTransformMatrix、getWorldTransformMatrix、getLocalPoint、getWorldPoint、getParentRotation。
  • Visible：控制是否渲染，不可见对象仍会运行更新逻辑；提供 visible、setVisible。
  • PathFollower：通过内部 tween 沿 Phaser.Curves.Path 移动，提供 path、rotateToPath、pathRotationOffset、pathOffset、pathVector、pathDelta、pathTween、setPath、setRotateToPath、isFollowing、startFollow、pauseFollow、resumeFollow、stopFollow。
  • RenderNodes、RenderSteps、Filters、FilterList（v4，仅 WebGL）：用于后处理；访问 filters 前需先调用 enableFilters()，相机默认带 filters；filters.internal 用于对象局部效果，filters.external 用于屏幕空间效果。

使用方式

组件通过 mixin 在类创建时混入，而非按实例混入。多数 setter 返回 this，支持链式调用，例如 sprite.setAlpha(0.5).setDepth(10).setPosition(100, 200)。许多属性内部使用 getter/setter（如 alpha、depth、visible、scale、rotation），将 alpha 或 scale 设为 0 会清除渲染标志从而跳过渲染。renderFlags 是位掩码：bit 0 为 visible，bit 1 为 alpha，bit 2 为 scale，bit 3 为 texture，所有位都设置时对象才会渲染。

自定义游戏对象可通过工厂注册，使其能用 this.add.myObject() 创建：

class LaserBeam extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'laser');
    }
}

Phaser.GameObjects.GameObjectFactory.register('laserBeam', function (x, y) {
    const beam = new LaserBeam(this.scene, x, y);
    this.displayList.add(beam);
    return beam;
});

// Now usable in any scene:
const laser = this.add.laserBeam(100, 200);

工厂（this.add）与创建器（this.make）的区别：this.add 创建对象并加入显示列表；this.make 只创建对象但不加入，适合离屏准备或延迟显示，之后可用 this.add.existing(offscreen) 加入。

适用场景

适用于使用 Phaser 4 开发游戏的开发者，在需要查阅游戏对象通用能力（透明度、混合模式、深度、翻转、边界、光照、遮罩、原点、滚动因子、尺寸、纹理、裁剪、着色、变换、可见性、路径跟随、后处理滤镜）或实现自定义游戏对象时使用。

限制

部分组件有平台限制：Lighting、Tint、Filters、RenderSteps、RenderNodes、FilterList 仅 WebGL；Mask 在 v4 中仅 Canvas，WebGL 需改用 Filters.addMask()。Alpha 的逐角透明度仅 WebGL，Container 使用 AlphaSingle 不支持逐角。v4 中 setTintFill() 已移除。RenderNodes、RenderSteps、FilterList 的详细内容需参见 filters-and-postfx 技能与 references/REFERENCE.md；完整的组件与游戏对象对应矩阵也见 references/REFERENCE.md。