2009年01月09日

プログラム主体のSilverlightの勉強 その10 カスタムフォント

Silverlightでゲームを作ろうと思ったときに、用意されている9種類のフォントでは味気ないので、ゲームの雰囲気にあったフォントを使いたくなります。例えばレトロゲーム風であれば、ナムコフォントのような書体の方が感じが出ます。

このような場合は、TrueTypeフォントをリソースとして組み込めば、そのフォントをSilverlight内で使えるようになります。

以下、例としてdefont.comにあるArcadepixというフォントを使います。

ArcadepixをダウンロードしてZIPを展開すると、ARCADEPI.TTFというファイルがあるので、これを[プロジェクト]-[既存項目の追加]でプロジェクトに加えます。ソリューションエクスプローラにARCADEPI.TTFが登録されたら、プロパティからビルドアクションを「Resource」にします。(たぶん最初からResourceになっている)

これでフォントを使う準備は出来ましたが、1つ確認しておかないといけないことがあります。ttfファイルは複数のフォントを含むことができるので(MS ゴシック、MS Pゴシック、 MS UI Gothicは同じファイルです)、使いたいフォントを一意に識別するために名前を知っておく必要があります。ttfファイルをダブルクリックするとプレビューウインドウが開くので、フォント名の部分を覚えておきます。

このフォントを使う場合は、各種コントロールのFontFamilyプロパティに「ファイル名#フォント名」の形式で指定します。

<TextBlock FontFamily="arcadepi.ttf#Arcadepix" Foreground="Red" Text="NOTICE"/>

これでArcadepixの書体で赤く「NOTICE」と表示されます。

Microsoftオフィシャルの開発者向けコミュニティサイトsilverlight.netには多くのサンプルや動画があり、このフォントに関しても解説ビデオが用意されています。

http://silverlight.net/learn/learnvideo.aspx?video=69800

また、コントロール毎に毎回フォント名やフォントサイズ等のプロパティを1つ1つ設定するのは面倒なので、スタイルとして一括で登録しておいて、まとめて適用する方法があります。Silverlightチュートリアルにスタイルに関する解説があるので、詳しくはそちらをご覧ください。

ところで、ゲームの場合は、基本的に1つのアプリケーションでは1つのフォントしか使わないので、スタイルの指定すら面倒に感じます。

フォントは特に指定がなければ親要素の設定を引き継ぐようなので、これを利用するとデフォルトフォントを指定することができます。

Page.xamlはトップレベルの要素としてUserControlを持っていますが、UserControlもFontFamilyプロパティを持っているので、ここでフォントを指定しておけば、全てのコントロールに適用されます。

サンプルとして、アーケードゲームの起動時に出てくる注意書きを作ってみました。(文章はギャラガ'88を参考にしました)

<UserControl x:Class="SilverlightFontTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300"
    FontFamily="arcadepi.ttf#Arcadepix" FontSize="12">
    <StackPanel x:Name="LayoutRoot" Background="Black">
        <StackPanel Margin="40">
            <StackPanel.Resources>
                <Style TargetType="TextBlock" x:Key="MyStyle">
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="TextWrapping" Value="Wrap"/>
                </Style>
            </StackPanel.Resources>
            <TextBlock Style="{StaticResource MyStyle}" LineHeight="40"
                       Foreground="Red" Text="NOTICE"/>
            <TextBlock Style="{StaticResource MyStyle}" LineHeight="20"
                       Foreground="White">
                <Run Text=" THIS GAME IS FOR USE EXCLUSIVELY IN JAPAN."/>
                <LineBreak/>
                <Run> THE SALE, EXPORT, USE OR OPERATION OF THIS GAME
                   OUTSIDE OF JAPAN MAY BE A VIOLATION OF INTERNATIONAL
                   COPYRIGHT, TRADEMARK AND/OR OTHER RELATED LAWS
                   SUBJECTING THE VIOLATOR TO LEGAL PENALTIES.</Run>
            </TextBlock>
        </StackPanel>
    </StackPanel>
</UserControl>

せっかくなので、スタイルを使ってみたり、TextBlockの書き方を変えてみたりしています。ここでは使っていませんが、Runにもフォントや色の指定が可能なので、途中で文字の色を変えたりすることも可能です。

ただテキストを表示するだけで面白味はありませんが、一応実働サンプルも貼っておきます。

よく見ると、THE SALEで始まる後半の文がXAML上では行頭にスペースがあるのに、実際の表示では詰まっています。この書き方をした場合は、最初と最後のホワイトスペースは削られます。逆にText=""で書いている最初の文では、ちゃんとスペースが残っています。

ちなみにこのArcadepixというフォントは、等幅フォントではありません。せっかくレトロゲーム風なのだから、等幅にして欲しいですね。まぁ、よく見ないでこれを選んだ私が悪いのですがw

タグ:Silverlight
2009年01月09日 【プログラミング】 | コメント(0) |

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


この記事へのトラックバック
この記事へのコメント

コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。