## 東方蓄音機 スキン作成方法

### ☆はじめに

ここでは東方蓄音機用のスキン作成方法を説明していきます。
スキンを使用しないデフォルトの状態はこれです。
スキンを使用するとこのような表示になります。
以下難しいことが書いてあるかもしれませんが、基本的には
「BMPを作り、どの位置にパーツを表示するかを設定ファイルに書く」
ということを行えばスキンデータが作れます。
一番簡単なのは背景のBMPだけ用意して、パーツはデフォルトのままという状態です。

### ☆ファイル構成

スキンデータは大きく
・画像データ（BMPファイル）
・設定ファイル（iniファイル）
の２つで構成されています。
この２つを作成することでスキンデータを作成できます。
各データは１つのフォルダにまとめて入れておきます。
サンプルでは以下のようなファイル構成になっています。

### ☆画像データ

画像データはBMPを使用します。
画像として扱えるパーツは以下の物になります。

・全体背景
・Playボタン
・Pauseボタン
・Stopボタン
・Backボタン
・Nextボタン
・設定ボタン
・プレイリスト編集ボタン
・DSP Plug-inボタン
・詳細設定チェックボックス
・シャッフル再生チェックボックス
・無限ループチェックボックス
・ミュートチェックボックス

●全体背景
全体背景は１枚のBMPを使用します。
特にサイズの指定はありません。
東方蓄音機には簡易表示と詳細表示の２種類がありますが、
それぞれで別の背景は使用できません。（今のところ）
簡易表示の事も考えて背景を考えてもらった方がいいです。
それぞれの表示サイズに関しては設定ファイルで設定可能です。
サンプルの背景画像はこれです。
必要な説明などがあれば背景に書き込んでおいて下さい。
曲名や再生時間表示部分は背景が透過するようになっています。
サンプルでは見やすいように背景にあたる部分を白くしています。
曲名や再生時間表示部分などのパーツは設定ファイルで位置やサイズを変更することが可能です。

●プッシュボタンパーツ
通常のボタンです。
表示位置は設定ファイルで設定可能です。
プッシュボタンとして扱うのは次の物です。
・Playボタン
・Stopボタン
・Backボタン
・Nextボタン
・設定ボタン
・プレイリスト編集ボタン
・DSP Plug-inボタン
プッシュボタンの画像は１つのボタンで４種類あります。
４種類とも画像サイズは同じにしてください。
ここではPlayボタンを例に説明を行います。
・ノーマル状態
通常表示されている状態の画像です。
最低限このパーツだけあれば表示は可能です。
後の３つは最悪なくても構いません。
・マウスオーバー状態
マウスがボタンの上にある状態の画像です。
なくても問題ありません。
・ボタンクリック状態
ボタンをクリックしたときの状態の画像です。
なくても問題ありませんが、作成しないとボタンがクリックしたときに
ボタンをクリックしたようには見えなくなります。
・ボタンクリック＋マウスオーバー状態
ボタンをクリック＋マウスオーバーの状態の画像です。
基本的に表示されることはないのでなしで構いません。

●チェックボックスパーツ
チェックボックス形式のボタンです。
表示位置は設定ファイルで設定可能です。
チェックボックスとして扱うのは次の物です。
・Pauseボタン
・詳細設定チェックボックス
・シャッフル再生チェックボックス
・無限ループチェックボックス
・ミュートチェックボックス
チェックボックスの画像は１つのチェックボックスで４種類あります。
４種類とも画像サイズは同じにしてください。
ここではPauseボタンと無限ループチェックボックス（汎用チェックボックス）を例に説明を行います。
使う画像によってプッシュボタンのように見せることも可能です。
・チェックOFF状態
チェックOFFの状態で通常表示されている状態の画像です。
最低限このパーツだけあれば表示は可能です。
・チェックOFF＋マウスオーバー状態
チェックOFFの状態でマウスがボタンの上にある状態の画像です。
なくても問題ありません。
・チェックON状態
チェックONの状態で通常表示されている状態の画像です。
なくても問題ありませんが、作成しないとボタンがクリックしたときに
チェックがONになったようには見えなくなります。
・チェックON＋マウスオーバー状態
チェックONの状態でマウスがボタンの上にある状態の画像です。
なくても問題ありません。

