
はじめに
Live2Dは最先端の技術ではありません。その効果は、基本的な平行移動、回転、透明度、曲面変形などの操作によって実現されます。最終的な効果はテクスチャに大きく依存し、各動作は制作者による綿密な調整が必要です。これは膨大な時間と労力を要するプロセスであるため、質の良いモデルは多くなく、質の良いものは通常ゲーム内にあり、著作権で保護されているため、自由に使用することはできません。
本記事で使用されているモデルは、薬水制作师 というモバイルゲームから解包されたものであり、著作権は公式に帰属します。(そうです、私もこのゲームを宣伝しに来ました)
準備作業
「魚を与えるよりも、魚の釣り方を教える方が良い」とは言いますが、この魚は釣るのが難しいので、おとなしく小さな椅子に座って、釣られた魚を食べる側に回りましょう! 以下のコードは、私が後宫学长 から堂々と盗んできた魚を調理したものです。
まずは私のGithub へ行き、私が再度整理したLive2Dのコード(二人の動作と初期の3種類のテクスチャを含む)をダウンロードしてください。やはり調理済みのものが美味しいですからね〜。
ダウンロード後、コードを解凍してブログサイトのルートディレクトリに配置します。(ディレクトリの位置は自由に設定できます)
そして、解凍したフォルダの名前を「live2d」に変更します。(名前は何でも構いませんが、見栄えが最も重要です)
(少女は盲目的に分析中)


使用方法
それでは、食べ方を教えましょう、いや、本当に食べ始めるわけではありませんが。
ブログのヘッダーファイル(header.php)でインターフェーススタイルを読み込むために、headタグ内に以下のコードを挿入します。
ブログのフッターファイル(footer.php)でスクリプトを読み込むために、bodyタグの終了前に以下のコードを挿入します。
上記のコードで絶対パスを使用する際に注意すべき問題があります。
私のブログwww.52ecy.cnと52ecy.cnはどちらもアクセス可能ですが、参照時にwwwを使用すると、www.52ecy.cnにアクセスする際には問題ありませんが、52ecy.cnに直接アクセスすると、クロスドメイン問題(サブドメインが異なる場合もクロスドメインに該当)によりjsonが読み込めなくなり、看板娘が表示されなくなります。
以下のコードに変更できます(キャラクターの切り替えも、対応するフォルダ名に変更するだけで済みます)。
適切なページ位置にLive2D看板娘の要素を挿入します。ページ下部に配置できます。
マウスをページの特定の要素に置いたときに、Live2D看板娘にヒントを表示させたい場合は、message.jsonファイルを変更してください。
{ “mouseover”: [ { “selector”: “.container a[href^=‘http’]”, // ここをページ要素のタグ名に変更 “text”: ["{text}を見てみますか?"] // ここを必要なヒントのテキストに変更 }, { “selector”: “.navto-search”, “text”: [“何かお探しですか、お手伝いしましょうか?”] } ], “click”: [ // ここはLive2D看板娘のタッチイベントのヒント { “selector”: “#landlord #live2d”, “text”: [“触らないで!手をどけて〜〜”, “ほ…本当に恥知らず!”, “これ以上触ったら通報しますよ!⌇●﹏●⌇”, “110番ですか、ここに変態がずっと私を触っています(ó﹏ò。)”] } ] }
その後、ブログページを更新して効果を確認してください!
パスを間違えないように注意してくださいね〜。 テーマ関数を使ってパスを取得するのは非常に良い方法です。 例のような相対パスではなく、すべて絶対パスで参照することをお勧めします。
完成品の鑑賞
Pio


結び
着せ替えプレイの方法については、原作者(猫と向日葵)の記事「ブログに動く看板娘(Live2D)を追加する - モデルに関するあれこれ
」を参照してください。
本文中に登場する「薬水制作师」、「Potion Maker」の文字、およびアプリ内に含まれるテキスト、モデル、画像、モーションデータなどの所有権はすべて「薬水制作师」の作者Sinsiroadに帰属し、研究学習のみを目的とし、商業目的で使用することはできません。
