Implementing Chat Box within Pixi

[moszis]

Hi Guys,

 

   I'm a bit stumped.   I dont expect any details, just to be pointed in the right direction.  I would like to add a chat box(s) to my game.  I would be using node.js and socket.io to receive and distribute messages between users.   

 

   I am not clear on the best approach to create actual chat box where messages would be displayed using pixie framework.  Is there a best practice approach for this?   Or do I have to use html text box layered on top for the messages?  This would be somewhat involved 'chat' with game messages, multiple tabs and coloring/font patterns.

 

  Any suggestions would be greatly appreciated!

 

Thank you

[d13]

Or do I have to use html text box layered on top for the messages?  

Yes, just create a kind of <DIV> layer for HTML UI on top of your Pixi layer - that's the simplest way

[Sebi]

I would avoid using html at any cost. I noticed using a div on top of canvas, just slows things ridiculous much down.

I had more than 20 fps drop because of that ( at least in IE, chrome dropped fps too but a little less ).

For my own game I'm using a canvas based chat (pretty much everything including tables, scrollbars, inputs, etc. is canvas in my game)

It pretty much comes down to:

There are n visible lines of text (PIXI.Text Objects)

And m lines of chat messages stored in an array per room.

You just remember the current start position (first visible line index) and add a scrollbar to the container to be able to scroll that start position between 0 and m-n.

E.g. 8 visible lines, 30 lines of messages stored, start index: 10

would show the lines from index 10 to 17 of the messages array.

Just flag the chat as dirty and during the rendering loop reposition / update texts as needed.