プッシュボタン、チェックボックス共に最低限２種類の画像は作成した方がいいです。
プッシュボタンとチェックボックスの画像を作るのが面倒でれば、
画像を使わない普通のプッシュボタンとチェックボックスを表示することも可能です。
設定ファイルで設定できます。

### ☆設定ファイル

設定ファイルはテキスト形式で作成します。
ファイル名は「skin.ini」としてください。
これ以外のファイル名は認識しません。
設定ファイルには以下の３つの項目があります
・使用するBMPファイルの設定
・各パーツの表示位置とサイズ
・標準パーツの色関係
書式などはサンプルのskin.iniを参照してもらうのがわかりやすいと思います。
行の先頭に「;」を書くとその行は無視されます。
コメントを入れたりするときに利用できます。

●使用するBMPファイルの設定
ここでは各ボタンのパーツと実際どのBMPファイルを使用するかを書きます。
まずBMPの設定であることを示す
[BMP]
を先頭に書きます。

次に各パーツとBMPファイル名を書いていきます。
書式は「(パーツの種類)=(BMPファイル名)」となります。
例：

[BMP] BackGround=bk.bmp Play_U=Play_U.bmp Pause_U=Pause_U.bmp ・ ・ ・

パーツの種類一覧は以下の通り。
使用する物だけ書けばOKです。

パーツの種類 | 説明
--- | ---
BackGround | 背景に表示されるBMP
Play_U | Playボタンのノーマル状態用のBMP
Play_S | Playボタンのボタンクリック状態用のBMP
Play_F | Playボタンのマウスオーバー状態用のBMP
Play_FS | Playボタンのマウスオーバー＋ボタンクリック状態用のBMP
Pause_U | PauseボタンのチェックOFF状態
Pause_S | PauseボタンのチェックON状態
Pause_F | PauseボタンのチェックOFF＋マウスオーバー状態<
Pause_FS | PauseボタンのチェックON＋マウスオーバー状態
Stop_U | Stopボタンのノーマル状態用のBMP
Stop_S | Stopボタンのボタンクリック状態用のBMP
Stop_F | Stopボタンのマウスオーバー状態用のBMP
Stop_FS | Stopボタンのマウスオーバー＋ボタンクリック状態用のBMP
Back_U | Backボタンのノーマル状態用のBMP
Back_S | Backボタンのボタンクリック状態用のBMP
Back_F | Backボタンのマウスオーバー状態用のBMP
Back_FS | Backボタンのマウスオーバー＋ボタンクリック状態用のBMP
Next_U | Nextボタンのノーマル状態用のBMP
Next_S | Nextボタンのボタンクリック状態用のBMP
Next_F | Nextボタンのマウスオーバー状態用のBMP
Next_FS | Nextボタンのマウスオーバー＋ボタンクリック状態用のBMP
Setting_U | 設定ボタンのノーマル状態用のBMP
Setting_S | 設定ボタンのボタンクリック状態用のBMP
Setting_F | 設定ボタンのマウスオーバー状態用のBMP
Setting_FS | 設定ボタンのマウスオーバー＋ボタンクリック状態用のBMP
PlayEdit_U | プレイリスト編集ボタンのノーマル状態用のBMP
PlayEdit_S | プレイリスト編集ボタンのボタンクリック状態用のBMP
PlayEdit_F | プレイリスト編集ボタンのマウスオーバー状態用のBMP
PlayEdit_FS | プレイリスト編集ボタンのマウスオーバー＋ボタンクリック状態用のBMP
Dsp_U | DSP Plug-inボタンのノーマル状態用のBMP
Dsp_S | DSP Plug-inボタンのボタンクリック状態用のBMP
Dsp_F | DSP Plug-inボタンのマウスオーバー状態用のBMP
Dsp_FS | DSP Plug-inボタンのマウスオーバー＋ボタンクリック状態用のBMP
Details_U | 詳細表示チェックボックスのチェックOFF状態
Details_S | 詳細表示チェックボックスのチェックON状態
Details_F | 詳細表示チェックボックスのチェックOFF＋マウスオーバー状態
Details_FS | 詳細表示チェックボックスのチェックON＋マウスオーバー状態
Shuffle_U | シャッフル再生チェックボックスのチェックOFF状態
Shuffle_S | シャッフル再生チェックボックスのチェックON状態
Shuffle_F | シャッフル再生チェックボックスのチェックOFF＋マウスオーバー状態
Shuffle_FS | シャッフル再生チェックボックスのチェックON＋マウスオーバー状態
Loop_U | 無限ループチェックボックスのチェックOFF状態
Loop_S | 無限ループチェックボックスのチェックON状態
Loop_F | 無限ループチェックボックスのチェックOFF＋マウスオーバー状態
Loop_FS | 無限ループチェックボックスのチェックON＋マウスオーバー状態
Mute_U | ミュートチェックボックスのチェックOFF状態
Mute_S | ミュートチェックボックスのチェックON状態
Mute_F | ミュートチェックボックスのチェックOFF＋マウスオーバー状態
Mute_FS | ミュートチェックボックスのチェックON＋マウスオーバー状態

