Panzer-Jack/Easy-Live2D: Buat Live2D Anda Mudah Untuk Dikontrol, Sama Seperti Pixi Sprite! SDK Web Live2D didasarkan pada Pixi.js. Live2D semudah mengendalikan Pixi elf! Live2D Web SDK dienkapsulasi berdasarkan pixi.js yang dienkapsulasi. – Beragampengetahuan
Buat integrasi LIVE2D lebih mudah! Perpustakaan pengemasan SDK pengembang Live2D yang ringan dan ringan berdasarkan Pixi.js
Jadikan live2d Anda semudah dikendalikan seperti sprite pixi!
Bahasa Inggris | Cina
Contents
Anda dapat menggunakan StackBlitz Cloud IDE ini untuk mengalami pesona Easy-Live2D langsung di browser Anda! 😋
👉 Dokumen Resmi Easy-Live2D
- (✅) Transfer fungsi inti ke elf
- (✅) Baca jalur model
- (✅) Migrasi File Konfigurasi
- (✅) Kontrol langsung atas ekspresi dan tindakan
- (✅) mengungkapkan berbagai fungsi acara
- (✅) Fungsi suara
- (✅-) Sinkronisasi mulut- Saat ini hanya format WAV yang didukung
- Masalah Instalasi Rendering WebGL (Tentatif)
- ⚡️Sport Pixi.js V8 dan Cobism 5 (dua versi terbaru)
- 🌟Super ringan, lepaskan fungsi yang berlebihan
- 🚀 Antarmuka API Simple
- 🛠️ kompatibel dengan SDK Web Live2D resmi
- 📦CAPTING TO MODERN RUMAH MODERN-END (mis. VUE, bereaksi)
Karena Kebijakan Live2D, Anda perlu mengunduh SDK Live2D Cobism dari situs web resmi Live2D Cobism dan memasukkan direktori intinya ke dalam Direktori /Paket /COBISME
pnpm add easy-live2d
# or
npm install easy-live2d
# or
yarn add easy-live2d
Anda juga dapat merujuk pada kode di StackBlitz Cloud IDE
Pastikan untuk memasukkan inti kubis dalam indeks Anda.
HTML lokal
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<style>
html,
body
overflow: hidden;
margin: 0;
</style>
</head>
<body>
<div id="app"></div>
<script src="/Core/live2dcubismcore.js"></script>
<script type="module">
import Application, Ticker from 'pixi.js';
import Live2DSprite, Config, Priority, LogLevel from 'easy-live2d';
// Configure basic settings
Config.MotionGroupIdle = 'Idle'; // Set default idle motion group
Config.MouseFollow = false; // Disable mouse following
Config.CubismLoggingLevel = LogLevel.LogLevel_Off // Set logging level
// Create Live2D sprite and initialize
const live2DSprite = new Live2DSprite();
live2DSprite.init(
modelPath: '/Resources/Huusya/Huusya.model3.json',
ticker: Ticker.shared
);
// Listen for click events
live2DSprite.onLive2D('hit', ( hitAreaName, x, y ) =>
console.log('hit', hitAreaName, x, y);
)
// You can also initialize directly like this
// const live2DSprite = new Live2DSprite(
// modelPath: '/Resources/Huusya/Huusya.model3.json',
// ticker: Ticker.shared
// )
// Create application
const init = async () =>
// You can also initialize directly like this
// const model2Json = await (await fetch(path)).json()
// const modelSetting = new CubismSetting(
// prefixPath: '/Resources/Hiyori/',
// modelJSON: model2Json,
// )
// live2DSprite.init(
// modelSetting,
// ticker: Ticker.shared,
// )
const app = new Application();
await app.init(
view: document.getElementById('live2d'),
backgroundAlpha: 0, // Set alpha to 0 for transparency if needed
);
// Live2D sprite size and position settings
live2DSprite.x = -300
live2DSprite.y = -300
live2DSprite.width = canvasRef.value.clientWidth * window.devicePixelRatio
live2DSprite.height = canvasRef.value.clientHeight * window.devicePixelRatio
app.stage.addChild(live2dSprite);
// Set expression
live2DSprite.setExpression(
expressionId: 'normal',
)
// Play voice
live2DSprite.playVoice(
// Current mouth synchronization only supports wav format
voicePath: '/Resources/Huusya/voice/test.wav',
)
// Stop voice
// live2DSprite.stopVoice()
setTimeout(() =>
// Play voice
live2DSprite.playVoice(
voicePath: '/Resources/Huusya/voice/test.wav',
immediate: true // Whether to play immediately: default is true, will stop current playing voice and play new voice immediately
)
, 10000)
// Set motion
live2DSprite.startMotion(
group: 'test',
no: 0,
priority: 3,
)
init()
</script>
</body>
</html>
Demo VUE3: (Catatan: Pastikan untuk memasukkan inti Kubisme dalam file input index.html)
<script setup lang="ts">
import onMounted, onUnmounted, ref from 'vue'
import Config, Live2DSprite, LogLevel, Priority from 'easy-live2d'
import Application, Ticker from 'pixi.js'
import initDevtools from '@pixi/devtools'
const canvasRef = ref<HTMLCanvasElement>()
const app = new Application()
// Set default Config configuration
Config.MotionGroupIdle = 'Idle' // Set default idle motion group
Config.MouseFollow = false // Disable mouse following
Config.CubismLoggingLevel = LogLevel.LogLevel_Off // Set logging level
// Create Live2D sprite and initialize
const live2DSprite = new Live2DSprite()
live2DSprite.init(
modelPath: '/Resources/Hiyori/Hiyori.model3.json',
ticker: Ticker.shared
);
// Listen for click events
live2DSprite.onLive2D('hit', ( hitAreaName, x, y ) =>
console.log('hit', hitAreaName, x, y);
)
// You can also initialize directly like this
// const live2DSprite = new Live2DSprite(
// modelPath: '/Resources/Huusya/Huusya.model3.json',
// ticker: Ticker.shared
// )
onMounted(async () =>
// You can also initialize directly like this
// const model2Json = await (await fetch(path)).json()
// const modelSetting = new CubismSetting(
// prefixPath: '/Resources/Hiyori/',
// modelJSON: model2Json,
// )
// live2DSprite.init(
// modelSetting,
// ticker: Ticker.shared,
// )
await app.init(
view: canvasRef.value,
backgroundAlpha: 0, // Set alpha to 0 for transparency if needed
)
if (canvasRef.value)
// Live2D sprite size and position settings
live2DSprite.x = -300
live2DSprite.y = -300
live2DSprite.width = canvasRef.value.clientWidth * window.devicePixelRatio
live2DSprite.height = canvasRef.value.clientHeight * window.devicePixelRatio
app.stage.addChild(live2DSprite);
// Set expression
live2DSprite.setExpression(
expressionId: 'normal',
)
// Play voice
live2DSprite.playVoice(
// Current mouth synchronization only supports wav format
voicePath: '/Resources/Huusya/voice/test.wav',
)
// Stop voice
// live2DSprite.stopVoice()
setTimeout(() =>
// Play voice
live2DSprite.playVoice(
voicePath: '/Resources/Huusya/voice/test.wav',
immediate: true // Whether to play immediately: default is true, will stop current playing voice and play new voice immediately
)
, 10000)
// Set motion
live2DSprite.startMotion(
group: 'test',
no: 0,
priority: 3,
)
)
onUnmounted(() =>
// Release instance
live2DSprite.destroy()
)
</script>
<template>
<div class="test">
</div>
<canvas
ref="canvasRef"
id="live2d"
/>
</template>
<style>
#live2d
position: absolute;
top: 0%;
right: 0%;
width: 100%;
height: 100%;
.test
display: inline-block;
position: absolute;
width: 100%;
height: 70%;
background-color: pink;
</style>
Metode 1:
Aktifkan sinkronisasi bibir dengan mengatur speaker di editor model Live2D.
Anda dapat merujuk pada dokumentasi resmi untuk metode ini.
Metode 2: Dalam file XX.Model3.json dari model, temukan bagian “grup” dengannya "Name": "LipSync"dan tambahkan: "Ids":"ParamMouthOpenY". Lihat contoh berikut:
"Version": 3,
"FileReferences":
"Moc": "xx.moc3",
"Textures": [
"xx.2048/texture_00.png"
],
"Physics": "xx.physics3.json",
"DisplayInfo": "xx.cdi3.json",
"Motions":
"test": [],
"idle": []
,
"Expressions": []
,
"Groups": [
"Target": "Parameter",
"Name": "EyeBlink",
"Ids": []
,
"Target": "Parameter",
"Name": "LipSync",
"Ids": [
"ParamMouthOpenY"
]
],
"HitAreas": []
PR dan pertanyaan dipersilakan! Harap baca panduan kontribusi sebelum berpartisipasi dalam pengembangan.
Mit
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#PanzerJackEasyLive2D #Buat #Live2D #Anda #Mudah #Untuk #Dikontrol #Sama #Seperti #Pixi #Sprite #SDK #Web #Live2D #didasarkan #pada #Pixi.js #Live2D #semudah #mengendalikan #Pixi #elf #Live2D #Web #SDK #dienkapsulasi #berdasarkan #pixi.js #yang #dienkapsulasi
