North Pittsburgh Meatpackers
    Wondering what’s next for npm?Check out our public roadmap! »

    pixi-reactive
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.10 • Public • Published

    PIXIReactive Logo

    pixi-reactive

    The PixiReactive library is a quick way to use all the features provided by PIXI inside a React virtual DOM. The ultimate goal is to encapsulate all the PIXI elements inside React Function Components that can be easily added to your project. As a matter of fact, in most use cases, you may never need to instantiate a PIXI object yourself. You won't need to load a renderer or worry about the animation loop, and the page resize. You just need to add a PixiCanvas to your component and start coding your game or animation.

    You will also be able to mix HTML content with PIXI objects... I mean, you may never need it, but it's there...

    NPM JavaScript Style Guide

    Install

    This library uses both React and PIXI as peer dependencies, which basically means that they are required, but they are not automatically imported, so that you can use your own versions and you won't have duplicates among your node modules. So, depending on your favourite package manager, you will need to install all the 3 libraries as follows:

    npm install react pixi.js pixi-reactive

    or

    yarn add react pixi.js pixi-reactive

    Usage

    import React, { useReducer } from 'react';
    import { PixiCanvas, PixiTilingSprite, PixiSprite } from 'pixi-reactive';
    
    /**
     * List of textures. It supports image assets or JSON files created with TexturePacker
     */
    const textures = {
      galaxy: './static/assets/galaxy.png',
      stars: './static/assets/slow-stars.png',
      ship: './static/assets/spaceship.png'
    };
    
    type Space = {
      galaxyTileX: number;
      starsTileX: number;
      direction: boolean;
      shipY: number;
    };
    
    /**
     * Update all the properties that will affect the scene using a React reducer.
     * @param {Space} state
     * @returns {Space}
     */
    const updateScene = (state: Space): Space => {
      let newDirection = state.direction;
    
      if ((state.direction && state.shipY <= 60) || (!state.direction && state.shipY >= 240)) {
        newDirection = !state.direction;
      }
      return {
        galaxyTileX: state.galaxyTileX - 0.1,
        starsTileX: state.starsTileX - 0.5,
        direction: newDirection,
        shipY: newDirection ? state.shipY - 0.5 : state.shipY + 0.5
      };
    };
    
    const PixiCanvasExample: React.FC = () => {
      // Generate the scene state and the update function
      const [state, update] = useReducer(updateScene, {
        galaxyTileX: 0,
        starsTileX: 0,
        direction: false,
        shipY: 150
      });
    
      return (
        <PixiCanvas textures={textures} onUpdate={update}>
          <PixiTilingSprite texture={'galaxy'} tileX={state.galaxyTileX} />
          <PixiTilingSprite texture={'stars'} tileX={state.starsTileX} />
          <PixiSprite texture={'ship'} x={30} y={state.shipY} anchorY={0.5} />
        </PixiCanvas>
      );
    };

    For more detailed information, please refer to the Online Documentation.

    Coming Next

    The following are a few things I'm going to add in the next few releases (in order of priority).

    • PixiSpine - Another external plugin, this one is going to integrate support for the Spine Runtime.

    License

    MIT © mcastiello

    Install

    npm i pixi-reactive

    DownloadsWeekly Downloads

    25

    Version

    1.3.10

    License

    MIT

    Unpacked Size

    1 MB

    Total Files

    114

    Last publish

    Collaborators

    • avatar