A wrapper that allows the Live2D model to be used as a DisplayObject in PixiJS.

const model = await Live2DModel.from('shizuku.model.json');
container.add(model);

Emits

Live2DModelEvents

Type Parameters

Hierarchy

Constructors

Properties

_autoUpdate: boolean = false
_bounds: Bounds

The bounds object, this is used to calculate and store the bounds of the displayObject.

_boundsID: number

Flags the cached bounds as dirty.

_boundsRect: Rectangle

Cache of this display-object's bounds-rectangle.

_destroyed: boolean

If the object has been destroyed via destroy(). If true, it should not be used.

_enabledFilters: Filter[]

Currently enabled filters.

_height: number
_lastSortedIndex: number

Which index in the children array the display component was before the previous zIndex sort. Used by containers to help sort objects with the same zIndex, by using previous array index as the decider.

_localBounds: Bounds

Local bounds object, swapped with _bounds when using getLocalBounds().

_localBoundsRect: Rectangle

Cache of this display-object's local-bounds rectangle.

_mask: MaskData | Container

The original, cached mask of the object.

_trackedPointers: { [x: number]: InteractionTrackingData }

Type declaration

  • [x: number]: InteractionTrackingData
_width: number
_zIndex: number

The zIndex of the displayObject. A higher value will mean it will be rendered on top of other displayObjects within the same container.

alpha: number

The opacity of the object.

anchor: ObservablePoint<any> = ...

The anchor behaves like the one in PIXI.Sprite, where (0, 0) means the top left and (1, 1) means the bottom right.

buttonMode: boolean
children: DisplayObject[]

The array of children of this container.

containerUpdateTransform: (() => void)

Type declaration

    • (): void
    • Returns void

cullArea: Rectangle

If set, this shape is used for culling instead of the bounds of this object. It can improve the culling performance of objects with many children. The culling area is defined in local space.

cullable: boolean

Should this object be rendered if the bounds of this object are out of frame?

Culling has no effect on whether updateTransform is called.

cursor: string
deltaTime: number = 0

Elapsed time in milliseconds from last frame to this frame.

displayObjectUpdateTransform: (() => void)

Type declaration

    • (): void
    • Returns void

elapsedTime: number = ...

Elapsed time in milliseconds since created.

filterArea: Rectangle

The area the filter is applied to. This is used as more of an optimization rather than figuring out the dimensions of the displayObject each frame you can set this rectangle.

Also works as an interaction mask.

filters: null | Filter[]

Sets the filters for the displayObject. IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'.

glContextID: number = -1

An ID of Gl context that syncs with renderer.CONTEXT_UID. Used to check if the GL context has changed.

hitArea: null | IHitArea
interactionManager?: InteractionManager

Local reference used to clean up the event listeners when destroying the model.

interactive: boolean
interactiveChildren: boolean
internalModel: IM

The internal model. Though typed as non-nullable, it'll be undefined until the "ready" event is emitted.

isMask: boolean

Does any other displayObject use this object as a mask?

isSprite: boolean

Used to fast check if a sprite is.. a sprite!

parent: Container
renderable: boolean

Can this object be rendered, if false the object will not be drawn but the updateTransform methods will still be called.

Only affects recursive calls from parent. You can ask for bounds manually.

sortDirty: boolean

Should children be sorted by zIndex at the next updateTransform call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

sortableChildren: boolean

If set to true, the container will sort its children by zIndex value when updateTransform() is called, or manually if sortChildren() is called.

This actually changes the order of elements in the array, so should be treated as a basic solution that is not performant compared to other solutions, such as

Link

https://github.com/pixijs/pixi-display

Also be aware of that this may not work nicely with the addChildAt() function, as the zIndex sorting may cause the child to automatically sorted to another position.

See

PIXI.settings.SORTABLE_CHILDREN

tag: string = 'Live2DModel(uninitialized)'

Tag for logging.

textures: Texture<Resource>[] = []

Pixi textures.

trackedPointers: { [x: number]: InteractionTrackingData }

Type declaration

  • [x: number]: InteractionTrackingData
transform: Live2DTransform = ...
visible: boolean

The visibility of the object. If false the object will not be drawn, and the updateTransform function will not be called.

Only affects recursive calls from parent. You can ask for bounds or call updateTransform manually.

worldAlpha: number

The multiplied alpha of the displayObject.

prefixed: string | boolean

