Jump to content

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


jsantos
 Share

Recommended Posts

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 by jsantos
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...