Textures are not drawn separatley

Question

I am trying to draw different textures of balloons and I want them to appear in different times about half second between each one, and move in the world. first balloons are rendered but after about half second the other balloons are rendered next to the previous ones, not in the initial place: this is code:

private Ballons ballons;
    private Ballons ballons2;
    private Ballons ballons3;
    private Ballons ballons4;

    private Texture background;
    public Celebration(Fruits game, float level)
    {
        this.game=game;
        this.level=level;
        gamecam=new OrthographicCamera();
        gameport=new StretchViewport(820/Fruits.PPM,580/Fruits.PPM,gamecam);
        stage=new Stage(gameport,((Fruits) game).batch);
        background=new Texture("Wining.jpg");
        gamecam.position.set(gameport.getWorldWidth()/2f,gameport.getWorldHeight()/2f,0);
        temp=0;
        counter=400;
        world=new World(new Vector2(0,0.5f),true);
        b2dr=new Box2DDebugRenderer();
        ballons=new Ballons(world,this,1,140);
        ballons4=new Ballons(world,this,2,290);
        ballons3=new Ballons(world,this,3,480);
        ballons2=new Ballons(world,this,4,650);


    }

    @Override
    public void show() {

    }
    public void handleinput(float dt)
    {
        if(Gdx.input.isTouched())
            game.setScreen(new GlobalWorld(game, 1));
    }
    public void update(float dt)
    {
        handleinput(dt);
        world.step(1 /60f, 6, 2);
        //player.update(dt);
        gamecam.update();
//        renderer.setView(gamecam);
        ballons.update(dt);
        ballons2.update(dt);
        ballons3.update(dt);
        ballons4.update(dt);
    }

    @Override
    public void render(float delta) {
        float level;
        update(delta);
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        counter--;
        b2dr.render(world, gamecam.combined);
        game.batch.setProjectionMatrix(gamecam.combined);

        game.batch.begin();

        game.batch.draw(background, 0, 0, gameport.getWorldWidth(), gameport.getWorldHeight());
        if (counter < 200) {
            ballons.draw(game.batch);
            ballons2.draw(game.batch);

        }
        if (counter < 100) {
            ballons3.draw(game.batch);
            ballons4.draw(game.batch);

        }
        game.batch.end();


    }

    @Override
    public void resize(int width, int height) {
        gameport.update(width, height);


    }

}

Answer 1

It is a little bit difficult understanding your question, but I think your problem is caused by the fact that you update all ballons in the update (float dt) method even though you're not drawing them. This means that when 200 iterations has passed and you draw ballons and ballons2 for the first time, they have already moved some distance.

Answer 2

The problem is that your update function is only fixing the position of the balloons to the Box2D body. Since the Box2D body is created and added to the world on creation, the body will still be moving even though it is not drawn.

You can disable the balloon's bodies until they are ready to be drawn, like so:

Balloons.java

public void defineCollector(float x) {
    BodyDef bdef=new BodyDef();
    bdef.position.set(x/Fruits.PPM,-20/Fruits.PPM);
    bdef.type=BodyDef.BodyType.DynamicBody;
    b2body=world.createBody(bdef);
    FixtureDef fdef=new FixtureDef();
    CircleShape shape=new CircleShape();
    shape.setRadius(15/Fruits.PPM);
    fdef.shape=shape;
    b2body.createFixture(fdef);

    b2body.setActive(false);
}

Celebration.java

public Celebration(Fruits game, float level) {
    ...

    stage.addAction(
        Actions.sequence(
            Actions.delay(0.5f), 
            Actions.run(
                new Runnable() {
                    ballons.b2body.setActive(true);
                    ballons2.b2body.setActive(true);
                }
            ),
            Actions.delay(0.5f), 
            Actions.run(
                new Runnable() {
                    ballons3.b2body.setActive(true);
                    ballons4.b2body.setActive(true);
                }
            )
        )
    );
}

public void update(float dt) {
    stage.act(dt);

    ...
}

@Override
public void render(float delta) {
    ...

    if (ballons.b2body.isActive()) {
        ballons.draw(game.batch);
    }
    if (ballons2.b2body.isActive()) {
        ballons2.draw(game.batch);
    }
    if (ballons3.b2body.isActive()) {
        ballons3.draw(game.batch);
    }
    if (ballons4.b2body.isActive()) {
        ballons4.draw(game.batch);
    }
}

I would recommend using Scene2D to handle your logic by changing your balloons to extend Image and adding your balloons to the stage like so: stage.addActor(balloon). You can then handle your logic inside of the act method, and override draw to position the texture over the Box2D body.

https://stackoverflow.com/a/37971861/5468569