Jump to content

Dynamically Adding sprites to Scene


Recommended Posts

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


function addCrisps(interval) {

	addCrispsGlobal = setInterval(function() {

		if (state == play) {
			let createCrisp = new Sprite(
			// 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);


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

	}, interval);

function clickedCrisp() {

	//Remove hit crisp
	this.visible = false;

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

	crispFallRate = crispFallRate - 100;



Link to comment
Share on other sites

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();

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


function loop() 

    Egg.list.map((element) =>



In my LevelManager.update :

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


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 :)

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.

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.


  • Recently Browsing   0 members

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