mieki256's diary



2014/03/29() [n年前の日記]

#1 [dxruby][windows] DXRubyを使いつつWindows標準フォント内の記号を物色

Windowsに標準でインストールされてるフォントの中にも、アイコン・記号がたくさんあるわけですけど。ゲームのプロトタイプを作る時などにサクッと使えないかなと思えてきたので、IMEパッドを表示して、ざっくり眺めて、リストアップを試みたりして。

試しに、DXRuby で画像として表示。

記号一覧表示

_font_disp_unicode_list.rb
#!ruby -Ks
#
# フォント内の記号を一覧表示してみるテスト
#
# Ruby 1.9.3 + DXRuby 1.4.1 を使用。

require 'dxruby'

sw, sh = 1024, 768 # ウインドウサイズ
bgcol = [96, 96, 96] # ウインドウ背景色

ih = 12 * 3 + 8 # フォント名表示部分の高さ
cw, ch = 72, 72 + ih # 画像サイズ
fsize = cw - 14 # フォントサイズ

chr_list = {
  # 種類 , フォント名, 文字コード
  "arrow0" =>  ["MS ゴシック", "\u21a0"],
  "block0" =>  ["MS ゴシック", "\u2591"],
  "block1" =>  ["MS ゴシック", "\u2593"],
  "block2" =>  ["MS ゴシック", "\u25a9"],
  "circle0" =>  ["MS ゴシック", "\u25cc"],
  "triangle0" =>  ["MS ゴシック", "\u25b3"],
  "sun" =>  ["MS ゴシック", "\u2600"],
  "cloud" =>  ["MS ゴシック", "\u2601"],
  "snowman" =>  ["MS ゴシック", "\u2603"],
  "star0" =>  ["MS ゴシック", "\u2606"],
  "go" =>  ["MS ゴシック", "\u261e"],
  "dead" =>  ["MS ゴシック", "\u2620"],
  "danger" =>  ["MS ゴシック", "\u2622"],
  "smile" =>  ["MS ゴシック", "\u263a"],
  "moon0" =>  ["MS ゴシック", "\u263e"],
  "rook0" =>  ["MS ゴシック", "\u2656"],
  "rook1" =>  ["MS ゴシック", "\u265c"],
  "heart" =>  ["MS ゴシック", "\u2665"],
  "music" =>  ["MS ゴシック", "\u266a"],
  "plane" =>  ["MS ゴシック", "\u2708"],
  "cross0" =>  ["MS ゴシック", "\u2719"],
  "hex0" =>  ["MS ゴシック", "\u2721"],
  "star1" =>  ["MS ゴシック", "\u2739"],
  "flower" =>  ["MS ゴシック", "\u2741"],
  "snow" =>  ["MS ゴシック", "\u2744"],
  "arrow1" =>  ["MS ゴシック", "\u279f"],
  "arrow2" =>  ["MS ゴシック", "\u27a2"],
  "postman" =>  ["MS ゴシック", "\u3020"],
  "bell" =>  ["Wingdings", "\u0025"],
  "candle" =>  ["Wingdings", "\u0027"],
  "sandglass" =>  ["Wingdings", "\u0036"],
  "pc" =>  ["Wingdings", "\u003a"],
  "tape" =>  ["Wingdings", "\u003e"],
  "bomb" =>  ["Wingdings", "\u004d"],
  "flag0" =>  ["Wingdings", "\u004f"],
  "cross1" =>  ["Wingdings", "\u00aa"],
  "arrow3" =>  ["Wingdings", "\u00d6"],
  "winmark" =>  ["Wingdings", "\u00ff"],
  "trash" =>  ["Wingdings 2", "\u0033"],
  "check0" =>  ["Wingdings 2", "\u0054"],
  "check1" =>  ["Wingdings 2", "\u0056"],
  "spider" =>  ["Webdings", "\u0021"],
  "trophy" =>  ["Webdings", "\u0025"],
  "deco" =>  ["Webdings", "\u0026"],
  "eye" =>  ["Webdings", "\u004e"],
  "bicycle" =>  ["Webdings", "\u0062"],
  "gift" =>  ["Webdings", "\u0065"],
  "car0" =>  ["Webdings", "\u0066"],
  "car1" =>  ["Webdings", "\u0068"],
  "satellite" =>  ["Webdings", "\u006b"],
  "ship" =>  ["Webdings", "\u006f"],
  "car2" =>  ["Webdings", "\u0070"],
  "car3" =>  ["Webdings", "\u0076"],
  "flag1" =>  ["Webdings", "\u0077"],
  "woman0" =>  ["Webdings", "\u0081"],
  "car4" =>  ["Webdings", "\u008d"],
  "drum" =>  ["Webdings", "\u0090"],
  "monalisa" =>  ["Webdings", "\u00ad"],
  "key" =>  ["Webdings", "\u00d1"],
  "wind0" =>  ["Webdings", "\u00de"],
  "wind1" =>  ["Webdings", "\u00df"],
  "moon1" =>  ["Webdings", "\u00e0"],
  "squirrel" =>  ["Webdings", "\u00f2"],
  "fish" =>  ["Webdings", "\u00f4"],
  "dog" =>  ["Webdings", "\u00f5"],
  "cat" =>  ["Webdings", "\u00f6"],
  "pigeon" =>  ["Webdings", "\u00ff"],
  "motorcycle" =>  ["Webdings", "\u0152"],
  "car5" =>  ["Webdings", "\u017d"],
  "woman1" =>  ["Webdings", "\u0192"],
  "snowb" =>  ["Webdings", "\u02c6"],
  "gold" =>  ["Webdings", "\u2018"],
  "man0" =>  ["Webdings", "\u201a"],
  "ski" =>  ["Webdings", "\u2021"],
  "knife" =>  ["Webdings", "\u2022"],
  "surfer" =>  ["Webdings", "\u2039"],
  "man1" =>  ["Webdings", "\u20ac"],
}