●各パーツの表示位置とサイズ
ここでは各パーツの表示位置とサイズを書きます。
まず表示位置の設定であることを示す
[POSITION]
を先頭に書きます。

次に各パーツと表示位置、サイズを書いていきます。
書式は「(パーツの種類)=(表示位置X座標),(表示位置Y座標),(幅),（高さ）」となります。
BMPを使用したパーツの場合、幅と高さは自動的にBMPのサイズで表示されます。
上記画像の青い部分を現す場合は
(パーツの種類)=50,60,30,15
となります。
「0,0,0,0」を指定した場合、そのパーツは表示されません。
不必要なパーツがある場合に使用します。
最低限「設定」だけは表示できるようにした方がいいです。
「-1,-1,-1,-1」を指定するとデフォルト状態の表示位置とサイズになります。
簡易表示、詳細表示の背景だけはこの書式とは違い
「ViewWindowSize=（簡易表示の幅）,（簡易表示の高さ）,（詳細表示の幅）,（詳細表示の高さ）」となります。
詳細表示部分は背景BMPのサイズにします。
他のパーツと違い自動的にサイズは変更されません。
例：

[POSITION] ViewWindowSize=480,120,480,280 Play=12,61,21,21 Pause=37,61,21,21 Stop=62,61,21,21 ・ ・ ・

パーツの種類一覧は以下の通り。
使用する物だけ書けばOKです。

パーツの種類 | 説明
--- | ---
ViewWindowSize | 簡易表示、詳細表示の背景のサイズ
Play | Playボタンの表示位置とサイズ
Pause | Pauseボタンの表示位置とサイズ
Stop | Stopボタンの表示位置とサイズ
Back | Backボタンの表示位置とサイズ
Next | Nextボタンの表示位置とサイズ
Setting | 設定ボタンの表示位置とサイズ
PlayEdit | プレイリスト編集ボタンの表示位置とサイズ
Dsp | DSP Plug-inボタンの表示位置とサイズ
Details | 詳細表示チェックボックスの表示位置とサイズ
Shuffle | シャッフル再生チェックボックスの表示位置とサイズ
Loop | 無限ループチェックボックスの表示位置とサイズ
Mute | ミュートチェックボックスの表示位置とサイズ
Vol | 音量スライダーの表示位置とサイズ
Seek | シークスライダーの表示位置とサイズ
Title | 曲名表示テキストボックスの表示位置とサイズ
Time | 再生時間表示テキストボックスの表示位置とサイズ（幅６６以上だと総時間も表示）
PlayList | プレイリストの表示位置とサイズ
LoopCount | ループ回数の表示位置とサイズ

