スポンサーリンク

TIPプラグイン

概要

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

サンプル画像

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

サンプルゲーム

主な機能

  • テキストをクリックしてTIPを表示します。
  • TIPデータは、csvファイルを読み込みます。複数読み込み対応。
  • TIPテキストやホバー時の文字色・SE・マークの有無を指定できます。
  • TIP詳細の内容をページ分けできます。
  • TIP一覧を自動作成します。
  • TIP表示フラグを保存します(TIPテキストを表示したかどうか)
  • バックログからもTIP表示するかを指定できます。
    (※4.01b以降、マークはCSS、カラーはバックログプラグインで対応お願いします)
  • TIP詳細・TIP一覧のレイアウトはhtmlファイルで編集可能です。csv別に指定もできます。
  • TIP詳細のテキストから別のTIP詳細を表示できます。
  • ページを指定してTIP詳細を表示できます。
  • 未読マークを表示できます。
  • 縦書き対応。

ダウンロード

動作確認

ティラノスクリプト ver506e

注意点

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

使い方

組み込み方法

  1. data/others/plugin に 「tip」フォルダを入れてください。
  2. csvファイルを作成し、data/others/plugin/tip/csv/ に保存します。※作り方は後述
    デフォルトのファイル名は「 tip_data.csv 」
  3. first.ks (ビルダーは scenario/system/plugin.ks )等、ゲーム起動時に必ず読み込むksファイルでプラグインを呼び出してください。
    [plugin name=tip]
  4. TIP呼出しにしたいテキストを [tip key=hoge][endtip] で囲みます。
    例:[tip key=hoge]ほげ[endtip]
  5. TIP一覧表示は [tip_list] タグを使います。
    [button] タグに 割り当てる場合は、role=sleepgame を指定してください。
    target 先に[tip_list]を書きます。

    [button x=0 y=0 fix=true role=sleepgame graphic=tiplist.gif target=*tiplist]
    
    *tiplist
    [tip_list]
    [s]

記述例

全てのTIPに色指定、マークを付ける場合。

[plugin name=tip color=0xffff55 mark=true]
[tip key="hoge"]ほげ[endtip]

別のcsvを読み込む

[tip_loadcsv] に、file でファイル名を指定する。

[tip_loadcsv file=sample.csv]

テンプレートのhtmlファイルを指定する

[tip_loadcsv] に、tip_html、tiplist_html でファイル名を指定する。
※データと紐づけになります。

[tip_loadcsv file=sample.csv tip_html=tip_sample.html tiplist_html=tiplist_sample.html]

別のcsvのTIPを表示する

[tip] に、data_name でファイル名(拡張子無し)を指定する。

[tip key=hoge data_name=sample] ※keyは必須です

別のcsvのリストを表示する

[tip_list] に、data_name でファイル名(拡張子無し)を指定する。

[tip_list data_name=sample]

フラグを追加する

[tip_flag] タグを使います。※flag_name は何でもOK

[tip_flag key=hoge flag_name=flag2]
[tip_flag key=hoge flag_name=flag2 data_name=sample]

TIP詳細から直接別TIP詳細を表示する

csv のtip項目にhtmlを記述する。

<span class='tip' data-key='hoge'>ほげ</span>
<span class='tip' data-key='hoge' data-name='sample'>ほげ</span>

ページを指定してTIPを開く

tipタグに page パラメータを指定する。

※2ページ目を開く場合
[tip key=hoge page=2] 
※非表示ページ等で、ページ名を指定したい場合は、テンプレートにdata-pageを記述する。
テンプレート:<div class="tip_body" data-page="testpage">
tipタグ   :[tip key=hoge page=testpage]

未読マークを付ける

TIP詳細 テンプレートに {{if flag==1}}New{{/if}} と記述する。※記述済み
TIPリスト テンプレートに {{if flag==0}}New{{/if}} と記述する。※記述済み
ボタン [button] タグに、name=tip_btn,tip_data を指定し、[tip_btn]タグを記述。
※tip_data は、CSVファイル名です。

[button name=tip_btn,tip_data role=sleepgame]
[tip_btn]

make.ks にも、[tip_btn] を記述。※ロード用。

未読マークを付けない

TIP詳細 テンプレートの {{if flag==1}}New{{/if}} を削除する。
TIPリスト テンプレートの {{if flag==0}}New{{/if}} を削除する。
ボタン 何もしない。

パラメータ

[plugin]タグ用

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

パラメータ名 初期値 説明
file ファイル名 tip_data.csv TIPデータファイル名
color 0x000000形式 defaultChColor TIPの色
entercolor 0x000000形式 "" TIPマウスカーソルが乗った時の色
flag true/false true リスト表示をフラグ管理するか
flag_var sf/f sf フラグ保存用変数の種類
mark true/false false TIPにマークを付ける
log true/false true バックログからもTIP表示させるか
log_se true/false false バックログのTIP に SE を入れるか(※log=true時)
all_clickse oggファイル none 共通のクリック音
all_enterse oggファイル none 共通のマウスカーソルが乗った時の音
all_leavese oggファイル none 共通のマウスカーソルが外れた時の音
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 ナビからマウスカーソルが外れた時の音
tip_html htmlファイル tip.html TIP表示用html
tiplist_html htmlファイル tip_list.html TIPリスト表示用html
pagefeed auto/none/数値 auto TIPリストをページ分けするか。しない場合は none
fade_speed 数値 300 TIP表示のフェード時間
vertical true/false config.vertical 縦書きにするか

