Merge branch 'develop'

CHANGELOG.MD

@@ -1,5 +1,13 @@
 # Change Log
 
+## v3.35.0 - Oct 14, 2022
+
+* Updates the "Code Editor" section.
+* Adds the new "Adding children to a prefab instance" section.
+* Update Children properties section.
+* Add the Arcade physics sections.
+* Group the game object sections in a general "Game Object types" section.
+
 ## v3.34.0 - Aug 12, 2022
 
 * Adds the polygon chapter.

_header.rst

@@ -78,9 +78,6 @@
 .. |UserComponentsCompiler| replace:: User Components compiler
 .. _UserComponentsCompiler: ../scene-editor/user-components-compiler.html
 
-.. |JavaScriptEditor| replace:: JavaScript Editor
-.. _JavaScriptEditor: ../code-editor/js-editor.html
-
 .. |CodeEditor| replace:: Code Editor
 .. _CodeEditor: ../code-editor/index.html
 

asset-pack-editor/import-from-blocks-view.rst

@@ -6,7 +6,7 @@ Importing from the Blocks view
 
 The |BlocksView|_ is a general-purpose view that connects with the active editor and provides the "blocks" needed to build the objects of the editor.
 
-When the |AssetPackEditor|_ is active, the `Blocks view`_ shows the files that are candidates to be imported. A file is a candidate to be imported if:
+When the |AssetPackEditor|_ is active, the |BlocksView|_ shows the files that are candidates to be imported. A file is a candidate to be imported if:
 
 * The file belongs to the folder, or sub-folder, of the |AssetPackFile|_ that is the input of the editor (unless you disable this restriction, as discussed at the end of this section).
 

code-editor/index.rst

@@ -8,18 +8,15 @@ Code Editor
 .. toctree::
 
     vscode-compatibility
-    js-editor
 
 |PhaserEditor|_ is focused mainly on provide design tools. You can code your game using advanced third-party editors. 
 
 You can use any coding editor, but we recommend |vscode|_. Actually, the projects generated by the IDE are full compatible with that editor and includes the configuration files.
 
-However, we included code editors inside |PhaserEditor|_ for two reasons:
+However, we included basic code editors inside |PhaserEditor|_ so you can do a quick preview or modification of the code.
 
-* You can do a quick preview of the code.
+These editors are based based in |codemirror|_, and have very basic features. 
 
-* If you are making a first prototype with JavaScript.
+I previous versions of the editor, we included an advanced JavaScript code editor based on the VS Code Monaco library. However, we removed it in v3.35.0 of the editor. We encourage you using advanced editors like VS Code.
 
-In |core|_, the code editing editors are based in |codemirror|_, and have very basic features. In |allInOne|_, the code editors are based on the |MonacoEditor|_. It is the same component used by |vscode|_, and is good enough for coding plain JavaScript games.
-
-The `JavaScript editor <js-editor.html>`_ has more features, allowing |PhaserAPI|_ auto-completion, cross-file auto-completion and more. 
+Phaser Editor 2D runs on the desktop or in the cloud, and you can find excelent code editors in both environments. Especially, those editors based on Visual Studio Code. Learn how Phaser Editor 2D integrates with Visual Studio Code in the `next section <vscode-compatibility.html>`_.

code-editor/vscode-compatibility.rst

@@ -4,15 +4,15 @@
 Visual Studio Code compatibility
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-The |vscode|_ editor is prefect to write the code of the |PhaserEditor|_ games. First, because it is an awesome editor. Second, because the projects created by |PhaserEditor|_ contains the files needed by |vscode|_ to provide a good coding experience with Phaser_.
+The |vscode|_ editor is prefect for writing the code of the |PhaserEditor|_ games. First, t is extremely popular and powerful. Second, cause the projects created by |PhaserEditor|_ contains the files needed by |vscode|_ to provide a good coding experience with Phaser_.
 
 Project structure
 `````````````````
 
 The JavaScript project templates include these files:
 
 .. image:: ../images/code-editor-vscode-js-05012020.webp
-    :alt: JavaScript project.
+ :alt: JavaScript project.
 
 #. The file ``lib/phaser.js``. It is the Phaser_ runtime.
 
@@ -25,4 +25,6 @@ The JavaScript project templates include these files:
 Code Server
 ```````````
 
