2015年12月22日

DXRubyAdventCalender2015 22日目

DXRubyAdventCalender2015も22日目になりましたね!

今回はDXRubyWSのGUIとしての見た目のお話になります。

WSにはthemaフォルダというものがありまして、ここにGUIのデザインというか描画の仕方が定義されているRubyスクリプトがあります。
今はguibasic一個しかありませんが。

WS.set_theme('フォルダ名')でフォルダの中の定義ファイルをすべて読み込んでGUIの見た目を変えることができます。

guibasicを読み込むとこのような感じ。

WS1.jpg

何も読み込まないとこのような感じになります。

WS2.jpg

定義ファイルの中身は単純に各コントロールの描画メソッド部分をオーバーライドするというものなので、誰でも簡単に変更できます。

では、実際にthemeを作ってオリジナルのGUIを作ってみましょう。

簡単なのはボタンでしょうか?
最近よく使われているフラットデザイン的なのを作ってみましょう。

まずはthemeフォルダ内にguiflatというフォルダを作ります。

次に適当な名前のRubyスクリプトファイルを作ります。
これもguiflatとでもしておきましょう。

さてボタンの描画を変えたいのでstandardguiのbuttonのスクリプトを見て描画部分を見つけてきましょう。


module WS
class WSButtonBase
# set_imageで@image[true](押された絵)と@image[false](通常の絵)を設定する。
# オーバーライドしてこのメソッドを再定義することでボタンの絵を変更することができる。
def set_image
# 画像を再作成する前にdisposeする
@image.each_value{|image| image.dispose if image.disposed?}

# 通常時の画像を作成
@image[:usual] = Image.new(@width, @height, COLOR[:base]).draw_border(true)
# 押下時の画像を作成
@image[:pushed] = Image.new(@width, @height, COLOR[:base]).draw_border(false)
# キャプションの描画
if @caption.length > 0
width = @font.get_width(@caption)
@image[:usual].draw_font_ex(@width / 2 - width / 2 ,
@height / 2 - @font.size / 2 ,
@caption, @font, {:color => @fore_color, :aa => false})

@image[:pushed].draw_font_ex(@width / 2 - width / 2 + 1,
@height / 2 - @font.size / 2 + 1,
@caption, @font, {:color => @fore_color, :aa => false})
end
refreshed
end

def render
set_image if refresh?
change_image
end

def draw
super
if self.image && self.activated?
self.target.draw_line(self.x - 1, self.y - 1, self.x + @width, self.y - 1, C_BLACK)
self.target.draw_line(self.x - 1, self.y - 1, self.x - 1, self.y + @height, C_BLACK)
self.target.draw_line(self.x + @width, self.y - 1, self.x + @width, self.y + @height, C_BLACK)
self.target.draw_line(self.x - 1, self.y + @height, self.x + @width, self.y + @height, C_BLACK)
end
end
end


大体この辺りでしょうか?
あらかじめ画像を作ってキャッシュしておいて、ボタンの状態によってそれを切り替える方式のようなので、その画像を作るところを書き換えれば良さそうです。


module WS
class WSButtonBase
# set_imageで@image[true](押された絵)と@image[false](通常の絵)を設定する。
# オーバーライドしてこのメソッドを再定義することでボタンの絵を変更することができる。
def set_image
# 画像を再作成する前にdisposeする
@image.each_value{|image| image.dispose if image.disposed?}

# 通常時の画像を作成
@image[:usual] = Image.new(@width, @height, COLOR[0, 102, 153])
# 押下時の画像を作成
@image[:pushed] = Image.new(@width, @height, COLOR[0, 50, 76])
# キャプションの描画
if @caption.length > 0
width = @font.get_width(@caption)
@image[:usual].draw_font_ex(@width / 2 - width / 2 ,
@height / 2 - @font.size / 2 ,
@caption, @font, {:color => @fore_color, :aa => false})

@image[:pushed].draw_font_ex(@width / 2 - width / 2 + 1,
@height / 2 - @font.size / 2 + 1,
@caption, @font, {:color => @fore_color, :aa => false})
end
refreshed
end


さてこれでWS.set_theme("guiflat")で読み込むとこうなります。

WS3.jpg

(思ってたのとなんか違うというか。
ボタンのサイズを大きめにするとか他のコントロールも書き換えたらそれっぽくみえますかねえ?)

ちなみに余談ですが、テーマ読み込まない状態のGUIは全部DXRubyの図形描画メソッドで書かれてます。
draw_lineなどを駆使してドット絵を描くがごとく描かれてるわけですね。
まさにDXRuby純正といった感じです。

guibasicは逆にコントロールの画像ファイルが用意されててそれをつかって描画しています。
画像データはソースに貼り付けてあるのでスクリプトの他に画像をダウンロードする必要はありません。

両極端な感じですがサンプルとしてはおもしろいような・・・

こういった感じでコントロール毎に描画処理を変更していけばオリジナルのGUIの完成です。
何か作ったら是非mirichiさんのGitHubに是非プルリクしましょう!

次回はあおたくさん『野メイド拡張講座』です!
あおたくさん作DXRubyACゲーム野メイドを自分好みに作り替えてイチャラブできる…そんな夢が叶う…

おまけ

guibasicを作る時に色の参考にしたサイト


RGBだけじゃなくて色んな色表現がのっていて、明度や彩度が違うカラーの一覧も載っていてとても便利でした。

ソースに貼る画像を文字列にするツールを作った


いちいちコマンドラインでやるのが面倒だという方は使ってあげてください。
アイコンにドラッグ&ドロップすると画像と同名のテキストファイルを作ってくれます。
これをDXRuby上でload_from_file_in_memoryにかければで画像に戻ります。
(文字列はunpack('m')[0]で渡してください)
あとocraで固めたものなので環境によっては動かないかもしれません。
posted by 鳴海つかさ at 20:53| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/170412031

この記事へのトラックバック