add.bitmapText in Phaser ver 2.4.4

[Nahsgnoy]

Hi, I am currently starting to learn Phaser and am following this tutorial Bunny Defender: https://github.com/eiffelqiu/bunny-defender 

 

I had done the index.html, boot.js, preloader.js and am currently at StartMenu.js, where when i run on localhost, is supposed to show a preload/splash screen, and arrive at the game's startmenu. 

 

However, it get stuck at the preload screen and in Console, it states - Uncaught TypeError: Cannot read property 'texture' of undefined, where when dig further, it shows something is wrong with this line in my StartMenu.js:

this.startPrompt = 

this.add.bitmapText(this.world.centerX-155, this.world.centerY, 'eightbitwonder', 'Touch to Start!', 24);

 

Can any experts here advise what's wrong so I can move forward with this tutorial? I am using the current version 2.4.4, and am following everything strictly with the tutorial so far and cant seem to figure out whats wrong, except i am thinking maybe due to the version of Phaser we are using are different (tutorial is using v2.0.4 "Mos Shirare").

 

Thank you!

[chg]

I'm no expert, but from what you say I'd guess that you may not have loaded the bitmap font correctly in the preloader.

[Nahsgnoy]

Hi, thanks for your reply. The below shows my code in Preloader.js where i load the fonts. Is there anything which i should change?

 

BunnyDefender.Preloader = function(game){

this.preloadBar = null; //initially preloadBar and titleText will be null, cos nothing yet

this,titleText = null;

this.ready = false; // game not yet ready, so boolean will be set to false

};

//spec out our Phaser functions for preloader

BunnyDefender.Preloader.prototype = {

preload: function(){

this.preloadBar = this.add.sprite(this.world.centerX, this.world.centerY, 'preloadBar');

// sets the transform point(anchor point) to center of the object

this.preloadBar.anchor.setTo(0.5, 0.5);

this.load.setPreloadSprite(this.preloadBar);

this.titleText = this.add.image(this.world.centerX, this.world.centerY-220, 'titleimage');

this.titleText.anchor.setTo(0.5, 0.5);

this.load.image('titlescreen', 'assets/images/TitleBG.png');

// load bitmap fonts, the actual font spritesheet of .png, plus bind this to the font's data element (.fnt)

this.load.bitmapFont('eightbitwonder', 'assets/fonts/eightbitwonder.png', 'assets/fonts/eightbitwonder.fnt'); 

 

},

 

create: function(){

// after setPreloadSprite have finished loading the preloadBar, we no need to crop the preloadBar image anymore

this.preloadBar.cropEnabled = false;

},

 

update: function(){

// when comes to this step, we know our game is loaded n ready to run. Can set the game ready to true.

this.ready = true;

this.state.start('StartMenu');

} 

 

};

[chg]

The only issue I see is the typo where you have , instead of a . on the second line of the constructor sorry (I suspect the typo probably isn't breaking much)

Could you font be missing some of the characters in the text you are asking Phaser to render? Maybe try without the punctuation or all uppercase or all lowercase and see if any of these work...

[Nahsgnoy]

Thanks! Its indeed caused by a '!' in the characters i am trying to render. 

An extra pair of eyes really helps. Appreciate..