Cannot read property add() of undefined Phaser.js

Question

There is a problem with the game.state.add() function. For some reason game is undefined:

Uncaught TypeError: Cannot read property 'add' of undefined at Object.init (main.js:51) at main.js:58

This is my code:

var socket; // global bir socket değişkeni.
    socket = io.connect(); // server a bağlantı isteği gönderir.
                           //Server bağlantı isteğini dinler ve clientlara başarılı olursa geri "connect" mesajını emitler.

    //Oyunun ekrana oturması için boyutları ayarlıyoruz.Browserla ilgili.
    var canvas_width = window.innerWidth * window.devicePixelRatio;
    var canvas_height = window.innerHeight * window.devicePixelRatio;   
    //Oyunumuzu belirlediğimiz divin içinde yaratıyoruz.
    var game = new Phaser.Game(canvas_width,canvas_height,Phaser.CANVAS,'gameDiv');

    var gameProperties = {
      //oyunun gerçek boyutları.oyun dünyasının genişliği ve uzunluğu.
      gameWidth:4000,
      gameHeight:4000,
    }

    //Oyunun ana state i.
    var main = function(game){

    };
    main.prototype ={
    preload:function(){

    },
    create:function(){ // oyun yaratıldığında çağrılır.
    console.log("Client yaratıldı.")
    //serverdan connect mesajı gelince onSocketConnected fonksiyonunu çalıştır.
    socket.on("connect",onSocketConnected); //serverdan gelecek connect mesajı için dinler.Socket.io bir client
                                            // servera bağlandığında otomatik olarak connect mesajını client a gönderir.
                                            //serverın clientlara mesaj göndermesine "emit"  denir.

    },    
    }
    function onSocketConnected(){
      console.log("Sunucuya bağlanıldı.")    
    };

    var gameBootStrapper = {
         init:function(gameContainerId){
             game.state.add('main',main);   //error here
             game.state.start('main');
         }
    };    
    gameBootStrapper.init('gameDiv');

My index.html:

<body>
    <div id="gameDiv">
    </div>    
</body>
<script src="client/lib/phaser.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src ="client/main.js"></script>

Here there is a picture of index.html: ........................................................

What do you see if you console.log(game) just after var game = ... — Lajos Arpad
– Lajos Arpad, Commented Apr 8, 2018 at 16:29
This means that game becomes undefined in the meantime. Strange. — Lajos Arpad
– Lajos Arpad, Commented Apr 8, 2018 at 17:37

BdR · Accepted Answer · 2018-04-09 08:45:43Z

1

I think it has to do with the scope and context.

You are calling init from the context of gameBootStrapper, and the variable game does not exists within that context. In other words, I think you need to also pass the game variable into the init function in order for the gameBootStrapper object to be able to reach that variable. So something like this:

var gameBootStrapper = {
     init:function(gameContainerId, game){
         game.state.add('main', main);
         game.state.start('main');
     }
};    
gameBootStrapper.init('gameDiv', game);

You could also bind the init to a different context somehow, though I forget how to do that. I must say that I find scoping and context in JavaScript to be tricky and unintuitive IMHO.

answered Apr 9, 2018 at 8:45

BdR

3,1282 gold badges24 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xtrimzz · Accepted Answer · 2018-11-14 03:17:36Z

0

I had the same problem and this is how i solved it. It happen that i was using 'phaser 3' which is now uses game.scene instead of game.start. So i just changed the start to scene and it worked.

answered Nov 14, 2018 at 3:17

xtrimzz

596 bronze badges

Collectives™ on Stack Overflow

Cannot read property add() of undefined Phaser.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related