先日、多くの人のブログでLive2Dの看板娘を見かけ、とても興味を持ちました!そこで、自分のブログにも追加するために、関連チュートリアルをいくつか調べました。

はじめに

Live2Dは最先端の技術ではありません。その効果は、基本的な平行移動、回転、透明度、曲面変形などの操作によって実現されます。最終的な効果はテクスチャに大きく依存し、各動作は制作者による綿密な調整が必要です。これは膨大な時間と労力を要するプロセスであるため、質の良いモデルは多くなく、質の良いものは通常ゲーム内にあり、著作権で保護されているため、自由に使用することはできません。

本記事で使用されているモデルは、薬水制作师 というモバイルゲームから解包されたものであり、著作権は公式に帰属します。(そうです、私もこのゲームを宣伝しに来ました)

準備作業

「魚を与えるよりも、魚の釣り方を教える方が良い」とは言いますが、この魚は釣るのが難しいので、おとなしく小さな椅子に座って、釣られた魚を食べる側に回りましょう! 以下のコードは、私が後宫学长 から堂々と盗んできた魚を調理したものです。

まずは私のGithub へ行き、私が再度整理したLive2Dのコード(二人の動作と初期の3種類のテクスチャを含む)をダウンロードしてください。やはり調理済みのものが美味しいですからね〜。

ダウンロード後、コードを解凍してブログサイトのルートディレクトリに配置します。(ディレクトリの位置は自由に設定できます)

そして、解凍したフォルダの名前を「live2d」に変更します。(名前は何でも構いませんが、見栄えが最も重要です) (少女は盲目的に分析中)

使用方法

それでは、食べ方を教えましょう、いや、本当に食べ始めるわけではありませんが。

ブログのヘッダーファイル(header.php)でインターフェーススタイルを読み込むために、headタグ内に以下のコードを挿入します。

ブログのフッターファイル(footer.php)でスクリプトを読み込むために、bodyタグの終了前に以下のコードを挿入します。

上記のコードで絶対パスを使用する際に注意すべき問題があります。 私のブログwww.52ecy.cn52ecy.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

Tia
くそっ、忌まわしきウォーターマークは消えろ! 具体的な効果は、このブログの左下にあるPioをからかってみてください(そうです、私は彼女の方が可愛いと思います)。

結び

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

著作権表示

著者: MoeJue

リンク: https://ja.moejue.cn/posts/2/

ライセンス: クリエイティブ・コモンズ表示-非営利-継承4.0国際ライセンス

この作品は、クリエイティブ・コモンズ表示-非営利-継承4.0国際ライセンスに基づいてライセンスされています。

検索を開始

キーワードを入力して記事を検索

↑↓
ESC
⌘K ショートカット