スキン機能

仕様に沿った画像ファイルを読み込む事で、ツール本体・色リスト画面の外観を変更する機能です。

スキン機能による衣替え

機能自体はそのままですが、ボタン等の配置・形状・有無が異なる事で操作性が異なる場合もあります。

右クリックメニュー内「表示 > スキン変更」で画像ファイルを選択する事で変更できます。
「skin」フォルダ内にいくつかスキン用の画像を同梱してます。

スキンを変更する事でボタンなどの外観が変わり解り難い事もあります。
少しカーソルを乗せて置くとツールチップが表示されますので、それで何のボタンか判別可能です。
また右クリックメニュー内の項目なら、どのスキンでも同様に使用できます。

また付属のスキン画像以外でも仕様に沿った画像を用意して頂く事でスキンとして使用可能です。

注意点として、スキンとして使用する画像に対して厳密な検査は行っていません。
その為何でも読み込みますが、適切でないファイルの場合エラー終了や操作不能に陥る可能性もあります。
その様な場合はタスクバー等から一旦終了させ、INIファイルを削除すれば初期状態に戻せます。


スキン画像の仕様

本ソフトのスキン用ファイルは、画像ファイル1つのみで構成されています。
画像ファイル形式としては「BMP/GIF/PNG/PSD/TGA」が使用可能です。
色数は、判定用に数十色ほど用いる為256色では厳しいと思います。
16色では恐らく無理です。
画像のαチャンネルは無効です、というか使用しないで下さい
PSD形式の場合、保存時の表示状態の画像が使用されます。

次に画像の仕様ですが、全体で740 x 416固定です。
このサイズ以上なら余白が無視されるだけですが、足りない場合どうなるか解りません。
画像内部も位置と範囲で用途が完全に固定されています。
よってスキン機能といっても色換え・衣替え程度のものと考えて下さい。


全体図

通常メイン画面
0,0 - 239,159
[ 240 x 160 ] 通常メイン・ホット画像
240,0 - 479,159
[ 240 x 160 ] 通常メイン・数値操作ツマミ
480,0 - 499,159
[ 20 x 160 ] 通常メイン・カラーマップ
500,0 - 739,159
[ 240 x 160 ] 拡張メイン画面
0,160 - 239,319
[ 240 x 160 ] 拡張メイン・ホット画像
240,160 - 479,319
[ 240 x 160 ] 拡張メイン・カラーマップ
500,160 - 739,319
[ 240 x 160 ] 拡張メイン・数値操作ツマミ
480,160 - 499,319
[ 20 x 160 ] 色リスト画面
240,320 - 399,391
[ 160 x 72 ] 色リスト・ホット画像
400,320 - 559,391
[ 160 x 72 ] 色リスト・カラーマップ
560,320 - 719,391
[ 160 x 72 ] 選択色カーソル
240,392 - 399,415
[ 160 x 24 ] 選択色カーソルマスク
400,392 - 559,415
[ 160 x 24 ] (小窓描画用)
0,320 - 75,395
[ 76 x 76 ] 小窓描画マスク
80,320 - 155,395
[ 76 x 76 ] 小窓スポイトグリッド
160,320 - 235,395
[ 76 x 76 ] 文字色指定部
0,400 - 191,415
[ (16*12) x 16 ] トレイアイコン
200,400 - 215,415
[ 16 x 16 ] 画像内の区分け
画像内は用途別に図のように区分けされます。
実際の画像はこんな感じです。

画像内の区分け
No用途領域
1通常メイン画面の画像0,0 - 239,159 [ 240 x 160 ]
2通常メイン画面のホット画像240,0 - 479,159 [ 240 x 160 ]
3通常メイン画面内の数値操作バーのツマミ480,0 - 499,159 [ 20 x 160 ]
4通常メイン画面のカラーマップ500,0 - 739,159 [ 240 x 160 ]
5拡張メイン画面の画像0,160 - 239,319 [ 240 x 160 ]
6拡張メイン画面のホット画像240,160 - 479,319 [ 240 x 160 ]
7拡張メイン画面内の数値操作バーのツマミ480,160 - 499,319 [ 20 x 160 ]
8拡張メイン画面のカラーマップ500,160 - 739,319 [ 240 x 160 ]
9色リスト画面の画像240,320 - 399,391 [ 160 x 72 ]
10色リスト画面のホット画像400,320 - 559,391 [ 160 x 72 ]
11色リスト画面のカラーマップ560,320 - 719,391 [ 160 x 72 ]
12色リスト内の選択色カーソル240,392 - 399,415 [ 160 x 24 ]
13色リスト内の選択色カーソルのマスク画像400,392 - 559,415 [ 160 x 24 ]
14小窓内描画領域0,320 - 75,395 [ 76 x 76 ]
15小窓描画マスク80,320 - 155,395 [ 76 x 76 ]
16スポイト時グリッド160,320 - 235,395 [ 76 x 76 ]
17文字色指定部0,400 - 191,415 [ (16*12) x 16 ]
18タスクトレイアイコン用画像200,400 - 215,415 [ 16 x 16 ]

