俗話(huà)說(shuō):“授人以魚(yú)不如授人以漁”,但是說(shuō)這個(gè)“漁”比較難教,還是給條“魚(yú)”你完事了。
首先到我的 Github 去下載整理后的 Live2D 代碼,畢竟整理后的話(huà)好下手 ~
下載后解壓代碼到你的博客網(wǎng)站根目錄去。(目錄位置可以自定義)
然后把解壓出來(lái)的文件夾改名為:live2d 。
在你博客程序頭部文件(header)引入界面樣式,在 head 標簽內插入如下代碼:
<link rel="stylesheet" href="/live2d/css/live2d.css" />
在 body 標簽內合適的位置插入 Live2D 看板娘的元素,按照 Html 書(shū)寫(xiě)規范寫(xiě) ~
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="hide-button">隱藏</div></div>在你博客程序頁(yè)腳文件(footer)引入腳本,在 body 標簽結束前插入如下代碼:
<script type="text/javascript">var message_Path = '/live2d/'var home_Path = 'https://simcf.cc/' //此處修改為你的域名,必須帶斜杠</script><script type="text/javascript" src="/live2d/js/live2d.js"></script><script type="text/javascript" src="/live2d/js/message.js"></script><script type="text/javascript">loadlive2d("live2d", "/live2d/model/tia/model.json");</script>鼠標放在頁(yè)面某個(gè)元素上時(shí),需要 Live2D 看板娘提示的請修改 message.json 文件。
示例:
{
"mouseover": [
{
"selector": ".title a", //此處修改為你頁(yè)面元素的標簽名
"text": ["要看看 {text} 么?"] //此處修改為你需要提示的文字
},
{
"selector": "#searchbox",
"text": ["在找什么東西呢,需要幫忙嗎?"]
}
],
"click": [ //此處是 Live2D 看板娘的觸摸事件提示
{
"selector": "#landlord #live2d",
"text": ["不要動(dòng)手動(dòng)腳的!快把手拿開(kāi)~~", "真…真的是不知羞恥!","Hentai!",
"再摸的話(huà)我可要報警了!?●﹏●?", "110嗎,這里有個(gè)變態(tài)一直在摸我(ó﹏ò?)"]
}
]
}然后,刷新你的博客頁(yè)面,看看效果吧!
注意路徑別弄錯了噢 ~
PHP 程序推薦使用主題函數獲取絕對路徑。
問(wèn):“為什么這個(gè) Live2D 沒(méi)有換裝功能哎?”
答:“自己研究去?!?/p>
其實(shí),就是動(dòng)態(tài)改變 model.json 內的服裝字段,達到隨機服裝的效果……
Live2D 并不是一種先進(jìn)的技術(shù),它產(chǎn)生的效果,都是用基本的平移、旋轉、透明、曲面變形等操作實(shí)現的。
最終的效果與貼圖關(guān)系很大,而每一個(gè)動(dòng)作,都需要制作師的精細調整。
這是一個(gè)需要消耗大量時(shí)間精力的過(guò)程,因此質(zhì)量好的模型并不多,質(zhì)量好的也一般是在游戲中,版權受到保護,不能隨意使用。
聯(lián)系客服