5000164 is here

DXライブラリできれいなフォントを表示する

Published 2014.3.16 by 菅原 浩

早速見ていただきましょう

ソースコードはこちら。

5000164/dxlib-practice-1

DXライブラリで1番最初に確認したのがフォントの表示

ゲームのようなものを作りたいなと考えていて、知人に教えてもらったDXライブラリを使うことにしました。

DXライブラリ置き場 HOME

その際に、1番初めに確認したことがフォントの表示でした。

フォントの美しさはモチベーションに直結します。

結果はごらんの通り

美しいフォントを表示させることができました。

ちなみに比較対象として、デフォルト設定でのフォントを下部に表示しています。

フォントをきれいに表示するには1行追加するだけ

1
2
ChangeFontType(DX_FONTTYPE_ANTIALIASING_8X8);

この文を追加するだけです。

この文を追加することでフォントにアンチエイリアスをかけてくれます。

DXライブラリ置き場 リファレンスページ

よりうつくしい表示のために若干の影をつけています

アンチエイリアスをかけるだけで十分きれいに表示されます。

ですが、ここではよりフォントを際立たせるために、若干の影をつけています。

まずは背景に影を描画。

フォントを描画したあとにガウシアンフィルタをかけるのがポイント。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// 影の表示開始位置
text_x = font_size + shadow_offset_x;
text_y = font_size + shadow_offset_y;

// 影のベースとなる文字列を描画
for (int row = 0; row < 5; row++)
{
DrawString(text_x, (int)(text_y + ((font_size * line_height) * row)), text[row], shadow_color_dx);
}

// ガウスフィルターを施して影にする
GraphFilter(backscreen, DX_GRAPH_FILTER_GAUSS, 8, 50);

背景ができたら、普通にフォントを描画します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// テキスト表示開始位置
text_x = font_size;
text_y = font_size;

// 文字列の描画
for (int row = 0; row < 5; row++)
{
DrawString(text_x, (int)(text_y + ((font_size * line_height) * row)), text[row], font_color_dx);
}

これで完成です。

まとめ

もちろん処理の負荷が高くなるとのことですが、美しいフォントの表示が可能であると知れて満足です。