描画順を変える
同じ親を持つ複数のエンティティの描画順を変えるには insertBefore() を利用します。
凡例
javascript
var entity = new g.FilledRect({
... // 必要なプロパティ
});
scene.insertBefore(entity, targetEntity); // targetEntity の直前に entity を挿入し、entity は先に(奥側に)描画されるinsertBefore() は子エンティティの中での挿入位置を指定して追加できます。
利用例
次のコンテンツは、既に追加されている緑と赤の矩形に青の矩形を赤の直前の子要素として追加しています。
詳細
同じ親を持つエンティティは、描画したい順番に追加することで前後関係を制御できます。
後から順番を変更したい場合は insertBefore() を利用できます。
既に他エンティティの子供になっているエンティティを insertBefore() すると、親となっていたエンティティの子供から外れ、insertBefore() で指定した親の子供となります。
javascript
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
});
}