PixiJS с React

В этой статье мы увидим, как интегрировать PixiJS с ReactJS. Здесь мы не будем говорить о производительности и сопровождении кода.

Я предполагаю, что вы знакомы с основами ReactJS (компонент, свойства, состояние) и PixiJS (спрайт, лист спрайтов, сцена).

Добавление зависимости PixiJS

мы должны добавить «pixi.js»: «4.5.1» в ваш package.json, пример списка зависимостей приведен ниже.

"dependencies": {
  ...
  "pixi.js": "4.5.1",
  ...
},

Модуль Ref в ReactJS будет использоваться для интеграции PixiJS. Ref предоставляет способ прямого доступа к объекту DOM, который создается в методе рендеринга.

Посмотрим, как будет работать ref

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.pixi_cnt = null;
  }
updatePixiCnt= (element) => {
    // the element is the DOM object that we will use as container to add pixi stage(canvas)
    this.pixi_cnt = element;
 };
  
render() {
    return <div ref={this.updatePixiCnt} />;
  }
}

Давайте освежим основы PixiJS, которые мы будем использовать в этой интеграции. Мы будем использовать Application, Stage и Sprite PixiJS. Приложение решает, использовать ли рендеринг с использованием холста или WebGL, и определяет размер контейнера, в котором будет отображаться интерактивный мультимедийный объект. Объект сцены является корневым контейнером для всех видимых объектов. Все, что мы хотим отобразить, будет помещено внутри объекта сцены. Объект, которым мы можем управлять с помощью кода, - это спрайт. Спрайт - это объект, который мы будем использовать для реализации логики.

Хватит теории, теперь пришло время кода.

import * as PIXI from "pixi.js";
class MyComponent extends React.Component {
  constructor(props) {
    super(props); 
    this.pixi_cnt = null;
    this.app = new PIXI.Application({width: 600, height: 600, transparent:false})
  }
updatePixiCnt= (element) => {
    // the element is the DOM object that we will use as container to add pixi stage(canvas)
    this.pixi_cnt = element;
    //now we are adding the application to the DOM element which we got from the Ref.
    if(this.pixi_cnt && this.pixi_cnt.children.length<=0) {
       this.pixi_cnt.appendChild(this.state.app.view);
       //The setup function is a custom function that we created to add the sprites. We will this below
       this.setup();
    }
 };
  
render() {
    return <div ref={this.updatePixiCnt} />;
  }
}

Теперь давайте добавим код установки. Это место будет использоваться для добавления логики инициализации pixiJS, такой как загрузка спрайтов и добавление слушателей. А пока давайте сосредоточимся на чистом базовом и добавим спрайт, чтобы показать изображение.

import myImage from '../../images/avatar.png';
....
....
setup = () => {
   PIXI.loader
        .add("avatar",myImage)
        .load(this.initialize);
};
initialize = () => {
    //We will create a sprite and then add it to stage and (0,0) position
    this.avatar = new PIXI.Sprite(PIXI.loader.resources["avatar"].texture);
    this.state.app.stage.addChild(this.avatar);

};

Таким образом, мы достигли полной интеграции PixiJS с ReactJS, я постарался сделать ее как можно короче.

Вы можете изучить, как структурировать свой код. Это просто простое отображение изображений, я постараюсь написать еще несколько сообщений, чтобы сделать небольшую демонстрацию анимации с использованием PixiJS, ReactJS для внешнего интерфейса, Nodejs с ExpressJS и SocketIO в качестве внутреннего интерфейса.

Пожалуйста, прокомментируйте в случае сомнений.

PixiJS с React

PixiJS с React

Вопросы по теме