-If you are using a remote instance of |PhaserEditor|_, you can try `Code Server <https://github.com/cdr/code-server/>`_. It allows to run VS Code in the same |PhaserEditor|_ server and edit the game code in your local browser.
+If you are using a remote instance of |PhaserEditor|_, you can try `Code Server <https://github.com/cdr/code-server/>`_. It allows to run VS Code in the same |PhaserEditor|_ server and edit the game code in your local browser.
+
+Also, you can use cloud services like GitHub Code Spaces or Gitpod. In both cases you can install Phaser Editor 2D Core as a project dependency and run it alongside with VS Code.

conf.py

@@ -56,9 +56,9 @@
 # built documents.
 #
 # The short X.Y version.
-version = u'v3.34.0'
+version = u'v3.35.0'
 # The full version, including alpha/beta/rc tags.
-release = u'v3.34.0'
+release = u'v3.35.0'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

misc/plugins.rst

@@ -22,7 +22,7 @@ The editor's built-in plugins are included in the installation of the editor. Th
     $ PhaserEditor2D -project "/path/to/project" -editor "path/to/another/editor"
 
 Global plugins
-=============
+==============
 
 You can install plugins globally for all installations of the editor. Just place the plugins in the ``<user-home>/.phasereditor2d/plugins`` folder.
 

misc/update.rst

@@ -6,8 +6,6 @@ Updating the editor
 
 When you start the server, it connects with the updates site in Internet and checks if there is a new version. If there is a new version then it shows a message with the version number and some headlines of the release notes.
 
-Older versions of the editor provided an automatic update process via the ``-update`` flag, but it was removed since the introduction of |core|_ and |allInOne|_.
-
 For |core|_, we recommend installing/updating the editor via the `phasereditor2d-launcher <https://www.npmjs.com/package/phasereditor2d-launcher>`_ NPM package.
 
 The |allInOne|_ distribution shows a message when there is a new update, but you should download the new version manually.

scene-editor/arcade-physics-add-body.rst

@@ -0,0 +1,35 @@
+.. include:: ../_header.rst
+
+Enabling the Arcade physics on a game object
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+You can enable an Arcade physics body in any game object:
+
+* Select the object and open the context menu.
+* In the **Arcade Physics** menu, select the **Add Body** option.
+
+      .. image:: ../images/arcade-physics-add-body-20221005.webp
+        :alt: Add Arcade body to an object
+
+* Press the ``B`` key for `editing the body's offset & size <./manipulation-tools.html#arcade-physics-body-tool>`_:
+
+  .. image:: ../images/arcade-physics-edit-body-tool.webp
+    :alt: Edit the body's size with the tool.
+
+* Or edit any other body's property in the Inspector view:
+
+  .. image:: ../images/arcade-physics-edit-body-inspector.webp
+    :alt: Edit the body's properties in the Inspector view.
+
+You can remove the body of the object. In the same **Arcade Physics**, select the **Remove Body** option. This option is only available if the selected object is not a `built-in Arcade Image or Arcade Sprite <./arcade-physics-add-object.html>`_ object.
+
+When you add a physics body to the object, the code for creating the object is generated like this:
+
+.. code::
+        
+        const gorilla = this.add.image(379, 271, "gorilla")
+            as Phaser.GameObjects.Image & { body: Phaser.Physics.Arcade.Body };
+        this.physics.add.existing(gorilla, false);
+
+Notice the ``as Phaser.GameObjects.Image & { body: Phaser.Physics.Arcade.Body }`` expression. It is telling to the TypeScript compiler the object created by the the ``image(...)`` method is an ``Image`` but also has an Arcade body. That annotation is required for generating valid TypeScript code.
+

