Dynamically Adding sprites to Scene

[MugenFTW]

Hi there,

I'm developing a simple shooting game where objects fall from the top of the canvas and you must click them before they hit the ground.

I'm wanting to dynamically add sprites to the stage by a set Interval of time, starting at about 1500ms getting progressively faster. At the moment i'm using set Interval but can't seem to change the rate it runs my function.

Is there a better way of adding sprites like this within the Game Loop?

Thanks, AJ

crispFallRate = 1500;

//Start the game loop
ticker.start();

addCrisps(crispFallRate);

function addCrisps(interval) {

	addCrispsGlobal = setInterval(function() {

		if (state == play) {
			let createCrisp = new Sprite(
				resources["../img/fwbbq-crisp.png"].texture
			);
			// Set initial crips position off canvas
			createCrisp.position.set(Math.random() * (app.renderer.width - createCrisp.width), -createCrisp.height);
			// Make sprite interactive
			createCrisp.interactive = true;

			// Bind click event
			createCrisp.on('click', clickedCrisp);

			gameScene.addChild(createCrisp);
			crisps.push(createCrisp);

			console.log("add crisp: " + interval);
		} else {
			return;
		}

	}, interval);
}

function clickedCrisp() {

	//Remove hit crisp
	this.visible = false;

	// Update score counter
	score += 100;
	scoreCounter.innerHTML = score;

	crispFallRate = crispFallRate - 100;

}

 

[ivan.popelyshev]

clearInterval + repeat setInterval.

Also, there's that plugin: https://github.com/soimy/eventemitter3-timer

[MugenFTW]

Hi Ivan,

Thanks for this, worked a treat!

AJ

[Vable]

Hello ! I'm facing with the same issue...
I'm trying to make a little easter game to discover PixiJS and I follow a tutorial for basics concepts. In this game, you're a rabbit and you have to catch eggs where fall from top to bottom. Every 5 eggs catched by the player, I want to decrease the setInterval rate. I'm not using ticker but game loop :

// Launch after assets loaded
function init() 
{
    renderer.backgroundColor = 0xb3e0e6;
    player = new Player();
    levelManager = new LevelManager();
    scoreManager = new ScoreManager();
    timer = new GameTimer();
    renderer.render(stage);

    let spawnInterval = setInterval( () => {
        egg = new Egg(randomInt(48, renderer.width - 48), randomInt(-450, -100));
    }, 1000);
    
    loop();

}

function loop() 
{
    player.update();
    levelManager.update();

    Egg.list.map((element) =>
    {
        element.update();
    });

    requestAnimationFrame(loop);

}

In my LevelManager.update :

 update()
  {
      if(catched >= 5 ) {
          this.level = 2;
          this.text.text = "Level : " +this.level;
          level = this.level;
          player.speed = 1.2;
          clearInterval(spawnInterval);
          // ???

  }

How can I reset/relaunch the setInterval with another rate without create a new sprite every loop frame ?
Sorry for my english I hope it's clear ^^
thx for your help

[ivan.popelyshev]

make spawnInterval global. or use in appropriate scope, if you understand what JS scope is. If not, please look at David Flannagan's book about javascript.