あなたのブログにLive2D看板娘を設置しよう
先日、多くの人のブログでLive2Dの看板娘を見かけ、とても興味を持ちました!そこで、自分のブログにも追加するために、関連チュートリアルをいくつか調べました。 はじめに 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番ですか、ここに変態がずっと私を触っています(ó﹏ò。)”] } ] } ...