scene-editor/arcade-physics-add-object.rst

@@ -0,0 +1,30 @@
+.. include:: ../_header.rst
+
+Creating Arcade Image and Sprite objects
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The simplest way of creating an object with an Arcade physics body is by adding a `Phaser.Physics.Arcade.Image <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Image>`_ or `Phaser.Physics.Arcade.Sprite <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Sprite>`_ object to the scene. Both types are available in the Arcade section of the |BlocksView|_:
+
+.. image:: ../images/arcade-add-image-1-20221005.webp
+  :alt: Drop arcade image from blocks view.
+
+When you drop it to the scene, it shows a dialog for selecting a texture:
+
+.. image:: ../images/arcade-add-image-2-20221005.webp
+  :alt: Select the image's texture.
+
+
+.. image:: ../images/arcade-add-image-3-20221005.webp
+  :alt: A physics object in the scene.
+
+Arcade game objects are generated in code with the `image <https://newdocs.phaser.io/docs/3.54.0/Phaser.Physics.Arcade.Factory#image>`_ and `sprite <https://newdocs.phaser.io/docs/3.54.0/Phaser.Physics.Arcade.Factory#sprite>`_ factories of the Arcade physics system:
+
+.. code::
+    
+    // gorilla
+    const gorilla = this.physics.add.image(310, 313, "gorilla");
+    gorilla.body.setOffset(216, 58);
+    gorilla.body.setSize(186, 365, false);
+
+
+The **Arcade Image** and **Arcade Sprite** game object types provide helper methods for configuring the physics body. However, you can `enable an Arcade physics body in any other game object <arcade-physics-add-body.html>`_.

scene-editor/arcade-physics-collider.rst

@@ -0,0 +1,51 @@
+.. include:: ../_header.rst
+
+Arcade physics collider
+~~~~~~~~~~~~~~~~~~~~~~~
+
+A `Collider <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider>`_ is an object for checking collisions between multiple physics objects. The |SceneEditor|_ allows creating a collider by dragging it from the |BlocksView|_ to the scene:
+
+.. image:: ../images/arcade-physics-add-collider-1-20221011.webp
+ :alt: Adding a collider.
+
+The collider objects are shown in the **Arcade** section of the |OutlineView|_:
+
+.. image:: ../images/arcade-physics-collider-outline-20221011.webp
+ :alt: Collider in the outline.
+
+When you select it, it shows the collider properties in the |InspectorView|_. Each parameter corresponds to a parameter in the `Collider <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider>`_ constructor:
+
+.. image:: ../images/arcade-physics-collider-properties-20221011.webp
+ :alt: Collider parameters.
+
+The properties are:
+
+* `overlapOnly <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider#overlapOnly>`_
+* `object1 <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider#onject1>`_
+* `object2 <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider#object2>`_
+* `collideCallback <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider#collideCallback>`_
+* `processCallback <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider#processCallback>`_
+* `callbackContext <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Collider#callbackContext>`_
+
+The |SceneCompiler|_ verbatim-compies the values of the parameters (excepting **overlapOnly**) into the code. So you can write any JavaScript valid expression as value for the parameter.
+
+In the case of the **Object 1** and **Object 2** parameters, you have the option of selecting the variable name of an object of the scene:
+
+.. image:: ../images/arcade-physics-collider-object-dialog-20221011.webp
+ :alt: Select a variable name of an object of the scene.
+
+In addition to objects, you can reference an `Object List <./object-list.html>`_.
+
+So, the collider object is generated in code using the `collider <https://newdocs.phaser.io/docs/3.54.0/Phaser.Physics.Arcade.Factory#collider>`_ or `overlap <https://newdocs.phaser.io/docs/3.54.0/Phaser.Physics.Arcade.Factory#overlap>`_ methods of the Arcade `Factory <https://newdocs.phaser.io/docs/3.54.0/Phaser.Physics.Arcade.Factory>`_ class. Something like this:
+
+.. code::
+
+ const collider_stone = this.physics.add.collider(gorilla, stone, this.onCollideGorillaWithStone, undefined, this);
+
+Or, if the **Overlap Only** parameter is selected:
+
+.. code::
+
+ const collider_stone = this.physics.add.overlap(gorilla, stone, this.onCollideGorillaWithStone, undefined, this);
+
+In addition to the Collider properties, it contains the `Variable properties <./variable-properties.html>`_.

