Cannot get pixi-heven to work with pixi-spine and webpack

[sntx]

Hi everyone!

I'm having a really hard time getting pixi-heaven to work with my app. I followed instructions for pixi-spine and added the following to my webpack config:

{
  actions.setWebpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        PIXI: 'pixi.js',
      }),
    ],
  })
}

And these are my imports on the file which uses pixi-heaven and pixi-spine:

import * as PIXI from 'pixi.js'
window.PIXI = PIXI
import 'pixi-spine'
import 'pixi-heaven'

When I do the following:

const sprite = new PIXI.Sprite(PIXI.Texture.WHITE)
sprite.convertToHeaven()
sprite.scale = { x: 15, y: 15 }

I get the following error:

Uncaught TypeError: Cannot read property '0' of null
    at BatchPlugin.packInterleavedGeometry (pixi-heaven.js:916)
    at BatchPlugin../node_modules/@pixi/core/lib/core.es.js.AbstractBatchRenderer.buildDrawCalls (core.es.js:10524)
    at BatchPlugin../node_modules/@pixi/core/lib/core.es.js.AbstractBatchRenderer.buildTexturesAndDrawCalls (core.es.js:10486)
    at BatchPlugin../node_modules/@pixi/core/lib/core.es.js.AbstractBatchRenderer.flush (core.es.js:10600)
    at BatchPlugin../node_modules/@pixi/core/lib/core.es.js.AbstractBatchRenderer.stop (core.es.js:10623)
    at BatchSystem../node_modules/@pixi/core/lib/core.es.js.BatchSystem.setObjectRenderer (core.es.js:4814)
    at SpineSprite../node_modules/@pixi/sprite/lib/sprite.es.js.Sprite._render (sprite.es.js:347)
    at SpineSprite../node_modules/@pixi/display/lib/display.es.js.Container.render (display.es.js:1534)
    at Container../node_modules/@pixi/display/lib/display.es.js.Container.render (display.es.js:1537)
    at Spine../node_modules/@pixi/display/lib/display.es.js.Container.render (display.es.js:1537)
    at Container../node_modules/@pixi/display/lib/display.es.js.Container.render (display.es.js:1537)
    at Viewport../node_modules/@pixi/display/lib/display.es.js.Container.render (display.es.js:1537)
    at Container../node_modules/@pixi/display/lib/display.es.js.Container.render (display.es.js:1537)
    at Renderer../node_modules/@pixi/core/lib/core.es.js.Renderer.render (core.es.js:9863)
    at Application../node_modules/@pixi/app/lib/app.es.js.Application.render (app.es.js:95)
    at TickerListener../node_modules/@pixi/ticker/lib/ticker.es.js.TickerListener.emit (ticker.es.js:129)
    at Ticker../node_modules/@pixi/ticker/lib/ticker.es.js.Ticker.update (ticker.es.js:584)
    at Ticker._tick (ticker.es.js:334)

If I try the following instead, sprite doesn't render the Sprite and I get no errors.

var sprite = new PIXI.heaven.Sprite(PIXI.Texture.WHITE)
sprite.scale = { x: 15, y: 15 }

To discard the option I'm doing something else incorrectly, I'm trying the same without pixi-heaven and it works fine.

I'm using the latest versions of all the mentioned modules. Any help would be greatly appreciated!

Thanks!
Santiago

[ivanpopelyshev]

Which version of pixi is it?

It works fine with latest dev, with 5.3.3, you can test different versions here: https://pixijs.io/examples/?v=dev#/plugin-heaven/invert.js

[ivanpopelyshev]

Oh wait, it made that:

const bunny = new PIXI.Sprite(PIXI.Texture.from('examples/assets/bunny.png'));
bunny.convertToHeaven();

and it doesnt work. Somethign is broken in convertion method. I'll look at it now

[sntx]

@ivanpopelyshev Thanks a lot! let me know if I can help out with anything!

These are my versions of all my pixi dependencies:

"pixi-heaven": "^0.2.0",
"pixi-spine": "^2.1.9",
"pixi-viewport": "^4.13.2",
"pixi.js": "^5.3.3",

[ivanpopelyshev]

07d9179

That's what i had to change.

1. call _onTextureUpdate after conversion because _uvs are updated in it and not in calculateVertices in heaven sprite.
2. Corner-case with texture that is updated after conversion,

0.2.1 at npm , or dist/pixi-heaven.js here, take it.

[sntx]

It's all working now! Thank you very much!

[ivanpopelyshev]

Thanks for the report!