HIDE and Seek!

[ラグ太郎]

UIのカスタマイズの基本的な方法です。ここでは、一例として「開けた草地」のUIをカスタマイズするものとします。

【SETP 1】
まずは、元になるUIファイルを取り出す事から始めます。一から製作することも出来ますが、それは無駄な労力ですので、既存の物に手を加える方法が適当です。

1. まず、LotEditorで開けた草地を元にして新しいロット(*.sc4lot)を製作します。
   
   
2. iLiveReaderで今製作したロットを開き、Query exemplar GUID の値をメモなどに記録しておきます。開けた草地は 0x0A562A05 となっている筈です。
   
   
3. iLiveReaderで、この投稿に添付している UI.dat を開いて下さい。
   
   
4. 先程記録した値 0x0A562A05 がInstance値に設定されている UI fileを探します。
   
   
5. 見つかったらクリックして確認します。緑色の見慣れたダイアログが表示されるはずです。
   
   
6. 右クリックして Save decoded file を選択し、任意の名称で保存します。ここでは UI.txt とします。

これで元になるUIファイルを取り出せました。

**追記
UIのデータだけを抜き出したファイルを用意しました。どうぞご利用下さい。

[ラグ太郎]

【STEP 2】

続いて、これをカスタマイズしていきます。まずは、初期設定では「月間維持費」が表示される部分の値を変える事から始めます。

1. iLiveReaderで先程製作した自作ロットを開きます。
   
   
2. 左側リストビュー上で右クリックし、Insert & compress file を選択、UI.txtを選びます。
   
   
3. UI file をクリックして中身を表示します。緑色のダイアログが表示されているはずです。確認したら、その真上のストリングス・グリッドに目を移します。
   
   
4. ここで、id の値が 0x00001010 となっている IGZWinText の行をダブルクリックして編集ウィンドウを表示します。
   
   
5. id の値を 0x0000106b に変更して下さい。変更したら編集ダイアログを閉じ、フロッピーディスクのアイコンをクリックして変更を保存します。

※ この id は固有の値で、ここで設定する値が実際に表示される数字を決定します。この例で出した 0x0000106b というのは、Goofy Stat Response Curve の値を指し示すもので、ゲーム中で建物をクリックした時に表示される「置き忘れた傘の数」等の値(ランダム値)です。

[ラグ太郎]

【STEP 3】
以上の変更が終わっても、ゲーム中で正しく表示・動作させる為には、もう一作業必要となります。

1. まず、UI fileのインスタンス値を他に存在しない固有のものに変更します。ここでは 0x00000001 とします。固有の値かどうかはやってみなければ分かりません。
   
   
2. 続いて、Exemplar fileの Query exemplar GUID の値を 0x00000001 とします。
   
   
3. Goofy Stat Response Curve を Add property で追加します。設定値は、Float32, -100,0,10,500 とでもしましょう。
   
   
4. 以上で終了です。SAVEして iLiveReaderを終了して下さい。

SC4を起動し、今製作したロットを設置して下さい。そしてそれをクリックすると・・・どうですか？　本来であれば月間維持費の §5 が表示されるはずですが、ランダムな値が表示されているはずです。因みに、私の環境では 454 と表示されました。

以上がUI変更方法の基本で、最も簡単な方法です 　上手くできない場合には、何度もトライして下さい。

[ラグ太郎]

【STEP 4】
ここでは、「月間維持費」の文字列を任意の文字列に入れ替えます。新しい文字列は「UI変更に成功した人の数」にでもしましょう。

1. まずは、秀丸等の高機能のテキストエディタで「UI変更に成功した人の数」とだけ書いたファイルを作成します。この時、文字コードは UTF-8で、BOMを付け、改行コードは LF にします。ファイル名は Test.txt にしましょう。
   
   　※ SJISで保存すると日本語(2バイト文字)は表示されません。
   
   
2. iLiveReaderでUI変更するロットを開き、Insert file で Test.txt を追加します。ダイアログでは XA file を選択して下さい。
   
   
3. ここで、今追加したファイルの Group値と Instance値を決定して下さい。これらの値は固有の値でなければなりません。一例として、Group値を 0xffffffff、Instance値を 0x00000001 とします。
   
   
4. UI file をクリックし、右上のストリングス・グリッドで、Caption欄が "Monthly Maintenance Cost" となっている行をダブルクリックして編集ウィンドウを表示します。
   
   
5. ダイアログの中にある captionres の値が {ea5524eb,ea54e6c6} となっているはずですが、この部分を先程設定した Group&Instance値である {ffffffff,00000001} に変更します。
   
   
6. ダイアログを閉じ、フロッピーディスクのアイコンをクリックして変更を保存します。一応、左側リストビュー上で右クリックして、Rebuild Directory file と reIndex を実行しておきます。
   
   
7. そのまま SAVE してiLiveReaderを終了します。

SC4を起動して動作を確認して下さい。

[ラグ太郎]

【STEP 5】
次は、ダイアログの大きさを変更してみます。ここでの目標は、縦に 100pixel分高くする事です。

1. iLiveReaderで目的のロットを開き、UI file をクリックします。
   
   
2. 右上のストリングス・グリッドには、通常二つの IGZWinGen の行があります。サイズ変更はこの二つの値を変更しなければなりません。
   
   
3. まず、最初の IGZWinGen の area には (246,202,538,322) という値が設定されています。これは、建物をクリックした時に表示されるダイアログの位置と大きさを表しています。即ち、左から246pixel、上から202pixelの位置に、横幅 538-246=292pixel、高さ322-202=120pixelのダイアログを表示するというものです。
   ここでの目標はダイアログの高さを100pixel高くする事ですので、(246,202,538,422) に設定変更します。
   
   
4. もう一つの IGZWinGen の area の値 (0,0,292,120) は、端的にダイアログの大きさを表しています。従って、100pixel高くするのですから、(0,0,292,220) に設定変更します。
   
   
5. 編集ウィンドウを閉じたら、フロッピーディスクのアイコンをクリックして変更を保存します。続けて、UI fileをクリックしてみて下さい。どうでしょうか、ダイアログの大きさが変わったはずです。

[ラグ太郎]

【STEP 6】
このままでは、「Close(閉じる)」ボタンの位置が変ですので、適切な場所に移動します。

1. IGZWinBtn をダブルクリックして編集ウィンドウを表示します。
   
   
2. area の値 (131,79,281,109) を (131,179,281,209) に設定変更します。単に100pixel分下方にずらしただけです。
   
   
3. 編集ダイアログを閉じ、フロッピーディスクのアイコンをクリックして変更を保存します。続けて、UI fileをクリックしてみて下さい。ボタンの位置が適切な場所に設定されたはずです。

[ラグ太郎]

【STEP 7】
新しい項目を追加します。追加出来る物は色々あるのですが、実際問題として、私たちがUI変更する時に追加出来るのは以下のものだけと考えて下さい。

■ テキストボックス - IGZWinText
これを追加する場合が最も多いと思います。文章や数字を表示する場合に使います。

■ スライドバー - IGZWinSlider
予算を動的に変更する場合に使用します。

■ 画像ファイル - IGZWinBMP
PNG形式の画像ファイルを追加する場合に使用します。

■ 区切り線 - IGZWinFlatRect
項目と項目の間の区切り線です。

では、実際に追加する方法の説明をします。ここでは、これまでの変更で表示されなくなってしまった月間維持費を表示するようにします。
この月間維持費は「月間維持費」という文字列と、その費用である数字「§5」の二つで構成されており、何れもテキストボックスに表示されますので、テキストボックスを二つ追加する事になります。

1. まず、UI file上で右クリックして Save decoded file を選択し、.txt形式で保存して下さい。
   
   
2. 秀丸等のテキストエディタで開いて下さい。中身は単純なテキスト形式ですので問題なく開けるはずです。
   
   
3. 追加する項目を一から書くのは手間ですので、既にあるものをコピーしましょう。<LEGACY clsid=GZWinText... >というのが二つありますので、この二つをコピーし、ペーストして下さい。ペースト後は以下のようになります。
   
   　<LEGACY clsid=GZWinTextEdit ...>
   　<LEGACY clsid=GZWinText ...>
   　<LEGACY clsid=GZWinText ...>
   　<LEGACY clsid=GZWinText ...>　←今ペーストしたもの
   　<LEGACY clsid=GZWinText ...>　←今ペーストしたもの
   
   
4. 保存して下さい。
   
   
5. iLiveReaderで Insert & compress fileを選択し、今保存したファイルを読み込みます。正常に読み込まれたら UI file が二つ表示されるはずですので、古い方は削除しましょう。
   
   
6. 新しい UI file をクリックして表示して下さい。右上のストリングス・グリッドを見ると、caption欄に "Monthly Maintenance Cost" が二つ、id欄に 0x0000106b が二つ表示されているはずです。
   
   これから手を加えるのは、二つ目の"Monthly Maintenance Cost"であり、二つ目の 0x0000106b です。
   
   
7. 二つ目の"Monthly Maintenance Cost"をダブルクリックして編集ダイアログを表示させます。そこで caption欄を任意の英語(ここでは"New text"とします)に変更し、area を (12,65,187,83) にして下さい。これは、表示する場所を既存の物から 5pixel下にした値です。
   
   　※ caption欄の変更はしなくても構いませんが、既存の物と区別する為に敢えて変更するように説明しました。
   　
   
8. ダイアログを閉じ、フロッピーディスクのアイコンをクリックして変更を保存します。UI file をクリックしてみて下さい。どうでしょうか、正しく表示されましたか？
   
   
9. 続いて、月間維持費(§5)を表示する部分を編集します。二つ目の 0x0000106b をダブルクリックして、id欄を 0x00001010 に変更、area を (196,65,278,83) にします。
   
   
10. ダイアログを閉じ、フロッピーディスクのアイコンをクリックして変更を保存します。そのまま SAVE して iLiveReaderを終了して下さい。

SC4を起動して動作を確認して下さい。

[ラグ太郎]

続いては、UIに画像を表示するようにします。ここでは、幅100pixel, 高さ50pixelの画像を例にとって説明します。

1. UIを編集したいロットをiLiveReaderで開き、UI file をクリックします。
   
   
2. 続けて右クリックし、Save decorded file を選択、ファイル名を任意の名称(この例ではUI.txtとします)で保存します。
   
   
3. UI.txtをテキストエディタで開き、以下の内容をコピー＆ペーストします。注意点として、赤文字部分を画像を表示したい場所の座標に合わせて設定し直して下さい。この例では、左から147pixel, 上から45pixelの場所に表示するようになっています。また、オレンジ色部分は画像の大きさです。
   
   

   引用:

   <LEGACY clsid=GZWinBMP iid=IGZWinBMP id=0x00001017 area=(147,45,247,95) fillcolor=(222,232,227) winflag_visible=yes winflag_enabled=yes winflag_moveable=yes winflag_sizeable=no winflag_sortable=no winflag_pbuff=yes winflag_pbufftrans=yes winflag_pbufferase=yes winflag_pbuffvid=no winflag_alphablend=no winflag_acceptfocus=yes winflag_mousetrans=no winflag_ignoremouse=yes image={46a006b0,14416210} imagerect=(0,0,100,50) notify=no transparentbkg=yes edgeimage=no >

   
   問題は、これを何処にペーストすべきかですが、一番最初に現れる <LEGACY clsid=GZWinTextEdit〜> の直後に挿入して下さい。
   
   
4. 変更された UI.txtを保存し、Insert & compress file で追加して下さい。この時、古い UI fileは削除しましょう。
   
   
5. UI fileをクリックして下さい。教育機関で表示される林檎の画像が見えるはずです。

[ラグ太郎]

続いて、自分で作成した画像を表示します。

1. 画像を Insert & compress file で追加します。ダイアログでは PNG file を選択して下さい。
   
   
2. 画像の Group値とInstance値を設定します。この値は固有の値でなければなりません。
   
   
3. UI fileをクリックし、ストリングス・グリッドで IGZWinBMP の行をダブルクリックして編集ウィンドウを表示します。
   
   
4. image欄の値が {46a006b0,14416210} となっているはずですので、この値を先程決めた画像のGroup値とInstance値に変更します。
   
   
5. ダイアログを閉じ、フロッピーのアイコンをクリックして変更を保存します。更に、左側リストビュー上で Rebuild Directory file と Reindex を行い、ツールバーの SAVE ボタンをクリックして保存します。
   
   
6. 一度別のロットを開いた後で、UI編集するロットを開いてみます。そして UI fileをクリックしてみて下さい。表示されましたか？

