Stage help

[SomeCreator]

I'm wondering how to create stages and how to change between them. It seems like there's only 1 stage per application and you just add and remove children from them. I saw the removeChildren() method and I tried invoking it. It does remove the container but it also generates a heap of WebGL errors with INVALID_OPERATION.

 

So I'm wondering how I should be approaching this. 

[ivan.popelyshev]

> It does remove the container but it also generates a heap of WebGL errors with INVALID_OPERATION.

It shouldn't. Give me the fiddle and I'll tell you whats wrong.

>  It seems like there's only 1 stage per application

PIXI is not a black box. Application is just a simple facade for other classes: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js You can create tickers/renderer/stage separately and do whatever you want.

[SomeCreator]

<template>
    <div ref='game' id='gameScreen'></div>
</template>


<script>
  /* eslint-disable no-unused-vars */
  import * as PIXI from 'pixi.js'
  import image from '@/assets/game/background/environment_forest_evening.png'
  import button from '@/assets/game/buttons/blank-light-blue-button-md.png'
  /* eslint-enable no-unused-vars */

  export default{
    name: 'game',
    data() {
      return {

      }
    },
    props: {
      width: Number,
      height: Number
    },
    mounted: function () {
      if (this.game == null) {
        var type = "WebGL"
        var settings = {
          antialias: true,
          backgroundColor : 0x1099bb
        }
        this.game = new PIXI.Application(800, 600, settings);
        if(!PIXI.utils.isWebGLSupported()){
          type = "canvas"
        }

        this.$refs.game.append(this.game.view)



        var graphics = new PIXI.Graphics();
        // draw a rounded rectangle
        graphics.lineStyle(2, 0xFF00FF, 1);
        graphics.beginFill(0xFF00BB, 0.25);
        graphics.drawRoundedRect(0, 0, 300, 100, 15);
        graphics.endFill();
        graphics.interactive = true;
        graphics.hitArea = graphics.getBounds();
        graphics.click = () => console.log("hi")
        graphics.anchor = new PIXI.Point(0.5, 0.5)
        graphics.x = this.game.view.width / 2
        console.log()

        var style = new PIXI.TextStyle({
          fontFamily: 'Arial',
          fontSize: 36,
          fontStyle: 'italic',
          fontWeight: 'bold',
          fill: ['#ffffff', '#00ff99'], // gradient
          stroke: '#4a1850',
          strokeThickness: 5,
          dropShadow: true,
          dropShadowColor: '#000000',
          dropShadowBlur: 4,
          dropShadowAngle: Math.PI / 6,
          dropShadowDistance: 6,
          wordWrap: true,
          wordWrapWidth: 440
        });

        var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
        richText.anchor = new PIXI.Point(0.5, 0.5)
        richText.x = 0
        richText.y = 0;

        console.log(graphics.position.x)

        // this.game.stage.addChild(richText);
        graphics.addChild(richText);
        this.game.stage.addChild(graphics);
      }
    },
    methods: {
    },
    destroyed () {
      // this.game.destroy()
    },
    updated () {

    }
  }
</script>

<style>
  #gameScreen {
    margin: 0 auto;
  }

  #gameScreen canvas {
    display: block;
    margin: 0 auto;
  }
</style>

Here's the code snippet. It's written along with Vue.js so I hope it's not confusing. I've removed the line that returned a whole heap of errors `this.game.stage.removeChildren()`. Just wondering what is the best approach. Because if I do an assignment to `this.game.stage` it also gives some warnings/errors, i.e. `this.game.stage = new PIXI.Stage()`