3.5　フォント

	今回は Font クラスについてなんだよね。
	うん。前回は height プロパティを使ったよね。
	height って、文字の高さを指定できるプロパティなんだよね。
	ん、そう。じゃあ、今回は Font クラスの他のプロパティから見ていくね。
	はーい。
	まず、フォント名を取得したり設定したりする face プロパティから。
	フォント名って、Config.tjs だと userFace で設定する名前のこと？
	そ、『ＭＳゴシック』とか『ＭＳ明朝』とかのことね。例えば、前回のスクリプトで表示した文字のフォントを『ＭＳ明朝』にしたい場合は…

class SimpleWindow extends Window
{
    var messageLayer;  // 文字を書くためのレイヤ

    // コンストラクタ
    function SimpleWindow()
    {
        super.Window();  // スーパークラスのコンストラクタを呼び出します
        setInnerSize(250, 50);  // クライアント領域のサイズを 250×50 にします

        // プライマリレイヤを作ります
        add(new Layer(this, null));

        // プライマリレイヤのサイズをウィンドウのクライアント領域のサイズに合わせます
        primaryLayer.setSize(innerWidth, innerHeight);

        // 文字を書くためのレイヤを作ります
        messageLayer = new Layer(this, primaryLayer);
        add(messageLayer);
        with(messageLayer)
        {
            // プライマリレイヤと同じ位置・大きさにします
            .setPos(0, 0, innerWidth, innerHeight);
            // フォントを「ＭＳ明朝」にします
            .font.face = "ＭＳ明朝";
            // フォントの高さを 24 ピクセルに設定します
            .font.height = 24;
            // messageLayer の左上の位置から赤字で「drawTextで文字表示！」と書きます
            .drawText(0, 0, "drawTextで文字表示！", 0xFF0000);
            // レイヤを表示状態にします
            .visible = true;
        }

        visible = true;
    }

    // デストラクタ：スーパークラスのデストラクタを呼び出します
    function finalize()
    {
        super.finalize();
    }
}

var win = new SimpleWindow();  // ウィンドウを作ります

	こうなるよ。
	『.font.face = "ＭＳ明朝";』っていうのが追加されてるね。
	これで messageLayer に書き込む文字のフォントを「ＭＳ明朝」に設定してるんだ。ちょっと実行してみて。
	うん。

	確かに明朝体で表示されてるね。フォント名は Config.tjs の userFace と同じように指定できるの？
	うん、できるよ。じゃあ次は bold プロパティと italic プロパティ。それぞれ true にすると文字が太字、斜体になるよ。

	左から順に『bold だけ true』『italic だけ true』『bold と italic が両方 true』の時の実行結果だよ。
	bold と italic って両方とも true にできるんだね。
	うん。だから「普通」「太字」「斜体」「太字で斜体」っていう４種類の表示ができるってことだね。じゃあ、今度は Font クラスのメソッドね。よく使うのは getTextWidth メソッドと getTextHeight メソッドかな。
	それってテキストの幅と高さを取得するの？
	そう。どっちも引数は文字列で、現在のフォント設定でその文字列を描いた時に、幅や高さが何ピクセルになるかが戻り値になってるの。
	この２つのメソッドってどんな時に使うの？
	例えば文字をレイヤの真ん中に表示したい時とかだね。文字列の幅や高さが判らないと、どこに書けばちょうど真ん中に表示できるかわからないでしょ。
	なるほど、そういう時に使えるんだね。
	んじゃ、実際に文字をレイヤの真ん中に表示するスクリプトを書いてみるね。

class SimpleWindow extends Window
{
    var messageLayer;  // 文字を書くためのレイヤ

    // コンストラクタ
    function SimpleWindow()
    {
        super.Window();  // スーパークラスのコンストラクタを呼び出します
        setInnerSize(300, 60);  // クライアント領域のサイズを 300×60 にします

        // プライマリレイヤを作ります
        add(new Layer(this, null));

        // プライマリレイヤのサイズをウィンドウのクライアント領域のサイズに合わせます
        primaryLayer.setSize(innerWidth, innerHeight);

        // 文字を書くためのレイヤを作ります
        messageLayer = new Layer(this, primaryLayer);
        add(messageLayer);
        with(messageLayer)
        {
            // プライマリレイヤと同じ位置・大きさにします
            .setPos(0, 0, innerWidth, innerHeight);

            // フォントの高さを 24 ピクセルに設定します
            .font.height = 24;

            var message = "文字を真ん中に表示！";
            var textWidth = .font.getTextWidth(message);    // 文字列の幅を取得します
            var textHeight = .font.getTextHeight(message);  // 文字列の高さを取得します

            // messageLayer の中央に文字を書きます
            .drawText((.width - textWidth) \ 2, (.height - textHeight) \ 2, message, 0xFF0000);

            // レイヤを表示状態にします
            .visible = true;
        }

        visible = true;
    }

    // デストラクタ：スーパークラスのデストラクタを呼び出します
    function finalize()
    {
        super.finalize();  // スーパークラスのデストラクタを呼び出します
    }
}

var win = new SimpleWindow();  // ウィンドウを作ります

	ちょっと実行してみて。これでレイヤの真ん中にメッセージが表示されるはずだよ。
	うん。

	あっ、ほんとだ。ちょうど真ん中に表示されてるね。
	じゃあ、文字を真ん中に表示してる部分のスクリプトを見てみよっか。
	えっと、textWidth っていう変数に getTextWidth メソッドの戻り値を代入してるから、これが文字列の幅になるんだよね？
	そ。で、textHeight には getTextHeight の戻り値を代入してるから、これは文字列の高さになるよね。
	その次の drawText メソッドの引数がちょっとややこしいね…
	じゃあ、まずは第１引数からね。 (.width - textWidth) \ 2 はどんな値になるかわかる？
	えっとねぇ… (.width - textWidth) はレイヤの幅から文字列の幅を引いた値になるんだよね。それを 2 で割ってるんだから…レイヤの幅から文字列の幅を引いた値の半分、かな？
	ん、そのとーり。この位置に文字を表示すると、レイヤの左端から文字の左端までの長さと、文字の右端からレイヤの右端までの長さが同じになるから、真ん中に表示されるってワケ。
	そっか、なるほどね。
	ちなみに §3.1 でも同じようなことやったんだけどね。
	あ、そーいえばウィンドウを画面の真ん中に表示する時も、同じように位置を計算したね。
	そ、あれと同じ考え方。第２引数は幅が高さに変わってるだけだから解るよね。
	うん。
	じゃぁ、今回はこんなところかな。次回はこれを踏まえて問題に挑戦してもらうからね。
	問題を出すのを次回にするってことは…もしかしてすごい難しい問題なんじゃ…？
	ううん、別にそんなに難しくないと思うよ。ただちょっと長くなりそうだから、次回にしようと思っただけ。
	そなの？
	うん、だからだいじょぶだよ。それじゃ、また次回ね！

Section 3.5 フォント

Section 3.5　フォント