Message-view-js NPM

MessageViewJS

Talking Scene JavaScript Library HTML5, WebGame etc...

npm.io

これは何？

「MessageViewJS」はゲーム内でよくある会話シーンを簡単実装できる、JavaScriptライブラリです

demo

デモページ

Install

Bower

bower 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

Thanks

素材提供：株式会社ブリリアントサービス『星宝転生ジュエルセイバー』http://www.jewel-s.jp/

javaScript message game Talking Scene Library

del gulp-clean gulp-plumber

@everything-registry/sub-chunk-2158 @infinitebrahmanuniverse/nolb-mess

1.0.2

8 years ago