Draw sprite container and children to bitmap data

[Sturb]

I'm trying to make a snap shot of my game screen so I can fade multiple game elements in at the start of my game. These elements are contained within a root Phaser.Sprite. Fading the root container cases the children to fade unevenly. Meaning you can see parts of some elements behind others that overlap them. It doesn't create a nice effect.

The only solution I could think of was to BitmapData::Draw my root container to make a single image of my game screen, then fade that instead so it appears that everything fades evenly together. However, because of a past issue I encountered ( here: http://www.html5gamedevs.com/topic/14117-alpha-mask-trouble/ ), it appears that the children of a sprite are ignored when drawing ( or alpha masking ) to bitmap data object.

Now I could just do what I did in my other post, but some of my game elements have nested elements to them. So that solution isn't practical. 

[lukaMis]

Take a look at this: phaser-state-transition

[Sturb]

Great! Thanks! I'll check that out in a little bit.

[Sturb]

Different direction from what I was going for, but I'm not picky. Thanks a lot.

[brejep]

If you cache the sprite as a bitmap - cacheAsBitmap=true - it should stop that unwanted effect of uneven fades.

[Pautay]

I know it's a bit late but you can do something like that : 

  var renderTexture = stage.add.renderTexture(800, 600, 'myTexture');
    renderTexture.renderXY(myContainer, 0, 0, true);
    var outputSprite = stage.add.sprite(150, 80, renderTexture);
   

    var bmd = stage.add.bitmapData(800, 600);
    bmd.smoothed = false;
    bmd.draw(outputSprite, 0, 0);
    outputSprite.destroy();