示例
//创建图片元素(主站机图片)
var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
plane.x = 200;
plane.y = 400;
//设置锚点
plane.anchor.set(0.5,0.5);
app.stage.addChild( plane );
//创建图片元素(僚机)
var liaoji1 = new PIXI.Sprite.fromImage("img/liaoji4.png");
//将元素添加到另一个元素中(合并)
plane.addChild( liaoji1 );
代码讲解
// plane : 主战机元素
// addChild() : 添加元素
// liaoji1 : 僚机元素
plane.addChild( liaoji1 );
如下图所示
默认图层效果:先插入的元素低于后插入的元素(后插入的元素会遮盖先插入的元素) 合并元素图层效果:辅元素会与主元素图层一致并将主元素向下压一级(辅元素会遮盖主元素)
示例
代码示例
var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
//第一个元素,层级最低的元素 主元素
var e1 = new PIXI.Sprite.fromImage("img/plane_blue_01.png");
e1.x = 200;
e1.y = 400;
app.stage.addChild(e1);
//第二个元素
var e2 = new PIXI.Sprite.fromImage("img/img_plane_item_15.png");
e2.x = 200;
e2.y = 400;
app.stage.addChild(e2);
//第三个元素
var e3 = new PIXI.Sprite.fromImage("img/liaoji1.png");
e3.x = 200;
e3.y = 400;
//e1与e3合并后 e3的图层将与e1一致,e3会将e1压在底部
e1.addChild(e3);
效果