Arijit Naskar Posted August 18, 2018 Share Posted August 18, 2018 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 More sharing options...
mrseo88 Posted August 19, 2018 Share Posted August 19, 2018 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 More sharing options...
Arijit Naskar Posted August 20, 2018 Author Share Posted August 20, 2018 Thanks. It solved my problem Link to comment Share on other sites More sharing options...
Recommended Posts