Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Renderer mixin not applied properly #87

Open
Ganitzsh opened this issue Sep 9, 2022 · 0 comments
Open

Renderer mixin not applied properly #87

Ganitzsh opened this issue Sep 9, 2022 · 0 comments

Comments

@Ganitzsh
Copy link

Ganitzsh commented Sep 9, 2022

Hello,

I am trying to use PIXI Layers but I get the same error as in #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

@Ganitzsh Ganitzsh changed the title D Display mixin not applied Sep 9, 2022
@Ganitzsh Ganitzsh changed the title Display mixin not applied Renderer mixin not applied Sep 9, 2022
@Ganitzsh Ganitzsh changed the title Renderer mixin not applied Renderer mixin not applied properly Sep 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant