ダーマコントロールスキン作成講座 第2回【実戦篇】

ダーマコントロールスキン作成講座 第2回

今回は実際の作業に関して市販のアプリケーションなどを組み合わせつつ説明してゆきます。普段Photoshopなどを使用されている方を対象としていますが、前回のべたように根気があれば、OS付属のソフトウェアで作成可能です。
今回は下記のようなスキンを作成してみましょう。

今回のサンプルのスキンを作成する際に想定しているのは、コントロール画面の小型化、それぞれの設定画面を横にならべて、左から順に設定することができるような流れを作りたいと思いました。

作業に必要なものは以下のとおりです。

  • 付属のペイントでも十分ですがPhotoshopなどの.bmp形式で画像を保存できる画像編集ソフトがあればより便利でしょう。
  • japan.txt や(スキン名).ini を編集するテキストエディタなど(Notepadでも可)
  • 位置を正確に割り出すために電卓があると便利。
  • 時間と根気と情熱

●基本インターフェイスの作成

まずは基本インターフェイスの作成を行います。

すでにあるスキンを複製し、そのデータを変更するという方法が一番簡単な方法です。
または紙などにレイアウトの下書きし、それを取り込み、それに沿ってインターフェイスを作成してみるのもいいでしょう。
スキン上のすべてのオブジェクトは数値で指定できるので、それぞれのボタンなどの大きさはすべて自由に設定できます。

最終的に.bmp形式で保存すれば良いので、たとえば、以下のようにアドビシステムズ社のイラストレーターやその他の画像ソフトを使用して画面を作成しても構いません。

※Adobe 、Adobe Illustrator、Adobe PhotoshopはAdobe SystemsIncorporated(アドビシステムズ社)の商標です。

(下絵の例)

今回はAdobe IllustratorCS2を使用し製作しました。

基本インターフェイスのデータはボタンがないファイルになり、テキストがすでに入力されているものになります。

(ボタン以外の画像部分の「基本インターフェイス」の下絵)

実際に色をつけてゆく作業はこのような画面で作業を行いました。

ボタンを別レイヤーにし、さらにマウスオーバーでのマウスの色を設定したレイヤーを用意しました。
これをBitmap形式で「書き出し」を行い、それをPhotoshopで読み込み、加工しました。

透過色について

ダーマコントロールはRGBカラー値の<R:252 G:2 B:4>で塗られた場所が透過となります。
データを作成し終えたら、透過したい部分に<R:252 G:2 B:4>を塗ってください。今回は枠の周りを透過色に変更してみましょう。

●画像の保存方法

フォトショップでは、BMPオプション画面 ファイル形式:Windows標準 色数:24bit 詳細モード:24bit R8 G8 B8 という形で保存します。基本的に、24bit標準保存 で保存します。

他のボタンなどのファイルの保存方法も同様のBMP形式で保存を行ってください。
下絵が出来上がったら、その上にボタン位置を指定し、置いてゆきます。

●ボタンの配置方法 (スキン名).ini の編集

各画像やボタンを正常に機能させるためにiniファイルの編集が必要です。
↓以下のPDFファイルにて基本的なiniファイルの構造を解説します。

ボタンの配置方法 (スキン名).ini の編集

↑クリックしてダウンロード

細かい位置を確認しながら、ctl+s キーでスキンを切り替え、読み込みなおしながら作業を行うと、位置の確認などしやすいでしょう。

注意点、スキンの作成にあたっては、変更不可のポイントも存在します。
注意点1、モード設定エリアの左側(A)と右側の自動で読み込まれるアイコン部分(B)は、別々に設定しないとうまく作成できません。
全体の横幅-アイコンの横幅(96pix)=モード設定エリアの横幅(AREA_BTN_W = 000)
になります。

注意点2
「基本設定」(71×23pix)および  マウス「割当の表示」ボタン(23×23pix)はデフォルトのままのサイズ変更ができません。

●その他のファイルの指定

以上の個別の設定の他に、いくつかの画像の作成が必要です。
○「status0.bmp」の編集

「status0.bmp」はw395×H295の画面で作成されています。
□(角丸四角)で囲まれたそれぞれのボタンのステータスは自動で読み込まれますので、背景画面の作成を行います。

「モード設定のマウスの形のアイコンの設定」
該当スキンフォルダの中に「.ico」がないと自動的にデフォルトの画面を読み込みます。
スキンのフォルダの中に.icoファイルがあれば、それを読み込んで表示されます。
「.ico」ファイルの名前を変更すると画像は読み込まれず、デフォルトの画面も表示されません。
.icoファイルの大きさは96×96pixです。

この画面をご自由に作成されてもかまいませんが、.icoが開ける画像編集ソフトで編集を行ってください。

※「status0.bmp」と「モード設定のマウス」を作成するために必要であれば、以下の画像をご利用ください。

↑画像をクリックするとダウンロード出来ます。(※解凍が必要です。)

●完成

以上の作業を繰り返し確認しながら行い、画面上でのズレなどがないか確認すれば、スキンの作成は終了になります。

お疲れ様でした。
※今回作成したスキンは以下よりダウンロードできるようになっております。お試しください。
サンプルスキンのダウンロード
以上、【実戦篇】でした。