3.4　レイヤに文字を書く

	前回はレイヤに画像を表示したから、今回はレイヤに文字を書いてみるね。
	メッセージレイヤみたいな感じに？
	ん、そう。
	あ、そういえばメッセージレイヤって文字を書く専用のレイヤなの？
	ううん、メッセージレイヤも普通のレイヤだよ。 KAG では画像を表示するレイヤとメッセージを表示するレイヤを使い分けてるけど、元々画像を表示するためのレイヤとか文字を書くためのレイヤっていう区別はないんだ。だから、１つのレイヤに画像と文字を両方表示することもできるよ。
	へぇ、そうなんだ。
	で、レイヤに文字を書くのに使うのが drawText メソッド。このメソッドは、今まで使ってきたメソッドの中で一番引数が多いメソッドなんだ。
	多いって…どれくらいあるの？
	１１個。
	そんなにあるの！？
	うん。drawText メソッドの引数はこうなってるよ。

＜drawText メソッドの引数＞

	引数名	引数の意味	デフォルト値
第１引数	x	文字を書き始める点の x 座標	－
第２引数	y	文字を書き始める点の y 座標	－
第３引数	text	描画する文字列	－
第４引数	color	文字の色	－
第５引数	opa	文字の不透明度	255 （不透明）
第６引数	aa	アンチエイリアスを行うか	true （行う）
第７引数	shadowlevel	影の不透明度	0 （影をつけない）
第８引数	shadowcolor	影の色	0x000000 （黒）
第９引数	shadowwidth	影の幅	0
第１０引数	shadowofsx	影の位置の x 座標	0
第１１引数	shadowofsy	影の位置の y 座標	0

	うわ、ほんとにいっぱいあるね…
	まぁ、第５引数以降の７個の引数は省略できるんだけどね。あと文字に影をつけない場合は第７引数以降は必要ないし。
	う～ん、でも結構ややこしそうだね…
	普通の文字を書く場合は最初の４つだけ指定して、後はデフォルトのままでいいから、そうでもないと思うよ。
	そうなの？
	うん。じゃあ実際に drawText を使ってレイヤに文字を書いてみよっか。
	うん！

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);
            // フォントの高さを 24 ピクセルに設定します
            .font.height = 24;
            // messageLayer の左上の位置から赤字で「drawTextで文字表示！」と書きます
            .drawText(0, 0, "drawTextで文字表示！", 0xFF0000);
            // レイヤを表示状態にします
            .visible = true;
        }

        visible = true;
    }

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

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

	じゃーまずは実行から。
	は～い。

	お～、ちゃんと文字が表示されてる！
	それじゃ、スクリプトの方を見とこっか。
	うん。
	今回もデストラクタはスーパークラスのデストラクタを呼び出してるだけだから省略するとして、コンストラクタで、プライマリレイヤを作るとこまでは解るよね？
	うん、おっけーだよ。
	ん、じゃあ messageLayer を作るとこからね。
	えっと、messageLayer を作った後に、setPos メソッドでレイヤの位置と大きさを指定してるんだよね？
	うん、そう。 setPos メソッドは第１、第２引数が位置で第３、第４引数が大きさだから…
	第１、第２引数はどっちも 0 になってるから messageLayer とプライマリレイヤの左上の点は同じ位置になるんだよね？
	そうそう。
	あと、第３引数が innerWidth、第４引数 innerHeight ってことは、messageLayer のサイズもウィンドウのクライアント領域と同じだよね。
	つまり、messageLayer とプライマリレイヤは大きさも同じってことだね。
	次に『.font.height』って書いてあるけど、これってプロパティ？
	ん、これはレイヤが持ってる Font クラスのオブジェクトのプロパティだよ。
	Font クラス？
	Font クラスってのは名前の通りフォントを管理するクラスだよ。レイヤはそれぞれ Font クラスのオブジェクトを持ってて、font っていうプロパティで参照できるんだ。
	へぇ…あ、じゃあ height っていうのはフォントの高さを設定できるプロパティなの？
	うん、そだよ。 drawText メソッドは文字の大きさを指定できないから、こうやって文字の大きさを指定するんだ。
	あ、そういえば drawText メソッドには文字の大きさを指定する引数なかったね。
	メソッドの引数で指定できないフォント関係の設定には font プロパティを使うんだ。ちなみに、height に 24 を代入してるから、文字の高さは 24 ピクセルになるよ。
	height プロパティがあるってことは、width プロパティもあるの？
	ううん、width プロパティはないよ。文字の幅は文字の高さに合わせて自動的に決められるから。
	あ、そうなんだ。
	今回使うのは height プロパティだけなんだけど、 Font クラスには他にもプロパティやメソッドがあるから、次回詳しく見ていくことにするね。
	うん、りょーかい。
	じゃ、次は drawText メソッドを実行してるとこね。
	引数が４つ指定されてるね。
	最初の２つは文字を書き始める位置だね。
	どっちも 0 になってるってことは、レイヤの左上から書き始めるってことだよね？
	ん、そう。表示される文字列は、第１引数の値が大きいほど右に寄って、第２引数の値が大きいほど下に寄るんだ。ちなみに、例えば右に寄せすぎて文字列がレイヤの中に表示しきれなくなった場合は、途中で切れちゃうから気をつけてね。
	自動的に改行されたりしないってこと？
	ん、そういうこと。で、第３引数はレイヤに書き込む文字列ね。
	これは表示したい文字列を普通に指定すればいいんだよね？
	そ。あと、最後の第４引数は文字の色なんだけど、これはどうやって指定してるかわかる？
	えっと、色の指定の仕方は §3.2 でやったよね。確か、0xAARRGGBB っていう形式だったよね？
	drawText メソッドの場合は第５引数で文字の不透明度を指定するようになってるから、AA の指定はいらないんだ。つまり、0xRRGGBB の形式で指定するってこと。
	あ、そうなんだ。じゃあ、0xFF0000 になってるから、赤が 255 で、緑と青は 0 ってことだね。
	そ。だから赤い字になってるってワケ。
	なるほどね。 …えっと、指定されてる引数は４つだから、後の７つの引数はデフォルトの値になるんだよね。
	うん。つまり、文字は不透明で、アンチエイリアスありで、文字に影はつけない、ってことだね。
	アンチエイリアスってなんだったっけ？
	アンチエイリアスは文字の縁を滑らかに表示することだよ。アンチエイリアスをやるかやらないかで、これくらい違って見えるんだ。

	結構違って見えるねー。
	アンチエイリアスはやってもやらなくてもいいんだけど、まぁ大抵の場合はやっといていいんじゃないかな。
	だね。
	後は、文字に影をつけるやり方をちょっと説明しとくね。第７～第１１引数に設定する値によって色んな影がつけられるんだけど、ここでは Config.tjs で設定できる影と縁取りのつけかたを説明するね。
	Config.tjs には影をつけるかどうかの defaultShadow と、縁取りをするかどうかの defaultEdge っていう設定項目があるよね。
	まず、defaultShadow を true にした時に相当するスクリプトはこれね。

	さっき実行したスクリプトの drawText の行をこのスクリプトで置き換えて実行してみて。
	おっけー。

	そーそー、defaultShadow を true にするとこんな感じになるよね。
	影を付ける時には、第７引数の shadowlevel に影の不透明度を指定して、第８引数の shadowcolor に影の色を指定するんだ。この場合だと、それぞれ 255 と 0xC08080 だから、不透明で暗い赤色の影がつくわけね。
	えっと、影の色って Config.tjs の中にある defaultShadowColor のこと？
	うん、それのこと。で、普通の影の場合は第９引数の shadowwidth は 0 になるんだ。あと第１０、第１１引数の shadowofsx, shadowofsy は、影を何ピクセルずれた位置に表示するかってこと。
	shadowofsx と shadowofsy はどっちも 2 になってるから、影になる文字列は赤い文字列を右に２ピクセル、下に２ピクセルずらした位置に表示されてるってこと？
	そういうこと。じゃ次は defaultEdge が true の場合ね。

	今度は drawText の行をこのスクリプトで置き換えて実行してみて。
	は～い。

	うんうん、defaultEdge が true だとこんな感じになるよね。
	縁取り文字を書く時には、第７引数の shadowlevel に縁取りをどれくらい強調するかを指定して、第８引数の shadowcolor に縁取りの色を指定するんだ。
	じゃあ、縁取りの色が defaultEdgeColor なの？
	そだよ。んで、第９引数の shadowwidth で縁取りをどれだけぼかすかを設定して、第１０、第１１引数の shadowofsx, shadowofsy はどっちも 0 にしとくんだ。
	引数を変えるだけで、普通の文字も影付き文字も縁取り文字も全部 drawText メソッドで書けるんだねぇ。
	これで drawText メソッドに引数が多い理由が解ったでしょ。
	うん、納得。
	さて、今回はこんなところかな。文字の書き方は大体解った？
	基本的なところは理解できたと思うよ。
	ん、それなら OK。それじゃ、また次回ね～。

Section 3.4 レイヤに文字を書く

Section 3.4　レイヤに文字を書く