
## Creating Sprites The Easy Way

Babylon.js has a sprite system with many features and components. Babylon.js 4.2 introduced a new tool to make it simple and easy to use this powerful system: the Babylon.js Sprite Editor. Built right into [The Inspector](/legacy/inspector), it makes creating sprite managers and controlling sprites as easy as right-clicking.

<img src="/img/tools/spriteEditor.webp" title="Babylon.js Sprite Editor"/>

You can jump in and play around with it here: <Playground id="#G3Q7GR#1" title="Sprite Editor" description="Simple example of sprites using the sprite editor."/>

For an introductory look at the Sprite Editor, check out where it all started with this video:

<Youtube id="v02wuOGD0Sg"/>

When you're ready to learn more, head over to the [Introduction to Sprites Documentation](/features/featuresDeepDive/sprites/sprites_introduction) for more info.


## Using the Texture Inspector

The Texture Inspector is designed to help you debug your textures in Babylon.js. Users often load textures and find that they do not appear as expected. Unexpected results can be related to transparency, UVs, or unique texture types such as cubemaps. The Texture Inspector allows you to investigate issues and even fix them in-engine.

## How to Access

![Accessing the Inspector](/img/features/debuglayer/texture/access.webp)
The Texture Inspector can be accessed from the main inspector panel. Simply select a texture from the list and click the "edit" button underneath the texture preview.

## Properties

![Properties Bar](/img/features/debuglayer/texture/properties.webp)

### Dimensions

The width and height of the texture are shown in pixels. Editing these values and then clicking the dashed rectangle will resize the texture.

### Pixel Inspection

These values show the coordinates and RGBA values of the pixel under the cursor.

### MIP Levels

Adjust the MIP level you are viewing. Some textures do not have mipmaps. Clicking the down button will take you to lower levels of detail.

### Reset, Upload, Download

The reset button restores the texture to its original state before it was opened in the inspector. The upload button allows you to upload a local file (.png, .jpeg, .dds, and .env are currently supported). The download button saves the texture to your local machine using the name displayed in the bottom left.

### Faces (Cubemaps only)

When inspecting a cubemap, you can click through the 6 buttons to view the faces of the cubemap.

## Tools

![Toolbar](/img/features/debuglayer/texture/tools.webp)

### Rectangle Select

Selects a region of the texture. When you have a region selected, edits will only be applied to that region. Press Escape to clear the selection.

### Paintbrush

Paints the active color onto the texture. The size slider controls the width of the brush. The paintbrush will always apply the exact active RGBA value, rather than blending with what's currently on the canvas.

### Eyedropper

Sets the active color to the RGBA value of clicked pixels.

### Floodfill

Floods the entire texture or selected region with the active color and alpha.

### Active Color

Displays the active color and alpha, which are used by other tools. Clicking opens a panel which allows precise manipulation of the RGBA values.

## Channels

![Channel Pane](/img/features/debuglayer/texture/channels.webp)
This pane is used to control the RGBA channels. Clicking the eye icons on the left will hide individual channels, allowing you to narrow your focus to particular channels. Clicking the letter on the right will lock a channel, meaning that any edits you perform will not affect that channel.

## Shortcuts

-   Mousewheel and the +/- buttons allow you to zoom in and out
-   The middle mouse button allows you to pan across the texture
-   Control+A selects the entire texture
-   Escape deselects everything
-   Control+S saves the texture to your local machine
-   Control+R resets the texture to its original state



## Creating Particles The Easy Way

Babylon.js has a feature-rich and powerful particle system. Babylon.js 4.2 introduced a new tool to make it simple to use: the Babylon.js Particle Editor. Built right into [The Inspector](/legacy/inspector), it makes creating particle systems as easy as right-clicking. From there, you can save your particle system to a [snippet server for loading](/features/featuresDeepDive/particles/particle_system/particle_snippets), or save it to be [loaded from a local `.json` file](/features/featuresDeepDive/particles/particle_system/particles_loadFromFile).

<img src="/img/tools/particleEditor.webp" title="Babylon.js Particle Editor"/>

You can jump in and play around with it here: <Playground id="#M7MYT8#11" title="Particle Editor" description="Simple example of particles using the particle editor."/>

For an introductory look at the Particle Editor, check out where it all started with these videos:

<Youtube id="BPJ0SZQnOXk"/>

<Youtube id="HgcUkTZmWyA"/>

<Youtube id="mKTD2P1lF9Q"/>

When you're ready to learn more about particles and particle systems, head over to the [Particle System Documentation](/features/featuresDeepDive/particles/particle_system).

The Sprite Editor

Creating Sprites The Easy Way