AbstractGraphics

Base class for WorldObject-attached components whose visual is a Pixi display object. AbstractGraphics owns the boilerplate that every such component needs:

• resolving the world's Scene so the display object has somewhere to live,
• parenting and unparenting the display object across the component's lifecycle,
• syncing the host WorldObject's transform — position, rotation, scale — into the display object once per frame so the visual reflects every behavior change made during the tick,
• exposing the underlying Pixi instance via AbstractGraphics.raw for advanced use cases the typed surface doesn't cover.

Subclasses provide the concrete display object — typically a Pixi Graphics for shape-drawing components, but the base is generic so a future SpriteGraphics extends AbstractGraphics<Sprite> slots in without special-casing.

Transform-sync timing

The host transform is copied into the display object during AbstractGraphics.onPostUpdate rather than onUpdate. This way the visual reflects every position/rotation/scale change made earlier in the tick regardless of which component made it or what phase it ran in — a controller's onUpdate move and a physics body's onPostUpdate snap both end up on screen the same frame.

An initial sync also runs in AbstractGraphics.onAdded, immediately after the display is parented to the Scene. Without this, an object spawned mid-tick (after the world's onPostUpdate pass) — or spawned in setup code between bootstrap and the first tick — would render at Pixi's default (0, 0) for one frame before the next tick's sync caught up, producing a single-frame flicker at the origin.

Lifecycle ownership

The base parents the display object to the Scene in onAdded and removes it in onDestroy. Subclasses that allocate Pixi-side resources (textures, geometries) should release them by overriding onDestroy, calling super.onDestroy() first.

import { Graphics as PixiGraphics } from 'pixi.js';

export class RingGraphics extends AbstractGraphics<PixiGraphics> {
  constructor(host: WorldObject, radius: number, color = 0xffffff) {
    const display = new PixiGraphics();
    display.circle(0, 0, radius).stroke({ width: 2, color });
    super(host, display);
  }
}