font_def = Font.new(12)
imgs = Hash.new()
c = 0

# 各文字を画像に書き込む
chr_list.each_key do |key|
  fontname, code = chr_list[key]
  font = Font.new(fsize, fontname)

  # imgs[key] = Image.new(cw, ch).drawFont(2, 2, code, font)

  imgs[key] = Image.new(cw, ch).drawFontEx(2, 2, code, font,
                                           :color=>[255, 128, 0], :aa=>true,
                                           :edge=>true, :edge_color=>C_BLACK,
                                           :edge_width=>4, :edge_level=>4)

  # 指定文字列やフォント名を描画
  y = ch - ih
  [key, fontname, format("\\u%04x", code.ord)].each do |s|
    imgs[key].drawFontEx(4, y, s, font_def, :aa=>false)
    y += 12
  end
end

Window.bgcolor = bgcol # 背景色設定
Window.resize(sw, sh) # ウインドウサイズ設定

# メインループ
Window.loop do
  break if Input.keyPush?(K_ESCAPE) # ESCが押されたら終了

  # 画像を描画
  x = 0
  y = 0
  imgs.each_key do |key|
    Window.draw(x, y, imgs[key])
    x += cw
    if x + cw > Window.width
      x = 0
      y += ch
    end
  end
end

予想通り、単色スプライトっぽくなってしまうけど、これはこれで記号としては把握できるからアリかもしれないなと…。

それに、DXRuby上で表示するなら、実質1行で書けるし。

_font_disp_unicode.rb
#!ruby -Ks

require 'dxruby'

img = Image.new(160, 160).drawFontEx(3, 3, "\u2741", Font.new(146, "MS ゴシック"), :color=>C_YELLOW, :edge_color=>C_BLUE, :edge=>true, :edge_width=>4, :edge_level=>8)

Window.loop do
  break if Input.keyPush?(K_ESCAPE)

  Window.draw(0, 0, img)
end

