# TextureAtlas

Class · extends [`EventHandler`](https://api.playcanvas.com/engine/classes/EventHandler.md) · category: Graphics

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/scene/texture-atlas.js#L15

A TextureAtlas contains a number of frames from a texture. Each frame defines a region in a
texture. The TextureAtlas is referenced by [Sprite](https://api.playcanvas.com/engine/classes/Sprite.md)s.

## Constructors

### constructor

```ts
new TextureAtlas()
```

Create a new TextureAtlas instance.

**Example**

```ts
const atlas = new TextureAtlas();
atlas.frames = {
    '0': {
        // rect has u, v, width and height in pixels
        rect: new Vec4(0, 0, 256, 256),
        // pivot has x, y values between 0-1 which define the point
        // within the frame around which rotation and scale is calculated
        pivot: new Vec2(0.5, 0.5),
        // border has left, bottom, right and top in pixels defining regions for 9-slicing
        border: new Vec4(5, 5, 5, 5)
    },
    '1': {
        rect: new Vec4(256, 0, 256, 256),
        pivot: new Vec2(0.5, 0.5),
        border: new Vec4(5, 5, 5, 5)
    }
};
```

## Accessors

### frames

```ts
get frames(): any
set frames(value: any)
```

Gets the frames which define portions of the texture atlas.

### texture

```ts
get texture(): Texture
set texture(value: Texture)
```

Gets the texture used by the atlas.

## Methods

### destroy

```ts
destroy(): void
```

Free up the underlying texture owned by the atlas.

### removeFrame

```ts
removeFrame(key: string): void
```

Removes a frame from the texture atlas.

**Parameters**

- `key` (`string`): The key of the frame.

**Example**

```ts
atlas.removeFrame('1');
```

### setFrame

```ts
setFrame(key: string, data: object): void
```

Set a new frame in the texture atlas.

**Parameters**

- `key` (`string`): The key of the frame.
- `data` (`object`): The properties of the frame.
    - `data.border` ([`Vec4`](https://api.playcanvas.com/engine/classes/Vec4.md)): The border of the frame for 9-slicing. Values are ordered as
      follows: left, bottom, right, top border in pixels.
    - `data.pivot` ([`Vec2`](https://api.playcanvas.com/engine/classes/Vec2.md)): The pivot of the frame - values are between 0-1.
    - `data.rect` ([`Vec4`](https://api.playcanvas.com/engine/classes/Vec4.md)): The u, v, width, height properties of the frame in pixels.

**Example**

```ts
atlas.setFrame('1', {
    rect: new Vec4(0, 0, 128, 128),
    pivot: new Vec2(0.5, 0.5),
    border: new Vec4(5, 5, 5, 5)
});
```

## Inherited from [EventHandler](https://api.playcanvas.com/engine/classes/EventHandler.md)

- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`