TIPプラグイン

「街」とか「428」とかのTIPみたいなプラグイン。
メッセージレイヤのテキストをクリックして別窓を開きます。
TIP内容はCSVから読み込みますので、表計算やデーターベースソフト等で管理できます。
html、css、jsRender を理解してないと使いにくいかもです…。

縦画面サンプル(600*900)

機能

  • テキストをクリックしてTIPを表示します。
  • TIPデータは、csvファイルを読み込みます。
  • TIPテキストの色を変更できます。
  • TIPテキストにカーソルが乗った時の文字色を指定できます。※3.00以降
  • TIPテキストにSEを指定できます。※3.00以降
  • TIPテキストにマークを付けられます。※3.00以降
  • TIP詳細をページ分けできます。※3.00以降
  • TIP一覧を自動作成します。※3.00以降
  • TIP表示フラグを保存します(TIPテキストを表示したかどうか)※3.00以降
  • バックログからもTIP表示するかを指定できます。※3.00以降
  • バックログにTIPで指定した。カラー・マーク・SEを反映するか指定できます。※3.00以降
  • TIP詳細・TIP一覧はhtmlファイルで編集可能です。
  • 縦書き対応。※3.04以降


使い方

  1. data/others/plugin に 「tip」を入れてください。
  2. csvファイルを作成し、data/others/plugin/tip/ に保存します。※作り方は後述
    デフォルトは「 tip_data.csv 」
  3. first.ks 等、必ず読み込むksファイルでプラグインを呼び出してください。
    [plugin name="tip"]
  4. TIP呼出しにしたいテキストを [tip key="hoge"][endtip] で囲みます。
    例:[tip key="hoge" color="0xff9999"]ほげ[endtip]
  5. TIP一覧表示は [button] タグに exp="TYRANO.kag.menu.displayTiplist()" を指定してください。
    例:[button x=0 y=0 fix=true graphic="button_tip.gif" exp="TYRANO.kag.menu.displayTiplist()"]

[plugin]タグ用 パラメータ

(※デフォルト値の場合は省略可)

パラメータ名 初期値 説明
file ファイル名 tip_data.csv TIPデータファイル名
color 0x000000形式 defaultChColor TIPの色
entercolor 0x000000形式 "" TIPマウスカーソルが乗った時の色
flag true/false true リスト表示をフラグ管理するか
mark true/false false TIPにマークを付ける
log true/false true バックログからもTIP表示させるか
log_color true/false false バックログのTIP color を入れるか(※log=true時)
log_mark true/false false バックログのTIP mark を入れるか(※log=true時)
log_se true/false false バックログのTIP に SE を入れるか(※log=true時)
log_plugin true/false false バックログプラグインと併用するか
pagefeed true/false true TIPリストをページ分けするか
pagenum 数値 auto リスト1ページあたりの件数
tip_clickse oggファイル none TIPのクリック音
tip_enterse oggファイル none TIPにマウスカーソルが乗った時の音
tip_leavese oggファイル none TIPからマウスカーソルが外れた時の音
list_clickse oggファイル none TIPリストのクリック音
list_enterse oggファイル none TIPリストにマウスカーソルが乗った時の音
list_leavese oggファイル none TIPリストからマウスカーソルが外れた時の音
close_clickse oggファイル none 閉じるのクリック音
close_enterse oggファイル none 閉じるにマウスカーソルが乗った時の音
close_leavese oggファイル none 閉じるからマウスカーソルが外れた時の音
navi_clickse oggファイル none ナビのクリック音
navi_enterse oggファイル none ナビにマウスカーソルが乗った時の音
navi_leavese oggファイル none ナビからマウスカーソルが外れた時の音
vertical true/false config.vertical 縦書きにするか

[tip]タグ用 パラメータ

(※指定が無い場合は、[plugin]の指定が反映されます。)

パラメータ名 必須 説明
key テキスト csvファイルで定義した「key」の値
color 0x000000形式 × TIPの色
entercolor 0x000000形式 × TIPマウスカーソルが乗った時の色
mark true/false × TIPにマークを付ける
clickse oggファイル × TIPのクリック音
enterse oggファイル × TIPにマウスカーソルが乗った時の音
leavese oggファイル × TIPからマウスカーソルが外れた時の音

記述例

例:全てのTIPに色指定、マークを付ける場合。
  first.ks : [plugin name="tip" color="0xffff55" mark="true"]
  scene1.ks : [tip key="hoge"]ほげ[endtip]

csvファイル作成の注意

  • ファイル名を変更する場合は、[plugin name="tip" file="***.txt"] 等ファイル名を指定してください。
  • csvファイルは「tip」フォルダ内に保存してください。
  • 「カンマ区切りテキスト」であれば、拡張子はcsv以外でも構いません。
  • 文字コードは、「UTF-8」にしてください。
  • 1行目の見出しは必須です。
  • 見出しの「key」は変更不可です。
  • 見出しには「id」「flag」は使用できません。※自動で追加します。
  • 改行で1件分となります。
  • 必ず行の最後は「_EOF」を付けてください。
  • 項目数は自由に追加可能です。※tip.html にも追記してください。
  • htmlタグも記入できますが、「"」を使う場合は書出し後のデータチェックしてください。「'」推奨。
  • ファイルが上手く読込めない場合は、一度テキストエディタで開き上書き保存してみてください。
