Jump to content

line not rendering from array


Arijit Naskar
 Share

Recommended Posts

I am creating dynamic moving sprites and drawing lines between them.

The sprites are moving. But the lines are not moving. Please help.

My code is below:

 

var poly, graphics, game = new Phaser.Game(this.width, this.height, Phaser.CANVAS, 'phaser-example'
    , { preload: preload,create: create,update:update,render:render});

var handle1;

var spritearr;  
var i = 100;
var linearr;

function preload() {

  game.load.spritesheet('balls', '../../assets/sprites/ball.jpg', 100, 100);  
 
}


function create() {
      game.stage.backgroundColor = '#124184';

     spritearr = [];
     linearr=[]
        handle1 = game.add.sprite(400, 400, 'balls');
        handle1.anchor.set(0.5);
        
        game.physics.arcade.enable(handle1);

        spritearr.push(handle1);

    }


    function update() {
      
      if(spritearr.length==4)
      i=100;
      if(spritearr.length<4)
      {
        spritearr.push(game.add.sprite(400+i, 400, 'balls'));
        spritearr[spritearr.length-1].anchor.set(0.5);

        spritearr[spritearr.length-1].inputEnabled = true;
        spritearr[spritearr.length-1].input.enableDrag(true);
      game.physics.arcade.enable(spritearr[spritearr.length-1]);

      i=i+100;


      linearr.push(new Phaser.Line(spritearr[spritearr.length-2].x, spritearr[spritearr.length-2].y
        , spritearr[spritearr.length-1].x, spritearr[spritearr.length-1].y));
      
        linearr[linearr.length-1].fromSprite(spritearr[spritearr.length-2], spritearr[spritearr.length-1], false);

 
      }
  

      for (var k = 0; k < spritearr.length; k++) { 


        spritearr[k].body.velocity.x = -100;
        if(spritearr[k].x <0)
      {
          
        spritearr[k].destroy();
        spritearr.splice(k,1);

        graphicsarr.splice(k,1);
      }
        
      }   
  }


function render() {
  
      for (var k = 0; k < linearr.length; k++) { 
      game.debug.geom(linearr[k]);
     
      }
  }

  }

 

**The code is working if I do with just 2 sprites and no loop inside render() function.

May be the the issue is because I am using a loop inside render() function. Please suggest if there is a solution.

 

 

Link to comment
Share on other sites

Hi,
the problem is not the loop inside the rende function, but some tricks of your code.
You must change create and update functions.

Your code can be changed  like this

 

var poly, graphics, game = new Phaser.Game(this.width, this.height, Phaser.CANVAS, 'phaser-example', {
    preload: preload,
    create: create,
    update: update,
    render: render
});


var handle1;
var spritearr;
var i = 100;
var linearr;
var index = 0;
var j = 0;
spritearr = [];
linearr = [];

function preload() {

    game.load.spritesheet('balls', '../../assets/sprites/ball.jpg', 100, 100);

}


function create() {
    game.stage.backgroundColor = '#124184';



    //LOOP = CREATE BALLS && lines array
    for (var k = 0; k < 4; k++) {

        spritearr.push(game.add.sprite(400 + i, 400, 'balls'));
        spritearr[spritearr.length - 1].anchor.set(0.5);

        spritearr[spritearr.length - 1].inputEnabled = true;
        spritearr[spritearr.length - 1].input.enableDrag(true);
        game.physics.arcade.enable(spritearr[spritearr.length - 1]);
        i = i + 100;
        if (k == 0) {} else {
            index++;
            linearr.push(new Phaser.Line(spritearr[k].x, spritearr[k].y, spritearr[index].x, spritearr[index].y));
        }

    }


}


function update() {

    var counter = 0;

    //VALOCITY UPDATE
    for (var k = 0; k < spritearr.length; k++) {

        spritearr[k].body.velocity.x = -100;
        if (spritearr[k].x < 0) {

            spritearr[k].destroy();
            spritearr.splice(k, 1);

            graphicsarr.splice(k, 1);
        }
        index++;

    }

    //LINE CREATION

    for (j = 0; j < linearr.length; j++) {
        counter++;

        linearr[j].fromSprite(spritearr[j], spritearr[counter], false);

    }


}


function render() {
	
     //LINES LOOP RENDER
		 for (j = 0; j < linearr.length; j++) {
           
             game.debug.geom(linearr[j]);

        }
	
}

 

You can see a working demo here

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...