Sprite and cacheAsBitmap

[nuthinking]

Hi guys, I have a Sprite which I use as container with the following hierarchy:

 

Sprite

- Container

-- Sprite

- Container

-- Container

--- Sprite

--- Text

-- Sprite (mask for the container above)

 

Basically a rather complex hierarchy.

 

I would like sometimes the top Sprite to be cached as bitmap. Looks like simply setting its cacheAsBitmap is not enough. Am I missing something?

 

 

Thanks!

[xerver]

What is the behavior when you set cacheAsBitmap to true? Why is it not enough?

[ivan.popelyshev]

I think you have wrong bounds. Bounds must be the same as your maskArea

[nuthinking]

What is the behavior when you set cacheAsBitmap to true? Why is it not enough?

It doesn't look like the whole element becomes a single texture (during movements different items moves slightly). And if I hide some children (eg. alpha = 0) after setting cacheAsBitmap to true, they are not visible anymore. 

ItemView.prototype.checkCaching = function(){    this.cacheAsBitmap = this.isImageLoaded && !this.isHighLighting;    this.imageView.alpha = this.titleView.alpha = (this.cacheAsBitmap ? 0 : 1);};

Does setting cacheAsBitmap to true caches the Sprite instantly generating a texture containing all the children synchronously?

 

To answer also Ivan, I override the getLocalBounds:

this.getLocalBounds = function() {        return new PIXI.Rectangle(0, 0, this.size.width, this.size.height);    };

Thanks!

[ivan.popelyshev]

- Im thinking

[nuthinking]

This is the code of the container. Because I hide the children when cacheAsBitmap is true, the container is only visible when not cached.

getLocalBounds seem triggered correctly and also the value returned seems correct.

The example in pixi documentation seems very straight-forward, and hiding the children there seems correctly not to have any effect, so not really sure how to debug this besides rebuilding the view hierarchy step by step.

 

Any idea?

function ItemView(model, options){    Container.call(this);    this.model = model;    this.maxNumLines = options.maxNumLines;    this._isImageLoaded = false;    this._isHighLighting = false;    this.imageView = new ImageView(this.model.image, _.bind(this.imageDidLoad, this));    this.addChild(this.imageView);    this.resize(options.size);    this.getLocalBounds = function() {        return new pixi.Rectangle(0, 0, this.size.width, this.size.height);    };}ItemView.prototype = Object.create(Container.prototype);ItemView.prototype.constructor = ItemView;module.exports = ItemView;Object.defineProperties(ItemView.prototype, {    width: {        get: function () {            return this.size.width;        }    },    height: {        get: function() {            return this.size.height;        }    },    isImageLoaded: {        set: function(v){            this._isImageLoaded = v;            this.updateCaching();        },        get: function(){            return this._isImageLoaded;        }    },    isHighLighting: {        set: function(v){            this._isHighLighting = v;            this.updateCaching();        },        get: function () {            return this._isHighLighting;        }    }});ItemView.prototype.imageDidLoad = function(){    this.isImageLoaded = true;};ItemView.prototype.updateCaching = function(){    this.cacheAsBitmap = this.isImageLoaded && !this.isHighLighting;    this.imageView.alpha = this.titleView.alpha = (this.cacheAsBitmap ? 0 : 1);};ItemView.prototype.highlight = function(){    this.isHighLighting = true;    this.titleView.revealText();    this.imageView.zoom();    setTimeout(_.bind(function(){        this.isHighLighting = false;    }, this), appSettings.ITEM_HIGHLIGHT_TRANSITION_DURATION*1000);};ItemView.prototype.dim = function(){    this.isHighLighting = true;    this.titleView.hideText();    this.imageView.unzoom();    setTimeout(_.bind(function(){        this.isHighLighting = false;    }, this), appSettings.ITEM_HIGHLIGHT_TRANSITION_DURATION*1000);};ItemView.prototype.resize = function (size){    this.size = size;    this.imageView.resize(size);    if (this.titleView){        this.removeChild(this.titleView);        this.titleView = null;    }    this.titleView = new TitleView(this.model.title, this.maxNumLines, this.size);    this.addChild(this.titleView);};