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 the circle_no_1 to position 2 and at the same time generate another circle_no_2 at position 1. Again after 2 second I want to generate the circle_no_3 at position 1 and shift circle_no_2 at 2 position and circle_no_1 at third position and so on in LOOP.

Here what I tried :- I created an event loop of 2 second in create() function of GameState. and call another function updateCirclePosition() at every two second. I created a group named this.circleGroup = this.add.group(). In method updateCirclePosition() on every call I created a circle and add in the group this.circleGroup and I tweened the whole group. But I am not able to make a loop i.e. When circle_no_1 reaches to 5th position then it should return back to the first position and also I am not able to create all the circles.

var GameState = {

  create:function(){
        ------
        this.circle1;
        this.circle2;
        this.circle3;
        this.circle4;
        this.circle5;

        this.isCircle1Created = false
        this.isCircle2Created = false
        this.isCircle3Created = false
        this.isCircle4Created = false
        this.isCircle5Created = false

        this.circleGroup = this.add.group();
        this.circleGroupTween = this.add.tween(this.circleGroup);

        this.time.events.loop(Phaser.Timer.SECOND * 2, this.updateCirclePosition, this);
        ------
  },
  updateCirclePosition:function(){
        if(this.isCircle1Created == false){
            this.circle1 = this.add.sprite(30,40,'circle1')
            this.isCircle1Created = true;
            this.circleGroup.add(this.circle1)
        }
        else if(this.isCircle2Created == false){
            this.circle2 = this.add.sprite(30,40,'circle2')
            this.isCircle2Created = true;
            this.circleGroup.add(this.circle2)

        }
        else if(this.isCircle3Created == false){
            this.circle3 = this.add.sprite(30,40,'circle3')
            this.isCircle3Created = true;
            this.circleGroup.add(this.circle3)
        }
        else if(this.isCircle4Created == false){
            this.circle4 = this.add.sprite(30,40,'circle4')
            this.isCircle4Created = true;
            this.circleGroup.add(this.circle4)
        }
        else if(this.isCircle35Created == false){
            this.circle5 = this.add.sprite(30,40,'circle5')
            this.isCircle5Created = true;
            this.circleGroup.add(this.circle5)
        }
        this.circleGroupTween.to({y:200},400)
        this.circleGroupTween.start();
  }
}

How can I do it in a right way?

回答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

回答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 not
        if (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 position
            this.circlesArray[4].position.y = 90;
        }
        // below code will tween all the circles inside the array
        var tween;
        for (var i = 0; i < this.circlesArray.length; i++) {
            tween = this.add.tween(this.circlesArray[i])
            tween.to({ y: "+40" }, 3000)
            tween.start();
        }

    }

来源：https://stackoverflow.com/questions/58413095/generating-and-shifting-the-circle-in-loop-in-phaser-2

标签

javascript

phaser-framework