pixijs / layers

Separate the z-hierarchy of your scene tree from its canonical structure.
https://pixijs.io/layers/docs/
MIT License
223 stars 57 forks source link

Renderer mixin not applied properly #87

Open Ganitzsh opened 2 years ago

Ganitzsh commented 2 years ago

Hello,

I am trying to use PIXI Layers but I get the same error as in https://github.com/pixijs/layers/issues/50:

Uncaught TypeError: renderer.incDisplayOrder is not a function
    prerender pixi-layers.es.js:579
    render pixi-layers.es.js:512
    node_modules bundle.js:14764
    node_modules bundle.js:3410
    node_modules bundle.js:39483
    node_modules bundle.js:39846
    node_modules bundle.js:39614
    node_modules bundle.js:39633
    node_modules bundle.js:39769
    node_modules bundle.js:40058
    node_modules bundle.js:40078
    node_modules bundle.js:3392
    Application app.js:2825
    main index.ts:5
    ts index.ts:16

Here is a code reproducing the error:

import * as PIXI from 'pixi.js';
import * as PIXILayers from '@pixi/layers';

const main = (): void => {
  const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    antialias: true,
  });

  document.body.appendChild(app.view);

  app.stage = new PIXILayers.Stage();
};

main();

I'm using pixi version 6.5.3 and @pixi/layers version 1.0.11

Not sure what I'm doing wrong here but it seems as from what I understand in the code that the mixins are not properly applied.

I'm using webpack to bundle the app with the following config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.ts'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: '$',
    libraryTarget: 'umd',
    globalObject: 'this',
  },
  devtool: 'inline-source-map',
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(ts)$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  mode: 'development',
  devServer: {
    port: 3000,
    open: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      hash: true, // Cache busting
      filename: '../dist/index.html',
    }),
  ],
};

I don't think the issue comes from that, as I was able to use pixi properly before using @pixi/layers

EDIT: I managed to fix the problem by adding the following line at the top of the script:

PIXILayers.applyRendererMixin(PIXI.Renderer);

I suspect the issue comes from my build with webpack but I have no idea why