Minimap

import { Minimap } from 'pixi-silk/ui/minimap';

Experimental

A minimap of a Camera’s world: the content in small, and the view as a frame. Drag the frame to pan, click anywhere to jump there, and scroll to zoom. The map follows the camera on every frame it moves, and glides when the content or the view grows past it.

Example#

const map = new Minimap({ camera, width: 220, height: 140 });

app.stage.addChild(map);

Experimental: the API may change in a minor release.

Extends#

Container

Constructors#

Constructor#

new Minimap(options: MinimapOptions): Minimap;

Experimental

Parameters#

Parameter	Type
`options`	`MinimapOptions`

Returns#

Minimap

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`camera`	`readonly`	`Camera`	`Experimental` The camera it shows and moves.	ui/panels/Minimap.ts:133
`state`	`readonly`	`MinimapState`	`Experimental` The view frame and the drag, as signals.	ui/panels/Minimap.ts:129
`theme`	`readonly`	`PanelTheme`	`Experimental` Colours, resolved from the `theme` option.	ui/panels/Minimap.ts:131

Accessors#

mapHeight#

Get Signature#

get mapHeight(): number;

Experimental

Height of the map in local units.

Returns

number

mapWidth#

Get Signature#

get mapWidth(): number;

Experimental

Width of the map in local units.

Returns

number

transform#

Get Signature#

get transform(): MinimapTransform;

Experimental

The map transform drawn now. It glides while the content or the view grows past the map.

Returns

MinimapTransform

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops following the camera and frees the thumbnail texture.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

dragTo()#

dragTo(p: PointData): void;

Experimental

Moves the view frame’s centre to a map point, as a drag does.

Parameters#

Parameter	Type
`p`	`PointData`

Returns#

void

jumpTo()#

jumpTo(p: PointData, animate?: boolean): this;

Experimental

Centres the camera on the world point under a map point (local units). animate: false jumps.

Parameters#

Parameter	Type	Default value
`p`	`PointData`	`undefined`
`animate`	`boolean`	`true`

Returns#

this

refresh()#

refresh(): this;

Experimental

Measures the content again on the next frame, and renders a new thumbnail.

Returns#

this

resize()#

resize(width: number, height: number): this;

Experimental

Changes the size of the map.

Parameters#

Parameter	Type
`width`	`number`
`height`	`number`

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances the motion by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean