Sprite disappears after event call

[synetic707]

Hello,

I'm new in programming with Javascript and Pixi.js, so please go easy on me.

I've uploaded my app on my server:

 

http://sikkasi.com/test/index.html

 

Each button has a mouseover and mouseout event to create a mouseover effect.

However, after a few event calls, the button disappears all of the sudden, but I can still trigger mouseover and mouseout just fine. What am I doing wrong?

 

Sourcecode:

var stage = new PIXI.Stage(0xffffff, true);var renderer = new PIXI.WebGLRenderer(800, 500); document.body.appendChild(renderer.view); requestAnimFrame(update);start(); function start(){    var texture2 = PIXI.Texture.fromImage("img/Bg.png");    var bg2 = new PIXI.Sprite(texture2);      var title = "Taiko JS";    var style = {font: "50px Arial", fill: "white"};    var taikojs = new PIXI.Text(title, style);    taikojs.position.x = 300;    taikojs.position.y = 80;     var b_start_tex = PIXI.Texture.fromImage("img/start.png");    var b_config_tex = PIXI.Texture.fromImage("img/config.png");    var b_start_mo_tex = PIXI.Texture.fromImage("img/start_mo.png");    var b_config_mo_tex = PIXI.Texture.fromImage("img/config_mo.png");     var b_start = new PIXI.Sprite(b_start_tex);    var b_config = new PIXI.Sprite(b_config_tex);     b_start.position.y = 200;    b_start.position.x = -300;    b_start.setInteractive(true);      b_config.position.y = 270;    b_config.position.x = 1000;    b_config.setInteractive(true);     b_config.mouseover = function(data) {         b_config.setTexture(b_config_mo_tex);    }     b_config.mouseout = function(data){         b_config.setTexture(b_config_tex);    }     b_config.click = function(){        alert("Not yet implemented)");    }     b_start.mouseover = function(data){        b_start.setTexture(b_start_mo_tex);    }     b_start.mouseout = function(data){        b_start.setTexture(b_start_tex);     }     b_start.click = function(){        alert("Click");        stage.removeChild(b_start);        stage.removeChild(taikojs);     }     stage.addChild(bg2);    stage.addChild(taikojs);     stage.addChild(b_config);    stage.addChild(b_start);     var tween_start = new TWEEN.Tween(b_start.position).delay(500).to({x: 280}, 500).easing(TWEEN.Easing.Cubic.Out).start();    var tween_config = new TWEEN.Tween(b_config.position).delay(500).to({x: 280}, 500).easing(TWEEN.Easing.Cubic.Out).start(); }  function update(){    requestAnimFrame(update);    TWEEN.update();    this.renderer.render(stage);}

Thank you very much

[bubamara]

you are using outdated version of Pixi. I would upgrade to the latest Pixi version if I were you (v3) : https://github.com/GoodBoyDigital/pixi.js/

Few things have changed since then, like there's no need of using PIXI.Stage now (just use any container as an stage), different way of handling events :

 

http://pixijs.github.io/examples/index.html?s=basics&f=click.js&title=Click