soumak77 Posted March 11, 2015 Share Posted March 11, 2015 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 More sharing options...
beuleal Posted March 11, 2015 Share Posted March 11, 2015 You should use a main state and change game states, according user. Link to comment Share on other sites More sharing options...
soumak77 Posted March 11, 2015 Author Share Posted March 11, 2015 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 More sharing options...
soumak77 Posted March 12, 2015 Author Share Posted March 12, 2015 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 More sharing options...
luschn Posted February 24, 2016 Share Posted February 24, 2016 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 More sharing options...
luschn Posted February 25, 2016 Share Posted February 25, 2016 found more information about the issue - seems to be fixed in pixi.js v3 - but the latest phaser version (v2.4.6) uses v2.2.9 of pixi.js: https://github.com/pixijs/pixi.js/issues/1238 can we somehow upgrade to pixi.js v3? would be better than using workarounds... Link to comment Share on other sites More sharing options...
luschn Posted February 25, 2016 Share Posted February 25, 2016 i may just end up using react server side rendering instead, would be better for SEO anyway and it would solve the rendering issue... Link to comment Share on other sites More sharing options...
jjwallace Posted June 23, 2016 Share Posted June 23, 2016 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 More sharing options...
soumak77 Posted June 23, 2016 Author Share Posted June 23, 2016 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 More sharing options...
Recommended Posts