CODEWITHSUNDEEP
javascriptphaser-framework
Rajakumar
Rajakumar

Reputation: 139

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined in phaser while using game.add.text()

This is my code which i tried. 

  <html>
    <head>
        <title>Cat Catcher 2000</title>
        <script type="text/javascript" src="js/phaser.min.js"></script>
        <script type="text/javascript">
            var game = new Phaser.Game(800,600, Phaser.CANVAS,'cat-catcher', {preload: preload, create: create, update: update });
            var cat,catcher,cursors,txtScore,score;
            function preload(){
                game.load.image('cat','img/cat.png');
                game.load.image('catcher','img/catcher.png');
                game.load.image('bg','img/bg.png');
            }
            function create(){
                // background setup
                game.add.sprite(0,0,"bg");
                // catcher setup
                catcher = game.add.sprite(400,300,'catcher');
                catcher.anchor.setTo(0.5,0);
                game.physics.enable(catcher,Phaser.Physics.ARCADE);
                // cat setup
                cat = game.add.sprite(Math.random() * game.width , Math.random() * game.height, 'cat');
                game.physics.enable(cat,Phaser.Physics.ARCADE);
                // Score setup
                score = 0;
                var style = {font: "Arial", fill: "#fff"};
                txtScore = game.add.text(10,10,score.toString(),style);

            }
            function update(){

            }
        </script>
    </head>
    <body>

    </body>
</html>

While running the above code i got the error Uncaught TypeError: Cannot read property 'toLowerCase' of undefined inside the create function and particularly in the line 

txtScore = game.add.text(10,10,score.toString(),style);

CONSOLE OUTPUT

http://phaser.io ♥♥♥
phaser.min.js:3 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at c.Text.setStyle (phaser.min.js:3)
    at new c.Text (phaser.min.js:3)
    at c.GameObjectFactory.text (phaser.min.js:3)
    at Object.create (index.html:26)
    at c.StateManager.loadComplete (phaser.min.js:3)
    at c.Loader.finishedLoading (phaser.min.js:3)
    at c.Loader.processLoadQueue (phaser.min.js:3)
    at c.Loader.asyncComplete (phaser.min.js:3)
    at c.Loader.fileComplete (phaser.min.js:3)
    at HTMLImageElement.a.data.onload (phaser.min.js:3)
c.Text.setStyle @ phaser.min.js:3
c.Text @ phaser.min.js:3
text @ phaser.min.js:3
create @ index.html:26
loadComplete @ phaser.min.js:3
finishedLoading @ phaser.min.js:3
processLoadQueue @ phaser.min.js:3
asyncComplete @ phaser.min.js:3
fileComplete @ phaser.min.js:3
a.data.onload @ phaser.min.js:3

Thanks in advance

Upvotes: 2

Views: 966

Answers (1)

Rajakumar
Rajakumar

Reputation: 139

I am using "phaser CE 2.7.8" and I found the solution for that error. actually, phaser needs to align,boundsAlignV and boundsAlignH style attribute to align the text. in the code var style = {} the error is gone after I added the necessary style attribute.

CORRECT CODE

`function create(){
                // background setup
                game.add.sprite(0,0,"bg");
                // catcher setup
                catcher = game.add.sprite(400,300,'catcher');
                catcher.anchor.setTo(0.5,0);
                game.physics.enable(catcher,Phaser.Physics.ARCADE);
                // cat setup
                cat = game.add.sprite(Math.random() * game.width , Math.random() * game.height, 'cat');
                game.physics.enable(cat,Phaser.Physics.ARCADE);
                // Score setup
                score = 0;
                var style = {font: "20px Arial", fill: "#fff",align:"left",boundsAlignH: "top",boundsAlignV:"top"};**// NOTE THIS LINE**
                txtScore = game.add.text(10,10,score.toString(),style);

            }`

Note the var style={} line in the above code i added the neccessary properties. thanks, everyone!

Upvotes: 1

Related Questions