Phaser game destroy() not working - javascript

I am currently using Phaser with Meteor and I want to destroy the game when I switch to another page. And create the game again when I go back.
But when I check Phaser.GAMES I see something like this:
[Phaser.Game, Phaser.Game, Phaser.Game, Phaser.Game, Phaser.Game]
And then, the canvas gets black. I've tried setting the game variable to null, tried set to null the items inside the Phaser.GAMES but had no success.
The strange thing is, when I check the source code, it shows Phaser.GAMES[this.id] = null but it keeps the value.I checked the source code (https://github.com/photonstorm/phaser/blob/master/src/core/Game.js) and I added the extra logic to destroy() missing from the version I am currently using (2.1.3) but it was not working either.
I tried to just hide it, but in slower machines, it just slows down the entire site keeping the game running.
I am using Phaser v2.1.3 | Pixi.js v2.0.0. Thank you for your help.

It was the version. I was using Phaser 2.1.3, the first version with Pixi 2.0.0. I downgraded to the version 2.1.2 and it was ok.
meteor add robertlowe:meteor-phaser#=2.1.2
This should be fixed with Pixi v3 (not out yet). I got the info from here: https://github.com/GoodBoyDigital/pixi.js/issues/1238
A good way to find problems in Phaser is to switch the canvas to Phaser.CANVAS, or to look for the issue in Pixi.

Related

Using a sprite object with Phaser?

I am really new to game development, and even newer to phaser. I just discovered the library when I needed to find a way to build my game background. Im building a web based game in javascript. Ive already written all of the code for my game to animate/control the sprites, so I don't want to throw away that code since it works perfectly for what i want. I have my own gameengine, assetmanager etc. What my question was, is that is there a way to use my existing code with phaser? For instance, when I want to add my sprite onto my map, you have to call:
this.player = this.game.add.sprite(100, 300, 'player');
'player' is a tag that refers to the .png file. I want to be able to add my sprite that i have already animated, which is also controlled by keys. Is there a way to do this? Is there a method in the Phaser api that allows this? Or is there a better way to render my JSON data for my tile map? I find that phaser makes everything really easy for you, but i really just want to render my background using it, and be able to add my sprites/collisions on it using the api. I am really new to this, so any advice would be great! Thanks!

Why does phaser flash on mobile?

I'm creating a game both for desktop and mobile using phaser. But when I try to test it on mobile it flashes a lot and is barely playable. Links: http://game.r4u.nl/frog/testing/testing/ and http://game.r4u.nl
How to fix this?
It really depends of your mobile model, navigator, among other things (HTC One M7, Chrome works fine for me). But as other people already said, webGL doesn't work well in some devices. Try disabling WebGL rendering in Phaser and fallback into traditional Canvas rendering modifing the game launcher in your assets/js/main.js file...
game = new Phaser.Game(800, 600, Phaser.CANVAS, '');
...And your game would run at least different. (The speed can be another factors too like physics, but that's another thing...)
Also take note of debug-rendering stuff. In case of the frog, you are rendering an square each frame in a way that makes some issues in some envoriments (that's beacuse it's just for debugging pruposes).

How do I use d3's brushing/dragging/zoom behaviors in a meteor project?

I'm trying to build a souped-up force-layout graph based on this one using Meteor.js and D3.js.
Here's the problem:
In this project and in other projects involving d3 mouse-move events within a meteor framework, incorporating the mouse-event functionality causes the app to break.
By break, I mean either crash, throw errors on mouse-drags etc., or otherwise act unruly.
Two questions really:
Why is this happening? What is causing this frustrating behavior? Is this problem fixable, or do I need to try building this app using a different framework?
How can I prevent this behavior or get around it? I've tried building the same app using divs for graph nodes and using jquery's draggable feature to drag whem, which works great, but it's kindof a hack, because I still can't use D3 features like brushing and zooming.
Here is a link to a very-simple version of the force-layout editor being incorporated in a meteor environment. This program allows the user to drag the node, but all other functionality is lost. Dragging the single node that appears throws the following error:
Uncaught TypeError: Cannot read property 'apply' of undefined
The user is unable to select a node, draw new nodes, or do anything else that the app is programmed to do.
Looks like "preventing default" was the culprit...I just got my graph to select nodes and draw connections.
Here was the key to the drag line not working. It turns out that d3.svg.mouse(container) is deprecated. You're supposed to use d3.mouse now.
This is really great news, because it means d3 and meteor are more compatible than I thought.

How to add Spine animation to Phaser game?

I am new to Phaser and the whole javascript games, and I am trying to add Spine animation to Phaser. Is there a way to do that?
I also tried to play my animation using Pixi.js and it worked.
Also I know that Phaser is built on top of Pixi, can access Pixi directly from Phaser or I have to add both libraries into my project and use Pixi for Spine animation and use Phaser for other tasks?
Any code samples would be very helpful.
Old but just in case someone is looking, you should try to add https://github.com/pixijs/pixi-spine
Not using Phaser but an other engine using PIXI to for rendering and I made it work, same for all "PIXI plugins".

Raphael.js image fill not updating constantly

I do have a Paper.path() in Raphael that is filled with a simple texture:
var fill = screen.path(Iso.topFacePath(top)).attr({
fill: 'url(http://www.example.com/mytexture.jpg)',
});
The path can be altered by the user via drag and drop. For this I use Element.drag() to bind the handlers.
The problem that I encouter now is that while the onmove-handler function is called the element in question will be recalculated and has to be drawn again. Apparently this is "too much" for raphael and the fill pattern will disappear randomly (flicker) and appear again some time later (at latest onend).
The actual code I use is a little too much to post here but I built a fiddle where you can see what's going on (you can drag the upper sides of the quadrangle).
Is there a simple fix to this?
I am used to canvas much more than raphael (actually this is the first time I really use raphael) so maybe my approach of redrawing everything everytime sth changes is plain wrong?
EDIT: I just found out that seems to be somehow browser-related as well. Chrome and Firefox will produce the flicker where Safari seems to do everything just fine.
This seems to be caching issue (raphael.js does not cache the bitmap fill and will reload it on every change) and is fixed (for me) by this pull request on GitHub that is (as of 08/14/2012) still pending.
Raphael is pretty hard / impossible to build oneself as the make file points to local and/or inexistent files, but you can either concatenate everything by hand, modify the build script or use the modified build that is used in the example to get hold of the fix.
Let's hope it will find its way into a future release of Raphael.

Categories