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

☆はじめに

ここでは東方蓄音機用のスキン作成方法を説明していきます。
スキンを使用しないデフォルトの状態はこれです。


スキンを使用するとこのような表示になります。


以下難しいことが書いてあるかもしれませんが、基本的には
「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です。

●各パーツの表示位置とサイズ
ここでは各パーツの表示位置とサイズを書きます。
まず表示位置の設定であることを示す
[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 　・ 　・ 　・

パーツの種類一覧は以下の通り。
記載がない物はデフォルト位置で表示されます。
不必要な場合は「0,0,0,0」を指定してください。

●標準パーツの色関係
ここでは標準パーツで表示される色の指定を行います。
標準パーツとなるのは以下の物です。
・曲名表示テキストボックス
・再生時間表示テキストボックス
・プレイリスト
・ループ回数
・音量スライダー
・シークスライダー

標準パーツについては画像を表示することができません。
そのため表示文字の色を変更出来るようにしています。
プレイリストは背景の色も指定可能です。
まず色の設定であることを示す
[COLOR]
を先頭に書きます。
次にパーツの色を指定します。
書式は「(パーツの種類)=(RGBのR),(RGBのG),(RGBのB)」となります。
色はRGBで指定をし、範囲は０〜２５５になります。

プレイリストの背景で「-1,-1,-1」を指定した場合、透過となり背景のBMPが見えるようになりますます。
例：

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

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

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

[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作成となってます。
「俺がまともな物作ってやんよ」という方がもしいらしたら連絡ください。
ボタン用のパーツのみでも受け付けてます。
背景用BMPとボタンのある程度の配置を教えて頂ければこちらでスキンデータにすることも可能です。
東方蓄音機に同梱する事も考えています。
メール

☆Ｑ＆Ａ

Ｑ．文字の大きさ変えれないの？
Ａ．Ver.1.6.2から対応しました。
スキンデータ作成支援ツールを使用した場合可能となります。

Ｑ．文字のフォントの種類変えれないの？
Ａ．Ver.1.6.2から対応しました。
スキンデータ作成支援ツールを使用した場合可能となります。
特殊なフォントを使用するとPC環境によってインストールされていない可能性があります。
ほかのPCで使う場合は文字の表示ができない可能性があります。

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

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

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

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

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

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

Ｑ．デフォルトの表示位置やサイズの詳しい値教えて
Ａ．デフォルトの位置やサイズは次のようになっています。

パーツの種類	[POSITION]値
ViewWindowSize	467,120,467,281
Play	22,62,64,22
Pause	68,62,42,22
Stop	114,62,42,22
Back	162,62,42,22
Next	208,62,42,22
Setting	22,90,60,22
PlayEdit	233,120,105,22
Dsp	348,120,105,22
Details	86,90,72,20
Shuffle	168,90,102,20
Loop	277,90,102,20
Mute	383,90,60,20
Vol	410,62,45,20
Seek	17,37,350,20
Title	80,11,380,22
Time	370,37,90,22
PlayList	14,148,444,122
LoopCount	312,62,50,20

Ｑ．背景BMPは提供してやってもいいけどスキンデータの作り方わかんね
Ａ．連絡頂けばこちらでスキンデータにします。
ボタン配置の構想なども一緒に教えてください。（サンプルと同じものとか）
自作の画像でないものを使用している場合は作者の方に了解をもらってください。
問題になる可能性がありますので。

☆改訂履歴

日付	項目	内容
07/11/21	☆はじめに	スキンデータ作成支援ツール関係を追加
07/11/21	●標準パーツの色関係	スキンデータ作成支援ツールで設定できる項目を追加
07/11/21	☆Ｑ＆Ａ	項目の追加と修正
07/09/30	●各パーツの表示位置とサイズ	記載ミスがあったのを修正 「使用する物だけ書けばOKです。」→「記載がない物はデフォルト位置で表示されます。不必要な場合は「0,0,0,0」を指定してください。」
07/09/30	●標準パーツの色関係	機能追加 リストボックスの背景を透過する設定。
07/09/30	☆Ｑ＆Ａ	項目の追加と削除
07/09/30	☆改訂履歴	新規作成