
Once you created a prefab source and drag'n'dropped some prefabs in your scene, you are able to edit:
* A prefab object in the scene
* The source prefab object

## Opening the prefab editor
To edit prefabs, you can open the tool via **Tools -> Prefab Editor**.
This tool has 2 parts:
* Prefab hierarchy (on the left)
* Prefab live preview (on the right)

**Note:** Undo/redo is not yet supported and will be available in future version.

## Editing a prefab object in the scene
Once you have opened the prefab editor and selected a prefab in the scene graph, the tool will be updated and show you the selected prefab hierarchy and the live preview.
In the prefab hierarchy, you can delete the unwanted nodes (right click -> Remove).

Once you removed a node, **ONLY the selected prefab** will have its node removed from the scene. If you want to globally remove a node from all prefabs, you have to edit the source prefab object.

## Editing the source prefab object
In some cases, you would like to remove a node from the source prefab and apply the hierarchy modification on all already instantiated prefabs in the scene. To do that, just select the prefab asset in the assets panel.
Once selected, the prefab editor will be updated.

From now, you are editing the source prefab object. Once you remove a node from the prefab hierarchy, **ALL the instantiated prefab** in the scene will have their related node being removed from the scene.

## Demo
* 1 - Add some prefabs in scene
* 2 - Modify a prefab object in the scene
* 3 - Modify the source prefab object

<iframe width="560" height="315" src="https://www.youtube.com/embed/tVMI2cUC2lU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Future
This tool is the first version of the prefab editor and some features are incoming:
* Re-arrange hierarchy on the fly
* Add new nodes on the fly
* Instantiate a prefab via the code



