Generating And Shifting The Circle In Loop In Phaser 2

I am new to phaser 2.3.x. These are the five positions: 1 2 3 4 5. My problem is - I want to generate a circle_no_1 sprite at position 1. After two second I want to shift t

Solution 1:

it is very often unnecessary to write code that way, it makes the project awfully difficult to maintain and causes unnecessary trouble: more time to make changes, poor readability and easy to make mistakes e.g. this.isCircle35Created

 

a good idea would be to make an array of circles

this.circles = []

to add a circle you've created use

this.circles.push(circle)

when you have to count how many circles already exist, use

this.circles.length

e.g. when 2 circles exist, you can use this.circles.length + 1 to get 3 that you need for your "circle3" string.

from here there are a few options:

 

option 1. make a variable to track whether you're adding or removing circles

this.addingCircles = true

so your logic is the following:

• If adding circles, create a circle and move the existing ones down; repeat until you have 5 circles
• Change this.addingCircles to false
• If not adding circles, move the last circle back to where it was created, and remove it upon completing the tween; repeat until there are no circles left
• Change this.addingCircles to true

 

option 2. create all circles immediately at the start, and use a tween for each of them with a delay based on their index. e.g. with this.circles.length * 2000 delay the first circle would have 0, the second one would wait 2000ms before starting the tween

 

option 3. if you can switch to Phaser 3, i'd recommend doing that as it has timelines that make this easier

Solution 2:

this this.tweenCircleGroup will be called after every 5 second from the create method like this.time.events.loop(Phaser.Timer.SECOND * 5, this.tweenCircleGroup, this);

tweenCircleGroup: function () {
        // here I am checking if all the circles is created or notif (this.totCircle < 5) {
            var circle = this.add.sprite(30, 90, 'circle1')
            circle.anchor.setTo(0.5)
            this.circlesArray.push(circle)
            this.totCircle++;
        } else {
            // once all the circle is created then we move the sprite// one position ahead and move the last circle(i.e. this.circlesArray[0] ) at the first position (i.e. this.circlesArray[4] )var temp = this.circlesArray[0];
            for (var i = 1; i < 5; i++) {
                this.circlesArray[i - 1] = this.circlesArray[i]
            }

            this.circlesArray[4] = temp;
            // this line will move the firstly created circle at the first positionthis.circlesArray[4].position.y = 90;
        }
        // below code will tween all the circles inside the arrayvar tween;
        for (var i = 0; i < this.circlesArray.length; i++) {
            tween = this.add.tween(this.circlesArray[i])
            tween.to({ y: "+40" }, 3000)
            tween.start();
        }

    }