●標準パーツの色関係
ここでは標準パーツで表示される色の指定を行います。
標準パーツとなるのは以下の物です。
・曲名表示テキストボックス
・再生時間表示テキストボックス
・プレイリスト
・ループ回数
・音量スライダー
・シークスライダー
標準パーツについては画像を表示することができません。
そのため表示文字の色を変更出来るようにしています。
プレイリストは背景の色も指定可能です。
まず色の設定であることを示す
[COLOR]
を先頭に書きます。
次にパーツの色を指定します。
書式は「(パーツの種類)=(RGBのR),(RGBのG),(RGBのB)」となります。
色はRGBで指定をし、範囲は０〜２５５になります。
例：

[COLOR] ListBoxBack=240,240,240 ListBoxString=0,0,0 DefaultString=0,0,0

パーツの種類一覧は以下の通り。

パーツの種類 | 説明
--- | ---
ListBoxBack | プレイリストの文字の色
ListBoxString | プレイリストの背景の色
DefaultString | 曲名、再生時間、ループ回数の文字の色

以上の３つを組み合わせた物が設定ファイルとなります。
実際に組み合わせてみると以下のようになります。
例：

[BMP] BackGround=bk.bmp Play_U=Play_U.bmp Pause_U=Pause_U.bmp ・ ・ ・ [POSITION] ViewWindowSize=480,120,480,280 Play=12,61,21,21 Pause=37,61,21,21 Stop=62,61,21,21 ・ ・ ・ [COLOR] ListBoxBack=240,240,240 ListBoxString=0,0,0 DefaultString=0,0,0

### ☆まとめ

長々と書いてきましたが、スキンデータを作るには
１．背景となるBMPを作る
２．ボタンパーツのBMPを作る
３．設定ファイルに表示位置を書く
ということを行えば作成できます。
サンプルの設定ファイルを元に作成してもらえれば
表示位置と色関係の値を変更するだけで作成可能です。
BMPファイル名はサンプルの物と同じにしてもらえれば、
設定ファイルを変更する必要もないと思います。
一番大変なのはデザイン考えて絵を描く事です・・・

サンプルの画像見てもらえればわかると思いますが、作者はお絵かきできませんｗ
今回初のCG作成となってます。
「俺がまともな物作ってやんよ」という方がもしいらしたら連絡ください。
東方蓄音機に同梱する事も考えています。
メール

### ☆Ｑ＆Ａ

Ｑ．プレイリストの背景を透過にできないの？
Ａ．一応可能なのですが、スクロールを行った時に表示が乱れるので今回の採用は見送りました。
解決策が見つかれば今後のバージョンアップで対応するかもしれません。

Ｑ．簡易表示したくないんだけど
Ａ．簡易表示と詳細表示のサイズを一緒にしてもらうか、詳細表示チェックボックスを表示しなければ
詳細表示の状態のみになります。

Ｑ．再生時間の表示が２種類ある？
Ａ．再生時間表示テキストボックスの幅が６６以上の時は総時間も表示するようになっています。
６６以下の場合は現在の再生位置のみ表示します。

Ｑ．スキン作る時にサンプルの画像使ってもいい？ボタン関係とか
Ａ．東方蓄音機用のスキンに使用するのであれば使ってもらって結構です。
他のものには使用しないで下さい。

Ｑ．変な設定ファイル作ってしまってボタン表示されなくなった。どうすればいい？
Ａ．skin.iniファイルを削除するか、適当にリネームして東方蓄音機を起動して下さい。
スキンを使用しないデフォルト表示に戻ります。
もう一度スキンを使用する場合は東方蓄音機の設定を行ってください。

Ｑ．スキン作ってやったけどHPとか持ってないから公開できないんだけど
Ａ．連絡頂けばこちらでの公開を検討します。
自作の画像でないものを使用している場合は作者の方に了解をもらってください。
問題になる可能性がありますので。

Ｑ．自作のスキンを東方蓄音機に入れて自分の所で公開したいんだけど
Ａ．スキンを同梱した２次配布は行わないでください。
東方蓄音機のバージョンアップもありますので。
東方蓄音機配布ページへのリンクをお願いします。

ＨＰへ
メール
2007/9/26 りょうちん