Akashic Engine 逆引きリファレンス

クリッピングする

描画内容のクリッピングするには Pane を利用します。

凡例

var pane = new g.Pane({
  scene: scene,
  width: 50,
  height: 50
});
var rect = new g.FilledRect({
  scene: scene,
  width: 50,
  height: 50,
  x: 15,
  y: 15,
  cssColor: "red"
});
// pane に rect を追加。pane の大きさからはみ出す rect の部分は表示されない。
pane.append(rect);
scene.append(pane);

利用例

次のコンテンツは、Pane の大きさで子要素をクリッピングして表示します。

詳細

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

Pane は描画内容をキャッシュしてるため、 Pane の width や height 等のプロパティを変更した場合は invalidate() を呼び出す必要があります。 少し紛らわしい点として、 Pane が保持している子エンティティの変更時には子エンティティの modified() や invalidate() のみを呼び出せばよいという点があります。 子エンティティの変更は Pane に通知されて自動的にキャッシュの更新が行われます。

下記のコードでは、Pane の子要素の矩形を回転させています。 矩形オブジェクトの modified() を呼び出していますが、 Pane 自体のプロパティは変更していないので、 Pane の invalidate() の呼び出しはしていません。 シーンをクリックした場合は、 Pane 自体のプロパティを変更しているので invalidate() を呼び出しています。

function main() {
  var scene = new g.Scene({ game: g.game });
  scene.onLoad.add(function() {
    var pane = new g.Pane({ scene: scene, width: 50, height: 50 });
    var 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(function() {
      ++rect.angle;
      rect.modified();
    });
    scene.onPointDownCapture.add(function() {
      pane.width = 25;
      pane.height = 25;
      pane.invalidate();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;

関連情報

前 (画像を動かす) | 目次 | 次 (シェーダを利用する)