Accessors

  • get _tempDisplayObjectParent(): TemporaryDisplayObject
  • Protected

    Member

    Returns TemporaryDisplayObject

  • get angle(): number
  • The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

    Returns number

  • set angle(value: number): void
  • Parameters

    • value: number

    Returns void

  • get autoInteract(): boolean
  • Enables automatic interaction. Only takes effect if Pixi's interaction feature has been enabled (by registering the PIXI.InteractionManager into PIXI.Renderer).

    Returns boolean

  • set autoInteract(autoInteract: boolean): void
  • Parameters

    • autoInteract: boolean

    Returns void

  • get destroyed(): boolean
  • Readonly flag for destroyed display objects.

    Returns boolean

  • get height(): number
  • The height of the Container, setting this will actually modify the scale to achieve the value set.

    Returns number

  • set height(value: number): void
  • Parameters

    • value: number

    Returns void

  • get localTransform(): Matrix
  • Current transform of the object based on local factors: position, scale, other stuff.

    Returns Matrix

  • get mask(): null | MaskData | Container
  • Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. In PixiJS a regular mask must be a PIXI.Graphics or a PIXI.Sprite object. This allows for much faster masking in canvas as it utilities shape clipping. Furthermore, a mask of an object must be in the subtree of its parent. Otherwise, getLocalBounds may calculate incorrect bounds, which makes the container's width and height wrong. To remove a mask, set this property to null.

    For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.

    Example

    const graphics = new PIXI.Graphics();
    graphics.beginFill(0xFF3300);
    graphics.drawRect(50, 250, 100, 100);
    graphics.endFill();

    const sprite = new PIXI.Sprite(texture);
    sprite.mask = graphics;

    Todo

    At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask.

    Returns null | MaskData | Container

  • set mask(value: null | MaskData | Container): void
  • Parameters

    • value: null | MaskData | Container

    Returns void

  • get pivot(): ObservablePoint<any>
  • The center of rotation, scaling, and skewing for this display object in its local space. The position is the projection of pivot in the parent's local space.

    By default, the pivot is the origin (0, 0).

    Since

    4.0.0

    Returns ObservablePoint<any>

  • set pivot(value: IPointData): void
  • Parameters

    • value: IPointData

    Returns void

  • get position(): ObservablePoint<any>
  • The coordinate of the object relative to the local coordinates of the parent.

    Since

    4.0.0

    Returns ObservablePoint<any>

  • set position(value: IPointData): void
  • Parameters

    • value: IPointData

    Returns void

  • get rotation(): number
  • The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

    Returns number

  • set rotation(value: number): void
  • Parameters

    • value: number

    Returns void

  • get scale(): ObservablePoint<any>
  • The scale factors of this object along the local coordinate axes.

    The default scale is (1, 1).

    Since

    4.0.0

    Returns ObservablePoint<any>

  • set scale(value: IPointData): void
  • Parameters

    • value: IPointData

    Returns void

  • get skew(): ObservablePoint<any>
  • The skew factor for the object in radians.

    Since

    4.0.0

    Returns ObservablePoint<any>

  • set skew(value: IPointData): void
  • Parameters

    • value: IPointData

    Returns void

  • get width(): number
  • The width of the Container, setting this will actually modify the scale to achieve the value set.

    Returns number

  • set width(value: number): void
  • Parameters

    • value: number

    Returns void

  • get worldTransform(): Matrix
  • Current transform of the object based on world (parent) factors.

    Returns Matrix

  • get worldVisible(): boolean
  • Indicates if the object is globally visible.

    Returns boolean

  • get x(): number
  • The position of the displayObject on the x axis relative to the local coordinates of the parent. An alias to position.x

    Returns number

  • set x(value: number): void
  • Parameters

    • value: number

    Returns void

  • get y(): number
  • The position of the displayObject on the y axis relative to the local coordinates of the parent. An alias to position.y

    Returns number

  • set y(value: number): void
  • Parameters

    • value: number

    Returns void

  • get zIndex(): number
  • The zIndex of the displayObject.

    If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.

    See

    PIXI.Container#sortableChildren

    Returns number

  • set zIndex(value: number): void
  • Parameters

    • value: number

    Returns void

