仕様に沿った画像ファイルを読み込む事で、ツール本体・色リスト画面の外観を変更する機能です。
機能自体はそのままですが、ボタン等の配置・形状・有無が異なる事で操作性が異なる場合もあります。
右クリックメニュー内「表示 > スキン変更」で画像ファイルを選択する事で変更できます。
「skin」フォルダ内にいくつかスキン用の画像を同梱してます。
スキンを変更する事でボタンなどの外観が変わり解り難い事もあります。
少しカーソルを乗せて置くとツールチップが表示されますので、それで何のボタンか判別可能です。
また右クリックメニュー内の項目なら、どのスキンでも同様に使用できます。
また付属のスキン画像以外でも仕様に沿った画像を用意して頂く事でスキンとして使用可能です。
注意点として、スキンとして使用する画像に対して厳密な検査は行っていません。
その為何でも読み込みますが、適切でないファイルの場合エラー終了や操作不能に陥る可能性もあります。
その様な場合はタスクバー等から一旦終了させ、INIファイルを削除すれば初期状態に戻せます。
本ソフトのスキン用ファイルは、画像ファイル1つのみで構成されています。
画像ファイル形式としては「BMP/GIF/PNG/PSD/TGA」が使用可能です。
色数は、判定用に数十色ほど用いる為256色では厳しいと思います。
16色では恐らく無理です。
画像のαチャンネルは無効です、というか使用しないで下さい。
PSD形式の場合、保存時の表示状態の画像が使用されます。
次に画像の仕様ですが、全体で740 x 416固定です。
このサイズ以上なら余白が無視されるだけですが、足りない場合どうなるか解りません。
画像内部も位置と範囲で用途が完全に固定されています。
よってスキン機能といっても色換え・衣替え程度のものと考えて下さい。
画像内は用途別に図のように区分けされます。
実際の画像はこんな感じです。
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」を置いてます。
画像内では右側部分で、本ソフトのスキン機能の要です。
初期スキン・拡張画面のカラーマップ この部分の画像内の色でツール画面上のどの部分が何に当るのかを判定しています。
実際に判定に用いるのはRGB値のB(青要素)のみで、他要素は色分けに使用可能です。
マウスカーソルがボタン等の上にあるかの判定は、正確にカラーマップに準拠します。
●や★型であればキチンとその上にある時だけ反応するという事です。
それに対して画面内の描画は領域を内包する矩形の範囲で行われます。
次にRGBのB値の割り当てですが、B=255の部分は画面の領域外として表示されません。
B=128の部分はドラッグする事で画面を移動可能な部分です。
B=0~48は各ボタンなどに割り当てられています。
その他の数値は表示されるだけで何の反応も無い、画面の背景部分として扱われます。
B | 用途 | B | 用途 |
---|---|---|---|
0 | R値ラベル | 5~9 | 同G値 |
1 | R数値表示域 | 10~14 | 同B値 |
2 | R値減少 | 15~19 | 同H値 |
3 | R値操作バー | 20~24 | 同S値 |
4 | R値増加 | 25~29 | 同V値 |
B | 用途 | B | 用途 |
30 | 小窓領域 | 31 | スポイト時詳細表示領域 |
32 | 現在の色のRGB値表示域 | 33 | 色リストへ追加 |
34 | RGB値を自動入力 | 35 | 最小化 |
36 | HSV操作 ON/OFF | 37 | 色リスト ON/OFF |
38 | ヒント | 39 | 終了 |
B | 用途 | B | 用途 |
40 | 色リストを読み込む | 41 | 色リストを保存 |
42 | 選択色を上へ | 43 | 選択色を下へ |
44 | 選択色を削除 | 45 | ランダムカラー |
46 | メニュー表示 | 47 | RGB値を貼り付け |
48 | グリッドペイント ON/OFF | その他 | 背景画面 |
128 | ドラッグ移動領域 | 255 | 非表示領域 |
※32以降はキー割り当てのコマンド値と同じになっています。 |
この画面にはコレが無いとダメ。といった制約は特にありませんが、色々と不都合が生じるケースはあります。
・「128.ドラッグ移動領域」が無い場合、その画面は移動不可となります。
・「255.非表示領域」のみの場合、画面に何も表示されません。
・「30.小窓領域」が無い場合、スポイト機能が使えません。
左側が通常画像(5)、右側がホット画像(6)です。
ホット画像は、ボタンにマウスカーソルが乗った時やRGB値などの項目が操作中である時、見た目を変化させる為に使用されます。
ボタンの上にカーソルが乗れば、ホット画像内の同じ位置に当る部分が表示されます。
バーの場合、左端から現在の値の位置までがホット画像で表示されます。
それぞれの位置や領域はカラーマップで指定します。
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行に分けて表示されます。
色々と制約が多過ぎて弄り甲斐の無い部分です。
まずバーの操作領域は、左⇒右・幅64px固定です。
カラーマップで70 x 12の領域を指定した場合、左右3px分は余白として扱われます。
余白部分をクリックした場合、最小/最大値が指定された事になります。
中央64px分は対応する数値を指定した事になります。
また数値バーでは左端から現在の位置までがホット画像で表示されます。
仮にR値が127であれば、左端から(余白3px) + (64の半分で32px)分の領域がホット画像となります。
上記のように色々と妙な制約が付いていますが、これらはバー上のツマミの位置を合わせる為です。
バーのツマミは、「X=480~499・Y=バーの領域」の画像を真っ黒を透過色として重ね合わせて表示します。
ツマミ部分が全て真っ黒ならツマミの無いバーとなりますが、動作上何ら支障はありません。
ツマミの表示される位置は、バー領域の左端からバーの現在値分右にずらした位置となります。
ツマミ画像の横幅分をバー領域の余白で調整している訳です。
実際には文字画像指定となります。
文字色指定部は画像のように、16 x 16pxの画像が12個並んでいます。
実際に表示する際には、それぞれの画像をタイル状に並べた画像で文字を表示します。
中央の青い部分のようにグラデーション画像であれば、その文字にもグラデーションがかかる仕組みです。
文字にはそれぞれ影を付ける事も可能です。
画像は字・影・字・影……という風にそれぞれ2つずつセットで並んでいます。
影部分の16 x 16pxが全て真っ黒の場合、文字の影は描画されません。
それぞれの画像が使用される文字は、左側から順に次のように使用されます。
タスクトレイに格納された時に表示されるアイコンを変更できます。
真っ黒の部分は透過されますので、画像で黒を表示する場合は(0,0,1)などで代用して下さい。
タスクトレイアイコン用の領域が全て真っ黒の場合、実行ファイルの縮小アイコンが使用されます。
通常画像・ホット画像・カラーマップの扱いは領域サイズが異なるだけでメイン画面とほぼ同様です。
登録された色(とグラデーション表示)が完全固定位置に上書き描画されます。
その為画面構成もほぼ固定化されます。
色リスト用の描画領域を2つ並べてます。
緑・黄で構成される矩形に登録された色と関連色が描画されます。
左側の縦長の矩形には、登録色によるグラデーションが描画されます。
それぞれの矩形は、色リストの画像領域内で常にこの位置に描画されます。
次に赤・黄で構成される帯状の部分ですが、色リストの登録色が3色以上の場合、この部分を縦に繰り返し並べる事で色リスト画面を拡張してます。
またご覧のように、上部に小さなボタンを配置する程度しか空きスペースが御座いません。
色リスト内で選択中の色を示す為のカーソルです。
左側(12)がその色を示す画像、右側(13)がその不透明度を示すαマスク画像となります。