Making a fence

[laurenM]

Hi Phaser forum members!

Since this is my first post I'll make a quick introduction.   I'm well versed in javascript and now I'm working on tackling my first game project with phaser and cocoon js. I've just set up phaser and have started prototyping my first game, an autorunner.

 

My problem is this:

I'm trying to add two boards right next to each other as they scroll across the screen.   I start by adding a board offscreen.  When that board has fully come on screen, I want to add another board right next to it off screen.  My code looks like this

//Add any global vars here.var targetBoard;var board;var timer = 0;FenceManager = function (game) {    this.addBoard = true;    this.game = game;    Phaser.Sprite.call(this, game, 0, 0);       console.log("running");    game.add.existing(this);    board = new Board(game, game.width, game.height/2);        game.add.existing(board);    targetBoard = board;    this.addBoard = function(prevBoard){                board1 = new Board(game, prevBoard, game.height/2);            game.add.existing(board1);    }};FenceManager.prototype = Object.create(Phaser.Sprite.prototype);FenceManager.prototype.constructor = FenceManager;FenceManager.prototype.update = function() {    if(targetBoard.x + targetBoard.width  <= game.width)    {        board1 = new Board(game, targetBoard.x+targetBoard.width, game.height/2);            game.add.existing(board1);        targetBoard = board1;    }};var timer = 0;

The Board object I'm adding is a sprite object that I extended here, all it does is set the velocity of the board

//  Here is a custom game objectBoard = function (game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'fenceCenter');    game.physics.enable(this,Phaser.Physics.ARCADE)    this.body.velocity.x = -200;    this.hasBeenAdded = false;};Board.prototype = Object.create(Phaser.Sprite.prototype);Board.prototype.constructor = Board;Board.prototype.update = function() {					/*		if(this.x <= game.width - this.width  && !this.hasBeenAdded)	{		this.hasBeenAdded = true;		this.fenceManager.addBoard = true;	}	*/};

The boards almost line up but are usually always off a pixel or two depending on the velocity.  Attached below is a screenshot of what it looks like

 

 

 

If anyone could help it would be greatly appreciated!  I banged my head against the wall trying to get the boards to line up but I couldn't get it working.  

[lewster32]

This post covers the same issue I believe: http://www.html5gamedevs.com/topic/7299-sprite-gap/