Problem with destroy()

[Taggrin]

I am trying to make a shop UI appear with several buttons (not in yet) and an exit button. The exit button should destroy all shop elements which fill the entire screen on the top layer of the game, so the player can see the 'world' again. The appearance works fine, but destroying them somehow does not work.

 

For an other game I made something similar (it worked fine there), but for some reason the destroy() function does not trigger this time. The game uses the game template layout (boot, preloader, menu, game) and all required assets are loaded in correctly in the preloader.

 

When the keyboard key to open the shop is pressed the following function is called:

openShop: function() {   //Shop interface   shop = this.add.sprite(0,0,'shop');   shop.fixedToCamera = true;   //Exit button   btnExit = this.add.button(186, 113, 'btnexit', this.closeShop, this, 2, 1, 0);   btnExit.fixedToCamera = true;},

When the button is pressed, the 'closeShop' function is called to remove the shop assets:

closeShop: function() {   //Delete shop assets   shop.destroy();   btnExit.destroy();},

I expect both the UI (shop) and exit button (btnExit) to disappear when the button is pressed. However, both just stay. The game does not give an error nor crash, it just pretends as if there was no function attached to the button. Both are a global variable so should be able to be found. Other debug code I add to the closeShop function (e.g. displaying text) all work fine.

 

Did I overlook something? Any help would be great .

[Batzi]

I am trying to make a shop UI appear with several buttons (not in yet) and an exit button. The exit button should destroy all shop elements which fill the entire screen on the top layer of the game, so the player can see the 'world' again. The appearance works fine, but destroying them somehow does not work.

 

For an other game I made something similar (it worked fine there), but for some reason the destroy() function does not trigger this time. The game uses the game template layout (boot, preloader, menu, game) and all required assets are loaded in correctly in the preloader.

 

When the keyboard key to open the shop is pressed the following function is called:

openShop: function() {   //Shop interface   shop = this.add.sprite(0,0,'shop');   shop.fixedToCamera = true;   //Exit button   btnExit = this.add.button(186, 113, 'btnexit', this.closeShop, this, 2, 1, 0);   btnExit.fixedToCamera = true;},

When the button is pressed, the 'closeShop' function is called to remove the shop assets:

closeShop: function() {   //Delete shop assets   shop.destroy();   btnExit.destroy();},

I expect both the UI (shop) and exit button (btnExit) to disappear when the button is pressed. However, both just stay. The game does not give an error nor crash, it just pretends as if there was no function attached to the button. Both are a global variable so should be able to be found. Other debug code I add to the closeShop function (e.g. displaying text) all work fine.

 

Did I overlook something? Any help would be great .

are shop and btnExit global variables? Console.log them when you are in closeShop and see if you get an undefined.

 

I also would recommend passing 'true' in destroy(true) as the latter would kill the parent and its children by doing so. Also did you try to use kill() instead?

[Taggrin]

Printing the variables in closeShop will display something like "[object Object]", which makes me assume it can find the objects.

 

Kill(), destroy(true) and doing other tests like setting visibility to false won't work as well. If I try to destroy other objects in closeShop which were created in other functions (e.g. the player) it will actually destroy that specific object. Seems like it is able to see the objects from openShop (no crash and variable not undefined), but is unable to alter anything.

[Batzi]

Printing the variables in closeShop will display something like "[object Object]", which makes me assume it can find the objects.

 

Kill(), destroy(true) and doing other tests like setting visibility to false won't work as well. If I try to destroy other objects in closeShop which were created in other functions (e.g. the player) it will actually destroy that specific object. Seems like it is able to see the objects from openShop (no crash and variable not undefined), but is unable to alter anything.

can you create a jsFiddle version of what you are trying to do? I would like to see more of your code.

[Taggrin]

can you create a jsFiddle version of what you are trying to do? I would like to see more of your code.

 

This code was kinda everything to it. The rest is just for player movement as for this moment.

 

I am quite new to all this and jsfiddle, but I tried to make an example using a phaser template. I also made some example test images, but they won't load in (I guess because I need https), hopefully you will understand it nonetheless: https://jsfiddle.net/4dtbLmjv/5/

 

To explain a bit more with it: the black screen with orange text is the normal playable area where the player is moving around. When pressing 'E' it opens the shop by adding a sprite and button. Because these are the latest to be added these will be on top over the black screen (player movement should be disabled when the shop is oen in the final product of course). When finished pressing the exit should destroy the button and UI so the black screen is visible again (and player control should be given back), which doesn't happen.

 

 

 

 

I made a cheap fix now by making the whole shop including buttons in the create function and instantly set their visibility to false, setting this to true when the shop is needed. It works, but I still wonder why the destroy() didn't.

[AzraelTycka]

Hello,

 

did you test in in jsfiddle if your example is working? Because it's not. Open your console and see what it says (first error comes to me as: no openShop defined).

 

First of all, you are calling openShop() in update method but your openShop method is not global function, thus it will never be invoked. Change it to this.openShop(). Then keep looking into the console after this change click on Run button in upper left corner, and start your test again with the console still opened, you will get another error.

 

Instead of images loaded from other domain you can simply create stand in bitmap, just use bitmapdata and create a few rectangles as a stand in ;-).

[Taggrin]

Hello,

 

did you test in in jsfiddle if your example is working? Because it's not. Open your console and see what it says (first error comes to me as: no openShop defined).

 

First of all, you are calling openShop() in update method but your openShop method is not global function, thus it will never be invoked. Change it to this.openShop(). Then keep looking into the console after this change click on Run button in upper left corner, and start your test again with the console still opened, you will get another error.

 

Instead of images loaded from other domain you can simply create stand in bitmap, just use bitmapdata and create a few rectangles as a stand in ;-).

 

Ah my bad. Because I use the game template I load images using "this.load.sprite" instead of "game.load.sprite". There are I believe also some slight difference in calling the functions themselves (I use this.functionname() as well, but I recall 'this' wasn't needed in certain situations). I knew the code wasn't working and I couldn't really test the button due to the image not loading, but I made it more like as an example what happens in what order.

 

Thanks for the bitmap suggestion, I will look into that as well .

[AzraelTycka]

Well, here is more or less working fiddle of your example. Didn't check everything but it doesn't give any weird error messages so now adjust is as you need then click update button (top left corner) and you get a new link (address bar) which you can post here.

[AzraelTycka]

While I'm still at it, if you want t osolve your problem that your shop is not closing. It is closing it works if you want to find out why it doesn't disappear from the scene then go through everything with console.log and find out what is behaving not correctly.

 

If you don't want to go through it yourself then here is jsfiddle working example of your set up.

 

And if you are still reading then the problem is that when you press a key (your isDown check in update loop) it is called numerous times because update loop is called every 60 ms (in best case) so your key press is registered numerous times thus you call openShop numerous times and it creates a number of shops (but you see only one because they are the same in the same spot) but you keep reference only to the latest one with your variable this.shop = this.add.sprite(...) so you kill/destroy your shop at the end with closeShop method but there are still sprites without any reference which were created before and you have no direct way to kill them.

 

Well a simple way how to prevent that is to use a check variable as I showed you above in the fiddle example. Or do it some other way you find best for your case.

 

Btw I would suggest going through some javascript material to get the basics down a bit more. It doesn't take much time and keep using console.log when you are having troubles (remove it for actuall use) ;-).

 

EDIT: I would also suggest checking the difference between kill and destroy methods, are you sure that destroy is the best way in your case? Opening and closing the shop seems to be a repeated thing so wouldn't just killing it and reusing later be a better idea?

Edited January 7, 2016 by AzraelTycka

[Taggrin]

Well, here is more or less working fiddle of your example. Didn't check everything but it doesn't give any weird error messages so now adjust is as you need then click update button (top left corner) and you get a new link (address bar) which you can post here.

 

Thank you very much for this fix, this is exactly what I needed as example!

 

When I click on the white square (the exit button) it does not remove the button and shop items though. In this jsfiddle I added a new button "F" that calls closeShop. Pressing E to open and then F to close does not kill them, just like the same problem I have in my game.

 

 

 

 

EDIT:

 

Your latest reply didn't load yet. Thanks for the detailed answer! The 60 calls per second makes sense. 

 

I know the difference between destroy and kill. Because the shop is only used a few times through the game I thought I could go with destroy. For things like shooting bullets I always use kill.

 

This should get me on the way. Thanks again for your time (same for Batzi!) and your detailed example!

 

 

EDIT 2:

 

The boolean was indeed needed to fix this, works like a charm now. Still surprised my faulty code actually worked in an prototype I made a few weeks ago and it didn't here, but oh well as long as this works I am happy .