transitionTo animations stop when tab not active but catch up after tab reactivates, bad user expierence

[PaulDMendoza]

I've been writing a game that uses Kinetic and there are soldiers that shoot at each other. In Chrome the bullets animate fine when the tab is active but if you go to another tab for a few seconds or more and then come back to the original tab, you can see that something isn't quite right with how it didn't animate away the bullet impacts. I'm using the transitionTo method for all of the bullet impacts and bullet movements so I think it has to do with the transitionTo function not calling the callback method correctly or something when the tab isn't active.

You can see an example of it here.

http://wargame.azurewebsites.net/

Here is the code in TypeScript that does the shooting of the bullets and then shows the bullet impact for 0.15 seconds.

shoot(options: IEntity_Shoot_Options) {
            var self = this;

            if (this._shoot_lastShotFired < new Date(Date.now() + (options.timeBetweenShots * 1000))) {
                return;
            }            

            this._shoot_lastShotFired = new Date(Date.now());

            var rotation = Utilities.radiansBetweenPoints(this.getWorldX(), this.getWorldY(), options.targetX, options.targetY);

            var bulletGroup = new Kinetic.Group();
            var gunTipX = this.getWorldX();
            var gunTipY = this.getWorldY();

            var line = new Kinetic.Circle({
                x: gunTipX - this._group.getX(),
                y: gunTipY - this._group.getY(),
                fill: 'black',
                radius: 1
            });
            bulletGroup.add(line);

            var randomOffsetX = Utilities.randomInteger(80, true);
            var randomOffsetY = Utilities.randomInteger(80, true);

            var hitX = options.targetX - this._group.getX() + randomOffsetX;
            var hitY = options.targetY - this._group.getY() + randomOffsetY;

            var bulletHit = self.addImage({
                url: "/Images/GameAssets/BulletImpact-1.png",
                x: hitX,
                y: hitY,
                width: 4,
                height: 4,
                group: bulletGroup
            });
            bulletHit.KineticImage.hide();
            this._group.add(bulletGroup);
            this.draw();

            var distance = Utilities.distanceBetweenPoints(this.getWorldX(), this.getWorldY(), options.targetX, options.targetY);

            line.transitionTo({
                x: hitX,
                y: hitY,
                duration: distance / 250,
                callback: function () {
                    line.hide();
                    bulletHit.KineticImage.show();
                    bulletHit.KineticImage.transitionTo({
                        width: 32,
                        height: 32,
                        opacity: .9,
                        offset: { x: 16, y: 16 },
                        duration: 0.15,
                        callback: function () {
                            bulletGroup.remove();
                        }
                    });
                }
            });            
        }

[ericdrowell]

ah yes, I've seen this before but haven't gotten to it yet. There's definitely some weirdness that goes on when you change tabs. The problem isn't actually KineticJS, per say, but with the requestAnimationFrame implementation of the browser. I do certainly need to add something in that prevents this from happening, perhaps some logic that detects if a new tab was activated, and then halt the animation until focus is returned. Not sure if this is even possible though.

[PaulDMendoza]

Actually, I think the solution is to bind to the draw/tick event for Kinetic for each frame instead instead of using setInterval() to manage my game state. I'll give that a shot.

[sendel]

see #421