xnamex Posted January 24, 2014 Share Posted January 24, 2014 Hi everybody, Pretty new to Phaser.js but kind of old to AS3 I just started to port a as3 game into html5 with phaser, but my client wanted transitions between states - just like my game had in flash. Therefore I created a plugin just for this. You can find it here: https://github.com/cristianbote/phaser-state-transition Let me know, what you guys think, or what can be improved. Cheers! jzcoder, haden, jpdev and 10 others 13 Link to comment Share on other sites More sharing options...
jzcoder Posted January 24, 2014 Share Posted January 24, 2014 This is great. Coming from cocos2d myself, I miss all the great built-in transitions. I hope to see more transitions, including some of the 3D ones cocos has. xnamex 1 Link to comment Share on other sites More sharing options...
rich Posted January 24, 2014 Share Posted January 24, 2014 Very cool indeed! Link to comment Share on other sites More sharing options...
anissen Posted January 24, 2014 Share Posted January 24, 2014 Great plug-in! I will most definitely be making use of this -- starred! xnamex 1 Link to comment Share on other sites More sharing options...
xnamex Posted January 24, 2014 Author Share Posted January 24, 2014 Thanks guys!@jzcoder that could actually be easy to implement, basically you're gonna manipulate bitmapData, also 1.1.4 will definitely add cool stuff like blend modes.@rich thanks, but all this is because of you! Link to comment Share on other sites More sharing options...
jpdev Posted February 3, 2014 Share Posted February 3, 2014 Hi xnamex, For me (chrome 32) your example does not work while in WebGL Mode (I only see the buttons), if I switch to canvas it works fine.Just wanted to let you know. (Sadly, no errors displayed - just the red / blue tiled sprites are missing completly). Maybe you could just switch the example to .CANVAS by default. Link to comment Share on other sites More sharing options...
jpdev Posted February 3, 2014 Share Posted February 3, 2014 Hi again, Thanks for your plugin I have integrated it into my game. But I had to make a few adjustments. I send you a pull request on github, so you can look them over and decide if you would like to use (some of) them. Greetings,JP Link to comment Share on other sites More sharing options...
xnamex Posted February 3, 2014 Author Share Posted February 3, 2014 Hey,I'm gonna take a look for sure, but have you found the problem? It's weird because i always use chrome for developing, and it worked for me.Cheers! Link to comment Share on other sites More sharing options...
Mefteg Posted March 5, 2014 Share Posted March 5, 2014 Thank you for the plugin! Really great !! xnamex 1 Link to comment Share on other sites More sharing options...
xnamex Posted March 21, 2014 Author Share Posted March 21, 2014 Hi everyone, Just letting you know, I've updated the plugin to work with Phaser 2.0.0!There's really a great performance boost in 2.0.0, you can easily see it in action between transition. Let me know if something doesn't work for your game or isn't quite right. Cheers! Link to comment Share on other sites More sharing options...
Antflow Posted May 12, 2014 Share Posted May 12, 2014 Hi, I have a problem with the plugin, I cannot make it work as it should. I want to make a smooth transition between my preloader state and the menu state, but when the preloader is finished, the menu is already shown while the preloader is fading out. Any idea what's going on?BasicGame.Preloader = function(game){this.transition = null;};BacisGame.Preloader.prototype = {preload = function(){// preload stuff},create = function(){this.transition = game.plugins.add(Phaser.Plugin.StateTransition);this.transition.settings(duration:2000,properties:{alpha:0});this.transition.to("MainMenu");};};Kind regards,Antflow Link to comment Share on other sites More sharing options...
jpdev Posted May 12, 2014 Share Posted May 12, 2014 The state you are fading to is already drawn (behind the one that is fading). This is by design.It looks nice, as long as your old-state has no "holes" .. because then the old state fades away and by fading it reveals the new state. (there is never a blank screen.) BUT if you rely on a backgroundcolor for the first state, and you therefor have instantly transparent areas, then this doesn't look nice. You could setup your old-state in a way, that it has a background sprite that is covering all areas. If you want to keep the transparent areas but still want to use the plugin, you you could modify the plugin to paint the bitmap (on which the first state is rendered)in your backgroundcolor and then render the state to it. This way you also have no see-through-holes through which the new state is shown instantly. I have modified the plugin here:https://github.com/jpcloud/phaser-state-transition/blob/colortransitions/src/phaser-state-transition.js BUT this is from phaser 1.x and it has not been modified to work with 2.0 (as xnamex version has) so it's just to give you an idea how to maybe approach it, if you want to modify the plugin.(Now that I know more about phaser I think instead of using a graphics object I would try to do it with BitMapData..) Link to comment Share on other sites More sharing options...
Antflow Posted May 12, 2014 Share Posted May 12, 2014 The state you are fading to is already drawn (behind the one that is fading). This is by design.It looks nice, as long as your old-state has no "holes" .. because then the old state fades away and by fading it reveals the new state. (there is never a blank screen.) BUT if you rely on a backgroundcolor for the first state, and you therefor have instantly transparent areas, then this doesn't look nice. You could setup your old-state in a way, that it has a background sprite that is covering all areas. If you want to keep the transparent areas but still want to use the plugin, you you could modify the plugin to paint the bitmap (on which the first state is rendered)in your backgroundcolor and then render the state to it. This way you also have no see-through-holes through which the new state is shown instantly. I have modified the plugin here:https://github.com/jpcloud/phaser-state-transition/blob/colortransitions/src/phaser-state-transition.js BUT this is from phaser 1.x and it has not been modified to work with 2.0 (as xnamex version has) so it's just to give you an idea how to maybe approach it, if you want to modify the plugin.(Now that I know more about phaser I think instead of using a graphics object I would try to do it with BitMapData..) Thanks for the info jpdev, that explains everything! Link to comment Share on other sites More sharing options...
Mike Posted May 13, 2014 Share Posted May 13, 2014 Not clearly on topic but i saw the post dew days ago ... and i found this web page transitions demo: http://tympanus.net/Development/PageTransitions/ And my thought was: it will be so cool if Phaser got those for scene transitions too So I hope someone have the time and skill to implement them and extend the plugin... i'll be glad to try do it my self on first occasion. Link to comment Share on other sites More sharing options...
Conqarous Posted October 21, 2015 Share Posted October 21, 2015 Sorry for my ignorance but how do you transition the position x, y (i.e. sliding down)?Alpha, scale, angle work perfectly. Awesome job on the plugin! Link to comment Share on other sites More sharing options...
ekeimaja Posted January 15, 2016 Share Posted January 15, 2016 How is this supposed to use with multiple states? I cannot get this working, all the time gives error "Uncaught TypeError: Cannot set property 'game' of undefined". Link to comment Share on other sites More sharing options...
Recommended Posts