message-view-js

v1.0.2

Published

2 years ago

「MessageViewJS」はゲーム内でよくある会話シーンを簡単実装できる、JavaScriptライブラリです。Talking Scene JavaScript Library HTML5, WebGame etc...

Downloads

0High
0Medium
0Low

daisuke.takayama

javaScript message game Talking Scene Library

MessageViewJS

Talking Scene JavaScript Library HTML5, WebGame etc...

これは何？

「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/