2010-11-13(Sat)

STEAM UI カスタマイズ備忘録4 - steam.styles:button編

今回は「Button」つまり押せる状態でカーソルが触れていないそんな状態のボタンをいじってみる。


steamui_steamstyles_button_01.jpg

マウスカーソルを乗せた時の描画、クリックした時の描画、クリックできない状態の描画
とかどういう風にするか予め考えてないなら、最初から弄らない方がかえって幸せかも知れません。



早速断面図。
steamui_steamstyles_button_02.jpg

一番最初にgradientっていうコマンドでグラデーションを描画(赤)したら
二番目に上下左右に線を描画(緑)
三番目は二番目と同じ色でコーナーを描画(黄)
四番目は滑らかに見せるように描画(青)って感じになっている。


steamui_steamstyles_button_03.jpg
gradientで描画の上に更に白色透明のgradientを上半身だけ描画するとこんな感じに
ツヤツヤなボタンができたりするし、gradientの代わりにimageを使って画像にするのもよし、fillで単色塗りつぶすのもよし。
ウィンドウ内容が背景画像を使ってる場合はボタンの色は半透明にする工夫するのもよし。

ちなみにさっきのボタンはこんな感じに描画されている。

colors
{
vistacolor1="24 103 116 255"
vistacolor2="79 158 165 255"
vistacolor3="255 255 255 64"
vistacolor4="255 255 255 127"
vistacolor5="0 0 0 127"
~~~~~~~~~~~~~~~~~~~~
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, vistacolor1, vistacolor2 )"
1="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 12, vistacolor3, vistacolor4 )"
// lines around
5="fill( x0 + 2, y0, x1 - 2, y0 + 1, black )" // top
6="fill( x0 + 2, y1 - 1, x1 - 2, y1, black )" // bottom
7="fill( x0, y0 + 2, x0 + 1, y1 - 2, black )" // left
8="fill( x1 - 1, y0 + 2, x1, y1 - 2, black )" // right

// single pixel fills in the corners
9="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, black )"
10="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, black )"
11="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, black )"
12="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, black )"
13="fill( x0, y0 + 1, x0 + 1, y0 + 2, vistacolor5 )"
14="fill( x1 - 1, y0 + 1, x1, y0 + 2, vistacolor5 )"
15="fill( x0, y1 - 2, x0 + 1, y1 - 1, vistacolor5 )"
16="fill( x1 - 1, y1 - 2, x1, y1 - 1, vistacolor5 )"
17="fill( x0 + 1, y0, x0 + 2, y0 + 1, vistacolor5 )"
18="fill( x1 - 2, y0, x1 - 1, y0 + 1, vistacolor5 )"
19="fill( x0 + 1, y1 - 1, x0 + 2, y1, vistacolor5 )"
20="fill( x1 - 2, y1 - 1, x1 - 1, y1, vistacolor5 )"
21="fill( x0 + 2, y0 + 1, x1 - 2, y0 + 2, vistacolor4 )" // top
22="fill( x0 + 2, y1 - 2, x1 - 2, y1 - 1, vistacolor4 )" // bottom
23="fill( x0 + 1, y0 + 2, x0 + 2, y1 - 2, vistacolor4 )" // left
24="fill( x1 - 2, y0 + 2, x1 - 1, y1 - 2, vistacolor4 )" // right



なんというか、このボタンを弄るのに手間がかなり掛かる割りに実感しないよ、コレ。

comment form

http://と@gmail.comを含むワードは禁止となっております。

管理者にだけメッセージを送る

comment

このブログについて。

人気ブログランキングへ

カテゴリー
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
QRコード
QRコード
RSSリンクの表示
ぼるぶろ

削除要請やネタ提供やツッコミや
相互リンクやクレーム等をしたい時はこちらの
連絡用から送信お願いします。

アクセスランキング
リンク