Contents
概要
「街」とか「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
注意点
メッセージレイヤーの表示順を変更しています。設定や環境によってはうまく動作しない可能性があります。
使い方
組み込み方法
data/others/plugin
に 「tip」フォルダを入れてください。- csvファイルを作成し、
data/others/plugin/tip/csv/
に保存します。※作り方は後述
デフォルトのファイル名は「 tip_data.csv 」 - first.ks (ビルダーは scenario/system/plugin.ks )等、ゲーム起動時に必ず読み込むksファイルでプラグインを呼び出してください。
[plugin name=tip]
- TIP呼出しにしたいテキストを
[tip key=hoge][endtip]
で囲みます。
例:[tip key=hoge]ほげ[endtip]
- 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プラグインについてのメモ的記事
参考サイト
- 【JavaScript】読み込んだCSVファイルを配列に変換する方法【Ajax】 | Web制作会社スタイル
- jQuery: 配列から特定の条件で要素を取り出すには?($.grep) – Build Insider
- JavaScriptでCSVデータ(項目行あり)をJSON形式に変換する | Try Lifelog
- JavaScriptテンプレートエンジン「JsRender」のすすめ | 1 pixel|サイバーエージェント公式クリエイターズブログ
hororo様、こんばんは。
呟きに反応して頂き、ありがとうございます。
ご本人に聞かず、ツイッター上では大変失礼致しました。
ティラノスクリプトV5 で使用させてもらっているのですが、csvに入っていたtip_dataをそのまま入れてやってもkeyの三番目yamatoで動作しなくなります。
一・二はきちんと動作しました。
スクリプトも一・二と同様このような感じです→[tip key=”yamato”]『サンプル』[endtip]
pluginファイルには他に空想曲線様のテーマ一括変換プラグインも導入しているのですが、それは特に問題無いのでしょうか?
初心者なのでどこがおかしいのかサッパリ分からず、大変お手数ですが何か分かりましたらお返事を頂ければ幸いです。
Twitterの方で対応させて頂いたので、結果のみです。
Config.tjs の projectID を変更する事で解決しました。良かった!!
申し訳ありません。追記です。
エラーinit.ksファイルの149行目IF文に誤りがありますと出てきます。
重ねてになりますが、よろしくお願い致します。
初めまして。TIPプラグインとても便利に使わせていただいています!
ありがとうございます。
ティラノビルダーで使用させて頂いているのですが、28項目以降でストーリー中でTIP指定した文字が表示されずゲームが停止してしまうバグがおきて原因と解決策が分からずにいます…。
初心者なので初歩的なミスなのかもわからないのですが、もし何か思いつく原因や解決策などありましたら、ご教示頂けると幸いです。
お手数おかけして申し訳ありません。
みけ さんへ
はじめまして、プラグインのご利用ありがとうございます。
すみません、これでうまくいくかはわからないのですが
一度、システム変数の削除とセーブデータの初期化をしてみて頂けますでしょうか?
システム変数のクリアは、一番最初に読み込むシナリオの一番上に
ティラノスクリプトで [clearsysvar] を入力します。
[clearsysvar] は、一回ゲーム実行したら削除して大丈夫です。
もし変わらなければ、もう一度お知らせ頂けますでしょうか?
よろしくお願い致します。
hororo様
仰る通りにしてみたら直りました!
困っていたのでとても助かりました。
迅速なご返信と的確なアドバイス、本当にありがとうございました。
みけさんへ
直って良かったです!!
もしかしたら、CSV項目を途中で増やすと起きる不具合かな?と予想してるんですが違ったらすみません。
もし、また同じような不具合が出たら、一先ず同じ方法をお試し頂ければと思います。
よろしくお願い致します。
hororoさま
以前は質問に丁寧にお答え頂きありがとうございました。
Ver4.02aを使用させて頂いております。
1点挙動に気になる箇所がありましたので、お知らせいたします。
TIP詳細画面から×ボタンでTIPリスト画面に戻る際、その前に表示していた画面が一瞬表示されてしまいます。(すぐにTIPリスト画面に戻るので動作に問題はありません)
ティラノスクリプトV506cで制作中です。
原因等おわかりでしたら教えて頂けると助かります。
お手数おかけして大変申し訳ありません。
よろしくお願いします。
ゆにさんへ
すみません!現象は確認しておりますので、次のアップデートで解消する予定です。
遅くても今月中には公開できると思いますので今しばらくお待ちください。
もしお急ぎの場合は、tip.js 114行目あたり。
layer_menu.empty();
↓
if(layer_menu.find(“.display_menu”).length) layer_menu.empty();
とする事で解消します。
ご不便おかけしてすみません。
hororoさま
ご返信ありがとうございます。
とくに急いでおりませんので、アップデートを待つことにします。
よろしくお願いします!