Interface: CanvasManagerInterface

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:25

Properties

app

> readonly app: Application

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:30

The PIXI Application instance. It not recommended to use this property directly.

children

> readonly children: ContainerChild[]

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:93

The children of the canvas.

currentTickers

> readonly currentTickers: Map<string, TickerInfo<any>>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:215

Currently tickers that are running.

currentTickersSteps

> readonly currentTickersSteps: Map<string, Map<string, TickersSequence>>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:219

The steps of the tickers

gameLayer

> readonly gameLayer: Container

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:35

The PIXI Container that contains all the canvas elements.

height

> height: number

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:48

The height of the canvas.

isInitialized

> readonly isInitialized: boolean

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:39

If the manager is initialized.

screen

> readonly screen: Rectangle

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:52

The screen of the canvas (Application.screen).

width

> width: number

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:44

The width of the canvas.

Methods

add()

> add(alias, canvasComponent, options?): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:135

Add a canvas element to the canvas. If there is a canvas element with the same alias, all "style", zIndex, and TickerBase will be transferred to the new canvas element, and the old canvas element will be removed.

Parameters

alias

string

The alias of the canvas element.

canvasComponent

CanvasBaseInterface<any>

The canvas elements to be added.

options?

The options of the canvas element.

ignoreOldStyle?

boolean

If there is a canvas element with the same alias, the "style" of the old canvas element will be imported to the new canvas element.

Default

false

zIndex?

number

The zIndex of the canvas element.

Default

undefined

Returns

void

Example

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const sprite = Sprite.from(texture);
canvas.add("bunny", sprite);

addHtmlLayer()

> addHtmlLayer(id, element, style?): HTMLDivElement

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:467

Add a HTML layer to the canvas.

Parameters

id

string

The id of the layer.

element

HTMLElement

The html element to be added.

style?

Partial<Pick<CSSStyleDeclaration, "pointerEvents" | "position" | "userSelect">>

The style of the layer.

Returns

HTMLDivElement

Default

{ position: "absolute", pointerEvents: "none", userSelect: "none" }.

Example

const root = document.getElementById('root')
if (!root) {
    throw new Error('root element not found')
}
const htmlLayer = canvas.addHtmlLayer("ui", root, {
   position: "absolute",
   pointerEvents: "none"
})
const reactRoot = createRoot(htmlLayer)
reactRoot.render(
    <App />
)

addLayer()

> addLayer(label, layer): Layer | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:426

Add a layer to the canvas.

Parameters

label

string

The label of the layer.

layer

Container

The layer to be added.

Returns

Layer | undefined

The layer.

Example

const uiLayer = new Container();
canvas.addLayer("ui", uiLayer);

addTicker()

> addTicker<TArgs>(canvasElementAlias, ticker): string | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:239

Run a ticker. You can run multiple addTicker with the same alias and different tickerClasses. If you run a ticker with the same alias and tickerClass, the old ticker will be removed. If already exists a sequence of tickers with the same alias, it will be removed.

Type Parameters

TArgs

TArgs extends TickerArgs

Parameters

canvasElementAlias

string | string[]

The alias of the canvas element that will use the ticker.

ticker

Ticker<TArgs>

The ticker class to be run.

Returns

string | undefined

The id of the ticker.

Example

canvas.addTicker("alien", new RotateTicker({ speed: 0.2 }))

addTickersSequence()

> addTickersSequence(alias, steps, currentStepNumber?): string | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:259

Run a sequence of tickers.

Parameters

alias

string

The alias of canvas element that will use the tickers.

steps

("repeat" | Ticker<any> | PauseType)[]

The steps of the tickers.

currentStepNumber?

number

The current step number. It is used to continue the sequence of tickers.

Returns

string | undefined

The id of tickers.

Example

canvas.addTickersSequence("alien", [
    new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
    Pause(1), // 1 second
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
    Repeat,
])

animate()

Call Signature

> animate<T>(components, keyframes, options?, priority?): string | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:387

Animate a Pixi’VN component or components using motion's animate function. This function integrates with the PixiJS ticker to ensure smooth animations.

Pixi’VN will keep track of the animation state of this function. So Pixi’VN will save the animation state in saves.

Type Parameters

T

T extends CanvasBaseInterface<any>

The type of Pixi’VN component(s) being animated.

Parameters

components

string | T | (string | T)[]

The PixiJS component(s) to animate.

keyframes

KeyframesType<T>

The keyframes to animate the component(s) with.

options?

AnimationOptions

Additional options for the animation, including duration, easing, and ticker.

priority?

UPDATE_PRIORITY

The priority of the ticker.

Returns

string | undefined

The id of tickers.

Default

UPDATE_PRIORITY.NORMAL

Call Signature

> animate<T>(components, sequence, options?, priority?): string | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:406

