Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

AngularJS + Phaser: dynamic loading/unloading


soumak77
 Share

Recommended Posts

I'm developing an app with angularJS that will load a Phaser game dynamically.  The app allows configuring of certain aspects of the game and if changed, renders the new game dynamically in the view.  The app has two main views, a split screen view where you configure options on one side and see a preview of the game on the other, and a full screen view.  

 

The dynamic loading works great in the beginning.  I can make changes to the configuration and see the game re-render with those changes.  I can also switch to full screen mode and have the game render in that view.  I make sure to use the game.destroy() method before transitioning views to ensure the game is cleaned up before attempting to re-render it.  The problem I'm having is that regardless of when and which view I'm in, the game stops rendering after the 5th attempt.  Starting with the 5th call to Phaser.game, only a black screen is rendered.

 

Would anyone have any idea what might be happening?  Are there any examples out there that do this type of dynamic loading?

Link to comment
Share on other sites

The app doesn't just do "configuration".  I was trying to be minimal in my app description so that I wouldn't have to get into too much detail, but that may be needed.  The app is really an IDE that can produce phaser games.  The idea will be to have users select various components they want in their game and then build the game source code and execute it.  The IDE UI should be language/framework agnostic (as much as it can be), so that I could theoretically build higher level components in any language/framework and have users combine them to produce something (that something in the case of phaser is a game, though in theory they could build anything with any language/framework).

 

With that said, I'm not sure how I could achieve that with a main state as I need to rebuild the source each time the user updates their code in the IDE.  I don't see why the destroying/recreating of the game works great for the first 4 times, but every 5th time and thereafter the game just renders a black screen.  I could have special handling in the IDE when using phaser, but I want that to be a last resort as it'll drastically change the implementation of building/executing the source, versus having the same implementation for all languages/frameworks.

Link to comment
Share on other sites

I found this tutorial that uses states along with angular and phaser: http://www.ng-newsletter.com/posts/building-games-with-angular.html

 

I think I can change my app so that it produces a state each time the IDE runs a build versus producing an entire game.  I can then add the generated state to a singleton game instance and start it versus running a script that contains the entire game.  When doing a rebuild in the IDE, I can call destroy to cleanup the state versus destroying the entire game.  I'll play with it and post back with my findings.

 

Regardless of whether or not the above works, I still think there is a bug that needs to be fixed in phaser as I would expect one should be able to create/destroy a game an infinite amount of times.  For those interested, I'm using Phaser 2.2.2 and the game I'm testing with is breakout from the Phaser examples.

Link to comment
Share on other sites

  • 11 months later...

I am using React with Phaser and would like to split my Code with different Phaser instances, so i am stuck with the same problem and Phaser v2.4.6: After the fifth time i initiate Phaser, the screen goes black. Did anyone find a solution for this? I don´t want to create a global Phaser instance, it´s not always visible and i would have a LOT of states...

Link to comment
Share on other sites

  • 3 months later...

You have to unload the instance of the game.  You can encapsulate everything and just destroy it if you want.  Sometimes with grunt and angular you will get a double instance of your game also its kinda a pain.  Have you tried just destroying the instance of the game and loading another one?

Link to comment
Share on other sites

I'm not sure exactly what I did to fix this but it is resolved for me.  Simply destroying and recreating the game didn't work for me when I had the original issue.  I think the fix had to do with moving the game object to be stored globally as @luschn pointed out instead of saving it to an angular scope.  The fix could also have been due to refactoring the phaser game container so that is stays in the DOM without angular removing it when switching views.  In any case, all is good now!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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