Jump to content

Phaser Chains (a different way to explore phaser docs)


Recommended Posts



I implemented a different way to navigate into the phaser docs (and API).




In the main phaser doc site, sometimes is tedious to find the documentation of a method or class, you have to step from one class to other, for example, if you are developing and you write:


...to know the signature of the sprite method, first you have to go to the top level class "Game," then when you go to the method "add" you realize it is of type "GameObjectFactory", so you open that class and finally you can get to the "sprite" method docs.


My idea is provides a textbox where you can write a "phaser chain", a piece of phaser method calls, and it displays a list of matching combinations of phaser methods. For example, if you type:


it shows something like this:

Phaser.Game.time.events.add(delay, callback, callbackContext, arguments) : Phaser.TimerEvent;Phaser.Game.time.events.autoDestroy : boolean;Phaser.Game.time.events.adjustEvents() : void



then you can click on one of the listed methods and the documentation is shown.


Also it contains some features like bookmark your queries.


I hope you like it. There are more work to do, like link the source code and maybe an study of the common "chains" used in the phaser examples.





(The page load delays a bit, it has to request the phaser doc json files)

Link to comment
Share on other sites



Good news for Brackets (http://brackets.io) users. Now you can use Phaser Chains in your favourite Phaser editor, no need to swap from your editor to the browser, all is in the same place.


To install it, open File > Extension Manager and search for Phaser Chains. One time the extension is installed, you will find a command in the menu View > Phaser Chains. It opens a bottom panel with a "webview" of Phaser Chains.


Enjoy it!






In the next days I will do the same for Eclipse and maybe for Netbeans. If you like to see it in other IDE or editor, please write it here, I will do my best. Or maybe you can do it yourself. It is easy, you only need to know how to open a "web view" inside the editor and point to:




If you prefer a vertical view, then remove the parameter "horizontal-layout".


If you do it successfully please let me know to share it in the website.

Link to comment
Share on other sites

I saw in phaser.io, phaserchains was referenced as "a great new way to search the Phaser Documentation". I am very happy with that!


Now on you can follow the progress of the project in https://twitter.com/boniatillo_com, and get the source code in https://bitbucket.org/boniatillo/phaserchains


Thanks all.

Link to comment
Share on other sites

Thanks @Raicuparta!


New fuatures...


Together with the Phaser API and docs, the tool shows the matching lines of the official Phaser examples. It is very nice because in this way the new developer gets in a first glance how to use that API.


For example, if you are looking for:


you will find the API of the


method, but also you will see, in the examples panel, a demonstration of how to use them:

bot.animations.add('run');s.animations.add('spin', [0,1,2,3]);s.animations.add('spin', [0,1,2,3]);

But you will not find only examples of the API, else you can discover "new" API, or the API need for a specific purpose. Let's say you want to know when a key is down, but you are not very familiar with the API, then you can find for:


You will see, in the API panel, some methods like:

Phaser.Key.onDown : Phaser.Signal;Phaser.GameObjectFactory.button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame, group) : Phaser.Button;Phaser.GameObjectCreator.button(x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame) : Phaser.Button;Phaser.Key.processKeyDown(event.) : void;Phaser.Key.timeDown : number;Phaser.Key.isDown : boolean;

It gives you an idea of how to listen for a key down, but in the example panel you will discover the path to that method, or not the path, else the different paths:

if (game.input.keyboard.isDown(Keys.LEFT))spaceKey.onDown.add(togglePause, this);if (upKey.isDown)

At the same time, at the end of each matching line of the examples, you get a link to the complete example in the official github repo, so you can see the API you are looking for in a context.


Because now there are more panels, you can play with the "layout" button, it has 3 different layouts.


Ah, I missed to say, just now I implemented an "updating website" message. The website uses the application cache, so if this is not your first time, you should wait a bit and then refresh, to get the last changes. Next time it will advice you automatically.




Link to comment
Share on other sites

Hi @valueerror


I do not understand very well what you mean... Are you starting with phaser? Or are you an experienced phaser developer? The missing explanation is about the whole phaser chains or just about this new examples feature?


I f you are an experienced phaser developer, maybe you don't need the example panel since maybe you know them very well. I can add a button to hide it. But if you are starting with phaser, I think it can help.


This tool is not a start point to learn phaser or create a project (at least not for now), is just a different way to search in the phaser doc and now the examples. The question is that, at least it happens to me, I have to go back to the phaser documentation one time and other, and spent a considerable amount of time in it, but with this tool you can find the API of your interest much easier.


I don't know if it answers to you, please if you can give me more details.







this is really great but what i'm missing is an explanation how to actually use it in my code..  

i guess it isn't intended to be used by people who are just learning phaser..  that's what the examples are for..  right?

Link to comment
Share on other sites

  • 3 weeks later...

I already installed the XDK IDE, it looks awesome for html5 developers but also for game developers. It comes with PhaserJS templates and is based on the Brackets editor, so you can install Phaser Chains with...


Well, I don't know why, in XDK, there are many extensions that are not listed in the Extension Manager. I thought it was a problem of version but I think it is not, because I changed Phaser Chains to use a very lower bracket's version requirement. Also it does not work if you drag the zip on the extension manager.


The solution I found:


1- Get the pahser chains zip, it is here:




but I strongly recommend to go to the extensions registry of brackets (https://brackets-registry.aboutweb.com/) and search for Phaser Chains. You will find the right zip even if I update it with a new version.


2- Ok, download that zip and unzip it in the brackets extension folder of your XDK installation:


<XDK Install Folder>\xdk\brackets\b\extensions\default


and that's all. Restart XDK and you will see the Phaser Chains command in the View menu, or just type Ctrl+I

Link to comment
Share on other sites

  • 3 weeks later...

This is awesome. Since I started using phaser I was missing a proper search function for the docs. But this is even better.


Now if there would be a plugin for intelliJ IDEA, that would be awesome :)


Thanks for this great tool!

Link to comment
Share on other sites

  • 2 weeks later...



The first version of Phaser Chains for Eclipse was released.


This is a native plugin (made in Java) you can install on Eclipse through this update site:




or you can download a Zip of the update site:




Basically it provides the same features of the online version, but it integrates much better with Eclipse and in a future we can integrate it with the JS editor.


To open it, go to menu Window > Show View > Other > Phaser Chains, or with the key CTRL+I


@Marsu the IntelliJ IDEA plugin is coming... :)


Here I attach a screenshot



Link to comment
Share on other sites


  • Recently Browsing   0 members

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