Animate a Pixi’VN component or components using motion's animate function. This function integrates with the PixiJS ticker to ensure smooth animations.

Pixi’VN will keep track of the animation state of this function. So Pixi’VN will save the animation state in saves.

Type Parameters

T

T extends CanvasBaseInterface<any>

The type of Pixi’VN component(s) being animated.

Parameters

components

string | T

The PixiJS component(s) to animate.

sequence

(ObjectSegment<T> | ObjectSegmentWithTransition<T>)[]

The sequence of keyframes to animate the component(s) with.

options?

SequenceOptions

Additional options for the animation, including duration, easing, and ticker.

priority?

UPDATE_PRIORITY

The priority of the ticker.

Returns

string | undefined

The id of tickers.

Default

UPDATE_PRIORITY.NORMAL

canvasElementIsOnCanvas()

> canvasElementIsOnCanvas<T>(pixiElement): boolean

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:187

Check if a DisplayObject is on the canvas.

Type Parameters

T

T extends Container<ContainerChild>

Parameters

pixiElement

T

The DisplayObject to be checked.

Returns

boolean

If the DisplayObject is on the canvas.

clear()

> clear(): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:494

Clear the canvas and the tickers.

Returns

void

completeTickerOnStepEnd()

> completeTickerOnStepEnd(step): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:357

Add a ticker that must be completed before the next step. This method is used for example into a transition between scenes.

Parameters

step

The step that the ticker must be completed before the next step.

alias?

string

If is a sequence of tickers, the alias of the sequence of tickers.

id

string

The id of the step.

Returns

void

copyCanvasElementProperty()

> copyCanvasElementProperty<T>(oldAlias, newAlias, options?): Promise<void>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:101

Copy the properties of an old canvas element to a new canvas element.

Type Parameters

T

T extends CanvasBaseItemMemory

Parameters

oldAlias

string | T | CanvasBaseInterface<T>

Old alias

newAlias

string | CanvasBaseInterface<T>

New alias

options?

The options of the copy.

ignoreProperties?

(defaultProperties) => string[]

If provided, the properties returned by this function will not be copied from the old canvas element to the new canvas element.

Returns

Promise<void>

editAlias()

> editAlias(oldAlias, newAlias, options?): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:198

Edit the alias of a canvas element. The tickers that are connected to the canvas element will be transferred.

Parameters

oldAlias

string

The old alias of the canvas element.

newAlias

string

The new alias of the canvas element.

options?

The options of the canvas element.

ignoreTickers?

boolean

If true, the tickers that are connected to the canvas element will not be transferred.

Default

false

Returns

void

export()

> export(): CanvasGameState

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:502

Export the canvas and the tickers to an object.

Returns

CanvasGameState

The object.

extractImage()

> extractImage(): Promise<string>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:489

Extract the canvas as an image.

Returns

Promise<string>

The image as a base64 string.

find()

> find<T>(alias): T | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:181

Get a canvas element by the alias.

Type Parameters

T

T extends CanvasBaseInterface<any>

Parameters

alias

string

The alias of the canvas element.

Returns

T | undefined

The canvas element.

Example

const sprite = canvas.find<Sprite>("bunny");

findTicker()

> findTicker<TArgs>(tickerId, args?): Ticker<TArgs> | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:226

Find a ticker by its id.

Type Parameters

TArgs

TArgs extends TickerArgs

Parameters

tickerId

string

The id of the ticker.

args?

TArgs

The args of the ticker.

Returns

Ticker<TArgs> | undefined

The ticker if found, undefined otherwise.

forceCompletionOfTicker()

> forceCompletionOfTicker(id, alias?): Promise<void>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:373

This method force the completion of the tickers that are running. This funcions is called in the next step.

Parameters

id

string

The id of the ticker. If the alias provided, the id is the id of the sequence of tickers.

alias?

string

The alias of the sequence of tickers.

Returns

Promise<void>

getHtmlLayer()

> getHtmlLayer(id): HTMLElement | undefined

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:481

Get a HTML layer from the canvas.

Parameters

id

string

The id of the layer.

Returns

HTMLElement | undefined

getLayer()

> getLayer(label): Layer | null

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:436

Get a layer from the canvas.

Parameters

label

string

The label of the layer.

Returns

Layer | null

The layer.

Example

const uiLayer = canvas.getLayer("ui");

init()

> init(element, options, devtoolsOptions?): Promise<void>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:74

Initialize the PixiJS Application and the interface div. This method should be called before any other method.

Parameters

element

HTMLElement

The html element where I will put the canvas. Example: document.body

options

Partial<ApplicationOptions> & object

The options of PixiJS Application

devtoolsOptions?

Devtools

The options of the devtools. You can read more about it in the PixiJS Devtools documentation

