webcyou / Messageviewjs
Licence: mit
Talking Scene JavaScript Library
Stars: ✭ 56
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Messageviewjs
Svg World Map
🗺 A JavaScript library to easily integrate one or more SVG world maps with all nations (countries) and second-level political subdivisions (countries, provinces, states).
Stars: ✭ 38 (-32.14%)
Mutual labels: game, javascript-library
Minetest game
Minetest Game - The default game for the Minetest engine [https://github.com/minetest/minetest/]
Stars: ✭ 1,083 (+1833.93%)
Mutual labels: game
Autoobjectdocumentation
Auto Object Documentation - JavaScript
Stars: ✭ 54 (-3.57%)
Mutual labels: javascript-library
Prosemirror Mentions
ProseMirror plugin to enable @mentions and #hashtags
Stars: ✭ 55 (-1.79%)
Mutual labels: javascript-library
Retc
An application used to convert razer effects to multiple output sdks.
Stars: ✭ 54 (-3.57%)
Mutual labels: game
21st Century Pong
🎮 Pong clone for Linux written in C++ with SDL 2.0.
Stars: ✭ 53 (-5.36%)
Mutual labels: game
Pretendyourexyzzy
A web clone of the card game Cards Against Humanity.
Stars: ✭ 1,069 (+1808.93%)
Mutual labels: game
Weixin Minigame Tutorial
Flappy Bird adaptation on Wechat Minigame using PhaserJS + English Wechat Minigames Tutorial
Stars: ✭ 56 (+0%)
Mutual labels: game
Genshin Audio Extractor
Convert Genshin Impact audio files into a playable format
Stars: ✭ 54 (-3.57%)
Mutual labels: game
Tis 100 Solutions
My solutions to the assembly programming game TIS-100
Stars: ✭ 56 (+0%)
Mutual labels: game
Poet Js
Po.et JS is an small library that provides methods to easily create and sign Po.et Claims.
Stars: ✭ 56 (+0%)
Mutual labels: javascript-library
MessageViewJS
Talking Scene JavaScript Library HTML5, WebGame etc...
これは何？
「MessageViewJS」はゲーム内でよくある会話シーンを簡単実装できる、JavaScriptライブラリです
demo
Install
Bower
bower install message_view.js
npm
npm install message-view-js
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>
</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"
}
});
Options Reference
| OptionName | DefaultValue | SetValue | OptionDetail |
|---|---|---|---|
| view | .messageView#default | className, idName, element | MessageViewの大枠となる要素 |
| contents | .messageView#default .mv-contents | className, idName, element | MessageViewのcontentsとなる要素 |
| character | .messageView#default .mv-contents .mv-image.character | className, idName, element | MessageViewのcharacterとなる要素 |
| characterImg | .messageView#default .mv-contents .mv-image.character img | img element | MessageViewのcharacterのimg要素 |
| messageView | .messageView#default .mv-contents .mv-comment | className, idName, element | メッセージ表示する親要素 |
| message | .messageView#default .mv-contents .mv-comment .val | className, idName, element | メッセージを挿入する要素 |
| name | .messageView#default .mv-contents .mv-name | className, idName, element | characterの名前表示する要素 |
| pointer | .messageView#default .mv-contents .mv-comment .pointer | className, idName, element | メッセージのポインタ要素 |
| messageOpenClass | in | className ( string ) | MessageViewを表示する際、追加するクラス名 |
| messageCloseClass | hide | className ( string ) | MessageViewを非表示する際（終了後）、追加するクラス名 |
| page | 0 | Number | Messageを開始するページナンバー |
| speed | normal | "normal", "fast", "slow", Number | Messageを表示するスピード |
| ignoreSkip | false | boolean | Messageのスキップを無効 |
| loop | false | boolean | Messageをループさせるか |
| isPointer | false | boolean | Messageのポインター表示 |
| isClose | true | boolean | MessageView終了後のView表示 |
Author
Daisuke Takayama Web帳
License
Copyright (c) 2015 Daisuke Takayama Released under the MIT license
Thanks
素材提供：株式会社ブリリアントサービス 『星宝転生ジュエルセイバー』http://www.jewel-s.jp/
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].