v0.5.0-beta

Dependencies (BREAKING)

• Migrated to Pixi v7.
• Upgraded Cubism 4 framework from R4 to R7. (see changelog in CubismWebFramework)
• Changed peer dependency to entire pixi.js instead of individual @pixi/* packages. This should prevent version conflicts which cause duplicate Pixi instances to be bundled (as in #109).

Changes

• BREAKING: Added "type": "module" to package.json. Most likely this won't change anything on the user side because web bundlers (Webpack, Vite, as far as I can tell) do not consider this field.
• BREAKING: Moved model automation (update/hit-test/focus) into an Automator class. Now, to dynamically change the auto* options, for example autoUpdate, use model.automator.autoUpdate = true instead of model.autoUpdate = true.
• Live2DModel.from()
  • Added checkMocConsistency option for moc data validation (introduced in Cubism 4 R7).
  • Added autoHitTest and autoFocus options to provide fine-grain controls of the old (deprecated) autoInteract option.
  • Added ticker option to allow passing a custom PIXI.Ticker instance.
  • Fixed an "unhandled Promise rejection" warning in the console when the texture fails to load.
  • Fixed a bug where the model's initial state is not deterministic and depends on the time it's instantiated.
• Removed unexpected package gh-pages from dependencies in package.json.

Deprecations

• Deprecated autoInteract option in favor of autoHitTest and autoFocus
• Deprecated Live2DModel.registerTicker() in favor of the ticker option

v0.4.0

Changes in v0.4.0-beta and v0.4.0-beta.2 are included but not mentioned below, please check out their release notes.

Support handling opacity values without Pose (Cubism 4 only)

This feature sets opacity values directly from motion curves, instead of getting the values calculated by Pose. This prevents opacity values from being ignored when the model does not have a Pose, but may (unconfirmed) cause unexpected opacity results when the model does have a Pose, so it's recommended to enable this only when you're intending to display models without pose.

To be consistent with Live2D SDK's behavior, it's disabled by default, you can enable it by changing the config:

import { config } from 'pixi-live2d-display';

config.cubism4.setOpacityFromMotion= true;

Related PR: guansss/CubismWebFramework#1, thanks to @eipip1e0 !

Mouse tracking optimization

Now character's eyes will look at the mouse position more precisely when the mouse is far away.

Related PR: #74, thanks to @BenchWidth !

Breaking changes:

• Upgraded Cubism 4 framework to R4 (not sure if it's actually breaking).
• Source code (src/, cubism/src/) is no longer shipped with npm package.

v0.4.0-beta.2

Breaking changes

ESM bundles and conditional exports

Pixi v6 introduces conditional exports that resolves import * as PIXI from 'pixi.js' and const PIXI = require('pixi.js') to different modules. However this plugin only provided CommonJS bundles, which internally uses require to load Pixi, so if you're using import to load Pixi in your app, you'll most likely be facing a dual package hazard.

To solve this, this plugin now provides ESM bundles and conditional exports as well. Note that it doesn't prevent you from the dual package hazard, but allows you to import it together with Pixi.

So, in your entire app, either import them both...

import * as PIXI from 'pixi.js';
import { Live2DModel } from 'pixi-live2d-display';

or require them both:

const PIXI = require('pixi.js');
const { Live2DModel } = require('pixi-live2d-display');

Previously, the doc said that you should write the following code to ensure execution order:

import * as PIXI from 'pixi.js';

window.PIXI = PIXI;

const { Live2DModel } = require('pixi-live2d-display');

const model = await Live2DModel.from(url);

Now it's no longer required, because the window.PIXI.Ticker detection will be deferred until the model has been created. So you can safely import them both:

import * as PIXI from 'pixi.js';
import { Live2DModel } from 'pixi-live2d-display';

window.PIXI = PIXI;

const model = await Live2DModel.from(url);

In addition, the cubism2/4 submodules should now be imported from different paths:

// before
import { Live2DModel } from 'pixi-live2d-display/lib/cubism2';

// now
import { Live2DModel } from 'pixi-live2d-display/cubism2';

HitAreaFrames is moved to individual bundle

HitAreaFrames is no longer bundled into browser-oriented bundles, there's a new extra bundle for it.

import { HitAreaFrames } from 'pixi-live2d-display/extra';

<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.4.0-beta.2/dist/extra.min.js"></script>

Unconverted layout properties in Cubism 2 will be dropped

Previously in Cubism 2, for example, the layout definition { center_x: 0 } would turn into { center_x: 0, centerX: 0 }, leaving the unconverted property center_x intact. That's unexpected. As of 0.4.0, unconverted properties will be dropped.

Preserve expression by default

Previously, if the model had an expression applied, it would be canceled when the model started to play a non-idle motion, so that the motion's parameters wouldn't be overridden by expression.

From my experience, this behavior is intuitive and generally expected by users. However, it doesn't align with Live2D Viewer and other official demos, so I decided to make it an opt-in.

You can get the old behavior by setting the config:

import { config } from 'pixi-live2d-display';

config.preserveExpressionOnMotion = false; // true by default

Other changes

•   Removed lodash dependency
•   Deferred window.PIXI.Ticker detection until model creation

v0.4.0-beta

• Migrate to Pixi v6
• ed9ca1b: Re-export components of Cubism 4 framework
• b51b9cb: Emit "poseLoadError" and "physicsLoadError" when the loading fails
• bc2b58a: Fix ignored fading durations in motion JSON
• 0b42911: Fix incorrect expression blending (fixes #67)

Breaking changes

None. It appears to work well with v6.

There's something to note though - Pixi v6 supports single-entry import like this:

import { Application } from 'pixi.js';

But, I'd recommend you to not use it along with this plugin, instead, stick to per-package import as in v5:

import { Application } from '@pixi/app';

That's because the former may cause webpack to generate duplicate Pixi modules in your app's bundle, I'm not quite sure why this happens, it needs further investigation.

v0.3.1

• Fix slow motion when rendering multiple times per tick
• Fix destroying a model will also remove interaction listeners of all the other models
• Fix incorrect type definition of Cubism 4 configs

v0.3.0

See Changes in v0.3.0 for change logs.

v0.3.0-beta.2

See Changes in v0.3.0 for change logs.

v0.3.0-beta.1

See Changes in v0.3.0 for change logs.

v0.3.0-beta

Installation

# npm
npm install pixi-live2d-display@beta

# yarn
yarn add pixi-live2d-display@beta

What's New

Demo

Cubism 4 is now fully supported.

Try starting with:

const model = await Live2DModel.from("path/to/model.json");

API documentation is working in progress.

See Changes in v0.3.0 for change logs.

v0.2.2

• Fixed incompatibility of PIXI.Graphics (#5)