I have a problem with the camera

[bousing]

Greetings my developers friends.

   In this ocation, I write because i have a strange problem with the camera. I work in a proyect wich basically is move the camera over an image with the mouse or touches.

  I did a little experiment before start the proyect. I keep trying make other test. Now, I restructure the experiment for understand the phaser states and I did it. But I have problem with the camera. My browser does not recognize the camera, I give this error:

   Phaser v2.6.1 | Pixi.js | WebGL | WebAudio     http://phaser.io ♥♥♥
15TheGame.js:37 Uncaught TypeError: Cannot read property 'camera' of undefined

In the first test which I did, the code is work. I don't Know what happend now... I just use camera.x and camera.y  to move the phaser camera. Like this:

 $(document).ready(function(){

        $("canvas").mousemove(function(e){

             game.camera.x = e.screenX;
             game.camera.y = e.screenY; 
        });
});

  The browser said Uncaught TypeError: Cannot read property 'camera' of undefined. But why ? camera is a phaser object defined in the framework or I read something like that. I use screenX and screenY because that give me the coordenates X,Y of the canvas and the camera moves to that position, you think this works ?

If you know why i had this problem with the camera, I really really will be gratefull, because is strange. Before that is not happend.

  Thank you so much for reading. Greeting. 

[mattferndale]

Could you post more of your code? I don't update the camera in this way but do so within update function of my active stage.

[oddkraken]

Your game variable is undefined. Where are you creating the game object?

[bousing]

9 hours ago, oddkraken said:

Your game variable is undefined. Where are you creating the game object?

In the index.html, but I declare it in the statement like this 

//SCRIPT OF THE GAME STATE

var TheGame = function(game){

  //HERE THERE SOMETHING OF CODE OR GLOBAL VARS
}

and I call the game methods in the prototype of TheGame object like this: this.game.Method(). That is works in others state like boots or preload. 

Edited August 9, 2016 by bousing

[bousing]

I try make this https://github.com/jlbousing/experimentoPhaser/blob/master/js/game.js  in this version the experiment works very well, as you see there https://jlbousing.github.io/experimentoPhaser/  but now I restructured the experiment for learn work with Phaser states. I don't know why I don't find the solution.

For example, I tried  copy & paste the same code inside the create function and the browser console give "Cannot read property 'camera' of undefined"  and just write the sentence like this this.game.camera.x = ....  I dont have idea... and I use the Full Screen mobile Template.

[oddkraken]

In the Full Screen Mobile example, the game states don't have direct access to the game variable. You have to access it as this.game. Alternatively, since this refers to a Phaser.State, you have access to variables like this.camera (see http://phaser.io/docs/2.6.1/Phaser.State.html).

[bousing]

2 hours ago, oddkraken said:

In the Full Screen Mobile example, the game states don't have direct access to the game variable. You have to access it as this.game. Alternatively, since this refers to a Phaser.State, you have access to variables like this.camera (see http://phaser.io/docs/2.6.1/Phaser.State.html).

Thank you for your answer. I Know, and I do. but does not recognize the variable.

 

BasicGame.Game.prototype = {

	create: function () {

		this.game.world.setBounds(0,0,1920,1080);
        this.add.sprite(0,0,"backdrop");
        
        var canvas = window.document.getElementsByTagName('canvas')[0],
        prevX = 0, prevY = 0, mouseDown = false;
    
    canvas.addEventListener('touchstart',function(e){
    	prevX = e.changedTouches[0].screenX;
        prevY = e.changedTouches[0].screenY;
    });
    
    canvas.addEventListener('mousedown',function(e){
    	mouseDown = true;
    	prevX = e.screenX;
        prevY = e.screenY;
    });
    
    canvas.addEventListener('touchmove',function(e){
    	e.preventDefault();
    	this.camera.x += prevX - e.changedTouches[0].screenX;
    	prevX = e.changedTouches[0].screenX;
        this.camera.y+= prevY - e.changedTouches[0].screenY;
        prevY = e.changedTouches[0].screenY;
    });
    
    canvas.addEventListener('mousemove',function(e){
    	if(mouseDown){
	    	e.preventDefault();
	    	this.camera.x+= prevX - e.screenX;
	    	prevX = e.screenX;
	        this.camera.y+= prevY - e.screenY;
	        prevY = e.screenY;
	    }
    });
    
    canvas.addEventListener('mouseup',function(e){
    	mouseDown = false;
    });
    
    canvas.addEventListener('mouseleave',function(e){
    	mouseDown = false;
    });
        

	}
};

 

The browser console give me: Game.js:60 Uncaught TypeError: Cannot read property 'x' of undefined that is the attribute of camera. and instead of this.camera, I use this.game.camera.x for example and give me: Game.js:60 Uncaught TypeError: Cannot read property 'camera' of undefined. 

Is insane hahaha What I did wrong ? 

Edited August 13, 2016 by bousing

[oddkraken]

Oh I see. Within the context of the callback, this refers to the object that triggered the event (I think). It's not a reference to the game or game state. I'm not sure what the best practice is here, but you could define a global variable game pointing to the game object, and use that instead of this.

[bousing]

Good idea. I thought that too. But I define my game object in the index.html, how point it in this script ? I wrote it inside the function of the state because there I pass the game object. But does not work