avgjs / pixi-live2d Goto Github PK
View Code? Open in Web Editor NEWDisplay live2D model as a sprite in pixi.js.
Home Page: https://avgjs.github.io/pixi-live2d-example/
License: Other
Display live2D model as a sprite in pixi.js.
Home Page: https://avgjs.github.io/pixi-live2d-example/
License: Other
How to get perameter of the model and perform motion
For example: Head Rotation and eye blink using mouse
我也在做类似的东东,在参考你的代码的时候发现了音频播放的一些问题。
playSound 方法在 Chrome 下是能正常使用的,但是在 Firefox 下只能播放一次。
在参考了以下两篇文章以后,改用 Web Audio API 成功解决了这个问题。
HTML5 Audio 对象不能同时播放同一个资源文件解决办法
开大你的音响,感受HTML5 Audio API带来的视听盛宴
今天凌晨改的你的代码,可能有问题。
纯 Javascript,不会 ECMAScript 2015,见谅:joy:。
LAppModel.prototype.playSound = function (arraybuffer) {
clearInterval(this.intervalId);
var thisRef = this;
var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
if (AudioContext) {
var context = this.audioContext || new AudioContext();
if (!this.audioContext) {
this.audioContext = context;
}
if(thisRef.bufferSource != null) {
thisRef.bufferSource.stop();
thisRef.bufferSource = null;
clearInterval(thisRef.intervalId);
thisRef.lipSyncValue = 0;
}
context.decodeAudioData(arraybuffer, function (buffer) {
thisRef.bufferSource = context.createBufferSource();
thisRef.bufferSource.buffer = buffer;
thisRef.bufferSource.connect(context.destination);
thisRef.bufferSource.loop = false;
var analyser = thisRef.audioAnalyser || context.createAnalyser();
!thisRef.audioAnalyser && (thisRef.audioAnalyser = analyser);
analyser.fftSize = 32;
var bufferLength = analyser.frequencyBinCount;
var cache = [];
var lastTime = Date.now();
thisRef.intervalId = setInterval(function () {
var dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);
var value = (dataArray[9] + dataArray[10] + dataArray[11]) / 3;
if (Date.now() - lastTime < 33) {
cache.push(value);
} else {
var lipValue = cache.length ? cache.reduce(function (previous, current) {
return current += previous;
}) / cache.length / 100 : thisRef.lipSyncValue;
thisRef.lipSync = true;
thisRef.lipSyncValue = lipValue;
lastTime = Date.now();
cache = [];
}
}, 0);
thisRef.bufferSource.onended = function (){
clearInterval(thisRef.intervalId);
thisRef.lipSyncValue = 0;
};
thisRef.bufferSource.connect(analyser);
analyser.connect(context.destination);
thisRef.bufferSource.start(0);
});
}
}
还有一个就是播放音频路径的问题,在我的电脑上,example 中点击头部播放音乐(唱歌)的功能无法使用,音频文件 404,我把 星のカケラ.mp3 更名以后就解决了,应该是日文的问题。
还有就是:既然是 example 能不能不压缩 js,代码看的很累........
以上。
Currently plugin bypasses PIXI.glCore and directly uses webgl stuff. We can port it that way code will look much better.
Also with upcoming https://github.com/pixijs/pixi.js/tree/dev-geometry , it'll be even easier to add ingame
It says no permission to download i think...please give me a new link
老哥你好呀,最近我参考live2d想实现这种效果,live2d的局限是只能通过点击它本身来触发对应的动画,那可不可以在页面之外点击也能触发它的动画呢?
那个example到底怎么启动?example里的index.js看上去像是一个配置文件,但是应该是用webpack编译的,不能直接引入,所以应该怎么用?
I'm getting the following warning in the console when running pixi-live2d:
WebGL: INVALID_ENUM: activeTexture: texture unit out of range
This happens the first time Live2DSprite._renderWebGL() gets called, but not on successive calls. The line that triggers the warning:
gl.activeTexture(gl.TEXTURE0 + _activeTextureLocation);
It appears that the value of _activeTextureLocation is still 999 (initial value?) on the first call. I've tested with both haru and epsilon models. Here's a demo of the issue:
https://undertowe.github.io/pixi-live2d/
Interestingly, I don't see this warning on the example. In that example the value of _activeTextureLocation is 0 on the first call to _renderWebGL(). My code is using the same versions of the Live2D SDK (2.1.00_1) and pixi.js (4.0.3) as the example, so I'm not sure what's causing the difference in behavior.
Any ideas?
such as this,i try all ways ,but can not import package.(error, .sprite no define)
i just direct reference [email protected],have error '_live2d.Live2D.setGL is not a function' too!!!
Hey there! I'm maintainer of pixi-spine
I propose to move the repo to pixi.js org, making it official. I also offer help with maintaining it. Btw, I had a prototype of shader for that kind of animations.
You can create an issue in https://github.com/pixijs/pixi.js/issues and we figure out what to do with that.
I understand how live2d is important when you want to make a japanese novel game, and I'll help other people with setting up to make new games of that kind. Also, your plugin is hope for all people in rpgmakerMV
gl-matrix mat4 is using SIMD operation and has better performance in future versions of browsers.
I got this error when I run my localhost
[ERROR] Could not resolve "PIXI"
node_modules/pixi-live2d/dist/pixi-live2d.js:52:35:
52 │ module.exports = factory(require("PIXI"));
╵ ~~~~~~
You can mark the path "PIXI" as external to exclude it from the bundle, which will remove this
error. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.
4:16:05 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/pixi-live2d/dist/pixi-live2d.js:52:35: ERROR: Could not resolve "PIXI"
at failureErrorWithLog (C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:1604:15)
at C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:1056:28
at runOnEndCallbacks (C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:1476:61)
at buildResponseToResult (C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:1054:7)
at C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:1166:14
at responseCallbacks. (C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:701:9)
at handleIncomingPacket (C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:756:9)
at Socket.readFromStdout (C:\Just For Fun\Akari\node_modules\esbuild\lib\main.js:677:7)
at Socket.emit (node:events:512:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
Congratulations for this AMAZING Project!
I hope I can learn to use this tool.
Regards
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.