Talking Scene JavaScript Library
HTML5, WebGame etc..
Install
Bower
bower install message_view.js
Samples
Sample Demo 005
すみません。。現在準備中です。
今しばらくお待ち下さい。
Sample Demo 006
すみません。。現在準備中です。
今しばらくお待ち下さい。
The Basics
<!doctype html>
<head>
<script src="/js/message_view.js" type="text/javascript"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var message = new MessageViewer({
"data": [{
"name": "生方 すみれ",
"message": "はじめまして！",
"img_url": "/img/character_0001.png"
}]
});
}, false);
</script>
</head>
<div class="messageView" id="default">
<div class="mv-contents">
<p class="mv-name"></p>
<div class="mv-comment">
<p class="val"></p>
<p class="pointer"></p>
</div>
<p class="mv-image character"><img src="" alt=""/></p>
</div>
</div>
</html>
Multi
var message = new MessageViewer({
"data": [{
"name": "生方 すみれ",
"message": "はじめまして！",
"img_url": "/img/character_0001.png"
},
{
"message": "こんにちは！"
}]
});
Character Change
var message = new MessageViewer({
"data": [{
"name": "生方 すみれ",
"message": "はじめまして！",
"img_url": "/img/character_0001.png"
},
{
"name": "高山 大介",
"message": "こんにちは！"
"img_url": "/img/character_0002.png"
}]
});
Multi Class Change
var message = new MessageViewer({
"data": [{
"side_class": "right",
"name": "生方 すみれ",
"message": "はじめまして！",
"img_url": "/img/character_0001.png"
},
{
"side_class": "left",
"name": "高山 大介",
"message": "こんにちは！"
"img_url": "/img/character_0002.png"
},
{
"side_class": "right",
"name": "生方 すみれ",
"message": "今日はいい天気ですね！",
"img_url": "/img/character_0001.png"
}]
});
CallBack Function
var message = new MessageViewer({
"data": [{
"name": "生方 すみれ",
"message": "はじめまして！",
"img_url": "/img/character_0001.png"
}]
}, function() {
console.log("callBack");
});
Options
var message = new MessageViewer({
"data": [{
"name": "生方 すみれ",
"message": "はじめまして！",
"img_url": "/img/character_0001.png"
}],
"option": {
"loop": true,
"speed": "fast"
}
});
Reference Docs
準備中
すみません。。現在準備中です。
今しばらくお待ち下さい。