How to use the Phaser newdocs?

Hi!
I’m reading and experimenting more and more with some Phaser features, but I often find myself to need to check the docs at newdocs.phaser.io because as it happens I’m still learning.

However consulting the docs is really a huge pain most of the time, because I really do not understand how the Phaser docs work.

For example if I paste a property in the searchbar of the docs page I would expect to find a page that describes how that property/method/object works (like MDN for example).

However when I do I just find a dropdown menu with results that I think are not related to what I am looking for.

Let’s say I want to read more about the line code this.add.group() that I’ve just seen using somewhere and I don’t know what it does.

case: "searching for .add"

case: "searching for .group()"
image

case: "searching for .group"

Now I honestly wouldn’t know what to pick.

Documentation should be user-friendly and easy to use. Phaser is a JS framework for making web games, not quantum physics to open trans-dimensional portals, but still I find it hard and energy draining just the same. :slight_smile:

Any reply will be very much appreciated. :slight_smile:

You may want to try API Chains in Phaser Help Center as it can identify expressions like this.add.group().

In newdocs you may want to bookmark Scenes and start there. Searching is tricky because you have to know a little about the API. But if you search add you can find Phaser.Scene#add (Members) and if you search group you can find Phaser.GameObjects.GameObjectFactory#group, maybe.

Also, if you can set up autocomplete/Intellisense in your editor it will help a lot.

2 Likes

Hi @samme
Thank you, I’ll check that site out.

In newdocs you may want to bookmark Scenes and start there.

I spent the last 12 hours reading the docs trying to figure how they work and eventually I kind of came up with a similar strategy.

I’ll write a couple of posts as replies, for future reference.

Cheers,

1/2
For whoever may be interested in the future, this how I made peace with the newdocs, long read, enjoy:

The top part of the webpage is the most important part:

Forget the searchbar, is not much useful unfortunately.

First try to figure out what the code is being applied to. E.g.:

there’s this line of code this.add.group() and I want to know more about it.

To what this is applied?

It’s highly probable that this is referring to the game Scene.
(for example if you’re inside a Class function extending Phaser.Scene), so click on “Scenes”:

and the King’s treasure opens:

now in this case we would click on add as this is the property/method that immediately follows this in the line code we’re analyzing, in our example is: this.add.group()

However it may happen, that we won’t find the property/method that we’re looking for. In this case: we may have got wrong the object to which the property/method itself is being applied to (we thought was Scene but is not). Maybe it’s not Scene, maybe it’s a GameObject, or maybe it’s some custom property/method we don’t know about. In almost all the cases for a newbie like me and maybe like you if you’re reading this, the latter is not the case.

Now if we click on the property/method we were looking for, in this case add, something very ugly will appear:

2/2
Continuation:

I say ugly because I think this is not what a user would have expected by clicking add to learn more about it. Personally I would have expected some information about what is add, how it works and so on.

This is no user-friendly information imho, anyway we can just go with the flow and click the weird link in the top without any information whatsoever on what it does, where it leads and why is there: [Phaser.GameObjects.GameObjectFactory]

something similar opens:

to the left we see that there are a bunch of terms called Members (what are they? Why are there? We’ll never know…) scrolling down the right-side window we see that there’s also a section called Methods (we know what methods are and we were expecting this, hurray! :tada:), sometimes there are also other sections.

In the top of the right-side window we see a definition of what a GameObjectFactory is. This is pretty much what would be expected if we were looking for something called GameObjectFactory: some description a code snippet and what parameters it takes. However, we were not looking for this, but Ok.

We are looking for the .group() method, so let’s find it in the left-side window, luckily it’s under the Methods section (oh yes), let’s click on it and something unexpected happens:
the right-side window scrolls down to where our method is. I personally don’t like this at all, but Ok.
Here we have our method:

Finally we know that the code we saw in this.add.group() does.
There’s a description, there are the accepted parameters that the method takes, some useful info about them, unfortunately not always is indicated what the default value is, which is bad, but Ok. Also another bad thing is that almost never there are code snippets, usually if there’s any, it’s in the top of the page.

This is just an example on how to search for this.add.group(). Since yesterday I successfully searched for many different properties, the most important part is to make some thinking and get right the first node of this tree. In this case we started from Scene but there are many others starting points.

What I do when I get lost is clicking on [Phaser] link in the top of the page:

This theoretically should take us to the root node of the documentation, and from there we can restart our search.

In the last 2 days I’ve encountered some duplicates with some discrepancies between them.

E.g. searching for “Tween”:
Looking for tweens I was trying to understand what are the properties that can be passed in the configuration object when creating a tween.
However in the docs there’s this division between TweenManager and Tween, again no information whatsoever on the differences.

So clicking on both of them (and branching our search tree) we end up to pages that are kind of similar but not quite. Eventually both paths lead to two pages “explaining” the configuaration object to pass to the tween:

  1. Phaser.Types.Tweens.TweenDataConfig - Phaser 3 API Documentation (beta)
  2. Phaser.Types.Tweens.TweenBuilderConfig - Phaser 3 API Documentation (beta)

Interestingly enough, nowhere is said that you can pass in the configuration object any property of the GameObject that you want to tween. Which is like the principal reason why we would use a tween. But Ok.

So apart from these situations I found myself quietly more productive using the documentation this way.

Hopefully this is helpful for some other newbie to PhaserJS like me that do not understand how the documentation of this library works.

Finally, my last opinion:

I think that if this is how PhaserJS development is going to be, I am not sure it’s going to survive that long, for the time needed for learning, understanding and debugging I have the feeling that it’s not worth it but for small side projects to share with friends, for real game development better learning something else (unity and unreal would be my guess).
There’s also an interesting trend: web games with React, I found several game experiments react-based out there in the wild and for how large the React community is and how user-friendly the documentation is, I bet sooner or later some React library for developing games is going to be successful.

Cheers, :slight_smile:

Hi, I found the “this.add.group” method pretty fast in the new phaser docs:

image

Great, unfortunately to me it didn’t give the same result:
image

I suppose the regex used for the searchbar is one of the things that can be improved of that webpage.

Saludos,

Yes, you have to remove the () from your expression. Maybe that search could be improved but as it is right now is performing very well.

Saludos!