[tip_loadcsv]タグ用

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

パラメータ名 必須 説明
file csvファイル名 × 読み込みたいcsvファイル
flag true/false × リスト表示をフラグ管理するか
flag_var sf/f × フラグ保存用変数の種類
tip_html htmlファイル × TIP表示用html
tiplist_html htmlファイル × TIPリスト表示用html

[tip]タグ用

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

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

[tip_list]タグ用

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

パラメータ名 必須 説明
tip_clickse oggファイル × TIPのクリック音
tip_enterse oggファイル × TIPにマウスカーソルが乗った時の音
tip_leavese oggファイル × TIPからマウスカーソルが外れた時の音
list_clickse oggファイル × TIPリストのクリック音
list_enterse oggファイル × TIPリストにマウスカーソルが乗った時の音
list_leavese oggファイル × TIPリストからマウスカーソルが外れた時の音
data_name 文字列 × csvデータ名(※拡張子は無し)

[tip_flag]タグ用

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

パラメータ名 初期値 必須 説明
key 文字列 csvファイルで定義した「key」の値
data_name 文字列 × csvデータ名(※拡張子は無し)
flag_name 文字列 flag × フラグの名前
flag_val true/false true × フラグの値

[tip_btn] タグ用

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

パラメータ名 初期値 説明
data_name 文字列 csvデータ名(※拡張子は無し)
pos 文字列 rt 未読数の表示位置。
lt(左上)、rt(右上)、ct(中上)、lb(左下)、rb(右下)、bc(中下)
※left、right、center、top、bottom の頭文字です。

csvファイル作成の注意

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

データ例

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

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

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

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

csvファイル

key,title,tip,tip2
tyrano,ティラノ,1ページ目テキスト,2ページ目テキスト

tip.html

<span class="tip_body">{{:tip}}</span>
<span class="tip_body">{{:tip2}}</span>

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

その他

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

Ver・更新履歴

2021/02/11 Ver4.03
ボタン用未読数の位置指定パラメータを追加、位置ズレを修正。ティラノv506eで動作確認。
[endtip]タグで[font]の指定がクリアされる仕様を変更。
リストからの詳細を閉じる際のチラつきを修正。prev/nextボタンのカーソル画像を修正。
2021/01/04 Ver4.02a
メニューの後にリストを開くと、メニューが残ってしまう不具合を修正。
2021/01/03 Ver4.02
未読マーク追加。セーブ・ロード画面からTIP詳細が開く不具合修正再び。ティラノv505eで動作確認。
2020/11/23 Ver4.01b
パラメータの log_color、log_mark、log_plugin、pagenum を削除。
テンプレートを簡略化、CSSを微調整等。
2020/10/22 Ver4.01a
csv読み込み、CSS間違い等不具合修正。ajax表記修正。
2020/10/19 Ver4.01
リスト表示用タグを[tip_list]に変更。ナビにprev/nextを追加。tipのページ指定追加。
tip内tip表示、f変数を指定した時の挙動等、不具合修正。他CSSなど修正。
2020/09/21 Ver4.00
CSV複数読み込み、テンプレート指定等機能追加。ティラノv504aで動作確認。
2019/10/10 Ver3.04a
一部パラメータが効かない不具合修正。他微調整。ティラノv475で動作確認。
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プラグインについてのメモ的記事

参考サイト

このエントリーを Google ブックマーク に追加
Pocket
LINEで送る

スポンサーリンク

