Akashic Engine 逆引きリファレンス

描画順を変える

同じ親を持つ複数のエンティティの描画順を変えるには insertBefore() を利用します。

凡例

var entity = new g.FilledRect({
   ...      // 必要なプロパティ
});

scene.insertBefore(entity, targetEntity); // targetEntity の直前に entity を挿入し、entity は先に(奥側に)描画される

insertBefore() は子エンティティの中での挿入位置を指定して追加できます。

利用例

次のコンテンツは、既に追加されている緑と赤の矩形に青の矩形を赤の直前の子要素として追加しています。

詳細

同じ親を持つエンティティは、描画したい順番に追加することで前後関係を制御できます。

後から順番を変更したい場合は insertBefore() を利用できます。

既に他エンティティの子供になっているエンティティを insertBefore() すると、親となっていたエンティティの子供から外れ、insertBefore() で指定した親の子供となります。

function main() {
  var scene = new g.Scene({ game: g.game });
  scene.onLoad.add(function() {
    var groupA = new g.E({ scene: scene, x: 50, y: 50 });
    var groupB = new g.E({ scene: scene, x: 150, y: 100 });
    var blue = createRect(scene, 0, 0, "blue");
    groupA.append(blue);
    var red = createRect(scene, 30, 0, "red");
    groupA.append(red);

    var green = createRect(scene, 10, 0, "green");
    groupB.append(green);

    scene.append(groupA);
    scene.append(groupB);

    groupA.insertBefore(green, red); // green は groupB の子供から外れ、groupA の子供となる
  });
  g.game.pushScene(scene);
}

function createRect(scene, x, y, color) {
  return new g.FilledRect({
    scene: scene,
    width: 30,
    height: 30,
    x: x,
    y: y,
    cssColor: color
  });
}

関連情報

前 (非表示にする) | 目次 | 次 (複数のエンティティをまとめて扱う)