usePixiScreen

The usePixiScreen hook returns a reactive object containing the current dimensions of the Pixi application's screen. Its properties automatically update when the renderer's screen size changes, allowing you to build responsive Pixi.js applications that react to resizing events.

It must be called within a component or another hook that is a descendant of either <PixiApplicationProvider /> or <PixiCanvas />.

Reactive properties

The returned object provides the following properties, all of which update automatically on resize:

Property	Type	Description
width	number	Screen width in pixels
height	number	Screen height in pixels
x	number	Screen x-offset
y	number	Screen y-offset
left	number	Alias for x
right	number	x + width
top	number	Alias for y
bottom	number	y + height

Usage

import type * as Pixi from "pixi.js";
import { createSignal } from "solid-js";
import { PixiCanvas, Sprite, usePixiScreen } from "pixi-solid";

const ResponsiveSprite = (props: { texture: Pixi.Texture }) => {
  const screen = usePixiScreen();

  return (
    <Sprite
      texture={props.texture}
      anchor={0.5}
      x={screen.width / 2}
      y={screen.height / 2}
      scale={
        Math.min(screen.width / props.texture.width, screen.height / props.texture.height) * 0.5
      }
    />
  );
};

const App = () => (
  <PixiCanvas>
    <ResponsiveSprite texture={Pixi.Texture.WHITE} />
  </PixiCanvas>
);

When to use it

• When you need to get the current dimensions of the Pixi.js renderer screen.
• When you want to create components that automatically adapt to changes in the Pixi application's size.
• For positioning elements relative to the screen dimensions.
• As a reactive source for calculations based on the application's viewport.