cacheasbitmap Spine and cacheAsBitmap

[Jonny Shaw]

Hi all, been working on trying to get my game a little more optimised for mobile.  It's a slot game - just 9 icons all spine skeletons.  The icon drop is animated with GSAP.  Win detection then plays out the winning lines.

At the moment FPS for mobile (on my G4 is around 20-30fps, desktop 60fps)

So I've tried setting cache to bitmap as true once the icons have been created but neither seems to work.  The animation still plays out once a win is detected (without turning cacheAsBitmap back to false)  Tried setting cacheAsBitmap on both the parent containers and the icons themselves, but still no luck.

Tested it on a spine animated cactus I have in the background as well and that works fine which is weird.  Any ideas greatly appreciated!

[ivan.popelyshev]

You have to add extra container, in which you put spine element, and that container can be cached.

The problem is that Container cant have more than one behaviour for updates and renders, but PIXI architecture and API have no clues about that. I hope to fix it later, so users will be able to understand why cant they have EVERYTHING on the same container.

[Jonny Shaw]

18 minutes ago, ivan.popelyshev said:

You have to add extra container, in which you put spine element, and that container can be cached.

Thanks, the spine elements are already in containers (which is what I was trying to cache on) I'm using a couple of prototypes, one for gameReel which is where this function creates the winIcon(Containers) also from a prototype.  The spine icons are just added as children to the winIcons....

This is the function on the gameReel prototype that generates the icons...

    this.createIcons = function(res,data) {
        this.icons = [];
        // Generating an portion of the reel generated by a random index(see function)
        this.iconData = data;
        var newIcons = getIconRange(this.iconData);
        this.currentIcons = newIcons;
        this.iconData = data;
        // Create 3 icons
        for(var i = 0; i < newIcons.length; i++)
            {
                var icon =new winIcon(spineIcon);
                icon.cacheAsBitmap = true;
                this.icons.push(icon);
                var spineIcon;
                this.addChild(icon);
                switch(newIcons[i])
                {
                    case 0 : spineIcon = new PIXI.spine.Spine(gameArt.icoStar.spineData);
                        break;
                    case 1 : spineIcon = new PIXI.spine.Spine(gameArt.icoKing.spineData);
                        break;
                    case 2 : spineIcon = new PIXI.spine.Spine(gameArt.icoQueen.spineData);
                        break;
                }
                // Declare the icon only once it has been created..
                icon.setSpineIcon(spineIcon);
                
                // If a Spine Icon has been created (failsafe for errors)
                if(spineIcon!=null)
                    {
                        spineIcon.skeleton.setToSetupPose();
                        icon.addChild(spineIcon);
                        icon.y = i*190;
                    }
                icon.resetIcon();
            }
    }

then this is the the prototype for the winIcon itself..

// WIN ICON Prototype
function winIcon() {
    this.name="winIcon";
    PIXI.Container.call(this);
    this.spineIcon;
    this.setSpineIcon = function(spineIco)
    {
        this.spineIcon = spineIco;  // Declaring the spine icon
    }
    this.resetIcon = function()
    {
        this.spineIcon.state.clearTracks();
        this.alpha = 0;
        this.scale.set(2,2);
    }
    this.iconWin = function(delay)
    {
        this.spineIcon.state.addAnimation(0,'win', false, delay);
        TweenMax.to(this.scale,0.3,{x:1.4,y:1.4, repeat:1, yoyo:true, delay:delay, ease:Sine.easeIn});
    }
    
}
winIcon.prototype = Object.create(PIXI.Container.prototype);

Please excuse the code, I'm still very new to javascript and still much more of a designer than a developer I'm afraid! I also tried adding the line this.cacheAsBitmap = true; to a few different places in the winIcon prototype but still doesn't seem to be working

[ivan.popelyshev]

winIcon.prototype.constructor=winIcon;

^^^ You forgot that after "prototype=".

 

Are you sure that constructor code is actually called?

[Jonny Shaw]

3 minutes ago, ivan.popelyshev said:

winIcon.prototype.constructor=winIcon;

^^^ You forgot that after "prototype=".

Many thanks, I'm still very new to prototypes!

So should that be? ...
 

function winIcon() {
    this.name="winIcon";
    PIXI.Container.call(this);
    this.spineIcon;
    this.setSpineIcon = function(spineIco)
    {
        this.spineIcon = spineIco;  // Declaring the spine icon
    }
    this.resetIcon = function()
    {
        this.spineIcon.state.clearTracks();
        this.alpha = 0;
        this.scale.set(2,2);
    }
    this.iconWin = function(delay)
    {
        this.spineIcon.state.addAnimation(0,'win', false, delay);
        TweenMax.to(this.scale,0.3,{x:1.4,y:1.4, repeat:1, yoyo:true, delay:delay, ease:Sine.easeIn});
    }
    
}
winIcon.prototype = Object.create(PIXI.Container.prototype);
winIcon.prototype.constructor=winIcon;

 

[ivan.popelyshev]

Yes. When you move to ES6 or typescript, you wont have to use prototypes anymore, it all will be under the rug. I'm glad that you chose to learn how it actually works first

[Jonny Shaw]

3 minutes ago, ivan.popelyshev said:

Yes. When you move to ES6 or typescript, you wont have to use prototypes anymore, it will all be under the rug. I'm glad that you chose to learn how it actually works first

lol I've given them a shot!  ES6 is definitely something I need to figure out, I'm used to Unity and Flash really so just being able to split classes down to OOP on GameObjects and MovieClips!  Updated the code and its still not cacheing,  I'll take another look later, I've probably messed up somewhere 

[ivan.popelyshev]

Flash, Unity => you should choose TypeScript. Btw, I'm making ActionScript->TypeScript converter on my main job.

[Jonny Shaw]

22 hours ago, ivan.popelyshev said:

You have to add extra container, in which you put spine element, and that container can be cached.

The problem is that Container cant have more than one behaviour for updates and renders, but PIXI architecture and API have no clues about that. I hope to fix it later, so users will be able to understand why cant they have EVERYTHING on the same container.

Hi Ivan  Have tried it again with the cactusContainer in my scene with the cactus spine object as a child.  Thought it would be a more simple test than the icons, with them not being through a prototype.  I don't think there is anything else that would be interfering with the cache, but it still appears not to be working, Could it possibly be the animation?  Do they need to be stopped before cacheing?  

If the cacheAsBitmap=true was successful wouldn't that instantly cause the spine animation to stop playing?  I have dropped a link your way with the current build and problem.  Any clues greatly appreciated!

 

[Jonny Shaw]

Think I may have got one step closer with this by accident.  I was running a bit of debug, so added an standard browser alert before the spine icons were due to play out.  Confirming the alert then goes back to the code.  With this alert active the caching seems to work, and the animations do not play.  Could it be a time delay that is needed for the caching - could the spine animation playing out too quick and stopping this from happening?

[ivan.popelyshev]

You can stop the animations manually, there's "autoUpdate" property