2010-11-24(Wed)

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

steamui_steamstyle_hikaru_halloween.jpg

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

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

なんか色々とグダグダと長くなるので続きからを参照で。
今回はhangakuさんの画像を無断拝借します。
steamui_steamstyle_hangaku_rusetssss.jpg
アルファチャンネル付きのTGA画像にします。

http://vols.blog25.fc2.com/blog-entry-231.htmlから引用
steam_ui_layout.jpg
ではまず"steamrootdialog.layout"から書き換えてみましょう。

"steamrootdialog.layout"の中に"CSteamRootDialog"っていうものがある。

steamui_csteamrootdialog_01.jpg
つまりここの部分な、ここにさっき作成したTGA画像を"CSteamRootDialog"に描画させてみたらこうなる。


CSteamRootDialog
{
bgcolor=none

render_bg
{
// top area and graphic
0="gradient( x0, y0, x1, y0+96, ClientBG, DialogBG )"
//2="null( x0, y0, x1, y0+96, graphics/clienttexture2)"
2="image( x0, y0, x1, y0+96, graphics/clienttexture2)"
3="fill( x0, y0+96, x0+11, y1-24, DialogBG )"
4="fill( x1-11, y0+96, x1, y1-24, DialogBG )"

// null in the bottom area
5="fill( x0, y1 - 24, x1, y1, DialogBG )"
99="image( x1-485, y1-949, x1, y1, graphics/recettear)"
}
}

steamui_csteamrootdialog_02.jpg
・・・おんやぁ?ルセットさんの調子悪そうですよ!

どうやら"steamrootdialog.layout"の"FrameTitle"と"FrameTitle:framefocus"が悪さをしているみたいなので
アクティブウィンドウにした時の上部が明るくする機能を無効にしちゃいましょ。

FrameTitle
{
font-family=basefont
font-size=15
font-weight=400
textcolor="Label"
bgcolor="none"
render_bg
{
1="gradient( x0, y0 - 4, x1, y1 + 18, TitleBar, none )"
1="gradient( x0, y0, x1, y1 + 18, TitleBar, none )" [$OSX]
}
}

FrameTitle:framefocus
{
font-family=basefont
font-size=15
font-weight=400
textcolor="Label"
bgcolor="none"
textcolor="Text"

render_bg
{
1="gradient( x0, y0 - 4, x1, y1 + 18, titlebarfocus, none )"
1="gradient( x0, y0, x1, y1 + 18, titlebarfocus, none )" [$OSX]
}

               ↓↓↓↓↓↓↓↓↓↓

FrameTitle
{
font-family=basefont
font-size=15
font-weight=400
textcolor="Label"
bgcolor="none"
render_bg
{
}
}

FrameTitle:framefocus
{
font-family=basefont
font-size=15
font-weight=400
textcolor="Label"
bgcolor="none"
textcolor="Text"

render_bg
{
}


steamui_csteamrootdialog_03.jpg

ルセットさんも笑顔になりました。


ここで"steamrootdialog.layout"の描画する役割は終了で
次は"steam.styles"を書き換えてみる事にしよう。

"steam.styles"の"CGamesListPanel"っていう所を書き換えちゃいます。

"CGamesListPanel"
{
font-family=basefont
bgcolor="none"
font-size=15
font-weight=400
textcolor="Text"
selectedtextcolor="textselected"
selectedbgcolor="Focus"
shadowtextcolor="TextDisabled"
inset="0 -1 1 1"
render_bg {

// background gradient
0="gradient( x0+1, y0+1, x1-1, y0 + 432, dialogbg, almostblack )"
1="fill( x0+1, y0+ 432, x1-1, y1 - 1, almostblack )"
2="gradient( x0+1, y0+1, x1-1, y0 + 31, BackgroundStartsubtle, none )"


// lines around
3="fill( x0, y0, x0 + 1, y1 - 2, ButtonBorderDisabled )" //left
4="fill( x1 - 1, y0, x1, y1 - 2, ButtonBorderDisabled)" //right
5="fill( x0 + 2, y0 - 1, x1 - 2, y0, ButtonBorderDisabled )" //top
6="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )" //btm

// single pixel fills in the corners
7="fill( x0 + 2, y0 + 1, x0 + 3, y0 + 2, ButtonBorderDisabled )"
8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )"
9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )"
10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )"
11="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderDisabled2 )"
12="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonBorderDisabled2 )"
13="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonBorderDisabled2 )"
14="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonBorderDisabled2 )"
15="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled2 )"
16="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled2 )"
17="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonBorderDisabled2 )"
18="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonBorderDisabled2 )"
99="image( x1-485, y1-949, x1, y1, graphics/recettear)"
}
}

steamui_csteamrootdialog_04.jpg
一応描画されましたが、ズレが発生したので微調整します。


steamui_csteamrootdialog_05.jpg
ズレが直りましたが、手前に描画されてるリストパネルが邪魔なので後ろに描画になるように設定しましょう。
"Csteamrootdialog ListPanelColumnheader"っていう部分がどうやらそれのようです。

さっきと同じくTGA画像貼って微調整する作戦でいってみようとこんな感じに書いてみました。

"Csteamrootdialog ListPanelColumnheader"
{
font-family=basefont
font-size=14
font-size=13 [$OSX]
font-weight=400
textcolor="label"
font-style="uppercase"
bgcolor="none"
inset="0 0 0 0"
inset="0 1 0 0" [$OSX]
padding-top=1

render_bg
{
0="fill (x0, y0 + 1, x1, y1, buttonborderdisabled )" // bg fill
  1="image( x0, y0, x0+476, y0+928, graphics/recettear)"
// lines around 2="fill ( x1 - 1, y0 + 3, x1, y1-1, buttonborderdisabled )" // right
}
}

steamui_csteamrootdialog_06.jpg
ルセットさんを大量Dupeされちゃいました。
上のスライダーでルセットさんを移動させることができる優れものですよ!コレ!

どうやらさっきの方法は無理だったので、だったらここの描画を無くせばいいんじゃね?って事で。

"Csteamrootdialog ListPanelColumnheader"
{
          ~~~略~~~
render_bg
{
}
}

   ~~~~~~~~~~~~~~~~~~~~

"CGamesListPanel"
          ~~~略~~~
render_bg {
          ~~~略~~~
20="fill( x0 + 1, y0, x1 - 1, y0 + 19, ButtonBorderDisabled )" //top
99="image( x1-476, y1-928, x1, y1, graphics/recettear)"

}
}

にしてみた。


steamui_csteamrootdialog_07.jpg
はい、完成です。



steamui_csteamrootdialog_08.jpg
おつかれさまでした。

comment form

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

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

comment

このブログについて。

人気ブログランキングへ

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

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

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