Help us understand the problem. What is going on with this article?

JekyllでLive2Dを実装

More than 1 year has passed since last update.

From: https://s-w-k.top/2019/07/29/2019-07-29-Build-live2d/

Live2D

左下のこの子をどうやって生成したか?この記事で説明する.

2次元のキャラクターに命を吹き込むこの偉大なるプロジェクトはLive2D.しかし,プロジェクトはHexo向けで,作者はJekyllでの実装方法を提供していない,どうしよう?!

Jekyllで実装

私はlazyな人なので,原理を究明してJekyllにコンパイルすることは〜,さすがにしない!ここで「バカ」な方法で解決する.

作者がHexoでの実装方法を提供しているから,いっそうHexoでキャラクターをコンパイルして,キャラクターのコードを直接Jekyllに移植すればいいじゃん?JekyllでもHexoでも静的サイトジェネレータでしょう.最終的に,コンパイルの結果が出る.その結果から,キャラクターのコードを探し出すのは今回の要務.

Hexoをインストール

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s

はい!Hexoのウェブページが出たでしょう.オーケー,問題なし,いったんserverを閉じて,次に行こう.

Live2Dをインストール

npm install --save hexo-helper-live2d

次に,以下のコードをHexoで生成したブログの_config.xmlに追加する:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

ひとまず,フレームワークは構築できた.Live2Dのファイルをダンロードする必要がある.

git cloneした後,live2d-widget-model-shizuku下のassetsにある内容(assets自体を含まない)を,すべてHexoのblogフォルダ下のlive2d_models/shizukuフォルダ(新規に作って)にコピーする.ファイルのツリーはこうなる:

  • blog
    • live2d_models
    • shizuku
      • moc, mtn, shizuku.model.json...

コードを抽出

もう一回hexo sを実行して,shizukuちゃんでたでしょう.

問題なければ,hexo gでブログをコンパイルする.生成されたpublicの中に,live2dwフォルダがあるはず.その後,public下のindex.htmlを開いて,一番したのこの行を見つける:

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script>

おめでとう!!!shizukuちゃんの本体をつかめた.最後に,live2dwフォルダをJekyllで生成したブログのフォルダに移動,shizukuちゃんの本体を/_includes/_partials/footer.htmlにコピーする.

終わり〜〜〜!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away