レイヤー

レイヤーというのは、ウィンドウ上に設置する画用紙のようなものです。 ウィンドウ（画板）の上に画用紙を敷き、その上に何かを表示します。 よって、レイヤーが無ければ何も表示出来ないという事です。

レイヤーはLayerクラスを使用してオブジェクトを作ります。

new Layer(レイヤを作るウィンドウ, 親となるレイヤー);

レイヤーを作るウィンドウと言うのは、メニューを作った際と同様で、 基本的にはthisを指定して問題ありません。

親となるレイヤーも、やはりメニューの時と同様に、 親子関係が存在しており、他のレイヤーの子となる場合は、そのレイヤーの名前を指定します。 他にレイヤーが無ければnullを指定します。 すると、そのレイヤーはプライマリレイヤーになります。

Windowクラスには、管理するオブジェクトを追加するための関数が用意されています。

add( 管理オブジェクト );

何故このような関数が必要なのでしょう？ リファレンスには以下のように書かれています。

管理オブジェクトを追加します。ここで指定されたオブジェクトは、ウィンドウが無効化 されるときに自動的に無効化されるようになります。

通常、あるクラスがオブジェクトを持つ場合、そのクラスのオブジェクトが無効化される時、 所持しているオブジェクトも無効化するため、後始末関数（finalize）で処理しなければなりません。 しかし、この関数でウィンドウの管理下に置けば、この処理が不要になり、オブジェクトの管理が容易になります。 （メニューの項目で説明した親子関係、と似ています）

例えば…

Layer1 = new Layer(this, null);

とだけ書いた場合、Layer1はWindowクラスが持っているオブジェクトではあるが、 実質的にWindowクラスが管理しているわけではありません。 そこで、add関数で管理下に置きます。

add (Layer1);

これで、Layer1はWindowクラスが管理するオブジェクトとして登録されます。 レイヤーは、親となっているウィンドウの下で動作させるのが基本ですので、 この関数で管理下に置くのが通例となっています。

ここからは、プライマリレイヤを作って、適当な文字を表示するまでを見ていきます。

では、前回作成したMyWindow.tjsを開き、メニューの設定の後にでも以下の二行を追加してください。

pLayer = new Layer(this, null);
add(pLayer);

これでpLayerはMyWindowの管理下に入りました。 以降、pLayerはプライマリレイヤーとして機能します。 （pLayerはMyWindowのメンバー変数として宣言します）

レイヤ表示位置の設定

位置は、以下のレイヤクラスのプロパティに値を代入する事で操作できます。

top …… 上端の位置をピクセル単位で指定します

left…… 左端の位置をピクセル単位で指定します

画像で示すと以下のような感じです

この例はプライマリレイヤの場合です。 正確には、親となるレイヤ上での位置を指定します。 詳細については、機会を改めて説明します。

topは、最上端を0として、レイヤの位置をどのくらい下にずらすか、を指定します。 大きい数字を指定すればするほど、位置は下のほうへ移動します。

leftは、最左端を0として、レイヤの位置をどのくらい右にずらすか、を指定します。 大きい数字を指定すればするほど、位置は右のほうへ移動します。

一般的には、プライマリレイヤは画面全体に表示させるものなので、 最も上、最も左を位置とする（双方共に0を指定する）のが普通です。

pLayer.top = 0;
pLayer.left = 0;

