Display Objects and Scene Graph

/**
 * Base display object container that can hold other display objects
 */
class Container<C extends ContainerChild = ContainerChild> extends EventEmitter {
  constructor();
  
  /**
   * Add child display objects
   * @param children - Display objects to add
   * @returns First child added
   */
  addChild<U extends ContainerChild[]>(...children: U): U[0];
  
  /**
   * Add child at specific index
   * @param child - Child to add
   * @param index - Index position
   * @returns Added child
   */
  addChildAt<U extends ContainerChild>(child: U, index: number): U;
  
  /**
   * Remove child display objects
   * @param children - Display objects to remove
   * @returns First child removed
   */
  removeChild<U extends ContainerChild>(...children: U[]): U[0];
  
  /**
   * Remove child at specific index
   * @param index - Index of child to remove
   * @returns Removed child
   */
  removeChildAt(index: number): ContainerChild;
  
  /**
   * Get child at index
   * @param index - Child index
   * @returns Child at index
   */
  getChildAt(index: number): ContainerChild;
  
  /**
   * Get child index
   * @param child - Child to find
   * @returns Index of child
   */
  getChildIndex(child: ContainerChild): number;
  
  /**
   * Set child index
   * @param child - Child to move
   * @param index - New index
   */
  setChildIndex(child: ContainerChild, index: number): void;
  
  /** Array of child display objects */
  readonly children: ContainerChild[];
  
  /** Parent container */
  readonly parent: Container;
  
  /** X position */
  x: number;
  
  /** Y position */
  y: number;
  
  /** Scale factor */
  scale: PointData;
  
  /** Rotation in radians */
  rotation: number;
  
  /** Skew values */
  skew: ObservablePoint;
  
  /** Pivot point */
  pivot: ObservablePoint;
  
  /** Alpha transparency (0-1) */
  alpha: number;
  
  /** Visibility */
  visible: boolean;
  
  /** Renderable flag */
  renderable: boolean;
  
  /** Interactive flag */
  interactive: boolean;
  
  /** Interactivity for children */
  interactiveChildren: boolean;
  
  /** Hit area for interactions */
  hitArea: Rectangle | Circle | Ellipse | Polygon;
  
  /** Cursor style */
  cursor: string;
  
  /** Blend mode */
  blendMode: BLEND_MODES;
  
  /** Tint color */
  tint: ColorSource;
  
  /** Mask for clipping */
  mask: Container | MaskData;
  
  /** Filters array */
  filters: Filter[];
  
  /** Z-index for sorting */
  zIndex: number;
  
  /** Enable sorting children by zIndex */
  sortableChildren: boolean;
  
  /**
   * Remove all children
   * @param beginIndex - Start index
   * @param endIndex - End index
   * @returns Removed children
   */
  removeChildren(beginIndex?: number, endIndex?: number): ContainerChild[];
  
  /**
   * Destroy container and children
   * @param options - Destruction options
   */
  destroy(options?: boolean | DestroyOptions): void;
  
  /**
   * Get local bounds
   * @param rect - Rectangle to store bounds
   * @returns Local bounds rectangle
   */
  getLocalBounds(rect?: Rectangle): Rectangle;
  
  /**
   * Get global bounds
   * @param skipUpdate - Skip transform update
   * @param rect - Rectangle to store bounds
   * @returns Global bounds rectangle
   */
  getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle;
  
  /**
   * Convert local point to global
   * @param position - Local position
   * @param point - Point to store result
   * @param skipUpdate - Skip transform update
   * @returns Global position
   */
  toGlobal(position: PointData, point?: Point, skipUpdate?: boolean): Point;
  
  /**
   * Convert global point to local
   * @param position - Global position
   * @param point - Point to store result
   * @param skipUpdate - Skip transform update
   * @returns Local position
   */
  toLocal(position: PointData, from?: Container, point?: Point, skipUpdate?: boolean): Point;
}

/**
 * Sprite display object for rendering textures
 */
class Sprite extends Container {
  constructor(texture?: Texture);
  
  /** Texture to render */
  texture: Texture;
  
  /** Anchor point (0-1) */
  anchor: ObservablePoint;
  
  /** Tint color */
  tint: ColorSource;
  
  /** Blend mode */
  blendMode: BLEND_MODES;
  
  /** Width of sprite */
  width: number;
  
  /** Height of sprite */
  height: number;
  
  /**
   * Create sprite from texture or source
   * @param source - Texture source
   * @param options - Creation options
   * @returns New sprite
   */
  static from(source: Texture | string, options?: SpriteOptions): Sprite;
}

