Sprite Click Handling does not work

[Luketep]

Hey Guys.

 

I've started writing a prototype game to test out how Phaser works. I read different tutorials and approaches on how to handle input interaction with sprites. But somehow none of the examples work in my code.

 

I have a separate javascript file which serves as a map generator. The generator gets the game object upon creation.

 

Here is the code from inside of the Map.generateMap function:

Map.prototype.generateMap = function() {    var h,	w,	tile,	random,	posX,	posY;    for (h = 0; h < this.config.engine.height; h += 1) {	for (w = 0; w < this.config.engine.width; w += 1) {            // Random between 0 and 200	    random = this.noise.noise(w, h) * 100 + 100;            // Calculate postion	    posX = w * this.config.engine.tileWidth;	    posY = h * this.config.engine.tileHeight;            // Add grass for background	    this.tiles.push(this.grass.create(posX, posY, this.config.game.tileTypes.grass.type));	    // May add tree on top	    if (random < this.config.game.map.woodCoverage) {	        tile = this.game.add.sprite(posX, posY, this.config.game.tileTypes.wood.type);		tile.anchor.set(0.5);		tile.inputEnabled = true;		tile.events.onInputDown.add(function(event, sprite) {		    sprite.alpha = 0.5;		}, this);		tile.events.onInputUp.add(function(event, sprite) {		    sprite.alpha = 1.0;		}, this);		this.wood.push(tile);		this.tiles.push(tile);	    }        }    }};

Unfortunenatly I get an error for this code:

 

Uncaught TypeError: Cannot read property 'mousePointer' of nullPhaser.Mouse.onMouseOver

Uncaught TypeError: Cannot read property 'enabled' of null

I am using Phaser version 2.4.2

 

This is my game setup:

 

define([    'phaser',	'game/GameHelper',    'game/GameConfig',	'game/Input',	'game/Map',	'game/UserInterface',	'game/Player'], function DefineGame(    Phaser,    GameHelper,    GameConfig,    Input,    Map,    UserInterface,    Player) {    function Game() {	    GameHelper.call(this);        this.config = GameConfig;        this.config.engine.states.preload = this.preload.bind(this);        this.config.engine.states.create = this.create.bind(this);        this.config.engine.states.update = this.update.bind(this);	    this.input = new Input();	    this.map = new Map();	    this.ui = new UserInterface();	    this.player = undefined;	    this.bots = [];	    window.PhaserRTS = this;    }	Game.prototype = Object.create(GameHelper.prototype);    Game.prototype.start = function start() {        this.game = new Phaser.Game(	        this.config.engine.screenWidth,	        this.config.engine.screenHeight,            this.config.engine.renderMode, this.config.engine.container,            this.config.engine.states,            this.config.engine.transparent, this.config.engine.antiAlias,            this.config.engine.physicsConfig        );        this.input.start(this.game);	    this.player = new Player(this.game);    };    Game.prototype.preload = function preload() {	    // Map	    this.game.load.image('map.wood', 'assets/map/wood.png');	    this.game.load.image('map.grass', 'assets/map/grass.png');	    // User Interface	    this.game.load.image('ui.wood', 'assets/ui/wood.png');	    this.game.load.image('ui.soldier', 'assets/ui/soldier.png');	    this.game.load.image('ui.worker', 'assets/ui/worker.png');	    this.game.load.image('ui.duration', 'assets/ui/duration.png');	    this.game.load.image('ui.hitpoints', 'assets/ui/hitpoints.png');	    this.game.load.image('ui.construction', 'assets/ui/construction.png');	    this.game.load.image('ui.damage', 'assets/ui/damage.png');	    // User Interface Backbground	    this.game.load.image('ui.background.base', 'assets/ui/background/base.png');	    this.game.load.image('ui.background.base-shadow', 'assets/ui/background/base-shadow.png');	    this.game.load.image('ui.background.border-top-left', 'assets/ui/background/border-top-left.png');	    this.game.load.image('ui.background.border-top-right', 'assets/ui/background/border-top-right.png');	    this.game.load.image('ui.background.border-bottom-left', 'assets/ui/background/border-bottom-left.png');	    this.game.load.image('ui.background.border-bottom-right', 'assets/ui/background/border-bottom-right.png');	    this.game.load.image('ui.background.border-top', 'assets/ui/background/border-top.png');	    this.game.load.image('ui.background.border-bottom', 'assets/ui/background/border-bottom.png');	    this.game.load.image('ui.background.border-left', 'assets/ui/background/border-left.png');	    this.game.load.image('ui.background.border-right', 'assets/ui/background/border-right.png');	    // Buildings	    this.game.load.image('building.storage-pit', 'assets/buildings/storage-pit.png');	    this.game.load.image('building.storage-pit-dead', 'assets/buildings/storage-pit-dead.png');	    this.game.load.image('building.barracks', 'assets/buildings/barracks.png');	    this.game.load.image('building.barracks-dead', 'assets/buildings/barracks-dead.png');    };    Game.prototype.create = function create() {        this.input.mouse.start();        this.input.keyboard.start();	    this.game.world.setBounds(		    0,		    100,		    this.config.engine.width * this.config.engine.tileWidth,		    this.config.engine.height * this.config.engine.tileHeight - 100	    );	    this.map.start(this.game);	    this.map.generateMap();	    this.ui.start(this.game, this.player);    };    Game.prototype.update = function update() {	    this.handleInput();	    this.player.update();    };	Game.prototype.handleInput = function() {	};    return Game;});

 

Any idea what is the problem?

[drhayes]

Are the Input and Mouse functions being passed in your AMD handler your own functions? What do they do?