Генерация и смещение круга в цикле в фазере 2

Question

Я новичок в Phaser 2.3.x. Это пять позиций:

1 2 3 4 5 .

Моя проблема - я хочу создать спрайт circle_no_1 в позиции 1. Через две секунды я хочучтобы переместить circle_no_1 в положение 2 и одновременно создать еще одно circle_no_2 в положении 1. Опять через 2 секунды я хочу сгенерировать circle_no_3 в положении 1 и переместить circle_no_2 в положение 2 и circle_no_1 в третье положение и так далее в LOOP .

Вот что я попробовал: - Я создал 2-секундный цикл обработки событий в функции create() GameState. и вызывать другую функцию updateCirclePosition() каждые две секунды. Я создал группу с именем this.circleGroup = this.add.group(). В методе updateCirclePosition() при каждом вызове я создавал круг и добавлял в группу this.circleGroup, а затем скручивал всю группу. Но я не могу сделать цикл, т. Е. Когда circle_no_1 достигает 5-й позиции, он должен вернуться к первой позиции, а также я не могу создать все круги.

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

Как я могу это сделатьэто правильно?

Answer 1

это this.tweenCircleGroup будет вызываться через каждые 5 секунд из create method как 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();
        }

    }

Answer 2

очень часто нет необходимости писать код таким образом, это делает проект чрезвычайно сложным в обслуживании и создает ненужные проблемы: больше времени для внесения изменений, плохая читаемость и легкость ошибок, например this.isCircle35Created

хорошей идеей было бы создать массив окружностей

this.circles = []

, чтобы добавить созданный круг, используя

this.circles.push(circle)

, когда вам нужно посчитать, какмногие круги уже существуют, используйте

this.circles.length

например, когда существует 2 круга, вы можете использовать this.circles.length + 1, чтобы получить 3 , который вам нужен для вашей строки "circle3".

отсюда есть несколько вариантов:

опция 1 . создайте переменную для отслеживания того, добавляете ли вы или удаляете круги

this.addingCircles = true

, чтобы ваша логика была следующей:

• Если вы добавляете круги, создайте круг и переместите существующиевниз;повторяйте, пока у вас не будет 5 кругов
• Измените this.addingCircles на false
• Если не добавляете круги, переместите последний круг обратно туда, где он был создан, и удалите его после завершения анимации;повторять до тех пор, пока не останется кружков
• Измените this.addingCircles на true

опция 2 . создайте все круги сразу в начале и используйте анимацию для каждого из них с задержкой на основе их индекса. например, с задержкой this.circles.length * 2000 первый круг будет иметь значение 0, второй будет ждать 2000 мс, прежде чем запустить анимацию движения

опция 3 . если вы можете переключиться на Phaser 3, я бы порекомендовал сделать это, поскольку он имеет шкалы времени , которые облегчают это