LayerクラスはEクラスを継承して作られています。 必要に応じてEクラスの情報も参照してください。
Layerクラスはその名の通り、jgame.jsにおけるレイヤーを管理します。 例えばシューティングゲームでは、ゲーム中のシーンに現在の残機を表示するレイヤーと、実際のゲームを表示するレイヤーなどに分かれます。 実際のゲームはスクロールをしていきますが、残機を表示するレイヤーはスクロールしません。 こういった多層構造での描画方法を提供するのが本クラスの目的です。
Sceneには必ず一つ、rootという名前のLayerが格納されています。 新しいレイヤーを追加するには、SceneクラスのcreateLayerメソッドを用いてください。 例えば以下のようにすれば、menuという名前の新しいレイヤーを作成する事が出来ます。
var layer = scene.createLayer("menu");
また、それぞれのレイヤーにEntityを追加するには以下のようにします。
var layer = scene.createLayer("menu");
var shape = new Shape(32, 32);
var label = new Label("Hello World");
layer.append(label);//scene.layers.menu.append(label);やscene.append(label, "menu"); ともかけます
scene.append(shape);//scene.layers.root.append(shape);ともかけます
メニュー画面の表示が終わった際にレイヤーを削除する場合、SceneクラスのdeleteLayerメソッドを利用してください。
scene.deleteLayer("menu");
また、画面のスクロールをする際にも、layerクラスを操作する必要があるかもしれません。 画面を右にスクロールさせる場合、レイヤークラスのx座標をマイナス値にしていく必要があります。 例えば、以下の形では、それぞれのレイヤーを20ピクセル右にスクロールしています。
scene.layers.root.moveBy(-20, 0);
scene.layers.menu.moveBy(-20, 0);
この記述はやや冗長なので、Sceneに用意されているスクロール関数を使う方がより綺麗かもしれません。
scene.scrollBy(-20, 0);
scene.scrollBy(-20, 0, "menu");
Layerクラスは非常に便利なクラスですが、注意点として遅いという問題があります。 480x480のゲームの場合、5枚のレイヤーを使えば480x480の描画領域が5つと、描画する際の2つを合わせて合計7つ必要になります。 1枚のレイヤーしか使っていない場合、そもそもレイヤー用の領域が不要なので、必要な描画領域は2つで済みます。 2枚のレイヤーでは4つ、1枚のレイヤーでは2つなので、特にレイヤー数を1枚にするか複数枚にするかをシーンごとによく検討した方がよいでしょう。
var layer = new Layer(scene); 親となるシーンを指定してインスタンスを生成します。 通常、この方法でレイヤーを生成する事はありません。SceneクラスのcreateLayerメソッドを通して生成します。
canvas:HTMLCanvasElement;//レイヤー用の描画領域 context:CanvasRenderingContext2D;//レイヤー用のコンテキスト
hasBuffer() { レイヤー用の描画領域があるかどうかを判定します。 --- createBuffer() { レイヤー用の描画領域を作成します。 Sceneは複数毎のレイヤーを持った場合にのみ、本メソッドを利用して描画領域を作成します。 --- refresh(must?:bool) { must?:bool; --- deleteBuffer() { レイヤー用の描画領域を破棄します。 Sceneは1枚のレイヤーしか持っていない場合、このメソッドを使ってLayer用バッファを破棄します。 --- destroy() { レイヤーに関連しているリソースを全て破棄します。 ---