Jump to content

Spine and cacheAsBitmap


Jonny Shaw
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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! :D 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

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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!



 

Link to comment
Share on other sites

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?

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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