{"id":118,"date":"2017-04-05T08:06:48","date_gmt":"2017-04-05T08:06:48","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=118"},"modified":"2018-05-27T08:07:27","modified_gmt":"2018-05-27T08:07:27","slug":"transition-from-one-state-to-another-state-in-phaser","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/transition-from-one-state-to-another-state-in-phaser\/","title":{"rendered":"Transition from one state to another state in Phaser"},"content":{"rendered":"<p>If you followed previous articles I wrote on <a href=\"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-game-in-phaser-part-1\/\">making of a responsive game in Phaser<\/a>, one task was\u00a0to implement smooth transition from one state to another in the game. Phaser states work by loading new state in the view and removing old state from the view which happens instantly\u00a0and does not give a transition effect as if we are changing the state (or screen). In a polished game you\u00a0would want to implement something which gives an impression of a transition from one screen to another. For example a sliding effect where player sees one screen sliding out of the view and another screen sliding in giving impression that something is changing in the game.<\/p>\n<div style=\"height:250px;\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:inline-block;width:300px;height:250px\"\r\n     data-ad-client=\"ca-pub-0810934084049672\"\r\n     data-ad-slot=\"8927903874\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n<p>Cristian Bote wrote a nice Phaser plugin\u00a0<a href=\"https:\/\/github.com\/cristianbote\/phaser-state-transition\" target=\"_blank\">State Transition Plugin for Phaser<\/a>\u00a0which gives many\u00a0options to achieve\u00a0this and good thing about it is that you don&#8217;t have to do much and can get away with changing a couple of code lines in your game.<\/p>\n<p>There is another plugin written on top of Cristian Bote&#8217;s plugin by\u00a0Alan Accurso called <a href=\"https:\/\/github.com\/aaccurso\/phaser-state-transition-plugin\" target=\"_blank\">Refactored State Transition Plugin for Phaser<\/a> which gives some more control to the developer.<\/p>\n<p>In <a href=\"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-game-in-phaser-part-2\/\">Making of a responsive game in Phaser:\u00a0Part 2<\/a>\u00a0article we used the standard Phaser transition to switch between two states as can be seen below<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.netexl.com\/blog\/demo\/2\/index.html\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Using Cristian Bote&#8217;s original state transition plugin\u00a0we get a sliding transition effect as shown below<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.netexl.com\/blog\/demo\/3\/index.html\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Integration of the plugin in a game\u00a0is a simple two step process<\/p>\n<p><em>Include the plugin code in your game<\/em><\/p>\n<pre class=\"theme:xcode lang:default decode:true\">&lt;script src=\"phaser-state-transition.min.js\"&gt;&lt;\/script&gt;\t\r\n<\/pre>\n<p><em>Replace the Phaser\u00a0state start code below<\/em><\/p>\n<pre class=\"theme:xcode lang:default decode:true\">this.state.start(\"TheGame\");<\/pre>\n<p><em>with the new code as<\/em><\/p>\n<pre class=\"theme:xcode lang:default decode:true\">this.state.start(\"TheGame\", Phaser.Plugin.StateTransition.Out.SlideLeft, Phaser.Plugin.StateTransition.In.SlideLeft);\r\n<\/pre>\n<p>And that would be it. There are many options for Exit and Entry slide effects. You can check sample examples put up by Christian on codepen\u00a0at the link below<\/p>\n<p><a href=\"https:\/\/codepen.io\/cristianbote\/full\/GjgVxg\" target=\"_blank\">Phaser State Transition Plugin Examples<\/a><\/p>\n<p><strong>Update:\u00a0<\/strong>This article was written for Phaser 2. Refer to Plugin&#8217;s Github page for examples related to later Phaser versions.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you followed previous articles I wrote on making of a responsive game in Phaser, one task was\u00a0to implement smooth transition from one state to another in the game. Phaser states work by loading new state in the view and removing old state from the view which happens instantly\u00a0and does not give a transition effect as if we are changing the state (or screen). In a polished game you\u00a0would want to implement something which gives an impression of a transition from one screen to another. For example a sliding effect where player sees one screen sliding out of the view and another screen sliding in giving impression that something is changing in the game. Cristian Bote wrote a nice Phaser plugin\u00a0State Transition Plugin for Phaser\u00a0which gives many\u00a0options to achieve\u00a0this and good thing about it is that you don&#8217;t have to do much and can get away with changing a couple[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":85,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6],"tags":[],"class_list":["post-118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-phaser","category-plugin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":875,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/118\/revisions\/875"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/85"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}