ちなみに、Windowsのどのバージョンにも、以下のフォントが入ってるらしいです。 他にも、Symbol、Marlett があるけれど。眺めた感じでは、ゲーム画面に使えるかどうかは微妙な気もしたり。

各記号・アイコンはフォントによってデザインが違うようで…。個人的には、VLゴシックや小夏等幅の記号のほうが、シンプル・スッキリしていてなんだか好み。 *1

Webフォントも使えるみたい。 :

_Fontello - icon fonts generator でアイコンをいくつか選んで、Customize Codes タブで a,b,c…と割り当てを変えてからダウンロード・解凍してみたら、中にttfも入ってた。ttfのプレビューをしてみたら a,b,c… にアイコンが割り当てられていたので、おそらく読み込んだら使えるのではないかなと…。

DXRuby で試してみたら、一応表示できたっぽい。
Webフォントを表示

_font_disp_unicode2.rb
#!ruby -Ks
#
# Webフォントを表示してみるテスト
#
require 'dxruby'

Font.install("./common_icons.ttf")
iconfont = Font.new(76, "common_icons")

imgs = Hash.new()
["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].each do |c|
  imgs[c] = Image.new(96, 96)
  imgs[c].drawFontEx(4, 4, c, iconfont, :edge=>true, :edge_width=>4,
                     :color=>[255, 128, 0], :edge_color=>[0, 0, 0])
end

Window.bgcolor = [64, 64, 64]

Window.loop do
  break if Input.keyPush?(K_ESCAPE)

  x = 0
  y = 0
  imgs.each_key do |key|
    Window.draw(x, y, imgs[key])
    x += imgs[key].width
    if x > Window.width - imgs[key].width
      x = 0
      y += imgs[key].height
    end
  end
end
どのアイコンを表示するかは件のサイトで選ぶ必要があるので、common_icons.ttf はアップロードしてませんが。とりあえず好きなアイコンを選んで表示することはできる、ということで。

Webフォントを使う場合、 _SIL Open Font License のモノを選んでおけば制限は少ないかなと思うのだけど、実際はどうなんだろう…。Wikipedia には、
ただしプログラムに同梱する限りは商用利用も可能で、プログラムはHello worldのようなものであってもライセンスには違反しないので、

SIL Open Font License - Wikipedia より

と書いてあるし。その記述が正しいとすれば、SILなWebフォントttf同梱もOKじゃないかなと思ってるのですけどちょっと自信無し。

この方法のメリット。 :

  • Windowsが標準で持ってるフォントを流用するので、新規に画像リソースを用意せずに済む。
  • Webフォントを使う場合も、追加するバイナリサイズが少なくて済む。
  • Image.new() の後ろに .drawFont() を書くだけ。
  • 元がベクターデータだから好きなサイズを作れる。

この方法のデメリット。 :

  • 各文字のサイズがマチマチなので、回転させるとおかしな見た目になる。中心位置が一致してないので…。文字の描画サイズを取得する処理が必要な予感。
  • 単色表示は、やはり見た目がちとストイック過ぎる。

単色云々の解決策として思いつくのは…。
  • DXRuby 1.4.1 なら、文字描画時に輪郭や影をつけられるので、その機能を駆使してみる。
  • 不透明部分にグラデーションをかける処理を追加実装する。
  • アイコン内部をベタ塗りしてからその上にアイコンを描画、といった処理を追加する。
  • 色んな種類のアイコンを、色を変えつつ重ね描き。
でも、あまり変わらないかな。自信無し。

svgが扱えたらもっとヨサゲかも。 :

svgなら、多色化もできそうだし。

Rubyのライブラリで、svgを解析して画像にするものは無いのかしら…。そういうライブラリがあれば、DXRuby と組み合わせて、みたいなこともできそうだけど。

*1: もしかすると別フォント内の記号が代わりに表示されちゃってる可能性もあるけれど。

以上、1 日分です。

過去ログ表示

Prev - 2014/03 - Next
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project