56件のコメント

  1. 糸尾かしか

    hororo様、こんばんは。
    呟きに反応して頂き、ありがとうございます。
    ご本人に聞かず、ツイッター上では大変失礼致しました。

    ティラノスクリプトV5 で使用させてもらっているのですが、csvに入っていたtip_dataをそのまま入れてやってもkeyの三番目yamatoで動作しなくなります。
    一・二はきちんと動作しました。
    スクリプトも一・二と同様このような感じです→[tip key=”yamato”]『サンプル』[endtip]
    pluginファイルには他に空想曲線様のテーマ一括変換プラグインも導入しているのですが、それは特に問題無いのでしょうか?

    初心者なのでどこがおかしいのかサッパリ分からず、大変お手数ですが何か分かりましたらお返事を頂ければ幸いです。

    1. hororo

      Twitterの方で対応させて頂いたので、結果のみです。
      Config.tjs の projectID を変更する事で解決しました。良かった!!

  2. 糸尾かしか

    申し訳ありません。追記です。
    エラーinit.ksファイルの149行目IF文に誤りがありますと出てきます。
    重ねてになりますが、よろしくお願い致します。

  3. みけ

    初めまして。TIPプラグインとても便利に使わせていただいています!
    ありがとうございます。

    ティラノビルダーで使用させて頂いているのですが、28項目以降でストーリー中でTIP指定した文字が表示されずゲームが停止してしまうバグがおきて原因と解決策が分からずにいます…。

    初心者なので初歩的なミスなのかもわからないのですが、もし何か思いつく原因や解決策などありましたら、ご教示頂けると幸いです。
    お手数おかけして申し訳ありません。

    1. hororo

      みけ さんへ
      はじめまして、プラグインのご利用ありがとうございます。

      すみません、これでうまくいくかはわからないのですが
      一度、システム変数の削除とセーブデータの初期化をしてみて頂けますでしょうか?

      システム変数のクリアは、一番最初に読み込むシナリオの一番上に
      ティラノスクリプトで [clearsysvar] を入力します。
      [clearsysvar] は、一回ゲーム実行したら削除して大丈夫です。

      もし変わらなければ、もう一度お知らせ頂けますでしょうか?
      よろしくお願い致します。

  4. みけ

    hororo様

    仰る通りにしてみたら直りました!
    困っていたのでとても助かりました。
    迅速なご返信と的確なアドバイス、本当にありがとうございました。

    1. hororo

      みけさんへ

      直って良かったです!!
      もしかしたら、CSV項目を途中で増やすと起きる不具合かな?と予想してるんですが違ったらすみません。
      もし、また同じような不具合が出たら、一先ず同じ方法をお試し頂ければと思います。
      よろしくお願い致します。

      1. みけ

        hororo 様
        先日はとても助かりました。ありがとうございました。
        また別に分からないところがあり、質問させて頂いてもよろしいでしょうか。

        TIP詳細で2ページ目を作りたいと思い、csvで
        ーー
        key,title,tip,tip2
        tyrano,ティラノスクリプト,内容1,内容2
        ーー
        のように記述しているのですが2ページ目が表示されず、tip.htmlにも

        ーー

        {{:tip}}
        {{:level}}{{:tip}}


        {{if flag2==true && tip2!=””}}

        {{:tip2}}
        {{:tip2}}

        {{/if}}

        ーー
        のようにを記述しましたが、1ページ目に内容1だけが表示され2ページ目は真っ白になってしまいます。初心者質問で大変恐縮ですが、お時間のあるときに解決方法を教えて頂けたら嬉しいです。

        1. hororo

          みけ さんへ

          TIPの2ページ目表示ですが、2ページ目の表示にフラグが必要無い場合は
          {{if flag2==true}} は必要ありません。

          2ページ目が存在しない項目対策に、下記のように記述して頂ければ表示されます。
          <span class=”tip_body”> が無いとページ分けが出来ませんので、お気を付けください。

          {{if tip2!=””}}
           <span class=”tip_body”>{{:tip2}}</span>
          {{/if}}

          因みに、「flag2」を有効にする場合は、
          シナリオファイルのフラグを立たせたい部分に、下記のようにタグを記述する必要があります。

          [tip_flag key=*** flag_name=flag2]

          分かりにくい機能だとは思いますので、まだわからない部分がありましたら再度ご質問頂ければ幸いです。
          宜しくお願いします。

          1. みけ

            hororo様

            仰るように書きかえてみたらきちんと2ページ目が表示されました!!
            困っていたことが一瞬で解決してしまいとても感動しております…

            初心者にも丁寧に教えて下さって感謝しきれません。
            本当にありがとうございます。

            1. hororo

              みけ さんへ

              表示されたようで良かったです!!
              具体的に質問して頂けるので回答しやすいです。
              こちらこそありがとうございます。

  5. ゆに

    hororoさま

    以前は質問に丁寧にお答え頂きありがとうございました。
    Ver4.02aを使用させて頂いております。
    1点挙動に気になる箇所がありましたので、お知らせいたします。
    TIP詳細画面から×ボタンでTIPリスト画面に戻る際、その前に表示していた画面が一瞬表示されてしまいます。(すぐにTIPリスト画面に戻るので動作に問題はありません)
    ティラノスクリプトV506cで制作中です。

    原因等おわかりでしたら教えて頂けると助かります。
    お手数おかけして大変申し訳ありません。
    よろしくお願いします。

    1. hororo

      ゆにさんへ

      すみません!現象は確認しておりますので、次のアップデートで解消する予定です。
      遅くても今月中には公開できると思いますので今しばらくお待ちください。

      もしお急ぎの場合は、tip.js 114行目あたり。

      layer_menu.empty();

      if(layer_menu.find(“.display_menu”).length) layer_menu.empty();

      とする事で解消します。
      ご不便おかけしてすみません。

      1. ゆに

        hororoさま

        ご返信ありがとうございます。
        とくに急いでおりませんので、アップデートを待つことにします。

        よろしくお願いします!

コメントを残す

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

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

スポンサーリンク