3.3　レイヤに画像を表示する

	今回もレイヤの続きね。
	今回はレイヤに画像を表示するんだよね？
	うん。画像を読み込むのには loadImages メソッドを使うんだ。
	それって KAG の image タグみたいな感じなの？
	ううん、もっとシンプルなメソッドだよ。 image タグは単に画像を読み込むだけじゃなくて、他にも色々指定できるでしょ。
	うん、位置の指定とか色々属性があるよね。
	loadImages メソッドは画像を読み込むだけだから、引数も２つだけなんだ。第１引数は読み込む画像ファイル名で、第２引数はカラーキー。ただしカラーキーは必要なければ省略しても OK。
	カラーキーって？
	透明色のことだよ。画像の中にこの色があると、その部分は透明になるんだ。
	あ、じゃあカラーキーって image タグの key 属性で指定できる色のこと？
	うん。0xRRGGBB 以外の形式で指定する時はちょっと書き方が違うけど、基本的には image タグの key 属性と同じ。だから png みたいに画像自体に透明色を設定できる形式の画像を読み込む時は省略できるんだ。
	なるほどね。あ、読み込める画像の形式は image タグと同じなんだよね？
	うん、もちろん。 image タグも内部では loadImages メソッドを使ってるからね。
	あ、そうなんだ。
	読み込める形式は BMP, JPEG, PNG, ERI, TLG5, TLG6 だね。それぞれ特徴があるんだけど、詳しくは KAG System リファレンスの『画像形式について』の項目を参照してね。
	画像の形式ってやっぱり使い分けたりした方がいいの？
	んー、画質は少々悪くてもいいからファイルサイズを小さくしたいっていう場合は JPEG を使って、画質を落としたくない場合は PNG か TLG6 あたりがいいんじゃないかな。ま、でも実際使ってみて良さそうなのを選んでもいいと思うよ。
	そっか、わかった。
	じゃ、画像を読み込むスクリプトを書いてみるね。
	うん。

