Kill / visible / destroy in arcade physics... and re-attach physics

[jsantos]

Hi all!

 

I just read a ton of posts/google finds but still no answer to me.

 

My problem is this:

I have an image, with arcade physics on it. On my update I'm checking overlap, since I'm dragging the image. If it touches the right obstacle, it should disappear, if it's the wrong one, it should go back to the previous place (origin).

 

Everything works fine except the "disappearing act":

 

 - If I use:

this.image.visible = false;// reposition imagethis.image.x = this.image.originX;this.image.y = this.image.originY;

I keep hearing the sound fx of the correct answer, until I press the next button  (by the way, I know I can delay the sound or use some kind of trigger to avoid it playing over and over, I just would want it to allow the image to re-position itself)  but the next button sometimes but fails to address the following line of code:

this.image.visible = true;

And that makes it jump over one image from a set of images (when I press next I also increment by one the a value that I use to loop through an array). This behavior happens a lot of times... more than 6 in a set of 20!

 

If I use kill, everything works fine:

 - image will disappear;

 - sound will play only once;

 - next image will appear where it is supposed to appear;

 

HOWEVER...

the image now generated doesn't overlap. If I run the render function / debug, I can see that the green collision square is still in the same place where it successfully collided the 1st time.

 

I tried reset(ting), re-enabling, re-creating... best I could achieve was the green collision square going to the right place but not following the drag... :S

 

Destroy is imilar or worse even, in my case...

 

Any hints, tips, ideas?

 

Thanks for your time!

Cheers! 

Edited November 4, 2015 by jsantos

[Skeptron]

Sorry I have a question regarding your issue : when you tried using kill(), what do you do after that? What do you do with the killed sprite? Do you want to reuse it? Do you use revive() for that purpose?

 

Is there any chance you could produce a Sandbox or JSFiddle to illustrate your example?

[jsantos]

Hi Skeptron!

 

At the moment I'm a bit confused/overwhelmed because I tried so many things...

 

I'm using revive() at the moment, but the sprite bounding box (on debug) just sticks to the target area and whenever a new image pop's up, if it is of the same type, since it's bounding box is on top of the other, happily collides :S

 

Here's my code:

var goal = false;window.onload = function () {    var game = new Phaser.Game(1024, 796);    var playGame = function (game) {}    playGame.prototype = {        preload: function () {            // background and window size            this.game.stage.backgroundColor = "#e5e59b"; // setting a background color            this.game.scale.pageAlignHorizontally = true;            this.game.scale.pageAlignVertically = true;            // using RESIZE scale mode            this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.game.scale.setScreenSize(true);            //load GUI elements            this.game.load.image('next', '../../assets/imagesOther/next.png');            this.game.load.image('soundBtn', '../../assets/imagesOther/playSound2.png');            this.game.load.image('home', '../../assets/imagesOther/home.png');            this.game.load.image('marcoAzul', '../../assets/imagesOther/correioAzul.png');            this.game.load.image('marcoVermelho', '../../assets/imagesOther/correioVermelho.png');            this.game.load.image('xis', '../../assets/images/xis.png');            // load all images at once to be called by the activity            for (var y = 0; y < shuffledArray.length; y++) {                this.game.load.image('imgTrg' + y, '../../assets/images/' + shuffledArray[y] + '.png');                this.game.load.audio('soundTrg' + y, '../../assets/sounds/' + shuffledArray[y] + '.wav');            }            this.game.load.audio('processo', '../../assets/sounds/letters/' + processo.nomeLetra + '.wav');            this.game.load.audio('facilitador', '../../assets/sounds/letters/' + sonsFacil.nomeLetra + '.wav');            this.game.load.audio('positive', '../../assets/sounds/happy.wav');            this.game.load.audio('negative', '../../assets/sounds/sad.wav');            this.number = 0;        },        create: function () {            //  Enable the Arcade Physics system            this.game.physics.startSystem(Phaser.Physics.ARCADE);            // text style            this.styleLabel = {                font: "48px Verdana",                fill: "#fff",                boundsAlignH: "center",                boundsAlignV: "middle"            };            this.style = {                font: "64px Verdana",                fill: "#fff",                boundsAlignH: "center",                boundsAlignV: "middle"            };            // GUI            this.home = this.game.add.button(50, 50, 'home', this.home, this);            this.nextImg = this.game.add.button(this.game.world.centerX + 330, this.game.world.centerY + 300, 'next', this.next, this);            this.nextImg.anchor.setTo(0.5);            this.nextImg.scale.setTo(0.15);            this.clickSound = this.game.add.button(this.game.world.centerX + 330, this.game.world.centerY + 140, 'soundBtn', this.soundClick, this);            this.clickSound.anchor.setTo(0.5);            this.clickSound.scale.setTo(0.15);            this.clickSound1 = this.game.add.button(this.game.world.centerX - 170, this.game.world.centerY - 120, 'soundBtn', this.soundClick1, this);            this.clickSound1.anchor.setTo(0.5);            this.clickSound1.scale.setTo(0.15);            this.soundImg1 = this.game.add.audio('processo');            this.clickSound2 = this.game.add.button(this.game.world.centerX - 170, this.game.world.centerY + 240, 'soundBtn', this.soundClick2, this);            this.clickSound2.anchor.setTo(0.5);            this.clickSound2.scale.setTo(0.15);            this.soundImg2 = this.game.add.audio('facilitador');            // Post            this.marcoAzul = this.game.add.sprite(250, game.height * .22, 'marcoAzul');            this.marcoAzul.anchor.setTo(0.5);            this.marcoAzul.scale.setTo(.3);            this.marcoAzul.customParams = {                id: 1            };            this.game.physics.enable(this.marcoAzul, Phaser.Physics.ARCADE);            this.marcoAzul.body.setSize(300, 250, 0, -70);            this.marcoAzul.body.immovable = true;            this.marcoAzulLetter = this.game.add.text(235, game.height * .3, processo.letra, this.styleLabel);            this.marcoVermelho = this.game.add.sprite(250, game.height / 1.5, 'marcoVermelho');            this.marcoVermelho.anchor.setTo(0.5);            this.marcoVermelho.scale.setTo(.3);            this.marcoVermelho.customParams = {                id: 0            };            this.game.physics.enable(this.marcoVermelho, Phaser.Physics.ARCADE);            this.marcoVermelho.body.setSize(300, 250, 0, -70);            this.marcoVermelho.body.immovable = true;            this.marcoVermelhoLetter = this.game.add.text(235, game.height / 1.33, sonsFacil.letra, this.styleLabel);            this.image = this.game.add.sprite(game.width / 1.2, game.height / 2.5, 'imgTrg' + this.number);            this.image.anchor.setTo(0.5);            this.image.scale.setTo(.3);            this.image.originX = this.image.x;            this.image.originY = this.image.y;            this.image.inputEnabled = true;            this.image.input.enableDrag(true);            this.image.events.onDragStop.add(this.stopDrag, this);            this.game.physics.enable(this.image, Phaser.Physics.ARCADE);            // initial position            // target word image label            this.wordImgLabel = this.game.add.graphics();            this.wordImgLabel.beginFill(0x000000, 1);            this.wordImgLabel.drawRect(-300, 300, 600, 200);            this.image.addChild(this.wordImgLabel);            this.soundImg = this.game.add.audio('soundTrg' + this.number);            this.newWordTrg = shuffledArray[this.number];            for (var i = 0; i < 25; i++) {                switch (this.newWordTrg) {                case "lapis":                    this.newWordTrg = "lápis";                    break;                case "ines":                    this.newWordTrg = "inês";                    break;                case "glutao":                    this.newWordTrg = "glutão";                    break;                case "iglo":                    this.newWordTrg = "iglô";                    break;                case "braco":                    this.newWordTrg = "braço";                    break;                case "laco":                    this.newWordTrg = "laço";                    break;                case "verao":                    this.newWordTrg = "verão";                    break;                case "chao":                    this.newWordTrg = "chão";                    break;                case "feijao":                    this.newWordTrg = "feijão";                    break;                case "ze":                    this.newWordTrg = "zé";                    break;                case "zangao":                    this.newWordTrg = "zangão";                    break;                case "movel":                    this.newWordTrg = "móvel";                    break;                case "sofa":                    this.newWordTrg = "sofá";                    break;                case "trofeu":                    this.newWordTrg = "troféu";                    break;                case "da":                    this.newWordTrg = "dá";                    break;                case "to":                    this.newWordTrg = "tó";                    break;                case "pe":                    this.newWordTrg = "pé";                    break;                case "pao":                    this.newWordTrg = "pão";                    break;                case "pa":                    this.newWordTrg = "pá";                    break;                case "bebe":                    this.newWordTrg = "bebé";                    break;                case "bau":                    this.newWordTrg = "baú";                    break;                case "taca":                    this.newWordTrg = "taça";                    break;                case "ra":                    this.newWordTrg = "rã";                    break;                case "mumia":                    this.newWordTrg = "múmia";                    break;                case "mao":                    this.newWordTrg = "mão";                    break;                };            }            this.imageLetter = this.game.add.text(-100, 350, this.newWordTrg.toUpperCase(), this.style);            this.image.addChild(this.imageLetter);            this.testWord = shuffledArray[this.number];            this.imgGoal = false;            this.positiveSound = this.game.add.audio('positive');            this.negativeSound = this.game.add.audio('negative');            this.timeDelay = 0;            this.move = false;        },        update: function () {            // Physics part            this.physics.arcade.overlap(this.marcoVermelho, this.image, this.collision, null, this);            this.physics.arcade.overlap(this.marcoAzul, this.image, this.collision, null, this);            console.log(this.image.events.onKilled);        },        render: function () {            this.game.debug.body(this.image);            this.game.debug.body(this.marcoAzul);            this.game.debug.body(this.marcoVermelho);        },        wordInList: function () {            for (var i = 0; i < shuffledArray.length; i++) {                if (this.testWord === processo.words[i]) {                    this.image.customParams = {                        id: 1                    };                    break;                } else if (this.testWord == sonsFacil.words[i]) {                    this.image.customParams = {                        id: 0                    };                }            }        },        home: function () {            window.location.href = '../../index.html';        },        next: function () {            /*     this.image.position.x = this.image.originX;                 this.image.position.y = this.image.originY;                 this.image.body.x = this.image.originX;                 this.image.body.Y = this.image.originY;                 this.image.visible = true;*/            this.timeDelay = 0;            //this.image.body.enable = true;            this.number += 1;            this.image.loadTexture('imgTrg' + this.number);            this.soundImg = this.game.add.audio('soundTrg' + this.number);            this.image.revive()            //this.game.physics.enable(this.image, Phaser.Physics.ARCADE);            this.testWord = shuffledArray[this.number];            this.newWordTrg = shuffledArray[this.number];            for (var i = 0; i < 25; i++) {                switch (this.newWordTrg) {                case "lapis":                    this.newWordTrg = "lápis";                    break;                case "ines":                    this.newWordTrg = "inês";                    break;                case "glutao":                    this.newWordTrg = "glutão";                    break;                case "iglo":                    this.newWordTrg = "iglô";                    break;                case "braco":                    this.newWordTrg = "braço";                    break;                case "laco":                    this.newWordTrg = "laço";                    break;                case "verao":                    this.newWordTrg = "verão";                    break;                case "chao":                    this.newWordTrg = "chão";                    break;                case "feijao":                    this.newWordTrg = "feijão";                    break;                case "ze":                    this.newWordTrg = "zé";                    break;                case "zangao":                    this.newWordTrg = "zangão";                    break;                case "movel":                    this.newWordTrg = "móvel";                    break;                case "sofa":                    this.newWordTrg = "sofá";                    break;                case "trofeu":                    this.newWordTrg = "troféu";                    break;                case "da":                    this.newWordTrg = "dá";                    break;                case "to":                    this.newWordTrg = "tó";                    break;                case "pe":                    this.newWordTrg = "pé";                    break;                case "pao":                    this.newWordTrg = "pão";                    break;                case "pa":                    this.newWordTrg = "pá";                    break;                case "bebe":                    this.newWordTrg = "bebé";                    break;                case "bau":                    this.newWordTrg = "baú";                    break;                case "taca":                    this.newWordTrg = "taça";                    break;                case "ra":                    this.newWordTrg = "rã";                    break;                case "mumia":                    this.newWordTrg = "múmia";                    break;                case "mao":                    this.newWordTrg = "mão";                    break;                };            }            this.imageLetter.setText(this.newWordTrg.toUpperCase());        },        soundClick: function () {            this.soundImg.play();        },        soundClick1: function () {            this.soundImg1.play();        },        soundClick2: function () {            this.soundImg2.play();        },        collision: function (item, image) {            this.wordInList();            if (item.customParams.id == image.customParams.id) {                goal = true;                this.replaceIt();            }            /* if (goal) {     if (this.game.time.now > this.timeDelay) {         // wait 1 second         this.timeDelay = this.game.time.now + 10000         this.positiveSound.play();     }     goal = false; } else {     if (this.game.time.now > this.timeDelay) {         this.negativeSound.play();         // wait 1 second         this.timeDelay = this.game.time.now + 1000     } }*/        },        replaceIt: function () {            console.log('yeah!!!');            //this.positiveSound.play();            this.image.kill();            goal = false;        },        stopDrag: function () {            if (this.image.x != this.marcoAzul.x || this.image.y != this.marcoAzul.y || this.image.x != this.marcoVermelho.x || this.image.y != this.marcoVermelho.y) {                this.image.x = this.image.originX;                this.image.y = this.image.originY;            }        },    }    game.state.add("PlayGame", playGame);    game.state.start("PlayGame");}

Thanks for your time!

[Skeptron]

I'm sorry but there's too much code, it's hard to figure out what's happening without seeing it running. I tried to do a sandbox of what I've understood from your issue : could we please use it?

 

http://phaser.io/sandbox/edit/IBEcKmoa

 

Tweak it or tell me how to better reproduce your issue on this simple example and then let's try to fix it.

[jsantos]

Hi Skeptron,

 

Thanks for looking at it!

Funny enough, in those few lines may lie the answer

 

I hadn't reset the position... or better, I had, but I also did so many other things that failed to realize that it might help me.

I'll just check it a bit better and will post the result soon!

[jsantos]

Yeap...

 

This did the trick for me!

function collision(){    atari.kill();        setTimeout(function() {        atari.reset(250, 500);    }, 1000);}

The kill() working with the reset() allowed me to solve it!

 

The rest of the code is just me checking if a word belongs or not!

I'm going to mark as resolved!

 

Cheers!!!

[Skeptron]

I'm glad I could help! And please remember that a sandbox allows others to help you 10 times more efficiently

[jsantos]

I'll do! Thanks again!