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

0.1.5 • Public • Published

pixi-reactive-particles

Integrate support for Particle Effects into the pixi-reactive library. You can find more details on the online documentation

NPM JavaScript Style Guide

Install

npm install pixi-reactive-particles

or

yarn add pixi-reactive-particles

Usage

import React, { useReducer } from 'react';
import { PixiCanvas, PixiTilingSprite, PixiSprite } from 'pixi-reactive';
import { PixiParticles } from 'pixi-reactive-particles';
import ThrusterConfig from './thruster.json';

const textures = {
  galaxy: './static/assets/galaxy.png',
  stars: './static/assets/slow-stars.png',
  sheet: './static/assets/spritesheet.json'
};

export const PixiParticlesExample: React.FC = () => {
  const [galaxyPosition, updateGalaxyPosition] = useReducer((position) => position - 1, 0);

  return (
    <PixiCanvas height={300} textures={textures} onUpdate={updateGalaxyPosition}>
      <PixiTilingSprite texture={'galaxy'} tileX={galaxyPosition} />
      <PixiSprite texture={'spaceship'} x={100} alignY={0.5}>
        <PixiParticles textures={'particle fire'} config={ThrusterConfig} />
      </PixiSprite>
    </PixiCanvas>
  );
};

License

MIT © mcastiello

Readme

Keywords

none

Package Sidebar

Install

npm i pixi-reactive-particles

Weekly Downloads

1

Version

0.1.5

License

MIT

Unpacked Size

22 kB

Total Files

12

Last publish

Collaborators

  • mcastiello