ティラノビルダーで「TIPプラグイン」を導入してみましたメモ

情報をシェアしよう

ティラノビルダーでTIPプラグインを導入してみました。


「TIP」というのは、この場合「情報(マメ知識)」とか「助言」のことですね。


よくハウツー本の途中途中に挟まれていたり、WEBサイトに用語集として組み込まれていたり。某有名サウンドノベルゲームにもシステムとして導入されています。


それがまぁ、プラグインひとつで再現できるわけです。ありがてぇありがてぇ……。


以下、プラグインを導入した際のカスタマイズや設定などをメモがてら書いていきます。

スポンサーリンク

ダウンロード

プラグインページ

「街」とか「428」とかのTIPのようなプラグイン。 テキストをクリックして別窓で解説を表示できます。

↑のリンクよりダウンロード。


解凍し、「tip」フォルダを「data/others/plugin」にブチ込むと。

メニュー画面に入れた

↑むりやり上に置きました(メニューのデザインあんまり気にしてない)。

公式では「TIP一覧表示は [button] タグに exp=”TYRANO.kag.menu.displayTiplist()” を指定してください」とありますが、自分はbuttonタグ使いませんでした(よくわからなかった)。

テーマの「menu.html」に追記しました。

テーマメニューに色々追加した話はこちら

「メニュー画面にフルスクリーンボタン設置したい」に追記をしました(正しい記述方法の解説記事を書いていただいた!) スマホブラウ...

カスタマイズ

あんまり弄ってませんが一応。

背景画像を変える

元々はこう。明るいデザインなので、ダークな世界観には合わないかも。

tyrano/images/system/bg_base.png」をデフォルトで読み込んでいるので、URLを変えるなり画像を差し替えるなりすればOKと。

各TIPの見出しの文字色変更

背景をダークにし、文字色を白っぽくした。

見出しの文字色は、「tip.css」のこの部分の数字を変更する。


「250 250 250」の部分が色を表す。元は「0 0 90」で黒っぽかった。「1」の部分は不透明度なのでムシしていいかなと。


どの数字がどの色を表すかは「RGBカラーコード」で検索して探す。

便利なカラーコード変換ツール

16進数のカラーコード、RGB形式、HSV形式など、色を設定する様々なシーンで対応可能。HTMLやCSS、各種ツールの設定時に便利です。

解放数の文字色変更

背景画像をダークな色に変更したので、「解放数」を黒字から白字に変えます。

「color:rgba(250, 250, 250,1);」を追記しました。つまり見出しと同色。


また「top:48px;」「right:140px;」とし、余白を調整した。

余白を調整する

余白を調整。

現在TIPプラグインは1280×720サイズ前提には作られていないので、適宜調整する必要があります。(別に余白が気にならないなら問題ない)


「解放数」の余白設定は一つ前の項目で書きました。

リスト表示部分の上余白と左余白を調整しました。


「padding: 120px 60px 60px 84px;」の部分です。「padding」は余白のことで、それぞれの数字は「↑余白 →余白 ↓余白 ←余白」を表します


(なおpaddingが「内側余白」で、marginが「外側余白」)

ナビ(❶❷の部分)の余白を調整しました。

「top: 45px;」と「left: 80px;」の部分がそうです。

見出し背景は画像じゃなくてCSSで

「見出し部分の該当画像はどこかなー?」ってずっと探してたんですが……無いんですね。


こちら、CSSで描かれた見出し画像みたいです。


もっと細かくカラーカスタマイズしたい場合は、tip.cssの該当箇所を細かく修正する必要があります。自分はもうこれで十分だと判断しました(各カラーコードをいちいち調べるのが辛い)。

CSVファイルを編集する

OpenOffice使いです

Excel持ってる方はそっちのほうがいいかも。


自分はOpenOffice(Excel/Wordの互換フリーソフト)使って編集しました。

OpenOffice公式

UTF-8で読み込む

tipプラグインのCSVファイルをOpenOfficeで開こうとすると、こんな画面が出ます。


で、↑のような感じに設定すればOKです。


「Unicode(UTF-8)」にしないと文字化けします。また「区切る」を「コンマ」のみにしないと読み込みがグチャグチャになります

「key」「title」「tip(2ページにわたる場合はtip2も)」を好きに編集して保存。

こんな感じになる

本文内のワードを「[tip key=”usagi01″ color=”0xff9999″ mark=”true”]ミカヅキウサギ[endtip]」みたいに囲むと、こうなる。

なお、色やマーク画像は変更できるしナシにもできる

本文中のワードをクリックしてもいいし、TIP一覧ページからでも見られる。


画像も入れられるし、2ページ目も用意できる



詳細はプラグイン公式ページやサンプルで。

まとめ


ゲーム内のTIPSとかいちいち見る?


正直あんまり見ない。でも何となく「賑やか」になる気はする

TIPプラグインをダウンロードし、背景画像や文字色をカスタマイズし、メニュー画面に組み込み、CSVファイルを編集し、ゲーム内のワードに反映しました


TIPシステムを上手く使い、ストーリーの補助ができたらなと思ってます。


今回は以上です。良き小ネタライフを────ではまたφ(・ω・ )

【PS4】428 封鎖された渋谷で
PlayStation 4
スパイク・チュンソフト
TIPシステムのある某有名サウンドノベルゲーム

スポンサーリンク