「manual」フォルダ内にテンプレ用画像「template.png」を置いてます。


カラーマップ (4.8.11)

初期スキン・拡張画面のカラーマップ

画像内では右側部分で、本ソフトのスキン機能の要です。
初期スキン・拡張画面のカラーマップ この部分の画像内の色でツール画面上のどの部分が何に当るのかを判定しています。
実際に判定に用いるのはRGB値のB(青要素)のみで、他要素は色分けに使用可能です。

マウスカーソルがボタン等の上にあるかの判定は、正確にカラーマップに準拠します。
●や★型であればキチンとその上にある時だけ反応するという事です。
それに対して画面内の描画は領域を内包する矩形の範囲で行われます。

次にRGBのB値の割り当てですが、B=255の部分画面の領域外として表示されません
B=128の部分はドラッグする事で画面を移動可能な部分です。
B=0~48は各ボタンなどに割り当てられています。
その他の数値は表示されるだけで何の反応も無い、画面の背景部分として扱われます。

B値の割り当て
B用途B用途
0R値ラベル5~9同G値
1R数値表示域10~14同B値
2R値減少15~19同H値
3R値操作バー20~24同S値
4R値増加25~29同V値
B用途B用途
30小窓領域31スポイト時詳細表示領域
32現在の色のRGB値表示域33色リストへ追加
34RGB値を自動入力35最小化
36HSV操作 ON/OFF37色リスト ON/OFF
38ヒント39終了
B用途B用途
40色リストを読み込む41色リストを保存
42選択色を上へ43選択色を下へ
44選択色を削除45ランダムカラー
46メニュー表示47RGB値を貼り付け
48グリッドペイント ON/OFFその他背景画面
128ドラッグ移動領域255非表示領域
※32以降はキー割り当てのコマンド値と同じになっています。

この画面にはコレが無いとダメ。といった制約は特にありませんが、色々と不都合が生じるケースはあります。
・「128.ドラッグ移動領域」が無い場合、その画面は移動不可となります。
・「255.非表示領域」のみの場合、画面に何も表示されません。
・「30.小窓領域」が無い場合、スポイト機能が使えません。


ホット画像 (2.6.10)

通常画像とホット画像

左側が通常画像(5)、右側がホット画像(6)です。
ホット画像は、ボタンにマウスカーソルが乗った時やRGB値などの項目が操作中である時、見た目を変化させる為に使用されます。
ボタンの上にカーソルが乗れば、ホット画像内の同じ位置に当る部分が表示されます。
バーの場合、左端から現在の値の位置までがホット画像で表示されます。
それぞれの位置や領域はカラーマップで指定します。


小窓 (1.5.14.15.16)

14.15.16部分の画像

14.15.16部分の画像です。
それぞれ76 x 76サイズの画像が3つです。

この中で重要なのは真ん中の画像です。
実際に小窓部分が描画される際にこの部分をαマスクとして使用します。

マスク内の真っ黒の部分は表示されず、真っ白の部分は完全に表示されます。
灰色であれば、1.5.の画像と半透明合成されます。
0(透明) ~ 128(半透明) ~ 255(不透明)という感じで白い部分ほど不透明に表示されます。
カラーマップで指定された小窓の形状は判定に用いるのみで、実際に描画される形状はこちらに依存します。

画像を重ね合わせる位置ですが、ここで指定する76x76サイズの画像とカラーマップで指定された小窓の領域の、中心位置を合わせるように合成されます。
仮に32x32サイズの正方形で小窓を描画する場合、15.領域の中心に32x32の白い正方形を描いて下さい。

16.部分の画像は、スポイト時の拡大表示画面に重ね合わせる画像です。
グリッドや中心を示す照準を表示する事で、現在位置を把握しやすくする為に用います。
この部分の真っ黒以外は拡大画面の上に重ねて表示されます。
ちなみにスポイト時の拡大画面は、4倍表示でマウスカーソルの位置が76x76の中央に来るように描画されます。

