Destroy and create a new game causes dragable game element freeze on IOS

[efusien]

Hi,

 

I have just created a simple game based on the Phaser examples.

Here is the source: http://jsfiddle.net/Lajk6trp/

 

On "RESET" button :

- we destroy the old game if any

- we generate a new game with two dragable elements (elements images are not available in the example, but it doesn't matter).

 

This code is working on a desktop. But when I test on IOS device, the game is working only the fourth first times.

At the fifth click on "RESET", elements are shown, but there are no more dragable. Weird behavior :-o

 

I log the "game" var in console.

I can see the var is already a game object after destroyed. Is it normal?

 

It seems weird to have a good behavior creating the game and its elements each time we push on RESET, but to have the dragable event broken on the fifth click.

 

Any help?

 

Note: don't take care of Loader. It's just a test and does not affect the destroy method().

[JUL]

I don't know what version you use.

 

Try with 2.0.5 and/or 2.0.7, and see what you get.

Those are the most stable, for me (and that's just my opinion).

[efusien]

I'm using the last one: v2.1.0 "Cairhien".

 

I'll go deeper in debugging...

[spencerTL]

2.07 had a documented bug where some anonymous functions prevented the game fully destroying. This is fixed in 2.1. So I think you'do be best sticking to that, or preferably the new one released today to solve a bug.

I still can' t get this to work in my single page jjquery app as the games seem to destroy fine but similar to your problem the game appears but the listeners don't work after a few open and closes. I don't believe this is phaser though but my lack of knowledge of jQuery. I suspect I'm doing something wrong that causes the jQuery pages to go wrong. I should do a separate test to confirm this but in all other cases it's turned out to be me doing something wrong than Phaser being unstable.

[efusien]

I confirm the bug appears only with IOS.

Tested on IPOD and IPAD (Cordova).

It's working well on Android device (Cordova) and Desktop (Chrome browser).

 

I don't have any JS error in the console :-(

[spencerTL]

What happens to memory usage over the cycles of destroy and create? For me, in PhoneGap, it roughly doubled by the time the events stopped firing. The navigation between pages continued and the loading bar before the game menu displayed work correctly but clicks wouldn't fire. It does seem like our problems are related but I have no answer. Using Phonegap,jquery mobile and phaser made it to complicated for me to narrow it down so I just stopped using the ajax part ofjquery. I lost the page transitions but the pages refreshed meaning the destroy was not needed.

[efusien]

I just updated the code example for a cleaner source : http://jsfiddle.net/dmhh20ar/1/

I removed loading messages, useless random sprites, and add some basic comments.

 

IOS devices: drag still not work after the 5th click on RESET button :-(

[spencerTL]

Thanks for that simplified version.  I've had to fork it because my iPad is on iOS8 and that has issues with webGL so I've had to force it to Canvas but it is exactly as you describe.  The 5th time every time.  That is really weird.  I'm sure my problem was not so consistent but otherwise similar.  It is also the same on the xcode  simulator.  

 

I've by no means a full understanding of Phaser and only scant jquery knowledge but there is so little going on here it is hard to know where to begin looking for a problem.

[efusien]

Yep. Thanks for testing it on your side.

I just tested a new version adding "onDragStart" and "onDragStop" events. But there are not fired anymore after the 5th reset.

I tested the sprite properties on Game restart. All seens ok. But not functionnal.

inputEnabled: true

input.enabled: true

input.draggable: true

 

 

Hmm. Maybe an IOS limit?

[spencerTL]

I used an onDown event so I don't think it is the specific type of event just that events are no longer added.  The other strange thing is everything reports as being ok.  Like even when the input isn't working test.inputEnabled shows as true.

 

A question rather than an answer is whether the input is working but the rendering is stuck?  Grasping at straws there though.

 

Could be an iOS limit but on what as nothing should be persisting?  

[efusien]

  Bad news, hue?... I will be happy to resolve this weird behavior. It's blocking for me.

[spencerTL]

Not the render.  I put a tween on it.  Even when the events don't work the sprite still moves. The only thing I can think of that the 5 corresponds to is the limit to the number of touch points on iOS. I can't see why this would be linked to this though.

 

Is it possible in jquery to destroy the whole 'phaser-example' div and then recreate it in generateGame() ?  That may be a stupid question but I'm ex Flash and some of this stuff with the DOM is still alien to me.

[efusien]

Yep,

There is something for that in the code.
It's removing the "phaser-example" element content:

$("#phaser-example").html('');

But you can even remove the element with :

$("#phaser-example").remove();

Then you have to recreate it. Something like following example should work:

$("#reset").after('<div id="phaser-example"></div>');

[spencerTL]

Thanks, I wondered if the div was too fundamental to destroy.  Anyway, although I've learned something new, it didn't help even destroying the div and the canvas and then recreating both.  I'm moving more towards your thoughts on a limit of iOS.  I think one of the experts is needed to help with this.

[efusien]

A quick workaround: do not use the destroy() on game object.

So keep the same game object (and so canvas tag), but destroy only sub-objects, in order to "reset" the game.

 

In a single app application this can be a workaround, until we find a better fix.