Cannot read property 'cameraInfo' of undefined(…)

[lonelyguy]

Hi guys!

I'm new to phaser and started a new project with the template of Intel XDK. I'm facing a strange issue with my code. In my render function I want to debug my camera so I inserted that snippet in my render function:

this.debug.cameraInfo(this.camera, 32, 32);

As it seems the "debug" variable of "this" (that's my game object) cannot be found cause my browser throws "Uncaught TypeError: Cannot read property 'cameraInfo' of undefined(…)". All that other stuff in my game is working.

I'm running a local python webserver (simpleHTTPServer) and I'm working with phaser 2.6.2.

Any help is highly appreciated!

App.js

(function () {
    /* globals Phaser:false, BasicGame:false */
    //  Create your Phaser game and inject it into the game div.
    //  We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)
    //  We're using a game size of 640 x 480 here, but you can use whatever you feel makes sense for your game of course.
    var game = new Phaser.Game(960, 640, Phaser.AUTO, 'game');
    // var game = new Phaser.Game(600, 400, Phaser.CANVAS, 'game');

    //  Add the States your game has.
    //  You don't have to do this in the html, it could be done in your Game state too, but for simplicity I'll keep it here.
    game.state.add('Game', BasicGame.Game);

    //  Now start the Game state.
    game.state.start('Game');

})();

Game.js

/* jshint browser:true */
/* globals Phaser:false, BasicGame: false */

// create BasicGame Class
BasicGame = {

};

// create Game function in BasicGame
BasicGame.Game = function (game) {
};

// set Game function prototype
BasicGame.Game.prototype = {

    init: function () {
        // set up input max pointers
        this.input.maxPointers = 2;
        // set up stage disable visibility change
        this.stage.disableVisibilityChange = true;
        // Set up the scaling method used by the ScaleManager
        // Valid values for scaleMode are:
        // * EXACT_FIT
        // * NO_SCALE
        // * SHOW_ALL
        // * RESIZE
        // See http://docs.phaser.io/Phaser.ScaleManager.html for full document
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        // If you wish to align your game in the middle of the page then you can
        // set this value to true. It will place a re-calculated margin-left
        // pixel value onto the canvas element which is updated on orientation /
        // resizing events. It doesn't care about any other DOM element that may
        // be on the page, it literally just sets the margin.
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;
        // Force the orientation in landscape or portrait.
        // * Set first to true to force landscape. 
        // * Set second to true to force portrait.
        this.scale.forceOrientation(true, false);
        // Sets the callback that will be called when the window resize event
        // occurs, or if set the parent container changes dimensions. Use this 
        // to handle responsive game layout options. Note that the callback will
        // only be called if the ScaleManager.scaleMode is set to RESIZE.
        this.scale.setResizeCallback(this.gameResized, this);
        // Set screen size automatically based on the scaleMode. This is only
        // needed if ScaleMode is not set to RESIZE.
        this.scale.updateLayout(true);
        // Re-calculate scale mode and update screen size. This only applies if
        // ScaleMode is not set to RESIZE.
        this.scale.refresh();
        
        this.moveDirection = 0;

    },

    preload: function () {

        // Here we load the assets required for our preloader (in this case a 
        // background and a loading bar)
        this.load.image('ninja', 'asset/ninja.png');
        this.load.image('bullet_laser', 'asset/bullet_laser.png');
        
    },
    
    

    create: function () {

        // Define background color
        this.stage.backgroundColor = "#4488AA";
        
        // Add ninja to the center of the stage
        this.ninja = this.add.sprite(
            this.world.centerX, // (centerX, centerY) is the center coordination
            this.world.centerY,
            'ninja');
        // Set the anchor to the center of the sprite
        this.ninja.anchor.setTo(0.5, 0.5);
        
        this.camera.follow(this.ninja);
        
        // Add weapon
        this.weapon = this.add.weapon(30, 'bullet');
    
        this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
        
        this.weapon.bulletSpeed = 600;
        
        this.weapon.fireRate = 100;
        
        // Enable physics
        // this.physics.arcade.enable(this.ninja);
        
        // Weapon should follow ninja
        this.weapon.trackSprite(this.ninja, 0, 0, true);
        
        this.cursors = this.input.keyboard.createCursorKeys();

        this.fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);
    },
    
    update: function() {
        
        // Deal with touch input
        // Deal fire input etc.
        
        // Mark pointers that were used for UI interaction

        // Loop through all pointers
        var newMoveDirection = 0;
        
        for (var pointer in this.input.pointers) {
            
            // Touch on UI elements
            if (this.input.pointers[pointer].isDown) {
                
                // If no UI element was touched, then we let the ninja move
                if (this.input.pointers[pointer].x > this.ninja.x) {
                    newMoveDirection = 1;
                } else if (this.input.pointers[pointer].x < this.ninja.x) {
                    newMoveDirection = -1;
                }
            } 
               
        }
        
        this.moveDirection = newMoveDirection;

        // Move ninja
        this.ninja.x += this.moveDirection;
        
        // Weapon
        if (this.fireButton.isDown) {
            this.weapon.fire();
        }
    },

    gameResized: function (width, height) {

        // This could be handy if you need to do any extra processing if the 
        // game resizes. A resize could happen if for example swapping 
        // orientation on a device or resizing the browser window. Note that 
        // this callback is only really useful if you use a ScaleMode of RESIZE 
        // and place it inside your main game state.

    },
    
    render: function() {
        console.log(this.debug);
        this.debug.cameraInfo(this.camera, 32, 32);
    }

};

Thanks!

[samme]

Use `this.game.debug.cameraInfo()`.

[lonelyguy]

On 31.10.2016 at 4:57 PM, samme said:

Use `this.game.debug.cameraInfo()`.

Unfortunately it produces the same error as the debug object already seems not be defined.

 

Quote

Uncaught TypeError: Cannot read property 'cameraInfo' of undefined
    at BasicGame.Game.render (http://localhost:8080/src/Game.js:150:19)
    at c.StateManager.render (https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js:10:29678)
    at c.Game.updateRender (https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js:12:5541)
    at c.Game.update (https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js:12:4756)
    at c.RequestAnimationFrame.updateRAF (https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js:18:10004)
    at window.requestAnimationFrame.forceSetTimeOut._onLoop (https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js:18:9880)

 

[samme]

You should check if the game object (ever) has a `debug` property. I don't see the same error: http://codepen.io/anon/pen/MbgmVO?editors=0010