スポイト時の詳細表示領域

カラーマップ部の拡大画像

左側はカラーマップの一部で、茶色部分は色分けされていますがB値は全て31で1つの領域となっています。
右側は実際のスポイト時の表示状態です。
スポイト時にはホット画像側を背景とし現在位置の色と座標を表示する為の領域として使用されます。
で、この領域内で色と座標を表示する位置はほぼ固定となってます。

領域の左端をL・右端の座標をRとする時、
 (L+2,2) - (R-2,17) [ R-L-3 x 16 ] の範囲が現在位置の色で描画されます。
要は左右と上端を2px空けた高さ16pxの長方形を塗り潰します。
座標表示はさらに下に2px空けた位置に左右センタリングで2行に分けて表示されます。


数値操作バーとツマミ (3.7)

画像はハメコミ合成です

色々と制約が多過ぎて弄り甲斐の無い部分です。
まずバーの操作領域は、左⇒右・幅64px固定です。

カラーマップで70 x 12の領域を指定した場合、左右3px分は余白として扱われます。
余白部分をクリックした場合、最小/最大値が指定された事になります。
中央64px分は対応する数値を指定した事になります。

また数値バーでは左端から現在の位置までがホット画像で表示されます。
仮にR値が127であれば、左端から(余白3px) + (64の半分で32px)分の領域がホット画像となります。

上記のように色々と妙な制約が付いていますが、これらはバー上のツマミの位置を合わせる為です。
バーのツマミは、「X=480~499・Y=バーの領域」の画像を真っ黒を透過色として重ね合わせて表示します。
ツマミ部分が全て真っ黒ならツマミの無いバーとなりますが、動作上何ら支障はありません。
ツマミの表示される位置は、バー領域の左端からバーの現在値分右にずらした位置となります。
ツマミ画像の横幅分をバー領域の余白で調整している訳です。


文字色指定 (17)

文字色指定部

実際には文字画像指定となります。

文字色指定部は画像のように、16 x 16pxの画像が12個並んでいます。
実際に表示する際には、それぞれの画像をタイル状に並べた画像で文字を表示します。
中央の青い部分のようにグラデーション画像であれば、その文字にもグラデーションがかかる仕組みです。

文字にはそれぞれを付ける事も可能です。
画像は字・影・字・影……という風にそれぞれ2つずつセットで並んでいます。
影部分の16 x 16pxが全て真っ黒の場合、文字の影は描画されません

それぞれの画像が使用される文字は、左側から順に次のように使用されます。


タスクトレイアイコン (18)

タスクトレイに格納された時に表示されるアイコンを変更できます。
真っ黒の部分は透過されますので、画像で黒を表示する場合は(0,0,1)などで代用して下さい。
タスクトレイアイコン用の領域が全て真っ黒の場合、実行ファイルの縮小アイコンが使用されます。


色リスト (9.10.11)

通常画像・ホット画像カラーマップの扱いは領域サイズが異なるだけでメイン画面とほぼ同様です。
登録された色(とグラデーション表示)完全固定位置に上書き描画されます。
その為画面構成もほぼ固定化されます。

色リスト描画用領域
左:実際の画像に重ねたもの
右:何も描かれていない状態 色リスト用の描画領域を2つ並べてます。 緑・黄で構成される矩形に登録された色と関連色が描画されます。
左側の縦長の矩形には、登録色によるグラデーションが描画されます。
それぞれの矩形は、色リストの画像領域内で常にこの位置に描画されます。

次に赤・黄で構成される帯状の部分ですが、色リストの登録色が3色以上の場合、この部分を縦に繰り返し並べる事で色リスト画面を拡張してます。

またご覧のように、上部に小さなボタンを配置する程度しか空きスペースが御座いません。

選択色カーソル (12.13)

色リスト内の選択中の色を示すヤツ
色リスト内で選択中の色を示す為のカーソルです。
左側(12)がその色を示す画像、右側(13)がその不透明度を示すαマスク画像となります。


メニュー用アイコン画像

メニューアイコン
起動時に実行ファイルと同じ場所に「menu.bmp」という画像ファイルがあれば、メニュー項目のアイコン画像として使用します。
16 x 16pxの画像を横に16個並べた画像で、ど紫の部分がくり抜かれて表示されます。
画像の色数は問いませんが、PNG形式のαチャンネルは正常に機能しません。

画像と各メニュー項目の対応は実際のメニューを参照して下さい。