Jump to content

Cannot read property 'cameraInfo' of undefined(…)


Recommended Posts

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!


(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.



/* 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.
        // Re-calculate scale mode and update screen size. This only applies if
        // ScaleMode is not set to RESIZE.
        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
        // Set the anchor to the center of the sprite
        this.ninja.anchor.setTo(0.5, 0.5);
        // 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) {

    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() {
        this.debug.cameraInfo(this.camera, 32, 32);



Link to comment
Share on other sites

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.



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)


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...