Importing pixi-heaven

[nazywamsiepawel]

Hey everyone,

Hopefully this is a simple one. I use Next.js and render my PIXI app as a dynamic component.

I'm trying to use pixi-heaven to improve the peformance of masking a video. I installed pixi-heaven via npm (tried copy pasting js as well):

"pixi-heaven": "^0.2.3",
"pixi-spine": "^3.0.4",
"pixi.js": "^6.0.1",

I import it as follows:

import * as PIXI from "pixi.js";
(window as any).PIXI = PIXI;
import "pixi-spine";

And whichever way I try to go (npm and importing the js file) I end up with PIXI is not defined:

ReferenceError: PIXI is not defined
    at eval (pixi-heaven.js?d473:67)
    at eval (pixi-heaven.js?d473:68)
    at Object../node_modules/pixi-heaven/dist/pixi-heaven.js (1.js:11749)
    at __webpack_require__ (webpack.js?ts=1624919291402:873)
    at fn (webpack.js?ts=1624919291402:151)
    at Module.eval (playerBody.ts?7752:1)
    at eval (playerBody.ts?7752:270)
    at Module../components/gamev2/bodies/playerBody.ts (1.js:71)
    at __webpack_require__ (webpack.js?ts=1624919291402:873)
    at fn (webpack.js?ts=1624919291402:151)
    at Module.eval (PlayerController.ts:7)
    at eval (PlayerController.ts?f800:398)
    at Module../components/gamev2/controllers/PlayerController.ts (1.js:143)
    at __webpack_require__ (webpack.js?ts=1624919291402:873)
    at fn (webpack.js?ts=1624919291402:151)
    at Module.eval (game.ts:8)
    at eval (game.ts?5f5f:291)
    at Module../components/gamev2/game.ts (1.js:191)
    at __webpack_require__ (webpack.js?ts=1624919291402:873)
    at fn (webpack.js?ts=1624919291402:151)
    at Module.eval (newGame.tsx:15)
    at eval (newGame.tsx?72c9:427)
    at Module../components/gamev2/newGame.tsx (1.js:203)
    at __webpack_require__ (webpack.js?ts=1624919291402:873)
    at fn (webpack.js?ts=1624919291402:151)

I also tried a voodoo solution of trying to import the ts files straight into the codebase but unfortunately with a plethora of errors.

Could anyone please advise me on how to bring pixi-heaven into the project? I'm hoping I'm doing something silly or basic wrong.

[ivanpopelyshev]

Our old system really dont like es6 modules.

Either wait when I move it to v6, either..

lets try that thing:

import * as PIXI from "pixi.js";
import * as spine from "pixi-spine";
(window as any).PIXI = PIXI;
(PIXI as any).spine = spine;
require('pixi-heaven'

[ivanpopelyshev]

swap pixi-spine to @pixi-spine/all-3.8, also might help

[nazywamsiepawel]

Thank you Ivan!

The below has indeed worked:

import * as PIXI from "pixi.js";
import * as spine from "pixi-spine";
(window as any).PIXI = PIXI;
require('pixi-heaven');

I didn't need to import PIXI spine. With preliminary testing it seems that the sprite masking that you have implemented in pixi-heaven has improved the performance a lot.

One remaining question I have (I'm piggybacking on this thread but could start a new github issue too if you prefer) is regarding the snippet below.

sprite = new PIXI.heaven.Sprite();
sprite.maskSprite = sprite2; //set it
sprite.pluginName = 'batchMasked'; //enable special plugin rendering
sprite2.renderable = false; //turn off rendering

What is the renderable property doing in more detail? Would setting it to true affect the performance? Asking because it seems that in my case (masking a 15FPS video texture) nothing was displayed until I set it to true.

[ivanpopelyshev]

Yo! pixi-heaven is updated to v6, can you please try it without hacks? The only migration advice is to swap Sprite to SpriteH, MeshH, BitmapTextH