# SpriteComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<SpriteComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/eb0b003e898525ad5fc19d8cd93d10dd1be35061/src/components/sprite-component.ts#L29

The SpriteComponentElement interface provides properties and methods for manipulating
[`<pc-sprite>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-sprite/) elements.
The SpriteComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

A `simple` sprite (the default) renders one frame of the sprite `asset` it names. An
`animated` sprite plays its `<pc-sprite-clip>` children instead, each a named clip with a
sprite asset of its own: the `clip` attribute names the one that plays, and changing it
switches playback. Sprites are unlit, and render as transparent geometry in the world layer.

Engine component: [SpriteComponent](https://api.playcanvas.com/engine/classes/SpriteComponent.html) (`sprite`).

**elementSummary** The `<pc-sprite>` element renders a 2D sprite at its entity: one frame of a
sprite asset, or (with `type="animated"`) the `<pc-sprite-clip>` children it plays. Must be a
child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### asset

```ts
get asset(): string
set asset(value: string)
```

Gets the id of the `pc-asset` of the sprite to render (`simple` sprites only).

### clip

```ts
get clip(): string
set clip(value: string)
```

Gets the name of the clip to play (`animated` sprites only).

### color

```ts
get color(): Color
set color(value: Color)
```

Gets the color the sprite is tinted with.

### component

```ts
get component(): SpriteComponent | null
```

Gets the underlying PlayCanvas sprite component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### flipX

```ts
get flipX(): boolean
set flipX(value: boolean)
```

Gets whether the sprite is mirrored horizontally.

### flipY

```ts
get flipY(): boolean
set flipY(value: boolean)
```

Gets whether the sprite is mirrored vertically.

### frame

```ts
get frame(): number
set frame(value: number)
```

Gets the index of the frame to render, as last set - on an animated sprite the playing clip
moves on from it, so `component.frame` is the frame on screen.

### height

```ts
get height(): number
set height(value: number)
```

Gets the height of the sprite in world units, used only when its sprite asset's
`render-mode` is `sliced` or `tiled`.

### opacity

```ts
get opacity(): number
set opacity(value: number)
```

Gets the opacity of the sprite.

### speed

```ts
get speed(): number
set speed(value: number)
```

Gets the playback speed multiplier applied to every clip.

### type

```ts
get type(): "simple" | "animated"
set type(value: "simple" | "animated")
```

Gets the type of the sprite: `simple` or `animated`.

### width

```ts
get width(): number
set width(value: number)
```

Gets the width of the sprite in world units, used only when its sprite asset's
`render-mode` is `sliced` or `tiled`.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties. The element's `enabled` state is not among them:
the base class adds it when it creates the component.

**Returns** `Record<string, any>`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<SpriteComponentElement>`