How to display player names on each character

Post your help queries and engine programming questions here

How to display player names on each character

Postby Laurent » Fri Jan 23, 2015 12:08 pm

Hi,

I'm developping a multiplayer isometric chat.
How can I display each player username above each character ?

Thoses usernames are dynamic, depending on the members joining the chat.
Each player joining the chat can emit is own username and send it to the server, but how can i dispatch this username to other player display because the "rendering" of characters is done on the client side ?

Any ideas ?
User avatar
Laurent
 
Posts: 6
Joined: Wed Jan 07, 2015 10:15 am

Re: How to display player names on each character

Postby DasGurke » Sun Feb 08, 2015 11:37 pm

I am simply mounting a smart texture over each of my characters. In my case they display a health status, but you should be easily able to adapt this:

Code: Select all
// Smart texture
var image = {
  render: function (ctx, entity, tickTime) {
    var character = entity.parent();

    if (character.currentHealth <= 0) {
      return;
    }


    var offsetX = 0;
    var offsetY = 0;
    var entityWidth = entity.width();
    var entityHeight = entity.height();
   
    var maxHealth = character.attributes.health.getMaximum();
    var currentHealth = character.attributes.health.getValue();

    // Drawing the bar background
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(offsetX, offsetY, entityWidth, entityHeight);

    // Drawing the bar itself
    var interval = entityWidth / maxHealth;
    var barWidth = currentHealth * interval;
    ctx.fillStyle = '#00ff00';
    ctx.fillRect(offsetX, offsetY, barWidth, entityHeight);

    // Drawing a border around the progress bar
    ctx.strokeStyle = '#ffffff';
    ctx.strokeRect(offsetX, offsetY, entityWidth, entityHeight);

    // Drawing the health text
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.translate(offsetX + (entityWidth / 2), offsetY + (entityHeight / 2));
    ctx.fillStyle = '#000000';
    ctx.fillText(String(currentHealth) + " / " + String(maxHealth), 0, 0);
  }
}


Code: Select all
    // Setting up the health bar
    var healthBarWidth = self.tileMap.tileWidth() * 1.5;
    self.healthBar = new IgeEntity()
      .texture(self.area.resourceManager.getSmartTexture('smart/health'))
      .id(this.id() + '_healthBar')
      .width(healthBarWidth)
      .height(11)
      .translateTo(-(healthBarWidth / 2), -40, 1)
      .drawBounds(false)
      .drawBoundsData(false)
      .originTo(0.2, 0.2, 0.2)
      .mount(self);


When rendered, this looks like the attached file:
webIsoRogue-r240-dungeonWithSkeleton.png
webIsoRogue-r240-dungeonWithSkeleton.png (106.95 KiB) Viewed 6562 times
DasGurke
 
Posts: 1
Joined: Sun Feb 08, 2015 11:30 pm

Re: How to display player names on each character

Postby Laurent » Mon Feb 09, 2015 8:10 am

Thanks a lot for the time you spend to answer my question :-)
I will try you solution this week.

Laurent.
User avatar
Laurent
 
Posts: 6
Joined: Wed Jan 07, 2015 10:15 am


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron