2010-11-24(Wed)

STEAM UI カスタマイズ備忘録番外 - はみ出しデザイン編 -

steamui_steamstyle_hikaru_halloween.jpg

今回はゲームリストからはみ出るデザインをやってみる。

この番外編はかなりの試行錯誤する必要がありますので。
時間と暇に余裕がある方だけチャレンジしてみよう。

なんか色々とグダグダと長くなるので続きからを参照で。

more...

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



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

STEAM UI カスタマイズ備忘録3 - "steam.exe -dev"編

今回はsteamで起動する時にVGUIカスタマイズ向けのコマンドラインオプション -devモードの使い方を簡単に説明。

steamから適当にショートカットを作ってSteam.exe -devにするだけで使えます。
このdevモードから起動する時点でsteamの負担が高くなります。

詳しい説明はskinsフォルダのskins_readme.txtにあるので暇があれば読もう。



steam_ui_dev_debug.jpg
一部のレイアウトを除いてstyleの変更をリアルタイムでsteam上に反映してくれるモード画面になりました。
F6キーを押すことでレイアウトデバッカーウィンドウが表示されて、そこからsteamの画面上をクリックすれば
そこに表示されてる所はどのファイルでどの名前でどのカラーで使ってるかが大体分かるので
色だけ変えたりボタンの描画を画像に変えたりできる。

リンクを開いたファイル先がsteamデフォルトスキン(steam\resource\)から開くみたいなので
steam側で設定をデフォルトスキンにして、steam\resource\をバックアップしてから作業するのが良いみたい。

もしバックアップしてなくて使い物にならなくなった場合は
ClientRegistry.blobを削除すればデフォルトスキン設定やレイアウト等を勝手に再ダウンロードしてくるので
うっかりconfigファイルを破壊してしまうような人にも安心。

steam_ui_dev_frame.jpg
F7キーはボタンやチェックボックス、スライダー、グラフ、鯖ブラウザ、鯖情報画面を一通り見ることができる。

このフレームウィンドウはスクロールバーが付いてないので
無限にウィンドウ伸ばせる環境がないと全ての情報を確認する事ができないみたい。


最初は色を変えたりして色々慣れてからコーナー描画やグラデ描画に挑戦するのが良いんじゃね?
2010-11-03(Wed)

STEAM UI カスタマイズ備忘録2 - steamrootdialog.layout編

今回はsteamrootdialog.layoutをいじってみる。

部分配置図
steam_ui_layout.jpg
steamrootdialog.layoutを開いて一番下にlayoutってのがある。
その部分が色で分けてある位置情報になっていてここを書き換えれば
フレンドリストを右下から右上に変更したりナビゲーションエリアを広くしたりできる。

画面の右下、右寄せ、右の*pxと上の*pxから描画って感じに書かれてます。
ただ、いらない部分を丸ごと消すと、一番左上に描画されてしまう事があるので
どうしても不要なら画面外に描画させるのが無難だったりします。

一応いじった後。
steamui_rootdialog_layout_custom.jpg

下のプログレスバーの色はsteam.stylesから
プログレスバーの上下位置変更はuistatuspanel.layoutから書き換えで変更できます。

下側にサーバーアイコンやニュースアイコンを追加する場合は
"Steam\skins\***\resource\layout"からだと何かと制限があって追加できないらしいので
steamrootdialog.layoutを"Steam\resource\layout\"に置かないと駄目みたいです。
2010-11-03(Wed)

STEAM UI カスタマイズ備忘録1 - ログイン画面編

自動ログインにすると必要が無い部分だけどカスタマイズしてみる。

場所は"Steam\Public\SteamLoginDialog.res"
"Steam\skins\***\Public\"からでは反映されないので書き換えをする場合は
Steam\Public\から直接書き換える事になるんでいじる前にバックアップを忘れずに。

対応する部分
steam_ui_login_text.jpg







やったー、できた。
steam_ui_login_custom_gabe.jpg


画像をバックグラウンドにする場合は
「"zpos" "-5"」を追加しておかないと
ウィンドウが動かせないとかボタンが押せない等の不具合が起こるので注意。

Gabe Login : "steam\public\"に解凍
http://steam.vols.nobody.jp/gabe_login.zip

The Graveyard :"steam\skins"に解凍
http://steam.vols.nobody.jp/v_ohaka.zip
このブログについて。

人気ブログランキングへ

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

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

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