Merge branch 'develop'

Author: PhaserEditor2D

CHANGELOG.MD

@@ -1,5 +1,14 @@
 # Change Log
 
+## v3.60.3 - Apr 27
+
+* Get latest version.
+
+## v3.60.2 - Apr 26
+
+* Adds a new chapter: Scene Editor - Miscellaneous.
+* Adds chapter for integrating Visual Studio Code with Phaser Editor 2D.
+
 ## v3.60.1 - Apr 21
 
 * Get latest version.

code-editor/vscode-compatibility.rst

@@ -27,4 +27,13 @@ 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.
 
-Also, you can use cloud services like GitHub Codespace or Gitpod. In both cases you can install Phaser Editor 2D Core as a project dependency and run it alongside with VS Code.
+Also, you can use cloud services like GitHub Codespace or Gitpod. In both cases you can install Phaser Editor 2D Core as a project dependency and run it alongside with VS Code.
+
+Visual Studio Code & Phaser Editor 2D integration
+`````````````````````````````````````````````````
+
+|PhaserEditor|_ provides a few features for providing a better integration is |vscode|_:
+
+* The **Open Visual Studio Code** command ``(Ctrl+Alt+U)`` opens the project's folder in |vscode|_.
+* The **Open Output File in Visual Studio Code** ``(Ctrl+Alt+E)`` command is available in the context of a |SceneEditor|_, and opens the output scene's source file (JavaScript or TypeScript) in |vscode|_.
+* The **Enable/Disable Open Code File In External Editor** commands enable or disable the external editor (Visual Studio Code by default) as the default option for opening code files (JavaScript, TypeScript, CSS, HTML).

conf.py

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

scene-editor/index.rst

@@ -23,6 +23,7 @@ Scene Editor
     manipulation-tools
     layout-tools
     scene-compiler
+    misc
     troubleshooting
 
 The |SceneEditor|_ is the most important editor of the IDE, it provides the visual tools to create scenes (or levels).

scene-editor/misc-pixel-art.rst

@@ -0,0 +1,6 @@
+.. include:: ../_header.rst
+
+Enabling pixel art rendering
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The SceneEditor_ runs a Phaser game for rendering the scene. By default, Phaser_ renders the scene with antialiasing disabled, which is the optimal configuration for pixel-art based games. If your game is not using pixel art, then you can disable antialiasing by running the command **Disable Pixel Art Rendering**. You can enable it back with the command **Disable Pixel Art Rendering**. Once you run any of these commands, you have to reload (``Ctrl+R``) the editor.

scene-editor/misc-preview-scene.rst

@@ -0,0 +1,33 @@
+.. include:: ../_header.rst
+
+Preview active scene
+~~~~~~~~~~~~~~~~~~~~
+
+The |SceneEditor|_ runs a Phaser scene inside it, which means, it shows you a pixel-perfect image of the scene you are creating. But sometimes you want to see the scene in action, with the physics, the inputs, the animations. For this purpose there is a trick: the **Preview Scene** (``Ctrl+0``) command.
+
+This command opens your game in the default (or configured) browser but adds the `start` parameter to the URL, and sets the name of the current scene as value. If the current scene is a prefab, then it uses the last valid scene.
+
+For example, if you are editing the **LevelCompleted** scene, and you run the **Preview Scene** command, the editor launches the browser and opens the URL: 
+
+``http://localhost:<port>/start=LevelCompleted``
+
+Now, in the code of your game, you have to read the value of the `start` parameter and start the scene with the same name. This is something you have to code manually, however, the built-in Phaser Editor 2D project templates contain the code for reading the ``start`` parameter. It looks like this:
+
+.. code::
+
+    if (process.env.NODE_ENV === "development") {
+
+        const start = new URLSearchParams(location.search).get("start");
+
+        if (start) {
+
+            console.log(`Development: jump to ${start}`);
+            this.scene.start(start);
+            return;
+        }
+    }
+
+The ``process.env.NODE_ENV === "development"`` expression is replaced by webpack_ at compile time, by ``true`` or ``false`` in regarding you are working on a development or production build.
+
+You can place that code in the **Preloader** scene or any other scene after setting up a consistent game state.
+

scene-editor/misc.rst

@@ -0,0 +1,10 @@
+.. include:: ../_header.rst
+
+Miscellaneous
+-------------
+
+
+.. toctree::
+
+    misc-preview-scene
+    misc-pixel-art