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 to identify the component.

canvasComponent

CanvasBaseInterface<any>

The component to add.

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:486

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, "position" | "pointerEvents" | "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 />
)

Deprecated

Use htmlLayers.add instead.

addLayer()

> addLayer(label, layer): Layer | undefined

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

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);

Deprecated

Use layers.add instead.

addTicker()

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

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

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 that was added.

Example

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

Deprecated

Use tickers.add instead.

addTickersSequence()

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

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

Run a sequence of tickers.

Parameters

alias

string

The alias of canvas element that will use the tickers.

steps

Ticker<any>[]

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
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
])

Deprecated

Use tickers.addSequence instead.

animate()

Call Signature

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

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

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. This can be a single component, an array of components, or a string representing the component's alias.

keyframes

KeyframesType<T>

This is an object containing the properties to animate and the values to reach.

options?

AnimationOptions

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

priority?

UPDATE_PRIORITY

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

Returns

string | undefined

The function returns the ID of the ticker created to animate the component(s).

Default

UPDATE_PRIORITY.NORMAL

Call Signature

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

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

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. This can be a single component, an array of components, or a string representing the component's alias.

sequence

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

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

options?

SequenceOptions

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

priority?

UPDATE_PRIORITY

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

Returns

string | undefined

The function returns the ID of the ticker created to animate the component(s).

Default

UPDATE_PRIORITY.NORMAL

canvasElementIsOnCanvas()

> canvasElementIsOnCanvas<T>(pixiElement): boolean

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

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:523

Clear the canvas and the tickers.

Returns

void

completeTickerOnStepEnd()

> completeTickerOnStepEnd(step): void

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

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

Deprecated

Use tickers.completeOnStepEnd instead.

copyCanvasElementProperty()

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

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

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:200

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 component to edit.

newAlias

string

The new alias of the component.

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:531

Export the canvas and the tickers to an object.

Returns

CanvasGameState

The object.

extractImage()

> extractImage(): Promise<string>

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

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:183

Get a canvas element by the alias.

Type Parameters

T

T extends CanvasBaseInterface<any>

Parameters

alias

string

The alias to identify the component.

Returns

T | undefined

The canvas element. If the component does not exist, it will return undefined.

Example

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

findTicker()

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

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

Find a ticker by its id.

Type Parameters

TArgs

TArgs extends TickerArgs

Parameters

tickerId

string

The id of the ticker to be found.

args?

TArgs

The args of the ticker.

Returns

Ticker<TArgs> | undefined

The ticker if found, undefined otherwise.

Deprecated

Use tickers.find instead.

forceCompletionOfTicker()

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

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

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>

Deprecated

Use tickers.forceCompletion instead.

getHtmlLayer()

> getHtmlLayer(id): HTMLElement | undefined

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

Get a HTML layer from the canvas.

Parameters

id

string

The id of the layer.

Returns

HTMLElement | undefined

Deprecated

Use htmlLayers.get instead.

getLayer()

> getLayer(label): Layer | null

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

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");

Deprecated

Use layers.get instead.

init()

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

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

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:349

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 tickers.isPaused instead. Check if a ticker is paused.

onTickerComplete()

> onTickerComplete(tickerId, options): void

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

Parameters

tickerId

string

options

aliasToRemoveAfter

string[]

ignoreTickerSteps?

boolean

stopTicker?

boolean

tickerAliasToResume

string[]

tickerIdToResume

string[]

Returns

void

Deprecated

Use tickers.onComplete instead.

pause()

> pause(): void

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

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:301

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.

Deprecated

Use tickers.pause instead.

remove()

> remove(alias, options?): void

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

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:193

Remove all canvas elements from the canvas.

Returns

void

removeAllTickers()

> removeAllTickers(): void

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

Remove all tickers from the canvas.

Returns

void

Deprecated

Use tickers.removeAll instead.

removeHtmlLayer()

> removeHtmlLayer(id): void

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

Get a HTML layer from the canvas.

Parameters

id

string

The id of the layer to be removed.

Returns

void

Deprecated

Use htmlLayers.remove instead.

removeLayer()

> removeLayer(label): void

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

Remove a layer from the canvas.

Parameters

label

string

The label of the layer to be removed.

Returns

void

Example

canvas.removeLayer("ui");

Deprecated

Use layers.remove instead.

removeTicker()

> removeTicker(tickerId): void

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

Remove a ticker by the id.

Parameters

tickerId

string | string[]

The id or an array of ids of the ticker to be removed.

Returns

void

Deprecated

Use tickers.remove instead.

restore()

> restore(data): Promise<void>

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

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:364

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:326

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

Deprecated

Use tickers.resume instead.

transferTickers()

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

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

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

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

canvas.unlinkComponentFromTicker("alien", RotateTicker)

Deprecated

Use tickers.unlinkComponent instead.

Interface: CanvasManagerInterface