scene-editor/arcade-physics-properties.rst

@@ -0,0 +1,79 @@
+.. include:: ../_header.rst
+
+Arcade physics body properties
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. contents::
+
+When you select an object, the |InspectorView|_ shows the editors for editing the Arcade body of the object.
+
+The properties are grouped by sections:
+
+Arcade Physics Body section
+```````````````````````````
+
+It allows changing the type of body to `dynamic <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body>`_ or `static <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.StaticBody>`_. And set the `enable flag <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#enable>`_:
+
+.. image:: ../images/arcade-physics-body-properties-20221006.webp
+  :alt: Arcade Physics Body section.
+
+Arcade Physics Body Geometry section
+````````````````````````````````````
+
+This section contains the properties for setting the offset & size of the body. You can select the body's shape in the **Geometry** parameter. If the body is rectangular, you can change its `Size <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#setSize>`_. If the body is circular, you can change its `Radius <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#setCircle>`_. In both cases, you can change the `Offset <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#setOffset>`_.
+
+.. image:: ../images/arcade-physics-body-geometry-properties-20221006.webp
+  :alt: Arcade Physics Body Geometry section.
+
+Another way of changing the body's offset and size is activating the `Arcade Physics Body Tool <./manipulation-tools.html#arcade-physics-body-tool.html>`_.
+
+Also, in the scene context menu, in the **Arcade Physics**, there are the options **Center Body** and **Resize Body To Object Size**. Those commands are also available in the three-dots menu of the properties section:
+
+.. image:: ../images/arcade-physics-body-geaometry-properties-menu-20221006.webp
+  :alt: Arcade Physics Body Geometry section's menu.
+
+The **Center Arcade Body** commands places the body at the center of the object. The **Resize Body To Object Size** command centers the body and resizes it to fill the whole object. If the body is circular, it changes the radius to fill the object's width.
+
+
+Arcade Physics Body Movement section
+````````````````````````````````````
+
+This sections contains all body's properties related to the movement:
+
+* `Move <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#moves>`_
+* `Velocity <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#velocity>`_
+* `Max Velocity <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#maxVelocity>`_
+* `Max Speed <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#maxSpeed>`_
+* `Allow Gravity <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#allowGravity>`_
+* `Gravity <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#gravity>`_
+* `Acceleration <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#acceleration>`_
+* `Use Damping <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#useDamping>`_
+* `Allow Drag <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#allowDrag>`_
+* `Drag <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#drag>`_
+* `Allow Rotation <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#allowRotation>`_
+* `Angular Velocity <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#angularVelocity>`_
+* `Angular Acceleration <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#angularAcceleration>`_
+* `Angular Drag <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#angularDrag>`_
+* `Max Angular <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#maxAngular>`_
+
+.. image:: ../images/arcade-physics-body-movement-properties-20221006.webp
+  :alt: Arcade Physics Body Movement section.
+
+Arcade Physics Body Collision section
+`````````````````````````````````````
+
+This section contains the body's properties related to collision:
+
+* `Pushable <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#pushable>`_
+* `Immovable <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#immovable>`_
+* `Mass <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#mass>`_
+* `Bounce <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#bounce>`_
+* `Friction <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#friction>`_
+* `Overlap <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#overlapX>`_
+* `OverlapR <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#overlapR>`_
+* `Collide World Bounds <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#collideWorldBounds>`_
+* `Check Collision <https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#checkCollision>`_
+
+
+.. image:: ../images/arcade-physics-body-collision-properties-20221006.webp
+  :alt: Arcade Physics Body Collision properties.