0%

Live2D|自制看板娘超简版

这里应该是Live2D的最基础操作,把2D的图片渲染成能小幅度晃动的GIF图片。效果演示看板娘

前言:

玩了一两次VRchat,在中文吧里,对这个”泠鸢yousa“模型很感兴趣,尤其是她的声音(咳咳划掉,于是想给自己的网站也加个纸片人。

制作GIF

工具:

ps、live2Dcubsim

参考教程oeasy教你玩转live2d动画制作

效果:(封面图片做出动感)

mio

应用到网页上并添加语音

效果看板娘

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
#wife {
position: absolute;
bottom: 0px;
left: 20px;

}
#wife img {
width: 200px;
}
</style>

</head>
<body>
<div id="wife">
<div class="message">
可以轻轻点击和我交流呦!
</div>
<img id="wife1" src="mio.gif" >

</div>

<audio id="audio01" >
当前浏览器不支持audio
</audio>
<script type="text/javascript">
var wife = document.getElementById("wife");
var audio01 = document.getElementById("audio01");
var meg = document.getElementsByClassName('message')[0]
console.log(meg)
var musicArr = [
'./01.mp3',
'./02.mp3',
'./03.mp3',
'./04.mp3'
]
var megArr = [
'你好你好!恭喜发财~',
'hey你好,又见面啦~',
'嘿嘿,我家还蛮大的,要看看嘛~',
'hey,我是泠鸢yousa~'
]
var index;
wife.onclick = function(){
//随机获取声源
index = Math.round(Math.random() * 10) % musicArr.length
console.log(index)
audio01.src= musicArr[index]
audio01.play();
meg.innerHTML = megArr[index]
}
</script>
</body>
</html>

这样一个超级简单的看板娘就做好了(我真是超没下限啊,实际上这就是GIF图片加个点击事件),我不管╰(‵□′)╯。另图片是mio,音源是泠鸢yousa。