# ScreenComponent

Class · extends [`Component`](https://api.playcanvas.com/engine/classes/Component.md) · category: User Interface

Source: https://github.com/playcanvas/engine/blob/970d89f6d3bc6667f4e1f88153abd6e7e82ed52c/src/framework/components/screen/component.js#L56

A ScreenComponent defines a rectangular area where user interfaces can be constructed. Screens
can either be 2D (screen space) or 3D (world space) - see [screenSpace](https://api.playcanvas.com/engine/classes/ScreenComponent.md#screenspace). It is possible to
create an [Entity](https://api.playcanvas.com/engine/classes/Entity.md) hierarchy underneath an Entity with a ScreenComponent to create complex
user interfaces using the following components:

- [ButtonComponent](https://api.playcanvas.com/engine/classes/ButtonComponent.md)
- [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md)
- [LayoutChildComponent](https://api.playcanvas.com/engine/classes/LayoutChildComponent.md)
- [LayoutGroupComponent](https://api.playcanvas.com/engine/classes/LayoutGroupComponent.md)
- [ScrollbarComponent](https://api.playcanvas.com/engine/classes/ScrollbarComponent.md)
- [ScrollViewComponent](https://api.playcanvas.com/engine/classes/ScrollViewComponent.md)

You should never need to use the ScreenComponent constructor directly. To add a ScreenComponent
to an [Entity](https://api.playcanvas.com/engine/classes/Entity.md), use [Entity#addComponent](https://api.playcanvas.com/engine/classes/Entity.md#addcomponent):

```javascript
const entity = new Entity();
entity.addComponent('screen', {
    referenceResolution: new Vec2(1280, 720),
    screenSpace: false
});
```

Once the ScreenComponent is added to the entity, you can access it via the [Entity#screen](https://api.playcanvas.com/engine/classes/Entity.md#screen)
property:

```javascript
entity.screen.scaleBlend = 0.6; // Set the screen's scale blend to 0.6

console.log(entity.screen.scaleBlend); // Get the screen's scale blend and print it
```

Relevant Engine API examples:

- [Screen Space Screen](https://playcanvas.github.io/#/user-interface/screen-scaling)
- [World Space Screen](https://playcanvas.github.io/#/user-interface/world-ui)

## Properties

### cull

```ts
cull: boolean = false
```

If true, then elements inside this screen will not be rendered when outside of the screen
(only valid when [screenSpace](https://api.playcanvas.com/engine/classes/ScreenComponent.md#screenspace) is true).

## Accessors

### priority

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

Gets the screen's render priority.

### referenceResolution

```ts
get referenceResolution(): Vec2
set referenceResolution(value: Vec2)
```

Gets the resolution that the ScreenComponent is designed for.

### resolution

```ts
get resolution(): Vec2
set resolution(value: Vec2)
```

Gets the width and height of the ScreenComponent.

### scaleBlend

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

Gets the scale blend.

### scaleMode

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

Gets the scale mode.

### screenSpace

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

Gets whether the ScreenComponent will render its child [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md)s in screen
space instead of world space.

## Methods

### syncDrawOrder

```ts
syncDrawOrder(): void
```

Set the drawOrder of each child [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md) so that ElementComponents which are
last in the hierarchy are rendered on top. Draw Order sync is queued and will be updated by
the next update loop.

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

- `entity: Entity`
- `system: ComponentSystem`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `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`