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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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