在相位器2中循环生成和移动圆 [英] Generating and shifting the circle in loop in phaser 2

问题描述

我是Phaser 2.3.x的新手.这是五个职位:

I am new to phaser 2.3.x. These are the five positions:

1 2 3 4 5 .

我的问题是-我想在位置1生成一个circle_no_1精灵.两秒钟后，我想将circle_no_1移到位置2，同时在位置1生成另一个circle_no_2.再次在2秒后，我想要生成在 LOOP 中，在第1个位置上移动circle_no_3，在第2个位置上移动circle_no_2，在第三个位置上移动circle_no_1，依此类推.

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.

这是我尝试的方法:-我在GameState的create()函数中创建了一个2秒的事件循环.并每两秒钟调用另一个函数updateCirclePosition().我创建了一个名为this.circleGroup = this.add.group()的组. 在每次调用的方法updateCirclePosition()中，我创建了一个圆圈，并添加了组this.circleGroup，然后补间了整个组.但是我无法进行循环，即，当circle_no_1达到第5个位置时，它应该返回到第一个位置，而且我也无法创建所有圈子.

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?

推荐答案

此this.tweenCircleGroup将每隔5秒从create method调用，例如this.time.events.loop(Phaser.Timer.SECOND * 5, this.tweenCircleGroup, this);

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

    }

这篇关于在相位器2中循环生成和移动圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！