BitmapText not appearing when drawn from other entity

[01271]

I have created a BitmapFont. The font works correctly when it's added to the world via addChild.

 

me.game.world.addChild(new me.BitmapText(200,100, {
      font: me.loader.getImage('verdana'),
      fontData: me.loader.getBinary('verdana'),
      size: 1,
      textAlign: 'center',
      text: "Test"
    }));

 

This is what it looks like then:

[]

 

However I want to do something that I was able to do in previous versions of MelonJS which is to draw text on top of things.

To do so, I created an entity that's going to be a button:

game.battleButton = me.Entity.extend({

  init: function(x, y, params) {
    var settings = { width: 120, height: 128 };
    this._super(me.Entity, 'init', [x, y, settings]);

    var types = { left: "ui/battleLeftmostButton", middle: "ui/battleMiddleButton", right: "ui/battleRightmostButton" };
    // console.log(types, types[type]);
    this.renderable = game.texture.createSpriteFromName(types[params.type]);
    // this.name = params.title;
    this.titleLabel = params.title;

    this.titleBitmap = new me.BitmapText(0,0,//this.centerX, this.pos.y + 6, 
    {
      font: me.loader.getImage('verdana'),
      fontData: me.loader.getBinary('verdana'),
      size: 1,
      textAlign: 'center',
      text: params.title
    });

    this.test = true;
  },

  draw: function(renderer, rect) {
    this._super(me.Entity, 'draw', [renderer, rect]);
    if (this.test){
      console.log(renderer);
      this.test = false;
    }
    // this.titleBitmap.draw(renderer);
    // Draw the title.
    // draw(renderer, text, x, y)
    this.titleBitmap.draw(renderer, "Testing", 100, 100);
    //this.titleBitmap.pos.x, this.titleBitmap.pos.y);
  },

  update: function(dt) {
    this.body.update(dt);
    return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0);
  },
  onCollision: function(response, other) {
    return false;
  }
});

 

The result has no text.

What's going on?

Version is

 * melonJS Game Engine - v7.1.1

 

Edited May 21, 2020 by 01271

[01271]

Attempted changing it from using a direct call to draw to a superclass call and that didn't work either.

this.titleBitmap._super(me.BitmapText, 'draw', [renderer, 'test', 200, 200]);

sadly does not work...

[01271]

When I log the work that's going on inside the draw function of the bitmapText like so:

if (glyphWidth !== 0 && glyphHeight !== 0) {
               // some browser throw an exception when drawing a 0 width or height image
               if (!this.hasLogged){
                console.log(this.fontImage, glyph.x, glyph.y, glyphWidth, glyphHeight, x + glyph.xoffset, y + glyph.yoffset * this.fontScale.y, glyphWidth * this.fontScale.x, glyphHeight * this.fontScale.y);
               }
               renderer.drawImage(this.fontImage, glyph.x, glyph.y, glyphWidth, glyphHeight, x + glyph.xoffset, y + glyph.yoffset * this.fontScale.y, glyphWidth * this.fontScale.x, glyphHeight * this.fontScale.y);
             } // increment position

(on line 15804 of the melonjs library)

here is the result:

<img src="data/font/verdana.png"> 11 93 6 12 209 202 6 12

It should be showing something on the screen but does not for some reason...

Inside the image, when I look at it the path works and it seems like nothing is wrong. Esp. since the other way of having the font works.

 

[01271]

By the way I was using this guide: https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font-in-melonJS

to try to make the font work, ideally if there's a solution we'll edit that as well.

 

I do also have a second question which is how to create a sprite and the provide a spritesheet for the image, I did try passing the texture and regions but the result was that it blacked out the entire screen except for a handful of tiles so I reverted back to an entity that gets a renderable added.

Edited May 22, 2020 by 01271

[01271]

I'm getting close to a solution.
I believe the context passed to an entity and a sprite may be different perhaps? I've gotten the text to work now actually by changing my entity to a sprite.
This is very strange.

I figured out what the black screen problem I had was, the problem was that the game was taking my test player, a black stick figure and stretching it out over the entire screen.

This problem is now my current problem and I only need to find out what parameters are necessary to initialize a sprite from a regular constructor with a spritesheet as well so that I can make things work correctly.

 

This is almost working!:

[01271]

It's working:

 

 

This is the final code:

 

game.battleButton = me.Sprite.extend({

  init: function(x, y, params) {

    var types = { left: "ui/battleLeftmostButton", middle: "ui/battleMiddleButton", right: "ui/battleRightmostButton" };

    var s = game.texture.createSpriteFromName(types[params.type]);

    // var settings = { width: 120, height: 128 };
    var settings = {
      width: s.width,
      height: s.height,
      image: game.texture,
      framewidth: s.width,
      frameheight: s.height,
      region: types[params.type],
      atlasIndices: {
        [types[params.type]]: 0 },
      name: types[params.type],
      anchorPoint: { x: 0, y: 0 }
    };

    this._super(me.Sprite, 'init', [x, y, settings]);

    // this.renderable = game.texture.createSpriteFromName(types[params.type]);
    // this.name = params.title;
    this.titleLabel = params.title;

    // this.font = new me.BitmapFont(me.loader.getBinary('verdana'), me.loader.getImage('verdana'),1);

    this.titleBitmap = new me.BitmapText(this.centerX, this.pos.y + 6, {
      font: 'verdana',
      fontData: 'verdana',
      size: 1,
      scale: 1,
      textAlign: 'center',
      text: this.titleLabel
    });

    // this.titleBitmap.alwaysUpdate = true;
    // this.titleBitmap.hasLogged = false;

    // this.font = new me.Font('Palatino', 24, '#333', 'center');


    this.test = true;
  },

  draw: function(renderer) {

    this._super(me.Sprite, 'draw', [renderer]);
    this.titleBitmap.draw(renderer, this.titleLabel, this.centerX, this.pos.y + 5);

    if (this.test) {
      console.log(this.centerX, this.pos.y + 6);
      this.test = false;

    }

  },

  // update: function(dt) {
  //   this.body.update(dt);
  //   return (this._super(me.Sprite, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0);
  // },
});

 

Tutorials I followed:

https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font-in-melonJS

(this one is essential for the font)

https://www.codeandweb.com/texturepacker/tutorials/using-sprite-sheets-with-melonjs-tutorial

(this one is for the sprite's texture only relevant if you're using a texture sheet)

Otherwise it looks like drawing a font only works on a sprite and not on an entity which sucks but now I'm out of the woods on this.

 

I solved the problem.

Edited May 23, 2020 by 01271

[obiot]

wow I did not notice there were so many messages here on this one, glad you found a workaround in your case, but on the latest master 8.x branch it's working for me, and it should be the same on 7.x if this the version you are using

here is my code :

    init: function(x, y, settings) {

       // ...... do something  

       // create a font
        this.font = new me.BitmapText(0, 0, {
            font : "PressStart2P",
            textAlign : "center",
            textBaseline : "bottom"
        });
    },

    draw: function(renderer, rect) {
        this._super(me.Entity, 'draw', [renderer, rect]);
        this.font.draw(renderer, "Testing", 0, 0);
    },

 

 

and here below the result using the platform example :
 

 

remember as well that the font will be drawn respectively to the entity here, with all Anchor Point value, etc... also applied to the fond drawing itself.

 

Edited May 23, 2020 by obiot

[01271]

Well that's embarrassing, since the buttons I have are all at the bottom of the screen then drawing things at 200,200 (I thought it was abs pos) meant that they were completely off the canvas.

[obiot]

All that matters is that you managed to get it work the way you needed