Question Regarding: this.input

[fedora]

I have been working the last couple of week learning Phaser and it is a great platform.  Like many of you, to learn I have taken existing code and broken it down to understand the pieces and parts.  Unfortunately, I have run across an item I cannot figure out and I am hoping someone can spot what I think is a simple (but frustrating) mistake.

 

I am attempting to replicate this example to better understand Tiles:  http://phaser.io/examples/v2/tilemaps/tile-properties  I can get everything to work except when I place these lines below the app will not run:

 

    this.input.addMoveCallback(updateMarker, this);

    this.input.onDown.add(getTileProperties, this);

 

If I comment out those lines it runs fine.

 

The below is my code the the Game.js:

 

BasicGame.Game = function (game) {

 

    this.game;      //  a reference to the currently running game (Phaser.Game)

    this.add;       //  used to add sprites, text, groups, etc (Phaser.GameObjectFactory)

    this.camera;    //  a reference to the game camera (Phaser.Camera)

    this.cache;     //  the game cache (Phaser.Cache)

    this.input;     //  the global input manager. You can access this.input.keyboard, this.input.mouse, as well from it. (Phaser.Input)

    this.load;      //  for preloading assets (Phaser.Loader)

    this.math;      //  lots of useful common math operations (Phaser.Math)

    this.sound;     //  the sound manager - add a sound, play one, set-up markers, etc (Phaser.SoundManager)

    this.stage;     //  the game stage (Phaser.Stage)

    this.time;      //  the clock (Phaser.Time)

    this.tweens;    //  the tween manager (Phaser.TweenManager)

    this.state;     //  the state manager (Phaser.StateManager)

    this.world;     //  the game world (Phaser.World)

    this.particles; //  the particle manager (Phaser.Particles)

    this.physics;   //  the physics manager (Phaser.Physics)

    this.rnd;       //  the repeatable random number generator (Phaser.RandomDataGenerator)

 

};

 

var map;

var layer;

var marker;

 

// var sprite;

var cursors;

       

BasicGame.Game.prototype = {

    

    create: function () {

        

    map = this.add.tilemap('map');

 

    map.addTilesetImage('tiles');

    

    layer = map.createLayer('Tile Layer 1');

 

    layer.resizeWorld();

    

    marker = this.add.graphics();

    marker.lineStyle(2, 0xffffff, 1);

    marker.drawRect(0, 0, 32, 32);

 

    this.input.addMoveCallback(updateMarker, this);

 

    this.input.onDown.add(getTileProperties, this);

 

    cursors = this.input.keyboard.createCursorKeys();

    

    },

    

    getTileProperties: function () {

 

    var x = layer.getTileX(this.input.activePointer.worldX);

    var y = layer.getTileY(this.input.activePointer.worldY);

 

    var tile = map.getTile(x, y, layer);

 

    tile.properties.wibble = true;

 

    },

    

    updateMarker: function () {

 

    marker.x = layer.getTileX(this.input.activePointer.worldX) * 32;

    marker.y = layer.getTileY(this.input.activePointer.worldY) * 32;

 

    },

    

    update: function () {

        

    if (cursors.left.isDown)

    {

        this.camera.x -= 4;

    }

    else if (cursors.right.isDown)

    {

        this.camera.x += 4;

    }

 

    if (cursors.up.isDown)

    {

        this.camera.y -= 4;

    }

    else if (cursors.down.isDown)

    {

        this.camera.y += 4;

    }

    

    },

    

    quitGame: function (pointer) {

 

        this.state.start('MainMenu');

 

    }

    

 

};

 

Any assistance would be greatly appreciated.

 

Thanks.