[ラグ太郎]

続いては、画像を背景全体に表示します。基本的には、これまでのやり方と変わりはありません。画像の指定、表示する枠の大きさの指定を間違いなくすればいいです。

ただ、単純に画像を背景に指定すると、UIの四隅、特に下部の丸くなっている部分の処理が問題となります。そこで、サンプルを用意しました。ダウンロードしてお使い下さい

では、手順の説明です。

1. ui.psd を Photoshop等の*.psd形式と*.png形式の画像を扱えるソフトで開きます。
   
   
2. ui.psdは「半透明の枠」「画像」「スクリーン」の三つのレイヤーで構成されています。画像の部分をお好きな画像に入れ替えて下さい。また、スクリーンは不要ならば削除し、或いは色を適当に変えて下さい。
   
   
3. レイヤーは統合せずに、*.PNG形式で保存します。
   
   
4. iLiveReaderを起動してUI変更するロットを開き、Insert & compress file を選択して画像ファイルを追加します。ダイアログでは PNG file を選んで下さい。
   
   ※稀に、画像をクリックするとiLiveReaderが落ちてしまうことがあります。そのような場合には、Insert file で追加して下さい。
   
   
5. 今追加した画像ファイルに任意の Instance値を設定して下さい。
   
   
6. UI fileを選択し以下のように設定して下さい。
   
   

   引用:

   一つ目のIGZWinGen winflag_alphablend = yes 背景画像を指定しているIGZWinBMP winflag_alphablend = no

(続きます)

[ラグ太郎]

(上からの続き)

続いて、UI全体に画像を適切に表示する為の設定を行います。
サンプルの画像は 横幅292pixel, 縦幅383pixelですので、以下ではこの値を前提に説明していきます。この大きさを変えている場合は、適宜読み替えて下さい。

1. まず一番最初にある IGZWinGen をダブルクリックして編集ウィンドウを表示します。ここの area の値のうち、三番目と四番目の値を変更します。
   
   

   引用:

   元の値：(246,102,538,236) 　式　：(246,102,246+画像の横幅,102+画像の縦幅+37) 変更後：(246,102,538,522) ※37という数字は、ダイアログのキャプション部分の高さです。

   
   
2. 続いて、２番目の IGZWinGen の area を変更します。
   
   

   引用:

   元の値：(0,0,292,200) 　式　：(0,0,画像の横幅,画像の縦幅+37) 変更後：(0,0,292,420)

   
   
3. 更に、IGZWinBMP の area と imagerect を変更します。
   
   

   引用:

   area 元の値：(0,37,292,237) 　式　：(0,37,画像の横幅,画像の縦幅+37) 変更後：(0,37,292,420) imagerect 元の値：(0,0,292,200) 　式　：(0,0,画像の横幅,画像の縦幅) 変更後：(0,0,292,383)

   
   
4. フロッピーのアイコンをクリックして変更を保存し、ツールバーの SAVE でロットを保存して下さい。
   
   
5. 保存したら、UI fileをクリックしてみて下さい。どうでしょうか、正しく表示されていますか？
   背景に指定する画像によっては、微妙にサイズが合っていない場合がありますので、その場合は area欄の値を調整して下さい。

[ラグ太郎]

続いては、UIの全ての領域に画像を表示する方法です。

1. まずは、UIに使用したい画像を追加し、Group値とInstance値を設定して下さい。
   
   
2. UI fileを選択し、右上のストリングス・グリッドにある、一番上のIGZWinGen をダブルクリックして編集ウィンドウを表示します。
   
   
3. area を画像のサイズに合わせて設定して下さい。例えば、300x200pixelなら (246,202,546,402) となります。
   
   
4. 続いて、二つ目のIGZWinGen をダブルクリックし、同様に area を (0,0,300,200) 等と適切に設定して下さい。
   
   
5. そのまま、imageに画像の Group値とInstance値を指定して下さい。
   
   
6. フロッピーのアイコンをクリックして、SAVE して下さい。