interface SpriteOptions {
  /** Texture to use */
  texture?: Texture;
  
  /** Anchor point */
  anchor?: PointData;
  
  /** Tint color */
  tint?: ColorSource;
  
  /** Blend mode */
  blendMode?: BLEND_MODES;
}

/**
 * Animated sprite for texture-based animations
 */
class AnimatedSprite extends Sprite {
  constructor(textures: Texture[] | FrameObject[], autoUpdate?: boolean);
  
  /** Animation textures */
  textures: Texture[] | FrameObject[];
  
  /** Current frame index */
  currentFrame: number;
  
  /** Animation speed multiplier */
  animationSpeed: number;
  
  /** Loop animation */
  loop: boolean;
  
  /** Animation update anchor */
  updateAnchor: boolean;
  
  /** Animation callback on complete */
  onComplete: () => void;
  
  /** Animation callback on frame change */
  onFrameChange: (currentFrame: number) => void;
  
  /** Animation callback on loop */
  onLoop: () => void;
  
  /** Total number of frames */
  readonly totalFrames: number;
  
  /** Is animation playing */
  readonly playing: boolean;
  
  /**
   * Play animation
   */
  play(): void;
  
  /**
   * Stop animation
   */
  stop(): void;
  
  /**
   * Go to frame and play
   * @param frameNumber - Frame to go to
   */
  gotoAndPlay(frameNumber: number): void;
  
  /**
   * Go to frame and stop
   * @param frameNumber - Frame to go to
   */
  gotoAndStop(frameNumber: number): void;
}

interface FrameObject {
  /** Texture for frame */
  texture: Texture;
  
  /** Time to display frame */
  time: number;
}

/**
 * Sprite that tiles a texture
 */
class TilingSprite extends Container {
  constructor(texture: Texture, width?: number, height?: number);
  
  /** Texture to tile */
  texture: Texture;
  
  /** Width of tiling area */
  width: number;
  
  /** Height of tiling area */
  height: number;
  
  /** Tiling offset */
  tilePosition: ObservablePoint;
  
  /** Tiling scale */
  tileScale: ObservablePoint;
  
  /** Tiling transform */
  tileTransform: Transform;
  
  /** Tint color */
  tint: ColorSource;
  
  /** Blend mode */
  blendMode: BLEND_MODES;
  
  /** UV transform */
  uvMatrix: TextureMatrix;
  
  /**
   * Create from texture
   * @param texture - Texture to tile
   * @param width - Width of tiling area
   * @param height - Height of tiling area
   * @returns New tiling sprite
   */
  static from(texture: Texture, width: number, height: number): TilingSprite;
}

/**
 * Sprite with 9-slice scaling
 */
class NineSliceSprite extends Container {
  constructor(texture: Texture, leftWidth?: number, topHeight?: number, rightWidth?: number, bottomHeight?: number);
  
  /** Texture to slice */
  texture: Texture;
  
  /** Left slice width */
  leftWidth: number;
  
  /** Top slice height */
  topHeight: number;
  
  /** Right slice width */
  rightWidth: number;
  
  /** Bottom slice height */
  bottomHeight: number;
  
  /** Width of sprite */
  width: number;
  
  /** Height of sprite */
  height: number;
  
  /** Tint color */
  tint: ColorSource;
  
  /** Blend mode */
  blendMode: BLEND_MODES;
}

/**
 * High-performance container for particles
 */
class ParticleContainer extends Container {
  constructor(maxSize?: number, properties?: ParticleContainerProperties, batchSize?: number, autoResize?: boolean);
  
  /** Maximum number of particles */
  maxSize: number;
  
  /** Particle properties */
  properties: ParticleContainerProperties;
  
  /** Batch size for rendering */
  batchSize: number;
  
  /** Auto resize when full */
  autoResize: boolean;
  
  /** Enable sorting by z-index */
  sortableChildren: boolean;
  
  /** Blend mode */
  blendMode: BLEND_MODES;
  
  /** Tint color */
  tint: ColorSource;
}

interface ParticleContainerProperties {
  /** Enable scale */
  scale?: boolean;
  
  /** Enable position */
  position?: boolean;
  
  /** Enable rotation */
  rotation?: boolean;
  
  /** Enable UV coordinates */
  uvs?: boolean;
  
  /** Enable alpha */
  alpha?: boolean;
}

/**
 * Mesh for rendering custom geometry with shaders
 */