データ例

(※詳しくは添付の tip_data.csv を参照してください)

1行目 key,title,tip,tip2,_EOF
2行目 tyrano,ティラノスクリプト,マルチプラットフォーム対応のゲーム作成用スクリプトです。,2ページ目,_EOF
3行目 akane,あかね,<img src='./data/fgimage/chara/akane/normal.png'>ティラノスクリプト公式キャラクター。,,_EOF

TIP詳細のページ分けについて

TIP詳細表示でページ分けをする場合は、csvでページ毎に項目を分けてください。※項目名は何でもOK。
tip.html の tip_body の数でページ分けをします。

csvファイル
key,title,tip,tip2,_EOF
tyrano,ティラノ,1ページ目テキスト,2ページ目テキスト,_EOF
tip.html
<span class="tip_body">{{:tip}}</span>
<span class="tip_body">{{:tip2}}</span>

※同梱のtip.htmlを参照してください。

その他

  • マーク画像は、tip/image/tip_mark.png を差し替える事で変更可能です。
    ※正方形で作成してください。
  • マーク画像の表示は、tip/tip.css にて変更可能です。
  • フラグは、[tip] タグを表示した時点で true になります。TIPをクリックしたかは判断されません。
  • リスト表示で pagenum="auto"(初期値)を使う場合は、
    #tip_list_container の width() height() 値を正確に設定してください。
    上手く動かない場合は、1ページの表示件数を数値で入力してください。
  • バックログのSEは「TIPからマウスカーソルが外れた時の音」には非対応です。
  • htmlの変更禁止id・class
    • tip.html … #tip_container #tip_container #tip_tmp .tip_body
    • tip_list.html … #tip_list_wrap #tip_list_container #tiplist_tmp .tip_list
  • sampleフォルダのtip_sample.ks がサンプルゲームとなっていますので参照してください。
    ※ゲーム制作時は、sampleフォルダは削除してください。

動作確認

ティラノスクリプト ver472d

注意点

メッセージレイヤーの表示順を変更しています。設定や環境によってはうまく動作しない可能性があります。

ダウンロード

Ver・更新履歴

2018/09/30 Ver3.04
縦書き対応。
2018/09/24 Ver3.03a
解像度変更に自動対応するようCSSを修正。
2018/08/22 Ver3.03
jsRenderテンプレート読み込みを GET に修正。
2018/03/24 Ver3.02
セーブ・ロード画面からTIP詳細が開く不具合修正。バックログプラグインと併用時の挙動修正。1.00公開停止。
2018/03/23 Ver3.01
key_configの動作をmenuと同じになるよう修正。
2017/12/23 Ver3.00
jsRender対応。色々機能追加。2.00は公開停止。
2016/08/17 Ver2.00
ラグが酷いのでmacroから[linl]タグ改造へ変更。storageパラメータでの画像挿入は廃止。
2016/08/14 Ver1.02
storageパラメータが使えなかった件修正。endtip は [resetfont] だけで良かったので修正。
2016/07/18 Ver1.01
ksファイル以外は others フォルダへ移動。csvファイル名変更。DL場所変更。
2016/04/14 Ver1.00
公開。

おまけ

バックログやTIP一覧からTIP詳細を開いている時に、右クリックで詳細のみ閉じたい場合は、下記コードを tip.js の一番下に追記してください。
※本体改造です。

参考サイト

そういや、「JSON」ってjsやPHP使ってると良く見るけど、今回のプラグイン作るまで何のことかわかってませんでしたwというくらいには素人です。

Pocket
LINEで送る

TIPプラグイン” への2件のフィードバック

  1. SOrowです。TIPプラグイン、マサオのお出かけクッキング1.08版(http://north.undo.jp/masao2/)にて使わせていただきました!ありがとうございます!クレジットにも「めも調様」として記載させていただきました!
    とても便利で、おかげさまで理想の表示を実現できました。csvで指定できるのでテキストの見通しも良くなり、TIPリンクの色も自由に変えられるので、メッセージの表示にそれだけで変化を出せて、画像も置けるのでちょっとした遊びも入れられました。今回TIP部分を表示する背景としてks上でtip_html部分にimgタグを入れて画像を表示させたのですが、動作自体はks上で完結しているので、そういった少しの変更もやりやすかったです。自分がノベルゲームを作る時には、この機能をいつか使いたいと憧れていたので、今回それを叶えられて本当に嬉しいです。ありがとうございました!
    cssでも表示を変更できるので、また便利だったのですが、ただもしかしたら、
    .message_inner p span.tip {z-index:9999;}
    あたりが抜けているのかな?と。最初tipタグを入れてもリンクが発生せず、「?」と思い、改めて記事を見てtip.cssにこれを足したら表示できるようになったので、もしかしたらということで、報告しておきます。
    記事に参考サイトも記載してくださっているので、勉強にもなりました。今回は本当にありがとうございました!

    • SOrow さん、こんばんは。
      わーー(汗)ご指摘ありがとうございます!!GitHub修正しました!
      「なるべく使いやすく変更しやすいように」を目標にしているので、そう言って頂けるととても嬉しいです!ありがとうございます(*'ω'*)

      はっ!ksファイルの一番下の「console.log(tips);」部分をコメントアウトするか削除してください・・・詳しくはメールさせていただきます(滝汗)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください