★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

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

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つ指定すれば読み込めるのでしょうか?

コメント

  • 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/
  • ご回答ありがとうございます。

    cmoxファイルは持っていないので、SDKのアップグレードは諦めることにします。
コメントするにはサインインまたは登録して下さい。