Skin制作のあれこれ

■ ボタンの透過処理について ■

ボタンにカーソルをあわせるとONにはなるけどOFFに戻らない!困った!!
そんな人の為の透過の仕組み解説。

そういう方はおそらくOFF時に細い文字がON時に太くなるというような
『サイズ変化』のある処理をされているはずです。
その際、文字の周りを透過色(R:255,G:0,B:255)で塗りつぶしていませんか?

【例】 カーソルOFF時は黒い文字で、ONにするとオレンジ色への変化+背景を白くしたい。
このようなITEMボタンを作成し、検証してみましょう。

ダメな例。
カーソルOFF ON
平常時 カーソルON カーソル離す Σ(゚Д゚ )
カーソルを離したあとOFFに戻らず、ONとOFFの混じった黒文字+白背景状態になったのは何故か?
その答えは、ボタン画像を取り替えていくのではなく、
上へ上へと新たに画像を積み重ねていく処理が行われているからです。
OFFのほうが文字部分が小さいので、下にあるONの白背景が透けて見えていたというわけです。

これをどうやって回避するか。
文字の周りを下地と同じ色で塗りつぶす。

平常時 カーソルON カーソル離す (´∀`*)

下地に模様や絵が入っている場合は、その模様をズレないように入れておけばOKです。


少しでもボタンを小さくして下地の模様をよく見えるようにしたい!とか、
周囲全部を塗りつぶしたら商人職の装備欄が格好悪いぞ!気に入らん!とか言う場合。
ON/OFF時に"変化の起こらない部分"には透過を使用する事ができるのです。



ただし!透過色をつかうと下地まで透けてしまう妙なボタンがいくつかあります。
【1】取引ウィンドウ
okボタンとTradeボタンの周囲が透けていておかしいですね。

BTN_OK  BTN_OK_a  BTN_OK_b  btn_ok_dis

この中の最後のbtn_ok_disは下地まで透けてしまうので、周囲を透過色以外の色にしましょう。
トレードボタン(btn_exchange等)のbtn_exchange_disも同じです。

BTN_OK  BTN_OK_a  BTN_OK_b  btn_ok_dis

【2】オプションウィンドウ
スキン選択欄右側のtxtbox_btn_aボタンも、透過色を使うと下地が透けてしまいます。
txtbox_btn_a  
txtbox_btn_a