Forums » Code » Customisable chat bubble entity

Plugin to create Pokemon style chat bubbles that follow entities. You can use regular canvas fonts and choose between 3 different bubble shapes (rectangular, rectangular with rounded corners and oval). There are many more parameters to configure, the full list is at the github page.

lhttps://github.com/MartinGryner/ImpactjsChatBubble

Sounds handy! I had thought about creating something similar myself.

I wish you included screenshots. It'll be a while before I'll be able to try this out :/

I really don't want to have to re-invent the wheel for chat bubbles, so this is exactly what I'm looking for -- thanks!

Unfortunately I'm having problems using it. It's simple to include in my project, and the bubbles appear when they should, just not where they should. They're offset by about 100 pixels up and to the left of the entity they're following. And while the offset seems constant for my player, they seem to move towards/away from enemies as they player moves...

I'm sure it's something I'm doing wrong, but I've been at it for a few nights now and I'm no closure to working it out. Now I don't expect you to debug my code for me, but what would really help would be a simple example project that shows how to use chatbubble.js -- a player that moves and talks to an enemy that moves and talks would be perfect.

Does anyone have an example of this working? I've followed the instructions in Github and I either get errors, or failing that it doesn't show anything. A full working example would be nice

Here's as far as I've got: https://github.com/mtg101/ImpactJS101
(Press 's' to see the player's bubble, and move with left/right/space.)

I thought I'd found a fix by hacking chatbubble.js lines 132 & 132 from:

var x = this.pos.x-ig.game.screen.x-(this._bubbleWidth-follows.size.x)/2;
var y = this.pos.y-ig.game.screen.y-this.margin-this._bubbleHeight;

to the following (commented out lines 133 & 134 in my version of chatbubble.js)

var x = this.pos.x+ig.system.width/2-ig.game.screen.x-(this._bubbleWidth-follows.size.x)/2;
var y = this.pos.y+ig.system.height/2-ig.game.screen.y-this.margin-this._bubbleHeight;		   

My idea was that the 'follow the player' screen offset needed taking account of. And while it works for the player, it made the zombie's speech much worse :(

Ah-ha! It's the scaling causing the problems. I was scaling up by 2:

ig.main( '#canvas', MyGame, 60, 320, 240, 2);

When I changed this to normal scale, the bubbles appeared where they should:

ig.main( '#canvas', MyGame, 60, 320, 240, 1);

You can fix the basic square chat bubble by changing lines 132 & 133 of chatbubble.js to:

var x = ig.system.scale*(this.pos.x-ig.game.screen.x-(this._bubbleWidth-follows.size.x)/(2*ig.system.scale));
var y = ig.system.scale*(this.pos.y-ig.game.screen.y-this.margin-this._bubbleHeight/ig.system.scale);

I've updated my example with this fix: https://github.com/mtg101/ImpactJS101

Similar hacks to the the other shapes should fix them too.

Very nice!

Thanks for the update. I've personally never used Impact scale, that's why I completely omitted it. I could add your changes, but it would probably be better if you made a pull request so I could properly give you the credit you deserve.

i pushed a pull-request for mtg101, have some other extensions I will probably push if they work out alright

Thanks for sorting out that pull-request guys.

I've added another one myself. This one allows passing in a reference to an entity instead of a name. This is useful for unnamed entities. For example:

var parameters = {text: 'Hello!', tracks: this};
ig.game.spawnEntity(EntityChatbubble, 0, 0, parameters);