GUI Development

今年からは少しずつ新しいことを始めてみようと思います。以前からやりたいと思っていたリアルタイムで空間上に文字やグラフなどを描画していくようなものを作ってみようと思います。UIというと2D表現が多いと思いますが、立体的な表現に挑戦してみたいんですよね。基本的にモデルは使わず、トライアングルとテクスチャーだけで構築していく予定。

font_bitmap

まずは基本となるフォントの描画から。Microsoftのツールを使ってXNAで利用可能なMoireフォントを画像に出力しました。フォントはこだわりだすと時間がかかるので、とりあえずこれを仮としてしばらく使っていきます。

 

font_polygon

この画像のUV座標を配列に格納していきます。UV座標の縦横比をポリゴンを生成する際にもそのまま利用します。とりあえず適当な文章を一文字ずつに分解して順番にポリゴンを生成してテクスチャーを貼り付ける、といった流れで各々関数を作って表示させてみました。文章なら改行も必要なので、改行は”\n”で表現しています。特殊な記号なんかもあるので正規表現を利用しています。正規表現、全然好きじゃないんですが文字列を扱うなら避けて通れないですね・・・。

 

font_wireframe

ワイヤーフレームにするとこんな感じ。文字間隔や行間も適当に設定しています。ここまで来てなぜかテキストエディタみたいなものを作りたくなってきました。そもそも3Dテキストエディタってあまりないですよね?

 

text_ediitor_input

というわけでキーボードを打つとアルファベットがポンっと表示されて文章になっていくような仕組みをつくりました。改行も削除も可能に。試しにうちの奥さんに触らせたらこんな文章を書いてくれました。

 

text_ediitor_backspace

削除を押すと文字がバラバラと落ちていくような表現も面白いかと思ってつくってみました。他にも面白い表現があれば取り入れていきたいですね。少々脱線気味でしたが、今回はUI構築のための第一歩でした。

ゲームの技術を使って何か違うことも出来るのではないかと常々思っていたりするのですが、いわゆるインフォグラフィックのようなものをリアルタイムで格好良く表現できたらいいなと思います。

それではまた次回へつづく・・・(あるかな?)

広告

GUI Development」への2件のフィードバック

    • そうなんですか?(^^;
      最近はこういった地味な方向で面白いものをつくれればいいなとおもってます。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中