topとleftはレイヤクラスのメンバーなので、 レイヤ名に続いてドット( . )指定するのを忘れないでください。 (忘れるとWindowクラスのメンバーとして認識してしまいます）

位置を指定する時は以下の関数も使えます。

setPos(leftの値, topの値);

pLayer.width = 300;
pLayer.height = 300;

class MyWindow extends Window
{
    var myMenu;
    var myMenuEnd;
    var pLayer; // プライマリレイヤ

    function MyWindow()
    {
        super.Window();

        setSize(640, 480);
        caption = "私のウィンドウ";

        myMenu = new MenuItem(this, "システム(&S)");
        myMenuEnd = new MenuItem(this, "終了(&E)");
        menu.add( myMenu );
        myMenu.add( myMenuEnd );

        // プライマリレイヤ作成
        pLayer = new Layer(this, null);
        add(pLayer);
        pLayer.top = 0;
        pLayer.left = 0;
        pLayer.width = 300;
        pLayer.height = 300;

        visible = true;
    }

    function finalize()
    {
        invalidate myMenu;
        invalidate myMenuEnd;

        super.finalize(...);
    }

    function action(ev)
    {
        if (ev.type == "onClick" && ev.target == myMenuEnd)
        {
            close();
        }
    }
}

以上の設定で以下のようなウィンドウが出来上がります。 （白く塗りつぶされた部分が縦300、横300で作ったレイヤです）

では、前回作成したレイヤーに「Hello World!!」という文字を表示させてみましょう。

レイヤクラスには、たくさんの機能が関数で実装されており、 文字の表示も簡単に行う事が出来ます。

drawText( x , y , text , color);

（１）xとyはレイヤの表示位置で説明した「topとleft」とほぼ同義です。 xが最左端からの位置、yが最上端からの位置です。
ただし、この座標の基準はそのレイヤ自身、である事に注意してください。

（２）textは表示する文字を指定します。

（３）colorは表示する文字の色を0xRRGGBB形式で指定します。

今回は「Hello World!!」の文字を黒で表示するものとします。 「Color Code Generator」で真っ黒を調べると0x000000が出てきました。 これが、黒を表す16進数表記です。

では、これに従ってレイヤクラスの関数drawTextを呼び出して、文字を表示してみましょう。

pLayer.drawText(10,10,"Hello World!!",0x000000);

以上を、MyWindowクラスの初期化関数内に追加してみてください。 黒い文字で「Hello World!!」と表示されれば、ひとまず成功です。

drawTextによって、表示する位置、文字、色などを指定する事が出来ましたが、 文字の大きさを指定する事は出来ませんでした。

実は、文字に関する設定はFontクラスのオブジェクトが全て管理しています。 このオブジェクトにはレイヤクラスのプロパティfontの名前で参照出来ます。

fontクラスには様々な関数とプロパティがありますが、主に使うのは以下のプロパティです。 （その他の詳しいメンバーはリファレンスを参照してください）

• bold …… 文字を太字で表示するか否か(真偽値)
• italic …… 文字を斜体で表示するか否か(真偽値)
• height …… 文字の高さをピクセル単位で指定(正の整数)

では、先程よりサイズをより大きくし、太字と斜線で文字を表示してみましょう。

with( pLayer )
{
    // 文字の高さを24ピクセル(pixel)で表示
    .font.height = 24;
    .drawText(10,10,"Hello World!!",0x000000);
    // 斜体＋青で表示
    .font.italic = true;
    .drawText(10,30,"Hello World!!",0x0000FF);
    // 太字＋赤で表示（斜体解除）
    .font.italic = false;
    .font.bold = true;
    .drawText(10,50,"Hello World!!",0xFF0000);
}

次の項目について説明する前に、レイヤーの表示タイプについて簡単に説明しておきます。

吉里吉里のグラフィックシステムは複雑で、その内部事情は私も詳しくは存じないのですが、 レイヤーには、いくつものモードがあり、その表示方式を切り替える事が出来る、とだけ記憶してください。

最も標準的なモードの二つとしては「アルファ合成を行う」「完全に不透過」があります。 この二つがどう違うのか、は下の画像を見て頂ければ分かりやすいと思います。

モードを変えて画像を表示した場合の例で、双方共に画像の透明度は半分に下げてあります。 しかし、下のモードでは透明度を無視しており、重なった画像の部分は隠れてしまっています。

この透明度をアルファチャンネルと呼びます。 「アルファ合成を行う」という事は、このアルファチャンネル（透明度）を考慮して表示する、という事です。 （正確な表現ではありませんが、詳細はリファレンスでご確認ください）

レイヤーを使う際は、このように透明度を考慮したモードが扱いやすいため、 レイヤーを使う前に以下の記述をしておきます。

レイヤ名.type = ltAlpha; // 表示モード

これで表示モードをアルファ合成を行うモードに設定できます。 （描画モードは自動的に最適な描画モードになりますので、今回は設定不要です）

もっと複雑な画像処理を行うようになると、様々なモードを使用する機会が出てくるかと思いますが、 本ページでは「ltAlpha」時を前提とした説明に留めたいと思います。

レイヤーには文字だけではなく、様々な図形も表示させる事が出来ます。 まずは、色の付いた四角形を描画する関数を紹介します。

fillRect(left, top, width, height, value)

（１）left、topはdrawTextの時に指定した上左の座標と同様です

（２）widthは描画する図形の横幅、heightは縦幅です

（３）valueはレイヤの描画方式によって異なりますが、 描画方式を「dfAlpha」とする本ページでは「0xAARRGGBB」形式で指定する事になります。

AARRGGBB形式とは？

0x赤緑青の形式に加え、最初のAAは描画する図形の透明度（アルファ値）を16進数で指定します。 255(16進数でFF)が完全不透明で0(16進数で00)なら完全透明（見た目は何も見えなくなる）です。

16進数に変換するには、Windowsに付属の電卓で簡単に行えます。以下の画像を参考にしてください。