在你的博客上加上live2d的看板娘吧

  在一次无聊的搜索中,我发现了有人的博客用了我的canvas樱花飘落效果,感谢使用~撒花撒花~开心之余注意到了左下角,左下角是什么呢?唉?超可爱唉!这不是live2D吗?竟然可以用到网页上了!?雪散我超开心的去搜索了相关资料,原来是通过webgl进行实现的,官方还提供了sdk以及一套完整的demo(就是demo里的妹子不要太眼熟)。我查阅了相关资料,不得不说,官方的sdk真的很麻烦,由于没吃透api就着手进行开发,导致出现了各式各样的bug,经过了一晚上的奋斗,我终于选择了放弃,但是天无绝人之路嘛,原来有人已经造好了轮子,前辈万岁~感谢EYHN大佬的辛苦努力,大家可以过去下载live2d.js,或者点击这里直接获取js文件(右键另存为)。
timg.jpg

  接下来,我们开始着手处理我们的代码,由于EYHN大佬的辛勤付出,我们只要一句话就可以完成对live2d的初始化。首先我们要在body内加上canvas和用来消息提示的div。

<script src="js/live2d.js"></script>
 <div id='akagimsg' style="width: 250px; height: 68px; background-color: rgba(22, 161, 167, 0.48); position: fixed; 
         z-index: 1010; border-radius: 12px; bottom: 328px; left: 130px; border: 2px solid rgba(6, 188, 188, 0.92); padding-left: 5px; color: rgb(0, 0, 0); display: none;">
 </div>
 <canvas id="live2d" width="260" height="390" style='position:fixed;z-index :1010;bottom: -40px;left: 135px;'></canvas>

  因为要用在博客上,所以本着尽可能少修改文件的原则,css样式暂且直接写在标签之中,看起来比较乱的说。EYHN大佬铺路的好处是,如果我们引用了js,我们就可以只通过

loadlive2d("live2d", "live2d/model.json");

这句话完成对live2d模型的初始化。其中#live2d是指显示看板娘的canvas的id,后半部分是指我们的live2d模型的model.json文件的路径。由于我的模型没有头部和身子的定位,因此导致无法实现点击事件(如果哪位大佬知道怎么把json模型再导回到Live2D Cubism Modeler中进行修改,请一定要告诉我啊~)。所以点击后的语音我只能想办法曲线救国了,实现方法需要JQuery,因此要注意有没有JQuery哦。只要把以下代码放在刚刚添加的canvas的后面就可以了。

 	 <script>
			//loadlive2d("live2d", "live2d/haru/haru.model.json");
			if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
				loadlive2d("live2d", "live2d/model.json");
				var akagiinfo = new Array();
				akagiinfo[0] = {
					"msg": "那个,提督,吃饭……啊不!作战还没有开始吗!",
					"url": "sound/1.mp3"
				};
				akagiinfo[1] = {
					"msg": "舰载机的大家,准备好了吗? ",
					"url": "sound/2.mp3"
				};
				akagiinfo[2] = {
					"msg": "梅雨的季节呢。还在下雨...这样的日子里到间宫那边小憩也是不错的呢,提督。……提督?",
					"url": "sound/3.mp3"
				};
				akagiinfo[3] = {
					"msg": "提督…。和提督一起的话,感觉即使是「命运的五分钟」也能克服过去,我会努力的!",
					"url": "sound/4.mp3"
				};
				akagiinfo[4] = {
					"msg": "不可掉以轻心。全力以赴吧! ",
					"url": "sound/5.mp3"
				};
				akagiinfo[5] = {
					"msg": "提督……这些曲奇,是巧克力的回礼?这么多!那,先吃一个……唔唔,超好吃♪",
					"url": "sound/6.mp3"
				};
				$("#live2d").click(function() {
					if(window.akagiNose) {
						$("#akagimsg").hide();
						akagiNose.pause();
					}
					var r = Math.floor(Math.random() * 6);
					akagiNose = document.createElement("audio");
					akagiNose.addEventListener('ended', function() {
						$("#akagimsg").hide();
					}, false);
					akagiNose.addEventListener('playing', function() {
						$("#akagimsg").show();
					}, false);
					akagiNose.src = akagiinfo[r].url;
					$("#akagimsg").text(akagiinfo[r].msg);
					akagiNose.play();
				});
			}
		</script>

  要说一下,我之所以这么写,是为了尽可能减少请求,拯救一下这垃圾的要死的服务器,把提示信息直接写死在方法里,这种写法是绝对的反面教材,好孩子不要模仿哦~
  其中akagiinfo数组中放的就是消息信息,数量可以根据自己的需求进行修改,别忘了改一下35行的随机范围就可以使用啦。如果是WordPress用户,由于我的主业是java的说,不太懂PHP,js的注册什么的我不会的说,因此只能采用笨方法,笨方法是我们把这些代码加到你所使用的皮肤中的footer.php中的body里(皮肤位置为/home/wwwroot/default/wp-content/themes),然后再把live2d.js放到/home/wwwroot/default/js里(没有的话可以自行创建该文件夹),同上,模型放在/home/wwwroot/default/live2d,声音放在/home/wwwroot/default/sound中。最后切换下皮肤再换回来,恭喜您!您的看板娘就破壳啦~

发表评论

电子邮件地址不会被公开。 必填项已用*标注