Creating a Pixi Application

Pixi Application

To start rendering in PixiJS, you’ll need to create a PixiApplication component that will instantiate the PIXI.Application instance and provide it to all child components via context. It acts as the root of your Pixi Solid application and provider for all the pixi-solid hooks. It accepts all PixiJS application options as props. There should only be one of these per project.

Tip

The PixiApplication component doesn’t actually add any elements to the DOM, we need to use the PixiCanvas for that. This means that if any HTML components need access to any of the pixi-solid hooks or application state they can be rendered as children of PixiApplication but need to be outside of the PixiCanvas component.

PixiCanvas

The PixiCanvas component needs to be a child of PixiApplication. It’s responsible for placing the the HTML <canvas> element that PixiJS uses into the HTML page.

Some sensible defaults have been applied here to make responsive behaviour of the canvas a little easier to work with.

The canvas element is wrapped in a div that it will automatically resize to fit inside of. This means that we can use any CSS styles we like to reposition or resize the wrapping div and our PixiJS canvas will respond automatically. You can apply standard HTML attributes and styling to the canvas wrapper div via component props.

The canvas is set to listen for resizing of the wrapper div so it can adjust auotmatically if the page layout changes even if the window size didn’t change.

PIXI.Container (the app.stage instance) for all your PixiJS display objects. All your visual pixi-solid components, such as Sprite, Graphics, or other Containers, should be placed as children of PixiCanvas. It handles the mounting and unmounting of your Pixi display object tree.

import { PixiApplication, PixiCanvas } from "pixi-solid";

/**
 * The DemoApp component sets up the Pixi Application
 * and can be mounted anywhere in your SolidJS app.
 * It will render a Canvas element with a Pixi Stage inside it.
 */
export const DemoApp = () => {
  return (
    <PixiApplication>
      <PixiCanvas>{/* Your Pixi Solid components go here */}</PixiCanvas>
    </PixiApplication>
  );
};

Caution

The pixi-solid library only supports client side rendering. So you may need to use the lazy function to dynamically import only on the client or use the clientOnly function if using Solid Start.