Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
pixi-live2d-display-mouth-sync
Advanced tools
Readme
English | 中文
:warning: This readme is for v0.4.0, if you're looking for v0.3.1, see this.
Live2D integration for PixiJS v6.
This project aims to be a universal Live2D framework on the web platform. While the official Live2D framework is just complex and problematic, this project has rewritten it to unify and simplify the APIs, which allows you to control the Live2D models on a high level without the need to learn how the internal system works.
Cubism is the name of Live2D SDK. There are so far three versions of it: Cubism 2.1, Cubism 3 and Cubism 4; where Cubism 4 is backward-compatible with Cubism 3 models.
This plugin supports all variants of Live2D models by using Cubism 2.1 and Cubism 4.
Before using the plugin, you'll need to include the Cubism runtime library, aka Cubism Core.
For Cubism 4, you need live2dcubismcore.min.js
that can be extracted from
the Cubism 4 SDK, or be referred by
a direct link (however the direct link is quite
unreliable, don't use it in production!).
For Cubism 2.1, you need live2d.min.js
. It's no longer downloadable from the official
site since 2019/9/4, but can be
found here, and with
a CDN link that you'll probably need.
The plugin provides individual bundles for each Cubism version to reduce your app's size when you just want to use one of the versions.
Specifically, there are cubism2.js
and cubism4.js
for respective runtime, along with an index.js
that includes
both of them.
Note that if you want both the Cubism 2.1 and Cubism 4 support, use index.js
, but not the combination
of cubism2.js
and cubism4.js
.
To make it clear, here's how you would use these files:
cubism2.js
+live2d.min.js
to support Cubism 2.1 modelscubism4.js
+live2dcubismcore.min.js
to support Cubism 3 and Cubism 4 modelsindex.js
+live2d.min.js
+live2dcubismcore.min.js
to support all versions of modelsnpm install pixi-live2d-display
import { Live2DModel } from 'pixi-live2d-display';
// if only Cubism 2.1
import { Live2DModel } from 'pixi-live2d-display/cubism2';
// if only Cubism 4
import { Live2DModel } from 'pixi-live2d-display/cubism4';
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<!-- if only Cubism 2.1 -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism2.min.js"></script>
<!-- if only Cubism 4 -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js"></script>
In this way, all the exported members are available under PIXI.live2d
namespace, such as PIXI.live2d.Live2DModel
.
import * as PIXI from 'pixi.js';
import { Live2DModel } from 'pixi-live2d-display';
// expose PIXI to window so that this plugin is able to
// reference window.PIXI.Ticker to automatically update Live2D models
window.PIXI = PIXI;
(async function () {
const app = new PIXI.Application({
view: document.getElementById('canvas'),
});
const model = await Live2DModel.from('shizuku.model.json');
app.stage.addChild(model);
// transforms
model.x = 100;
model.y = 100;
model.rotation = Math.PI;
model.skew.x = Math.PI;
model.scale.set(2, 2);
model.anchor.set(0.5, 0.5);
// interaction
model.on('hit', (hitAreas) => {
if (hitAreas.includes('body')) {
model.motion('tap_body');
}
});
})();
When importing Pixi packages on-demand, you may need to manually register some plugins to enable optional features.
import { Application } from '@pixi/app';
import { Ticker, TickerPlugin } from '@pixi/ticker';
import { InteractionManager } from '@pixi/interaction';
import { Live2DModel } from 'pixi-live2d-display';
// register Ticker for Live2DModel
Live2DModel.registerTicker(Ticker);
// register Ticker for Application
Application.registerPlugin(TickerPlugin);
// register InteractionManager to make Live2D models interactive
Renderer.registerPlugin('interaction', InteractionManager);
(async function () {
const app = new Application({
view: document.getElementById('canvas'),
});
const model = await Live2DModel.from('shizuku.model.json');
app.stage.addChild(model);
})();
The example Live2D models, Shizuku (Cubism 2.1) and Haru (Cubism 4), are redistributed under Live2D's Free Material License.
FAQs
Live2D plugin for PixiJS
The npm package pixi-live2d-display-mouth-sync receives a total of 1 weekly downloads. As such, pixi-live2d-display-mouth-sync popularity was classified as not popular.
We found that pixi-live2d-display-mouth-sync demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.