
## Running the project

Since Babylon.JS Editor v4.0.0-rc.3, it is possible to play directly the scene that is being edited in the Editor. This means the scene, as it is in the Editor, can be played directly including all scripts that are attached in the scene. This is particularly useful to test the scene itself and see if the scripts/components are working as intended.

## Playing the scene
At the middle of the tools toolbar, there are 2 buttons:
- Play / Stop (on the left) that generates the scene and plays the scene in the Editor's preview panel.
- Restart (on the right) that simply reloads the scene to be played.

![PlayStopButtons](/img/extensions/Editor/RunningProject/play-stop-buttons.png)

Once the play button is clicked, the scene being edited in the preview panel disappears to let the test scene being visible. Once the scene to test is loader, you can play the scene and see if all scripts are working as intented.

![PlayScene](/img/extensions/Editor/RunningProject/playing_scene.gif)

## Debugging the scene
All templates in the Editor offer the way to debug TypeScript code directly in VSCode. Just type F5 and place break points or "debugger;" in your code.

**Note: type F5 before running the scene as the remote debugger will not (sometimes) be able to attach the process created on the fly to run the scene.**

Once VScode is attached to the Editor, let's run the scene and debug your code using your favorite shortcuts and debugging tools:

![DebugScene](/img/extensions/Editor/RunningProject/debugging.gif)



## Running the application/game

Once all dependencies have been installed and the game built, the game be ran using 2 methods:
* In an integrated browser: simply opens a new window with the application/game rendered in it
* In the default browser of the user: will start a local webserver and open the default browser of the user (FireFox for example).

For developers, running the game in the default browser of the user will allow to easily open the devtools (using F12) and debug the game.

By default, the Editor will open the integrated browser. To have options drawn in the Editor, simply `right-click` the `Play` button in the toolbar and select `Play in my browser`:

![PlayApplicationOrGame](/img/extensions/Editor/RunningWorkspace/run.gif)

# Using custom webserver
In case of a custom webserver (for example using the dev server of Webpack or a completely handled webserver with custom APIs etc.), we'll have to manually open the browser pointing to the desired Url.

In fact, when clicking on the button `Play`, the editor will launch a basic webserver (that serves only files) to run the project. Once the basic webserver is started, the preview loads the Url `http://localhost:port/index.html`. That means, in case of a fully customized webserver/environment, that the preview feature should not be used anymore as the project is set to run in a fully customized environment.



Descriptions of how to run/debug workspaces/projects in Babylon.js Editor.



## Renaming A Scene

To rename a scene, just go to the `Assets Browser` panel and rename the scene file by double-clicking its name.

Once accepted, the following folders will be renamed:

- _`workspacePath`/projects/`oldname`_ -> _`workspacePath`/projects/`newname`_
- _`workspacePath`/scenes/`oldname`_ -> _`workspacePath`/scenes/`newname`_

Scene names must be unique. In case the folders already exists (in other words, if the scene already exists)
then the operation is aborted.

## Renaming paths in loaders in sources

Paths to scenes being loaded in the code must have their paths updated.

For example:

```typescript
const rootUrl = "./scenes/oldName/";

AppendSceneAsync(rootUrl + "scene.babylon", this.scene, () => {
  // ...
});
```

should be renamed to:

```typescript
const rootUrl = "./scenes/newName/";

AppendSceneAsync(rootUrl + "scene.babylon", this.scene, () => {
  // ...
});
```
