Phaser Timer repeat event wont fire the second time

[kriba]

Hello,

 

I'm a complete newbie when comes to javascript, phaser and web game-development, so go easy on me.

 

I've been struggling with the Phaser.Timer object. Basically I'm trying to create a 2D sidescroller where the camera scrolls when the character reaches one of the edges.

 

I've got four rectangles, one for each side.  I check rectangle.contains(x, y) for each of the rectangles in the update loop. The xy-coords are the character world-coordinates. 

When the character hits one of the rectangles I move all of the rectangles to their new xy-coords and then start scrolling the camera by manipulating it's xy-coords.

 

Everything works fine the first time I hit a rectangle. Both the rectangles and the camera moves as I want them to.

But when I hit another rectangle the borders move but not the camera. When debugging I notice that it seems to die when reaching this line.

self.timer.repeat(self.interval, widthToScroll, self.scrollCameraXForward, self);

 

You can find that same snippet in the included code block below along with the cameramanger prototype where I control the movement of the rectangles and the camera.

And please refrain from comments that aren't constructive since I'm new to this and still learning the ropes.

'use strict';NameSpaceBase.CameraManager = function(settings) {  this.settings = settings || null;  this.collisionManager = this.settings.collisionManager || null;  this.game = settings.game || null;  this.camera = this.game.camera || null;  this.camera.setBoundsToWorld();  this.boundary = 20;  this.interval = 1;  this.borders = null;  this.timer = null;  this.eventCompleted = false;  this.intersectsBorder = false;  this.logger = this.settings.logger || null;}NameSpaceBase.CameraManager.prototype = {  initialize: function() {    this.camera.roundPx = false;    var topRect = new Phaser.Rectangle(0, 0, this.game.width, this.boundary);    var rightRect = new Phaser.Rectangle(this.game.width - this.boundary, 0, this.boundary, this.game.height);    var bottomRect = new Phaser.Rectangle(0, this.game.height - this.boundary, this.game.width, this.boundary);    var leftRect = new Phaser.Rectangle(0, 0, this.boundary, this.game.height);    this.borders = {      topRect: topRect,      leftRect: leftRect,      bottomRect: bottomRect,      rightRect: rightRect    };    this.timer = this.game.time.create(this.game, false);      },  /**   * Update loop for camera.   * Check if player is at edge of screen and move camera accordingly   */  update: function(x, y) {    if (!this.intersectsBorder) {      if (this.borders.topRect.contains(x, y)) {        this.scrollTop();      } else if (this.borders.rightRect.contains(x, y)) {        this.scrollRight();      } else if (this.borders.bottomRect.contains(x, y)) {        this.scrollBottom();      } else if (this.borders.leftRect.contains(x, y)) {        this.scrollLeft();      }    }  },  scrollTop: function() {    var self = this;    self.scroll(self, 'y', 1);  },  scrollRight: function() {    var self = this;    self.scroll(self, 'x', 1);  },  scrollBottom: function() {    var self = this;    self.scroll(self, 'y', -1);  },  scrollLeft: function() {    var self = this;    self.scroll(self, 'x', -1);  },  scroll: function(target, axis, points) {    var self = target;    var widthToScroll = (self.game.width / 2);    self.eventCompleted = false;    self.scrollBorders(self, axis, points);        self.intersectsBorder = true;    self.timer.start();    this.timer.onComplete.add(this.onScrollComplete, this);    if (axis === 'x') {      if (points > 0) {        self.timer.repeat(self.interval, widthToScroll, self.scrollCameraXForward, self);      }      if (points < 0) {        self.timer.repeat(self.interval, widthToScroll, self.scrollCameraXBackward, self);      }          }    if (axis === 'y') {      if (points > 0) {        self.timer.repeat(self.interval, widthToScroll, self.scrollCameraYForward, self);      }      if (points < 0) {        self.timer.repeat(self.interval, widthToScroll, self.scrollCameraYBackward, self);      }    }  },  scrollBorders: function(target, axis, direction) {    var self = target;    for (var border in self.borders) {      if (direction > 0) {        self.borders[border][axis] += (self.game.width / 2);        self.logger.log('ScrollBorders - axis: ' + axis + ", direction: " + direction);      }      if (direction < 0) {        self.borders[border][axis] -= (self.game.width / 2);        self.logger.log('ScrollBorders - axis: ' + axis + ", direction: " + direction);      }    }  },  scrollCameraXForward: function() {    var self = this;    if (!self.eventCompleted) {      self.logger.log('ScrollCameraXForward');      self.camera.x += 1;    }  },  scrollCameraXBackward: function() {    var self = this;    if (!self.eventCompleted) {      self.logger.log('ScrollCameraXBackward');      self.camera.x += -1;    }  },  scrollCameraYForward: function() {    var self = this;    if (!self.eventCompleted) {      self.logger.log('ScrollCameraYForward');      self.camera.y += 1;    }  },  scrollCameraYBackward: function() {    var self = this;    if (!self.eventCompleted) {      self.logger.log('ScrollCameraYBackward');      self.camera.y += -1;    }  },  onScrollComplete: function() {    var self = this;    self.eventCompleted = true;    self.intersectsBorder = false;    self.logger.log('Scrolling complete');    self.timer.stop(true);  }};

[ultimatematchthree]

Am not sure if this will help, but it seems that you unintentionally set autoDestroy to true (by passing this.game) when you create your timer. Phaser.Time's create method only accepts one argument - remove this.game and let false be the only argument that you pass, then see what happens.

[kriba]

Haha, that was it. Thanks for the quick reply!