class Mesh<GEOMETRY extends Geometry = MeshGeometry, SHADER extends Shader = TextureShader> extends ViewContainer {
  constructor(options: MeshOptions<GEOMETRY, SHADER>);
  
  /** The mesh geometry containing vertices, indices, UVs */
  geometry: GEOMETRY;
  
  /** The shader program used to render the mesh */
  shader: SHADER | null;
  
  /** The texture applied to the mesh */
  texture: Texture;
  
  /** WebGL/WebGPU rendering state */
  state: State;
  
  /** Whether the mesh can be batched (readonly) */
  readonly batched: boolean;
  
  /** Whether to round positions to pixels */
  roundPixels: boolean;
  
  /**
   * Check if point is within mesh triangles
   * @param point - Point to test
   * @returns True if point is inside mesh
   */
  containsPoint(point: PointData): boolean;
}

interface MeshOptions<GEOMETRY extends Geometry = MeshGeometry, SHADER extends Shader = TextureShader> {
  /** Includes vertex positions, face indices, colors, UVs, and custom attributes */
  geometry: GEOMETRY;
  
  /** Represents the vertex and fragment shaders that processes the geometry */
  shader?: SHADER | null;
  
  /** The state of WebGL required to render the mesh */
  state?: State;
  
  /** The texture that the Mesh uses. Null for non-MeshMaterial shaders */
  texture?: Texture;
  
  /** Whether or not to round the x/y position */
  roundPixels?: boolean;
}

class MeshGeometry extends Geometry {
  constructor(options: MeshGeometryOptions);
  
  /** Vertex positions (x,y pairs) */
  positions: Float32Array;
  
  /** Texture coordinates (u,v pairs) */
  uvs: Float32Array;
  
  /** Triangle indices */
  indices: Uint32Array;
  
  /** Batching mode */
  batchMode: BatchMode;
}

interface MeshGeometryOptions {
  /** The positions of the mesh */
  positions?: Float32Array;
  
  /** The UVs of the mesh. If not provided, they will be filled with 0 and match the size of the positions */
  uvs?: Float32Array;
  
  /** The indices of the mesh */
  indices?: Uint32Array;
  
  /** The topology of the mesh */
  topology?: Topology;
  
  /** Whether to shrink the buffers to fit the data */
  shrinkBuffersToFit?: boolean;
}

import { Container, Sprite, AnimatedSprite, TilingSprite, NineSliceSprite, ParticleContainer, Mesh, MeshGeometry, Assets } from 'pixi.js';

// Basic container hierarchy
const scene = new Container();
const character = new Container();
const background = new Container();

scene.addChild(background, character);

// Sprite creation
const texture = await Assets.load('character.png');
const sprite = new Sprite(texture);
sprite.anchor.set(0.5);
sprite.x = 100;
sprite.y = 100;
character.addChild(sprite);

// Animated sprite
const textures = [
  await Assets.load('walk1.png'),
  await Assets.load('walk2.png'),
  await Assets.load('walk3.png')
];
const animatedSprite = new AnimatedSprite(textures);
animatedSprite.animationSpeed = 0.167; // 10 FPS at 60 FPS
animatedSprite.play();

// Tiling background
const bgTexture = await Assets.load('tile.png');
const tilingSprite = new TilingSprite(bgTexture, 800, 600);
tilingSprite.tilePosition.x = -50;
background.addChild(tilingSprite);

// Particle system
const particleContainer = new ParticleContainer(1000, {
  scale: true,
  position: true,
  rotation: true,
  alpha: true
});

for (let i = 0; i < 100; i++) {
  const particle = new Sprite(texture);
  particle.x = Math.random() * 800;
  particle.y = Math.random() * 600;
  particle.scale.set(0.1 + Math.random() * 0.2);
  particleContainer.addChild(particle);
}

// Custom mesh geometry
const vertices = new Float32Array([
  // x, y
  -100, -100,  // top-left
   100, -100,  // top-right
   100,  100,  // bottom-right
  -100,  100   // bottom-left
]);

const uvs = new Float32Array([
  // u, v
  0, 0,  // top-left
  1, 0,  // top-right
  1, 1,  // bottom-right
  0, 1   // bottom-left
]);

const indices = new Uint32Array([
  0, 1, 2,  // first triangle
  0, 2, 3   // second triangle
]);

const geometry = new MeshGeometry({
  positions: vertices,
  uvs: uvs,
  indices: indices
});

const meshTexture = await Assets.load('mesh-texture.png');
const mesh = new Mesh({
  geometry: geometry,
  texture: meshTexture
});
scene.addChild(mesh);