クリッピングする

このページのサンプルコードをダウンロード

# ペイン

ペインは E と同じように子要素をまとめるためのエンティティです。ペインを使うことで描画内容のクリッピングを実現できます。 E と異なり、Pane は子孫要素の描画領域を Pane の大きさに限定します。子要素が Pane の大きさをはみ出して描画しようとした場合、はみ出した部分は描画されません。

function main() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    const pane = new g.Pane({ scene: scene, width: 50, height: 50 });
    const rect = new g.FilledRect({
      scene: scene,
      width: 50,
      height: 50,
      x: 15,
      y: 15,
      angle: 30,
      cssColor: "red"
    });
    pane.append(rect);
    scene.append(pane);
  });
  g.game.pushScene(scene);
}

module.exports = main;

ラベル同様、ペインも描画内容をキャッシュしています。ペイン自体のプロパティ (例えば width や height) を書き換えた場合は、 invalidate() を呼び出す必要があります。

少し紛らわしい点として、ペインが保持している子エンティティの変更時には子エンティティの modified() や invalidate() のみを呼び出せばよいという点です。子エンティティの変更はペインに通知されて自動的にキャッシュの更新が行われます。

以下のプログラムでは、ペイン内に配置した矩形を回転させています。ペインを利用していますが、ペイン自体のプロパティは変更していないので、矩形オブジェクトの modified() の呼び出しをしていますが、ペイン自体の invalidate() の呼び出しはしていません。

function main() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    const pane = new g.Pane({ scene: scene, width: 50, height: 50 });
    const rect = new g.FilledRect({
      scene: scene,
      width: 50,
      height: 50,
      x: 15,
      y: 15,
      angle: 30,
      cssColor: "red"
    });
    pane.append(rect);
    scene.append(pane);
    rect.onUpdate.add(() => {
      ++rect.angle;
      rect.modified();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;