LoginSignup
0
1

More than 3 years have passed since last update.

JekyllでLive2Dを実装

Last updated at Posted at 2019-07-28

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にコピーする.

終わり〜〜〜!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1