# How to use the Phaser newdocs?

**URL:** <https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635>\
**Category:** Phaser 3\
**Created:** [May 20, 2021, 7:40pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635 "2021-05-20T19:40:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thegary/32/5191_2.png) [@TheGary](https://phaser.discourse.group/u/TheGary)\
**Post date:** [May 20, 2021, 7:40pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/1 "2021-05-20T19:40:07Z")

</div>

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](http://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](https://developer.mozilla.org/en-US/docs/Web) 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`"

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/18b38d8b43947c15670bb6b28dbfee4d0545ebeb.png)

case: "searching for `.group()`"  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9ea058dee995443ba074156b00f4202c93509528.png)

case: "searching for `.group`"

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/bfc7bb7e9e0e6755de4e210f71ba2b80053a722b.png)

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

Any reply will be very much appreciated. 🙂

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 20, 2021, 8:45pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/2 "2021-05-20T20:45:43Z")

</div>

You may want to try **API Chains** in [Phaser Help Center](https://helpcenter.phasereditor2d.com) as it can identify expressions like `this.add.group()`.

In newdocs you may want to bookmark [Scenes](https://newdocs.phaser.io/docs/3.54.0/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](https://newdocs.phaser.io/docs/3.54.0/Phaser.Scene#add) (Members) and if you search _group_ you can find [Phaser.GameObjects.GameObjectFactory#group](https://newdocs.phaser.io/docs/3.54.0/Phaser.GameObjects.GameObjectFactory#group), maybe.

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

---

<div class="post-metadata">

**Author:** ![TheGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thegary/32/5191_2.png) [@TheGary](https://phaser.discourse.group/u/TheGary)\
**Post date:** [May 21, 2021, 9:21pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/3 "2021-05-21T21:21:36Z")

</div>

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

> In newdocs you may want to bookmark [Scenes](https://newdocs.phaser.io/docs/3.54.0/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,

---

<div class="post-metadata">

**Author:** ![TheGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thegary/32/5191_2.png) [@TheGary](https://phaser.discourse.group/u/TheGary)\
**Post date:** [May 21, 2021, 9:22pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/4 "2021-05-21T21:22:21Z")

</div>

1/2  
For whoever may be interested in the future, this how I made peace with the [newdocs](http://newdocs.phaser.io/), long read, enjoy:

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

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b05318cf98d9aeb3ec1707d95b7d485c53ed0ca0.jpeg)

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`”:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/ca239f83ed9ef01a73eae9792333d747b6f72978.jpeg)

and the King’s treasure opens:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/4284c16582c9319dd7e17e15182d19dd5176b30c.png)

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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/21b1c06f56822c3a2698032c512a53a43686e9bb.png)

---

<div class="post-metadata">

**Author:** ![TheGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thegary/32/5191_2.png) [@TheGary](https://phaser.discourse.group/u/TheGary)\
**Post date:** [May 21, 2021, 9:23pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/5 "2021-05-21T21:23:13Z")

</div>

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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/489397ce85a9152b391908e56d8e6292fd945655.png)

to the left we see that there are a bunch of terms called `Members` (what are they? Why are there? [We’ll never know…](https://i.kym-cdn.com/photos/images/newsfeed/001/422/274/627.png)) 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! 🎉), 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](https://media.tenor.com/images/537f8081464118674136ed777d16d622/tenor.gif)), 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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b8d5263f7909ffdf34d4ff979c11b147c30841fe.png)

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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5911afa6d719c1b3389daeb85799c7a7eb95b45e.png)

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.

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/ed9b2e375451eb227363f08c336fb7c9d7bb02f8.png)

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)](https://newdocs.phaser.io/docs/3.54.0/Phaser.Types.Tweens.TweenDataConfig)
2. [Phaser.Types.Tweens.TweenBuilderConfig - Phaser 3 API Documentation (beta)](https://newdocs.phaser.io/docs/3.52.0/Phaser.Types.Tweens.TweenBuilderConfig)

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, 🙂

---

<div class="post-metadata">

**Author:** ![PhaserEditor2D](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/phasereditor2d/32/71_2.png) [@PhaserEditor2D](https://phaser.discourse.group/u/PhaserEditor2D)\
**Post date:** [May 22, 2021, 2:10am UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/6 "2021-05-22T02:10:02Z")

</div>

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

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/551a8176cf50b2b6837903e980145d9ba72dc37c.png)

---

<div class="post-metadata">

**Author:** ![TheGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thegary/32/5191_2.png) [@TheGary](https://phaser.discourse.group/u/TheGary)\
**Post date:** [May 22, 2021, 6:24pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/7 "2021-05-22T18:24:23Z")

</div>

Great, unfortunately to me it didn’t give the same result:  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f780ab4457ac764e51720f85f1893a720dc109ad.png)

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

Saludos,

---

<div class="post-metadata">

**Author:** ![PhaserEditor2D](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/phasereditor2d/32/71_2.png) [@PhaserEditor2D](https://phaser.discourse.group/u/PhaserEditor2D)\
**Post date:** [May 22, 2021, 6:37pm UTC](https://phaser.discourse.group/t/how-to-use-the-phaser-newdocs/9635/8 "2021-05-22T18:37:15Z")

</div>

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!