Returns

Promise<void>

Example

const body = document.body
if (!body) {
    throw new Error('body element not found')
}
await canvas.init(body, {
    width: 1920,
    height: 1080,
    backgroundColor: "#303030"
})

~~isTickerPaused()~~

> isTickerPaused(alias, tickerId?): boolean

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:340

Parameters

alias

string

The alias of the canvas element that will use the ticker.

tickerId?

string

The ticker that will be checked.

Returns

boolean

If the ticker is paused.

Deprecated

Use findTicker(id).paused Check if a ticker is paused.

onTickerComplete()

> onTickerComplete(tickerId, options): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:508

Parameters

tickerId

string

options

aliasToRemoveAfter

string[]

ignoreTickerSteps?

boolean

stopTicker?

boolean

tickerAliasToResume

string[]

tickerIdToResume

string[]

Returns

void

pause()

> pause(): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:346

Pause the rendering of gameLayer and pause currently running tickers. Use resume to restore rendering and resume only the tickers paused by this method.

Returns

void

pauseTicker()

> pauseTicker(filters): string[]

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:293

Pause a ticker. If a paused ticker have a time to be removed, it will be removed after the time.

Parameters

filters

{ canvasAlias: string; tickerIdsExcluded?: string[]; } | { id: string | string[]; }

The filters to pause the ticker.

Type Literal

{ canvasAlias: string; tickerIdsExcluded?: string[]; }

The filters to pause the ticker.

canvasAlias

string

The alias of the canvas element that will use the ticker. Will pause all tickers that are connected to this canvas element.

tickerIdsExcluded?

string[]

Ticker ids excluded from the pause. If not provided, all tickers will be paused.

Type Literal

{ id: string | string[]; }

The filters to pause the ticker.

id

string | string[]

The id of the ticker to be paused. If provided, only this ticker will be paused.

Returns

string[]

The ids of the paused tickers.

remove()

> remove(alias, options?): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:162

Remove a canvas element from the canvas. And remove all tickers that are not connected to any canvas element.

Parameters

alias

string | string[]

The alias of the canvas element to be removed.

options?

The options of the canvas element.

ignoreTickers?

boolean

If true, the tickers that are connected to the canvas element will not be removed.

Default

false

Returns

void

Example

canvas.remove("bunny");

removeAll()

> removeAll(): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:191

Remove all canvas elements from the canvas.

Returns

void

removeAllTickers()

> removeAllTickers(): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:282

Remove all tickers from the canvas.

Returns

void

removeHtmlLayer()

> removeHtmlLayer(id): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:476

Get a HTML layer from the canvas.

Parameters

id

string

The id of the layer to be removed.

Returns

void

removeLayer()

> removeLayer(label): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:445

Remove a layer from the canvas.

Parameters

label

string

The label of the layer to be removed.

Returns

void

Example

canvas.removeLayer("ui");

removeTicker()

> removeTicker(tickerId): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:287

Remove a ticker by the id.

Parameters

tickerId

string | string[]

The id of the ticker.

Returns

void

restore()

> restore(data): Promise<void>

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:507

Restore the canvas and the tickers from an object.

Parameters

data

object

The object.

Returns

Promise<void>

resume()

> resume(): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:351

Resume the rendering of gameLayer and resume tickers that were paused by pause.

Returns

void

resumeTicker()

> resumeTicker(filters): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:317

Resume a ticker.

Parameters

filters

{ canvasAlias: string; } | { id: string | string[]; }

The filters to resume the ticker.

Type Literal

{ canvasAlias: string; }

The filters to resume the ticker.

canvasAlias

string

The alias of the canvas element that will use the ticker. Will resume all tickers that are connected to this canvas element.

Type Literal

{ id: string | string[]; }

The filters to resume the ticker.

id

string | string[]

The id of the ticker to be resumed. If provided, only this ticker will be resumed.

Returns

void

transferTickers()

> transferTickers(oldAlias, newAlias, mode?): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:120

Transfer the tickers from an old alias to a new alias.

Parameters

oldAlias

string

Old alias

newAlias

string

New alias

mode?

"move" | "duplicate"

If "move", the old alias will be removed from the ticker. If "duplicate", the old alias will be kept in the ticker.

Returns

void

~~unlinkComponentFromTicker()~~

> unlinkComponentFromTicker(alias, ticker?): void

Defined in: src/canvas/interfaces/CanvasManagerInterface.ts:275

Remove a connection between a canvas element and a ticker. And remove the ticker if there is no canvas element connected to it.

Parameters

alias

string | string[]

The alias of the canvas element that will use the ticker.

ticker?

string | (() => Ticker<any>)

The ticker class to be removed.

Returns

void

Example

canvas.unlinkComponentFromTicker("alien", RotateTicker)

Deprecated