【JavaScript】SDK 2.1で使っていたmocやmtnの読み込みについて

yuma84 · 12月 2017

SDK 2.1で使っていたmocやmtnファイルをSDK3で読み込みたいのですが、
まずmocの読み込みでエラーに躓いているみたいです。

`TypeError: moc is null`

SDK 3では、mocやmtnを読み込めないのでしょうか？

また、テクスチャはSDK 2.1ではjsonで3つのpngを指定して読み込んでいましたが、
SDK 3では`PIXI.loader.add('texture', "...")`を3つ指定すれば読み込めるのでしょうか？

[削除されたユーザー] · 12月 2017

Live2Dスタッフです。
以下ご質問についてご回答差し上げます。

>> SDK 3では、mocやmtnを読み込めないのでしょうか？
はい。現状のCubsim 3 JS SDKは、SDK 2.1で使っていたmocやmtnファイルの読み込みには対応しておりません。
Cubism 3では新たなファイル形式として"moc3"ファイルや"motion3.json"ファイルに置き換えられました。
ご参考：http://docs.live2d.com/cubism-sdk-manual/faq/

Cubism 3 JS SDKで読み込むことができる"xxx.moc3"や"xxx.motion3.json"はCubism 3 Editorを使用して出力します。
2.1用のcmoxファイルをCubism 3 Editorで読み込み、moc3ファイルとして出力することができます。

>> また、テクスチャはSDK 2.1ではjsonで3つのpngを指定して読み込んでいましたが、
>> SDK 3では`PIXI.loader.add('texture', "...")`を3つ指定すれば読み込めるのでしょうか？
はい。複数のテクスチャを読み込むことは可能です。
下記に例を示します。基本的な手順としては以下の通りです。
1. ファイルローダー（PIXI.loader）に複数のテクスチャを追加します。その際に、それぞれ異なる名前を引数に与えることに注意してください。
2. テクスチャを追加した後、PIXI.loader.loadを実行してリソース（resources）に変換します。
3. リソースから、ファイル追加時に与えた名前を用いてテクスチャを取得します。
4. リソースから取得したテクスチャをLive2Dモデルに渡します。その際にそれぞれ異なるテクスチャ番号を与えることに注意してください。

======
PIXI.loader
.add('moc', "../xxx.moc3", { xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BUFFER }) // ローダーにmoc3ファイルを追加
.add('texture0', "...") // "textue0"の名前でテクスチャを追加
.add('texture1', "...") // "textue1"の名前でテクスチャを追加
.load(function (loader, resources) {
~~~中略~~~
var moc = LIVE2DCUBISMCORE.Moc.fromArrayBuffer(resources['moc'].data); // リソースからモデルデータを取得

var model = new LIVE2DCUBISMPIXI.ModelBuilder()
.setMoc(moc)
.addTexture(0, resources['texture0'].texture) // "textue0"をLive2Dモデルに渡す。その際にテクスチャ番号"0"を与える
.addTexture(1, resources['texture1'].texture) // "textue1"をLive2Dモデルに渡す。その際にテクスチャ番号"1"を与える
.build();
======
対象のPixiJSバージョン：4.6.1
注意事項：現在Cubism 3 JS SDKはWebGLフレームワーク"PixiJS"を利用しており、上記サンプルで示した"PIXI.loader"はPixiJSの機能です。
そのため、PixiJSが上記バージョンと異なるものを使用した場合、上記サンプルが動くかどうかについては保証できませんのでご了承ください。

補足：一つのモデルに対して複数のテクスチャを読み込む場合には、"xxx.model3.json"ファイルから読み込む方が便利です。
以下サンプルの"Multiple Models"や"User Data"が、model3.jsonファイルからの読み込みを行っています。
https://live2d.github.io/CubismJsComponents/

yuma84 · 12月 2017

ご回答ありがとうございます。

cmoxファイルは持っていないので、SDKのアップグレードは諦めることにします。

【JavaScript】SDK 2.1で使っていたmocやmtnの読み込みについて

コメント