simutrans_theme_making_notes

Simutrans テーマ制作についてのメモ

https://scrapbox.io/files/61b5aa6a30633b002369a304.png

筆者は文章がこの世で2番目ぐらいに苦手なので箇条書きです。Chakuwikiみたいなものだと思って読んでね

TL;DR

「お前もSimutransのスキンを作らないか？」

備忘録も兼ねて少しだけTips

(120系以降のThemeについて解説であり、110系までのWindowSkinについてではない)

用意するもの

任意のテキストエディタ

任意のペイントツール

Simutrans Tikiwikiのリファレンス

ざっくりとした流れ

ね？簡単でしょ？

テーマの構造

テーマを追加するためには何を作らねばならないか

2つのファイルからなる

tab

テーマ名、各種要素の色指定やUIの挙動に関するオプションを指定する

後述のpakファイルも指定する

pak

各種要素に使用する画像を指定する

他のアドオンと同様datとpngを作ってmakeobjでコンパイルする

つまり、目標としてはhogehoge.tabとhogehoge.pakを作ることになる

1. 公式のテーマのソースを用意する

無くても作れないことはないが大変なので公式テーマを改造する

simutrans-src-xxx.zipが本体ソース

解凍したフォルダの中のthemes.srcというフォルダがテーマのソース

2. 画像を描いてdatファイルを書いてpak化する

今回は「flat」テーマを改造の元にする

https://scrapbox.io/files/61b5cb5f999cf5001e5664cf.png

解凍したフォルダの中はこのようになっているはず

余談 : flat-skin-large.tabは高DPI環境向けのテーマ

このpngを描き換えていく

各画像とも、64pxタイルなら64pxタイルで、128pxタイルなら128pxタイルで全ての画像のコマ割りを合わせること

アドオン作成経験者なら描き換えること自体には困らないであろう

pngが何の為のものかわからなくなったときはdatを参照

英語ながらコメントで細かく解説がある

一方、datについては変更する必要はほぼない

flatテーマがほぼ全ての要素を画像の使い回しなく使用しているため

書き換え終わったらいつも通りmakeobjでpak化する

$ makeobj pak hogehoge.pak hogehoge.dat

3. tabファイルを書く

simuconf.tabを改変したことのあるプレイヤーなら改変自体には困らないであろう

これも基本的にSimutrans Tikiwikiのリファレンスを見ればほぼ網羅されているため、補足と載っていない一部の定義について解説する

nameにテーマ選択画面で表示される名前を指定する

リファレンスを片手に各要素を指定していく

themeimagesに前項で作ったpakを指定するのを忘れないように

色指定について

hexカラーコード(#000000)

上述のリファレンスによる最大3桁の数字による色指定

が使える模様

定義

gui_color_text_minus

赤字(経営的な意味で)を表示する際の文字色

デフォルトは文字通り#FF0000

gui_color_text_plus

黒字(経営的な意味で)を表示する際の文字色

デフォルトは文字通り#000000

4. themeフォルダに放り込む

お使いのSimutransのthemeフォルダにpakとtabをシュゥゥゥーッ!!

Simutransのメニュー → 表示設定 → Select a theme for display → tabのnameで指定したテーマ名を選択 → OK すると

https://scrapbox.io/files/61b5aa6a30633b002369a304.png

各要素特有のメモ

ここからは各要素に特有の注意事項を列挙する

どうせ息をするように仕様が変わるので深くは紹介しない

要素と名前

Button / Roundbutton - ボタン / ラウンドボタン

次の状態に分かれる

unpressed - 通常

pressed - 押下

disabled - 無効

color mask - カラーマスク(Roundbuttonにはない模様)

Editfield - テキストボックス

Listbox - リストボックス

Back - ウィンドウ背景

Titlebar - タイトルバー(120.2.2現在機能せず?)

Gadgetback - ウィンドウ周りの部品の背景(120.2.2現在機能せず?)

Checkbutton - チェックボックス

Posbutton - ポジションボタン?

Scrollbar - スクロールバー

バー自体(Scroll bar)とスクロールボタン(Scrollbar knob)をまとめて定義している

Gadget - ウィンドウ回りの部品

ウィンドウ上の各アイコンとウィンドウリサイズのノブ

Divider - 要素を区切る水平線

タイトルバー(Titlebar)

ウィンドウ回りの各アイコン(Gadget)

gui_titlebar_heightでアイコンサイズより大きくしても上下方向にセンタリングされない模様(なんでやねん)

dat側で他のアドオンと同じく画像にオフセットを指定できるのでそれを使うと楽

スクロールバー/スクロールボタン(Scrollbar)

ポジションボタン?(Posbutton)

ポジションボタンという一般的でないUI要素も去ることながら、両者の使い分けはややこしい

ライバル会社ウィンドウに使われる会社選択ボタンはスクロールボタン(なんでやねん)

選択式リストボックスの隣にあるのもスクロールボタン

車両ウィンドウの「指定路線」はポジションボタン

メッセージ表の当該箇所に移動するボタンはポジションボタン

ボタン(Button/RoundButton)

ButtonとRoundButtonで何が違うのかは今回検証していない

4つの状態と9つの部品で、36コマからなる

状態

通常

押下

無効

カラーマスク

不可解な仕様なので後述する

部品

左側上段

右側上段

中央上段

左側中段

右側中弾

中央中段

左側下段

右側下段

中央下段

愚痴

自称UI評論家(?)としては、マウスが乗った時(ホバー)の状態の表現も欲しい

ボタンが無効の場合はそもそもボタンごと非表示になってたり(なんでやねん)、SimutransのUIは表現に一貫性が無い

そのため無効状態の画像は活躍の機会が半分ぐらいに減っているのが残念な所

前述のPosbuttonは特に顕著

リストボックス(Listbox)

路線一覧で一編成も設定されていないスケジュールなどで表示される灰色は変えられない模様(なんでやねん)

描画について

ボタンで検証したが各種要素共通と思われる

描画順について

引き伸ばしはせず繰り返される(なんでやねん)

描画基準点は画像左上

余白部分がpngより小さい場合ははみ出る分が切り捨てられる

上下方向でも同じ処理(下段を描画して、余白に)

特にボタンで凝ったデザインのものを作ろうとするならば、tab側で指定したUIサイズとpngのサイズをきっちり合わせておく必要がある

透過pngについて

対応した120系(どのver以降か忘れたが)以降であればカラーマスク以外のどの要素にも透過pngが使える

半透明なウィンドウ背景にすることも可能

しかし各UI要素を半透明にしても下のウィンドウと合成されていい感じになるわけでは無いので注意

ボタンのカラーマスクについて

要は透過色以外のピクセルに色を乗せて色付きボタンを表示する時のコマ

各種グラフのボタンやライバル会社のボタンに使われている

前述のとおり透過pngは使用できない(無視されて色が乗らない)

半透明にして元のボタンにさらにオーバーレイ合成する…なんて高度なことはできない(させて)

ボタン等の描画順が同じように適用されるらしく、各パーツオーバーレイが重なって謎のラインが入る(よくわからん)

いかがでしたか？

今回チラ見せしたしたテーマはいずれ配布を予定している。

Simutransのスキン作成を通して、SimutransのUIには一貫性が無いことが理解できたであろう。