pixijs / layers

Separate the z-hierarchy of your scene tree from its canonical structure.
https://pixijs.io/layers/docs/
MIT License
222 stars 57 forks source link

sorting video BG with sprites normal #32

Closed jonlepage closed 6 years ago

jonlepage commented 6 years ago

hey, am not remember if it possible or how to do a sorting if i have a simple video element (Background) and if a need rendering sprites elements hover video, with diffuse,normal.

What i can do for make video rendering below all elements diffuse and normal?

example script here, in order i create createBackgroundand createTitleLogo: Asignet to parentGroup. But the cage of the title seem are rendering below the cage of video ? maybe i do something wrong or am not remember the triks.

Scene_Title.prototype.createBackground = function() {
    const cage =  new PIXI.Container();
    // setup : see custom PIXI _this.autoPlay = false; from video source
    const video = $Loader.ress.video.original_intro1Loop;
    const video_texture = PIXI.Texture.fromVideo(video.data);
    const video_controler = video_texture.baseTexture; // controler from source
    const video_sprite =  new PIXI.Sprite(video_texture);
    // asign group display
    cage.parentGroup = $displayGroup.group[0];
    cage.zIndex = 1;
     // parenting
     cage.addChild(video_sprite);
     this.addChild(cage);
     //reference
     this.bgVideo = video_controler;
    // setup or hack
    video_sprite.width = 1920, video_sprite.height = 1080;
};

Scene_Title.prototype.createTitleLogo = function() {
    const data = $Loader.ress.tmp.titleLogoAni;
    const cage = new PIXI.Container(); // TODO: MAKE CUSTOM CONTROLER ANI CLASS
    const tex_d = data.textures;
    const tex_n = data.textures_n;
    const sprite_d = new PIXI.extras.AnimatedSprite(tex_d);
    const sprite_n = new PIXI.Sprite(tex_n[0]);
        sprite_d.normalWith(sprite_n, tex_n); // convert ani to [diff,normal]
    // asign group display
    sprite_n.parentGroup = PIXI.lights.normalGroup;
    sprite_d.parentGroup = PIXI.lights.diffuseGroup;
    cage.parentGroup = $displayGroup.group[0];
    cage.zIndex = 2;
    // parenting
    cage.addChild(sprite_d, sprite_n);
    this.addChild(cage);
    // reference
    cage.name = data.name;
    // setup or hack
    sprite_d.play();
};

here how the stage look like in children a3tgbva3g

thanks

jonlepage commented 6 years ago

ho ok solved, i need to remember this hack black bg for all elements

    const blackTextureVideo = new PIXI.Sprite(PIXI.Texture.WHITE);
    blackTextureVideo.tint = 0;
    // asign group display
    blackTextureVideo.parentGroup = PIXI.lights.normalGroup;
    video_sprite.parentGroup = PIXI.lights.diffuseGroup;
    cage.parentGroup = $displayGroup.group[0];
    cage.zIndex = 1;
     // parenting
     cage.addChild(blackTextureVideo,video_sprite);
     this.addChild(cage);
ivanpopelyshev commented 6 years ago

Good :)