Sign in to follow this  
01271

BitmapText not appearing when drawn from other entity

Recommended Posts

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:

[969254617_ScreenShot2020-05-16at6_05_16PM.png.92d0c8f4dc1b6b1b753ad4a562f7c547.png]

 

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.

1748786875_ScreenShot2020-05-16at6_14_00PM.png.ab5fb8ed0c45c7309dcf97f33621bf8a.png

What's going on?

Version is

 * melonJS Game Engine - v7.1.1

 

Edited by 01271

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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 by 01271

Share this post


Link to post
Share on other sites

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!:

705313118_ScreenShot2020-05-22at6_04_47PM.png.e6fcfe2841b585bd3de71bc20f48a4b6.png

Share this post


Link to post
Share on other sites

It's working:

106559291_ScreenShot2020-05-22at6_32_51PM.png.5630c0b39416c0ddbd5b2f19f2edb52f.png

 

 

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 by 01271

Share this post


Link to post
Share on other sites

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 :
 

934438980_Screenshot2020-05-23at3_03_56PM.thumb.png.d4479e07352958ff560f88d921428fe5.png

 

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 by obiot

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.