Methods

  • Recursively updates transform of all objects from the root to this one internal function for toLocal()

    Returns void

  • Parameters

    • renderer: Renderer

    Returns void

  • Protected

    Renders this object and its children with culling.

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

  • Adds one or more children to the container.

    Multiple items can be added like so: myContainer.addChild(thingOne, thingTwo, thingThree)

    Returns

    • The first child that was added.

    Type Parameters

    • T extends DisplayObject[]

    Parameters

    • Rest ...children: T

      The DisplayObject(s) to add to the container

    Returns T[0]

  • Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    Returns

    The child that was added.

    Type Parameters

    • T extends DisplayObject<T>

    Parameters

    • child: T

      The child to add

    • index: number

      The index to place the child in

    Returns T

  • Parameters

    • event: string | symbol
    • fn: ListenerFn
    • Optional context: any

    Returns Live2DModel<IM>

  • Recalculates the bounds of the container.

    This implementation will automatically fit the children's bounds into the calculation. Each child's bounds is limited to its mask's bounds or filterArea, if any is applied.

    Returns void

  • A method required by PIXI.InteractionManager to perform hit-testing.

    Returns

    True if the point is inside this model.

    Parameters

    • point: Point

      A Point in world space.

    Returns boolean

  • Destroys the model and all related resources. This takes the same options and also behaves the same as PIXI.Container#destroy.

    Parameters

    • Optional options: { baseTexture?: boolean; children?: boolean; texture?: boolean }

      Options parameter. A boolean will act as if all options have been set to that value

      • Optional baseTexture?: boolean

        Only used for child Sprites if options.children is set to true Should it destroy the base texture of the child sprite

      • Optional children?: boolean

        if set to true, all the children will have their destroy method called as well. 'options' will be passed on to those calls.

      • Optional texture?: boolean

        Only used for child Sprites if options.children is set to true Should it destroy the texture of the child sprite

    Returns void

  • Pair method for enableTempParent

    Parameters

    • cacheParent: Container

      Actual parent of element

    Returns void

  • Calls each of the listeners registered for a given event.

    Parameters

    • event: string | symbol
    • Rest ...args: any[]

    Returns boolean

  • Used in Renderer, cacheAsBitmap and other places where you call an updateTransform on root

    const cacheParent = elem.enableTempParent();
    elem.updateTransform();
    elem.disableTempParent(cacheParent);

    Returns

    • current parent

    Returns Container

  • Return an array listing the events for which the emitter has registered listeners.

    Returns (string | symbol)[]

  • Shorthand to set an expression.

    Returns

    Promise that resolves with true if succeeded, with false otherwise.

    Parameters

    • Optional id: string | number

      Either the index, or the name of the expression. If not presented, a random expression will be set.

    Returns Promise<boolean>

  • Updates the focus position. This will not cause the model to immediately look at the position, instead the movement will be interpolated.

    Parameters

    • x: number

      Position in world space.

    • y: number

      Position in world space.

    • instant: boolean = false

      Should the focus position be instantly applied.

    Returns void

  • Calculates and returns the (world) bounds of the display object as a [Rectangle]PIXI.Rectangle.

    This method is expensive on containers with a large subtree (like the stage). This is because the bounds of a container depend on its children's bounds, which recursively causes all bounds in the subtree to be recalculated. The upside, however, is that calling getBounds once on a container will indeed update the bounds of all children (the whole subtree, in fact). This side effect should be exploited by using displayObject._bounds.getRectangle() when traversing through all the bounds in a scene graph. Otherwise, calling getBounds on each object in a subtree will cause the total cost to increase quadratically as its height increases.

    The transforms of all objects in a container's subtree and of all ancestors are updated. The world bounds of all display objects in a container's subtree will also be recalculated.

    The _bounds object stores the last calculation of the bounds. You can use to entirely skip bounds calculation if needed.

    const lastCalculatedBounds = displayObject._bounds.getRectangle(optionalRect);
    

    Do know that usage of getLocalBounds can corrupt the _bounds of children (the whole subtree, actually). This is a known issue that has not been solved. See [getLocalBounds]PIXI.DisplayObject#getLocalBounds for more details.

    getBounds should be called with skipUpdate equal to true in a render() call. This is because the transforms are guaranteed to be update-to-date. In fact, recalculating inside a render() call may cause corruption in certain cases.

    Returns

    • The minimum axis-aligned rectangle in world space that fits around this object.

    Parameters

    • Optional skipUpdate: boolean

      Setting to true will stop the transforms of the scene graph from being updated. This means the calculation returned MAY be out of date BUT will give you a nice performance boost.

    • Optional rect: Rectangle

      Optional rectangle to store the result of the bounds calculation.

    Returns Rectangle

  • Returns the child at the specified index

    Returns

    • The child at the given index, if any.

    Parameters

    • index: number

      The index to get the child at

    Returns DisplayObject

  • Returns the index position of a child DisplayObject instance

    Returns

    • The index position of the child display object to identify

    Parameters

    • child: DisplayObject

      The DisplayObject instance to identify

    Returns number

  • Retrieves the local bounds of the displayObject as a rectangle object.

    Calling getLocalBounds may invalidate the _bounds of the whole subtree below. If using it inside a render() call, it is advised to call getBounds() immediately after to recalculate the world bounds of the subtree.

    Returns

    • The rectangular bounding area.

    Parameters

    • Optional rect: Rectangle

      Optional rectangle to store the result of the bounds calculation.

    • Optional skipChildrenUpdate: boolean

      Setting to true will stop re-calculation of children transforms, it was default behaviour of pixi 4.0-5.2 and caused many problems to users.

    Returns Rectangle

  • Hit-test on the model.

    Returns

    The names of the hit hit areas. Can be empty if none is hit.

    Parameters

    • x: number

      Position in world space.

    • y: number

      Position in world space.

    Returns string[]

  • Return the number of listeners listening to a given event.

    Parameters

    • event: string | symbol

    Returns number

  • Return the listeners registered for a given event.

    Parameters

    • event: string | symbol

    Returns ListenerFn[]

  • Shorthand to start a motion.

    Returns

    Promise that resolves with true if the motion is successfully started, with false otherwise.

    Parameters

    • group: string

      The motion group.

    • Optional index: number

      The index in this group. If not presented, a random motion will be started.

    • Optional priority: MotionPriority

      The motion priority. Defaults to MotionPriority.NORMAL.

    Returns Promise<boolean>

  • Parameters

    • event: string | symbol
    • Optional fn: ListenerFn
    • Optional context: any
    • Optional once: boolean

    Returns Live2DModel<IM>

  • Add a listener for a given event.

    Parameters

    • event: string | symbol
    • fn: ListenerFn
    • Optional context: any

    Returns Live2DModel<IM>

  • A callback that observes anchor, invoked when the anchor's values have been changed.

    Returns void

  • Overridable method that can be used by Container subclasses whenever the children array is modified.

    Parameters

    • Optional _length: number

    Returns void

  • An update callback to be added to PIXI.Ticker and invoked every tick.

    Returns void

  • Add a one-time listener for a given event.

    Parameters

    • event: string | symbol
    • fn: ListenerFn
    • Optional context: any

    Returns Live2DModel<IM>

  • Remove all listeners, or those of the specified event.

    Parameters

    • Optional event: string | symbol

    Returns Live2DModel<IM>

  • Removes one or more children from the container.

    Returns

    The first child that was removed.

    Type Parameters

    • T extends DisplayObject[]

    Parameters

    • Rest ...children: T

      The DisplayObject(s) to remove

    Returns T[0]

  • Removes a child from the specified index position.

    Returns

    The child that was removed.

    Parameters

    • index: number

      The index to get the child from

    Returns DisplayObject

  • Removes all children from this container that are within the begin and end indexes.

    Returns

    • List of removed children

    Parameters

    • Optional beginIndex: number

      The beginning position.

    • Optional endIndex: number

      The ending position. Default value is size of the container.

    Returns DisplayObject[]

  • Remove the listeners of a given event.

    Parameters

    • event: string | symbol
    • Optional fn: ListenerFn
    • Optional context: any
    • Optional once: boolean

    Returns Live2DModel<IM>

  • Renders the object using the WebGL renderer.

    The [_render]PIXI.Container#_render method is be overriden for rendering the contents of the container itself. This render method will invoke it, and also invoke the render methods of all children afterward.

    If renderable or visible is false or if worldAlpha is not positive or if cullable is true and the bounds of this object are out of frame, this implementation will entirely skip rendering. See PIXI.DisplayObject for choosing between renderable or visible. Generally, setting alpha to zero is not recommended for purely skipping rendering.

    When your scene becomes large (especially when it is larger than can be viewed in a single screen), it is advised to employ culling to automatically skip rendering objects outside of the current screen. See [cullable]PIXI.DisplayObject#cullable and [cullArea]PIXI.DisplayObject#cullArea. Other culling methods might be better suited for a large number static objects; see [@pixi-essentials/cull]https://www.npmjs.com/package/@pixi-essentials/cull and [pixi-cull]https://www.npmjs.com/package/pixi-cull.

    The [renderAdvanced]PIXI.Container#renderAdvanced method is internally used when when masking or filtering is applied on a container. This does, however, break batching and can affect performance when masking and filtering is applied extensively throughout the scene graph.

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

  • Render the object using the WebGL renderer and advanced features.

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

  • Changes the position of an existing child in the display object container

    Parameters

    • child: DisplayObject

      The child DisplayObject instance for which you want to change the index number

    • index: number

      The resulting index number for the child display object

    Returns void

  • Set the parent Container of this DisplayObject.

    Returns

    • The Container that this DisplayObject was added to.

    Parameters

    • container: Container

      The Container to add this DisplayObject to.

    Returns Container

  • Convenience function to set the position, scale, skew and pivot at once.

    Returns

    • The DisplayObject instance

    Parameters

    • Optional x: number

      The X position

    • Optional y: number

      The Y position

    • Optional scaleX: number

      The X scale value

    • Optional scaleY: number

      The Y scale value

    • Optional rotation: number

      The rotation

    • Optional skewX: number

      The X skew value

    • Optional skewY: number

      The Y skew value

    • Optional pivotX: number

      The X pivot value

    • Optional pivotY: number

      The Y pivot value

    Returns Live2DModel<IM>

  • Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.

    Returns void

  • Swaps the position of 2 Display Objects within this container.

    Parameters

    • child: DisplayObject

      First display object to swap

    • child2: DisplayObject

      Second display object to swap

    Returns void

  • Tap on the model. This will perform a hit-testing, and emit a "hit" event if at least one of the hit areas is hit.

    Emits

    hit

    Parameters

    • x: number

      Position in world space.

    • y: number

      Position in world space.

    Returns void

  • Calculates the global position of the display object.

    Returns

    • A point object representing the position of this object.

    Type Parameters

    • P extends IPointData = Point

    Parameters

    • position: IPointData

      The world origin to calculate from.

    • Optional point: P

      A Point object in which to store the value, optional (otherwise will create a new Point).

    • Optional skipUpdate: boolean

      Should we skip the update transform.

    Returns P

  • Calculates the local position of the display object relative to another point.

    Returns

    • A point object representing the position of this object

    Type Parameters

    • P extends IPointData = Point

    Parameters

    • position: IPointData

      The world origin to calculate from.

    • Optional from: DisplayObject

      The DisplayObject to calculate the global position from.

    • Optional point: P

      A Point object in which to store the value, optional (otherwise will create a new Point).

    • Optional skipUpdate: boolean

      Should we skip the update transform

    Returns P

  • Calculates the position in the canvas of original, unscaled Live2D model.

    Returns

    The Point in model canvas space.

    Parameters

    • position: Point

      A Point in world space.

    • result: Point = ...

      A Point to store the new value. Defaults to a new Point.

    • Optional skipUpdate: boolean

      True to skip the update transform.

    Returns Point

  • Updates the model. Note this method just updates the timer, and the actual update will be done right before rendering the model.

    Parameters

    • dt: number

      The elapsed time in milliseconds since last frame.

    Returns void

  • Updates the transform on all children of this container for rendering.

    Returns void

  • Synchronous version of Live2DModel.from(). This method immediately returns a Live2DModel instance, whose resources have not been loaded. Therefore this model can't be manipulated or rendered until the "load" event has been emitted.

    // no `await` here as it's not a Promise
    const model = Live2DModel.fromSync('shizuku.model.json');

    // these will cause errors!
    // app.stage.addChild(model);
    // model.motion('tap_body');

    model.once('load', () => {
    // now it's safe
    app.stage.addChild(model);
    model.motion('tap_body');
    });

    Type Parameters

    Parameters

    Returns InstanceType<M>

  • Mixes all enumerable properties and methods from a source object to DisplayObject.

    Parameters

    • source: Dict<any>

      The source of properties and methods to mix in.

    Returns void

  • Registers the class of PIXI.Ticker for auto updating.

    Parameters

    • tickerClass: typeof Ticker

    Returns void

Generated using TypeDoc