problem createEnemy() function: Unnecessary lag?

[ThomasTaylor]

Hey everyone! Currently, I'm building a vertical space shooter game, similar to Galaga, but I'm running into a problem where the enemy respawn function consumes a large amount of processing. Whenever you play my game for roughly 20 - 30 seconds, a noticeable lag begins to drop the framerate from 60fps to as low as 30fps; however, if you play for a little longer after the severe lag begins, the game will jump back up to 60fps.

I''ve narrowed it down to this piece of code:

createEnemy(): void {
	var MIN_ENEMY_SPACING = 300;
	var MAX_ENEMY_SPACING = 3000;
		
	var enemy = this.enemies.getFirstExists(false);
	if (enemy) {
		enemy.reset(this.game.rnd.integerInRange(0, this.game.width), -20, enemy.health);
		enemy.body.velocity.x = this.game.rnd.integerInRange(-150, 150);
		enemy.body.velocity.y = this.game.rnd.integerInRange(50, 100);
		enemy.body.drag.x = 100;

		enemy.update = function() {
	            enemy.angle = 0 - this.game.math.radToDeg(Math.atan2(enemy.body.velocity.x, 
                    enemy.body.velocity.y));
		}
        }
		
    //  Send another enemy soon
    this.game.time.events.add(this.game.rnd.integerInRange(MIN_ENEMY_SPACING, 
    MAX_ENEMY_SPACING), this.createEnemy, this);
}

If you view the uploaded image attached to this thread, you will notice where the createEnemy() function lies; however, the top functions having the worst Total Time are update, updateRAF, sort, InnerArraySory, Quicksort, etc. All of these functions are influenced by the createEnemy() if you go inside their nested subfolders. Any thoughts on what may be specifically wrong with this code?

[samme]

I don't see anything wrong with that code, although the enemy.update function is a little weird. It should be referencing this instead of enemy.

Those sort calls sound like group insertions.

 

[ThomasTaylor]

23 hours ago, samme said:

I don't see anything wrong with that code, although the enemy.update function is a little weird. It should be referencing this instead of enemy.

Those sort calls sound like group insertions.

 

Thanks for your answer! Group insertions, you say? Yeah, maybe I should look into that. It's just odd to me that it will progressively lower to 30 fps over the course of 2 minutes, then bump back up to 60fps. 

Also, why would I reference this instead of enemy? I defined the enemy at var enemy = ..., and I'm modifying that object specifically? Sorry for my ignorance if I'm wrong, I'm still new to TypeScript.

[samme]

First add something like 

console.log('createEnemy', this.enemies.length);

inside the createEnemy method and verify how frequently it's being called.

Re. enemy.update, it could be written like this: 

function enemyUpdate() {
  this.angle = 0 - Phaser.Math.radToDeg(Math.atan2(this.body.velocity.x, this.body.velocity.y));
}

class Scene {
  // …
  createEnemy() {
    // …
    var enemy = this.enemies.getFirstExists(false);
    if (enemy) {
      // …
      enemy.update = enemyUpdate;
      }
      // …
    }
};

But if the other way is working fine there's no reason to change it.

[ThomasTaylor]

@samme Gotcha. Thanks for your help. It's getting called quite frequently actually. Is this odd behavior? I think the problem is truly coming from this function because, if I comment out the portion of the code, it runs absolutely perfect without it. Any more thoughts on this?

These events were printing several times per second ?.

 

--------------------------

EDIT: After a few minutes of letting it run, it runs smoothly but it will have a HUGE lag spike. Check the second image attached.

 

Edited August 25, 2018 by ThomasTaylor
I wanted to add more information

[ThomasTaylor]

@samme Thanks for your help! After staring at this for the last 3 - 4 hours, I finally figured out what was causing the severe lagging. After finding this answer on Stack Exchange and implementing some of this code, I was finally able to remove the lag. Here's the ending createEnemy() function:

createEnemy(): void {
	if (this.nextEnemyAt < this.time.now && this.enemies.countDead() > 0) {
	    this.nextEnemyAt = this.time.now + this.enemyDelay;
	    var enemy = this.enemies.getFirstExists(false);
	    enemy.reset(this.game.rnd.integerInRange(0, this.game.width), -20, enemy.health);
	    enemy.body.velocity.x = this.game.rnd.integerInRange(-150, 150);
	    enemy.body.velocity.y = this.game.rnd.integerInRange(50, 100);
	    enemy.body.drag.x = 100;

	    enemy.update = function() {
	        enemy.angle = 0 - Phaser.Math.radToDeg(Math.atan2(enemy.body.velocity.x, enemy.body.velocity.y));
	    }
       }
}

By this logic, it doesn't create a new enemy every single frame, but rather when the conditional statement is met.

Edited August 26, 2018 by ThomasTaylor
Added more information for clarification