class SimpleWindow extends Window
{
    // コンストラクタ
    function SimpleWindow()
    {
        super.Window();  // スーパークラスのコンストラクタを呼び出します

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

        with(primaryLayer)
        {
            .loadImages("frame.png");   // プライマリレイヤに画像を読み込みます
            .setSizeToImageSize();      // プライマリレイヤのサイズを画像サイズに合わせます

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

        visible = true;  // ウィンドウを表示状態にします
    }

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

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

	これはプライマリレイヤに画像を読み込んで表示するスクリプトなんだけど、実行する前に frame.png をプロジェクトフォルダに入れといてね。
	うん、わかった。
	じゃあ、実行してみて。
	はーい。

	あ、ちゃんとプライマリレイヤに画像が表示されたね。
	うん、OK だね。じゃあスクリプトを見ていこっか。
	うん。
	デストラクタはスーパークラスのデストラクタを呼び出してるだけだから省略するとして… コンストラクタでプライマリレイヤを作ってる所はわかるよね。
	うん。でも、その次に出てくる with っていうの初めて見るんだけど、これってなに？
	with を使うと、メソッドやメンバ変数やプロパティ、あと辞書配列の要素を参照する時にオブジェクトの名前を省略できるようになるんだ。 with の後ろのカッコの中にオブジェクトの名前が書いてあるでしょ。
	うん、primaryLayer って書いてあるね。
	だから with ブロックの中では、例えば loadImages メソッドを呼ぶ時は primaryLayer を省略して『.loadImages(...);』って書けるんだ。
	あ、だからブロックの中のメソッドとかが . で始まってるんだね。
	うん。つまり、with ブロックの中身はこのスクリプトと同じ意味。

	レイヤを作った後はプロパティを設定したりメソッドを呼んだりするから、何回もレイヤ名を書かなきゃいけないんだけど、 with を使うとレイヤ名を１回書くだけで済むから便利なんだ。
	なるほどね。確かに with を使った方が簡単に書けてるね。
	ん。じゃ次は with ブロックの中身ね。
	最初に loadImages メソッドを呼び出してるね。第１引数が読み込む画像のファイル名だから "frame.png" で、第２引数は省略されてるからカラーキーは使わないってことだよね？
	ん、そう。ちなみに loadImages メソッドの第１引数に指定する画像ファイル名は image タグの storage 属性と同じで、拡張子を省略して "frame" って書いても OK だよ。
	あ、そうなんだ。
	あと、拡張子を除いたファイル名の最後に _m を付け足した名前の画像ファイルがあればマスク画像として読み込まれるし、 _p を付け足した名前の画像ファイルがあれば領域画像として読み込まれるよ。
	それも image タグと同じだね。
	でも拡張子が asd のアニメーション情報ファイルや、拡張子が ma の領域アクション定義ファイルは読み込まれないから注意してね。
	そうなの？
	この２つは KAG で実装されてる機能だからね。じゃ、次は setSizeToImageSize メソッド。
	それってどんなメソッドなの？
	setSizeToImageSize メソッドは、レイヤの表示サイズを画像サイズに合わせるメソッドだよ。
	えっ？　レイヤのサイズって画像サイズと同じになるんじゃないの？
	ううん。読み込む画像サイズがレイヤのサイズより小さい場合以外は、画像を読み込んでもレイヤの表示サイズは変わらないよ。試しにこのスクリプト実行してみて。

class SimpleWindow extends Window
{
    // コンストラクタ
    function SimpleWindow()
    {
        super.Window();  // スーパークラスのコンストラクタを呼び出します

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

        with(primaryLayer)
        {
            .loadImages("frame.png");   // プライマリレイヤに画像を読み込みます
            // .setSizeToImageSize();   // プライマリレイヤのサイズを画像サイズに合わせます

            // ウィンドウのクライアント領域のサイズをプライマリレイヤの画像サイズに合わせます
            setInnerSize(.imageWidth, .imageHeight);
        }

        visible = true;  // ウィンドウを表示状態にします
    }

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

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

	setSizeToImageSize メソッドの行がコメントになってる…ってことは、 setSizeToImageSize メソッドを実行しないってことだよね。
	うん。このスクリプトを実行すれば setSizeToImageSize メソッドが必要ってことがわかると思うよ。
	じゃあ、実行してみるね。

	あっ、画像がちょっとしか表示されてない！
	レイヤには、レイヤの表示サイズを表す width, height プロパティの他に、レイヤが持ってる画像のサイズを表す imageWidth と imageHeight っていうプロパティがあるんだ。
	えっと、loadImages で画像を読み込むとそのプロパティはどうなるの？
	imageWidth と imageHeight はそれぞれ読み込まれた画像の幅と高さになるんだけど、 width と height はレイヤが作られた時のままなんだ。
	表示サイズは自動的に変わらないんだね…
	うん。で、width の方が imageWidth より小さくて、 height も imageHeight より小さいから、画像の一部しか見えないってワケ。

	つまり、レイヤにはちゃんと画像全体が読み込まれてるんだけど、上の図で薄く表示されてる部分は、レイヤの表示サイズの範囲外になってるから見えないってことだね。
	だから setSizeToImageSize メソッドで　width と height も画像の幅と高さに合わせなくちゃいけないってこと？
	ん、そういうこと。ちなみに image タグで画像を読み込む場合は、内部で自動的に setSizeToImageSize メソッドが実行されるから、ちゃんと画像サイズと表示サイズが合うようになってるんだ。
	へぇ～、そうなんだ。
	これで画像の読み込みについては大体解った？
	うん。まず loadImages メソッドでレイヤに画像を読み込んで、 setSizeToImageSize メソッドでレイヤの表示サイズを画像サイズに合わせればいいんだよね。
	ん、基本的にはそうだね。まぁボタン作る時とかは、敢えてレイヤの表示サイズを画像サイズに合わせないこともあるんだけどね。
	そなの？
	ま、その辺はまた機会があったら説明するね。
	うん、わかった。
	じゃ、今回はここまで。また次回ね。

Section 3.3 レイヤに画像を表示する

Section 3.3　レイヤに画像を表示する