Phaser Chains (a different way to explore phaser docs)

[PhaserEditor2D 94]

Hello

 

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

 

http://phaserchains.boniatillo.com

 

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:

game.add.sprite(

...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:

game.time.events.a

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

etc...

 

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.

 

 

http://phaserchains.boniatillo.com

 

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

[rich 2613]

Sounds neat! But once the page loads for me it says to click a chain, but none are displayed.

[PhaserEditor2D 94]

Hi rich,

 

Hum...strange...

 

This is a screenshoot of what you should see:

 

http://phaserchains.boniatillo.com/Selection_003.png

 

Thanks.

[clark 37]

This is cool! Just to confirm with Rich, on Chrome:

 

[qdrj 40]

It will come in handy! Unfortunately it isn't working in Chrome now.

 

 

[PhaserEditor2D 94]

Thanks clark and qdrj for the support, updated, now it should work!

 

The problem was I am using a beta version of chrome, where string.startsWith is defined. In firefox it should work too.

[etbsoft 0]

Just yesterday I was thinking about something like this. "I want to look for a word and find all about it".

And WHOA! , you did it

Splendid work. Thanks mate

[PhaserEditor2D 94]

Hehe thanks efriko. In the weekend I move the project to bitbucket to open it for collaboration.

[PhaserEditor2D 94]

Hello,

 

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:

 

http://phaserchains.boniatillo.com?embedded&horizontal-layout

 

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.

[PhaserEditor2D 94]

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.

[Raicuparta 27]

This is gonna be really handy. Great work!

[PhaserEditor2D 94]

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:

animations.add

you will find the API of the

AnimationManager.add(...)

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:

key*down

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.

 

Thanks,

@boniatillo_com

[valueerror 144]

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?

[PhaserEditor2D 94]

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.

 

Thanks

@boniatillo_com

 

 

 

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?

[MikeT 3]

Great, about to give this a go in Brackets.

[valueerror 144]

oh..  i guess i've just not seen the examples because if i click on Phaser.Tween in the "help" section it always says "examples not found" -- in the search bar it enters Phaser.Tween.  (with a dot)  - the moment i remove the dot the examples show up again..  

[PhaserEditor2D 94]

Hi @valueerror, yes, if you click a link in the help section, the serach box changes its value so probably there is not any matching line in the examples.

[Rorian 4]

This is really nice. Good job Arian!

[PhaserEditor2D 94]

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:

 

https://s3.amazonaws.com/extend.brackets/com.boniatillo.phaserchains/com.boniatillo.phaserchains-1.0.3.zip

 

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

[valueerror 144]

i was always wondering why the intel xdk build of brackets lacks so many extensions..   

[PhaserEditor2D 94]

Nice to know that Phaser Chains was installed in the new Phaser Sandbox. You will find it in the Help tab of the editor.

 

http://phaser.io/sandbox

[rich 2613]

And also here: http://phaser.io/learn/chains

[Marsu 1]

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!

[PhaserEditor2D 94]

Thanks @Marsu, I will take a look to the IDEA. Keep in touch.

[PhaserEditor2D 94]

Hello

 

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:

 

http://boniatillo.com/eclipse/phaserchains

 

or you can download a Zip of the update site:

 

https://bitbucket.org/boniatillo/phaserchains/downloads/com.boniatillo.phaserchains.updatesite.1.0.0.zip

 

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