## Introduction
Introduced in the version 3.1.0, a new tool is available to edit custom particle system sets.
More informations about particle systems set here: [https://doc.babylonjs.com/divingDeeper/particles/particle_system/particleHelper#particlesystemset](/divingDeeper/particles/particle_system/particleHelper#particlesystemset).

A set of particle systems is done to handle a collection of systems that can be played all together according to their properties (start time, end time etc.).
The Editor provides a tool named **Particle System Creator** that allows to create sets and add / edit / remove systems from these sets.

The workflow tends to:
* create a set
* add / edit / remove systems in set
* preview
* modify
* preview
* modify
* preview
* etc. until the set fits the wanted result

## Demo
Here is a live demo using the Particle System Creator tool:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FyCGTVNchQU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Creating a new set
To add a new set you'll edit using the **Particle System Creator** tool, you first have to add a new set in the assets library.
In the assets panel, a tab named **Particles** shows you all the available particle system sets in the current project.

To add a new set, just click the button **Add** and give it a name. Once confirmed, a new set is available.

Example, a set named **maki**:
![AddingNewSet](/img/extensions/Editor/CreatingParticleSystemSet/AddingNewSet.png)

To load the **Particle System Creator**, just double-click on the asset and the tool will open and load the selected particle system set.
![OpeningSet](/img/extensions/Editor/CreatingParticleSystemSet/OpeningSet.png)

## Using the timeline
The tool is set of two panels:
* The timeline
* The realtime preview

The timeline is used to visualize easily when systems will be started (in milliseconds) once the set has been started.
For each system in the timeline, you can drag'n'drop horizontally to change the delay (in milliseconds) until the system starts once the set has been started.

The overall timeline can also be drag'n'dropped to translate its content by drag'n'dropping the timeline's background.
Using the mouse scroll, you can zoom/unzoom the time scale of the timeline.

Example drag'n'dropping the **New Particle System** system to 2 seconds (2000 ms):
![UsingTimeline](/img/extensions/Editor/CreatingParticleSystemSet/UsingTimeline.png)

## Editing a system
Still using the timeline, when you click a system, the Editor's Inspector will be updated to show the selected particle system's properties.
When you modify a property, the result is applied in the realtime preview panel of the tool.

The set is saved automatically.

## Adding a new system to the set
By default, a new set is composed of a default system. Fortunately, you can add new systems to the set.
To add a new system, just click the tool's toolbar **Add System...**. A dialog will appear to ask the new system's name. Once confirmed, the timeline is updated and a new row is created with the new system.

You can now edit the new system.

Example by adding a new system named **awesome system**:
![AddNewSystem](/img/extensions/Editor/CreatingParticleSystemSet/AddNewSystem.png)

## Removing a system from the set
Hopefully, you can also remove a system from the set. Just right-click on the system in the timeline and select **Remove** in the context menu.

**Note: Undo/Redo is not yet supported in the tool, be careful before removing any system.**

![RemovingSystem](/img/extensions/Editor/CreatingParticleSystemSet/RemovingSystem.png)

## Previewing the set
Once you are happy with the current configuration of the set, you can preview the result by clicking on the tool's toolbar **Reset**.
This will stop all the active systems and restart the set.

Once started, the timeline's cursor (reading head) will show the current progress in time of the set. Each time a system is started, the system in timeline will be animated to visually notify that it started.

## Exporting a set
The current set being edited can be exported. It is typically useful to re-use later in other projects or to populate a collection of particle system sets.

To export a set and sanve on the local file system, just click the tool's toolbar **Export As...**.

![ExportAsToolbar](/img/extensions/Editor/CreatingParticleSystemSet/ExportAsToolbar.png)

A dialog will appear to ask if the exported set should embed the textures content:
* If yes, the set will consist of a `.json` file containing te set's configuration and the textures data embedded as base64
* If no, the set will consist of a `.json` file containing the set's configuration and a `textures` folder containing the textures.

Embedding textures means that the `.json` file will grow faster than separating to multiple files while separating to multiple files allows incremental loading that can be useful in some cases.

![ExportAs](/img/extensions/Editor/CreatingParticleSystemSet/ExportAs.png)

## Importing from a set
In case of you have already exported a set, it is possible to import systems from a saved set to the current set being modified in the **Particle System Creator** tool.
To import a set, just click the tool's toolbar **Import From...**. A dialog will appear to select the set's `.json` file to import.

![ImportFromToolbar](/img/extensions/Editor/CreatingParticleSystemSet/ImportFromToolbar.png)

Once confirmed, all the systems and textures will be imported to the current set.

## Loading from a preset
BabylonJS provides a list of already built sets: [https://doc.babylonjs.com/divingDeeper/particles/particle_system/particleHelper#available-effects](/divingDeeper/particles/particle_system/particleHelper#available-effects).
It's useful to start from these presets as they are also good examples to understand how to build a cool particle system set.

**Note: an internet connection is required to load the following presets.**

The **Particle System Creator** allows to download these presets using the tool's toolbar **Presets**. Once clicked, let's choose the wanted preset.
A dialog will appear to ask if you want to override the current set:
* Clicking "Yes" means that the current set will be cleared to add only the preset.
* Clicking "No" will just close the dialog and will not apply the preset.

![PresetOverride](/img/extensions/Editor/CreatingParticleSystemSet/PresetOverride.png)

PG: <Playground id="#X37LS1#3" title="Explosion" description="Example with the explosion preset"/>

![ExplosionPreset](/img/extensions/Editor/CreatingParticleSystemSet/ExplosionPreset.png)

## Adding a set to the current scene
Once the set is finalized, you can instantiate the set in the scene.
To instantiate a set in the scene, just drag'n'drop the asset from the assets panel to the scene preview. The set will be created with:
* An empty mesh containing all the particle systems. The mesh will have the set's name.
* All particle systems as children of the empty mesh.

**Note: editing a set using the tool will not edit the systems already instanced in the scene.**




In order to optimize and go faster in design, the editor allows you to create prefabs.
For instance, only meshes are supported by prefabs (no lights, no particle systems, etc.).

Before a tool such as a **Prefab Builder** is coming, you are able to create prefabs from an entire mesh hierarchy.
In the scene graph, you can select a mesh and right click it, then you have a menu called **Create Prefab**.
This menu is used as a shortcut to create a prefab asset starting from the selected source mesh with all its hierarchy.

Given this hierarchy:
1. Sphere
    1. Cube
    2. Plane

If you select the **Sphere** and click **Create Prefab**, the prefab asset will contain the sphere, the cube and the plane.
Else, if you select only the cube, the prefab asset will contain only the cube.
Etc. etc.

Once you have created a prefab, this prefab will appear in the assets panel (don't forget to select the Prefabs tab).
From now, you can drag'n'drop your prefab assets in the scene in order to add new prefab nodes in your scene.

In the scene graph, the hierarchy of a prefab will not be drawn as you cannot remove or clone a child of a prefab for instance.
Anyway, you can of course attach scripts, graphs etc. to your prefabs, including the children of a prefab.

## What about performances?
For instance, only meshes are supported by prefabs (no lights, no particle systems, etc.).
In fact, the meshes used for the prefabs are not cloned because it would need the engine to draw multiple times the same mesh and then increase draw calls.
To overcome the draw calls problem, the editor will just create **Mesh Instances** from source meshes you have selected.

From the given documentation (//doc.babylonjs.com/divingDeeper/mesh/copies/instances), instances can be explain like: **Instances are an excellent way to use hardware accelerated rendering to draw a huge number of identical meshes (let's imagine a forest or an army)**.

In conclusion, that means each mesh of a prefab will be rendered only one time but at several places on each render.

## Demo video
<iframe width="560" height="315" src="https://www.youtube.com/embed/cIT0NK0amBA" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>


Editing Prefabs

Opening the prefab editor

Editing a prefab object in the scene

Editing the source prefab object

Demo

Future