Jump to content

Sprite and cacheAsBitmap


Recommended Posts

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



- 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?




Link to comment
Share on other sites

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);    };


Link to comment
Share on other sites

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);};
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...