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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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