前段時間，在不少人部落格看到這個 Live2D 看板娘，頗感興趣！就查閱了點相關教學為自己部落格也添加上了

前言

live2d並不是一種先進的技術，它產生的效果，都是用基本的平移、旋轉、透明、曲面變形等操作實現的。最終的效果與貼圖關係很大，而每一個動作，都需要製作師的精細調整。這是一個需要消耗大量時間精力的過程，因此品質好的模型並不多，品質好的也一般是在遊戲中，版權受到保護，不能隨意使用。

本文章中所用模型解包自藥水製作師手機遊戲，版權歸該官方所有。(沒錯，我也是來安利這款遊戲的)

準備工作

俗話雖說：「授人以魚不如授人以漁」，但是由於這魚比較難釣，我們還是乖乖搬個小板凳坐吃魚群眾吧！ 以下程式碼是我光明正大從後宮學長那偷過來的魚加以烹飪而成。

先到我的 Github 去下載我再次整理過後的live 2D的程式碼(包含兩人的動作和初始的三套貼圖)，畢竟還是煮熟的好吃點~

下載後解壓縮程式碼到你的部落格網站根目錄去。（目錄位置可以自訂）

然後把解壓縮出來的資料夾改名為：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 Tia 喵的，萬惡的浮水印你走開！ 具體效果你可以調戲一下本部落格左下角的Pio(沒錯，我覺得她更可愛)

結語

關於如何進行換裝play 請參考原作者(貓和向日葵)的這篇文章《給部落格添加能動的看板娘(Live2D)-關於模型的二三事》 請注意本文中出現的“藥水製作師”、“Potion Maker”字樣及應用內包含的文本、模型、圖片、動作數據等所有權均屬於“藥水製作師”作者Sinsiroad，僅供研究學習，不得用於商業用途