Overview

Available components

Most of the PixiJS display components are available as Solid components in Pixi Solid.

All components are named the same as their PixiJS counterparts and should be imported individually.

This pattern also allows treeshaking when using a bundler that supports it as each component only imports the necessary parts of PixiJS that it needs.

All of the components take the same props as their PixiJS counterparts, with the addition of event handlers.

The best reference for the purpose, capabilities and options for the pixi-solid components is the PixiJS docs themselves.

These include:

import {
  AnimatedSprite,
  BitmapText,
  Container,
  Graphics,
  HTMLText,
  MeshPlane,
  MeshRope,
  NineSliceSprite,
  ParticleContainer,
  PerspectiveMesh,
  RenderContainer,
  RenderLayer,
  Sprite,
  Text,
  TilingSprite,
} from "pixi-solid";

This can cause some name clashes if you are also importing classes or types from pixi.js directly.

It’s recommended to alias the imports from pixi.js in these cases, for example:

import { Sprite as PixiSprite } from "pixi.js";
import { Sprite } from "pixi-solid";
//...

Or import all Pixi types under a namespace because these will not be bundled into the final build anyway:

import * as Pixi from "pixi.js";
import { Sprite } from "pixi-solid";

//...

let spriteRef: Pixi.Sprite | undefined;
//...

Accessing the instance with Refs

Just like when using SolidJS with the DOM we can access the rendered object instance with a ref. In our case this is useful for calling methods on the PixiJS objects or interacting directly with PixiJS in an imperative way.

We can use a variable or a callback function to access refs.

Ref as a variable.

import type * as Pixi from "pixi.js";
import { Container, onTick } from "pixi-solid";

export const ExampleComponent = () => {
  // Get a ref to the Container
  let containerRef: Pixi.Container | undefined;

  onTick((ticker) => {
    if (!containerRef) return;
    containerRef.rotation += ticker.deltaTime;
  });

  return <Container ref={containerRef}>{/* ...any children */}</Container>;
};

Ref as a callback.

import type * as Pixi from "pixi.js";
import { Container, onTick } from "pixi-solid";

export const ExampleComponent = () => {
  return (
    <Container
      ref={(instance) => {
        onTick((ticker) => {
          instance.rotation += ticker.deltaTime;
        });
      }}
    >
      {/* ...children */}
    </Container>
  );
};

Omissions

There’s a few deliberate omossions of PixiJS classes from the components list because wrapping them in a SolidJS component doesn’t add much value. These include:

• Particle Particles inside a ParticleContainer are intended for when you want to the maximum performance for a particle system so a dedicated component here is in opposition to that. It’s recommended to create and manage the particle instances imperatively with a <ParticleContainer /> as a parent to try and go for maximum efficency.

  The MeshGeometry, NineSliceGeometry, PerspectivePlaneGeometry, PlaneGeometry and RopeGeometry classes are pretty low level and generally used when creating custom meshes. This kind of work is best created once imperatively with PixiJS directly and then wrapped in a custom pixi-solid component.

• Culler It may be worth adding in the future. Have’t experimented enough with this one to know if a SolidJS component would be useful just yet.