Jump to content

HTML on top of PIXI


Sebi
 Share

Recommended Posts

Hey Guys,

I'm working on a game and I have encountered an really strange issue.

For an ingame chat, I figured that using a HTML div container to render the chat messages, would be faster than using PIXI Text-Objects.

http://mokgames.com/screenshots/1.png

http://mokgames.com/screenshots/2.png

http://mokgames.com/screenshots/3.png

http://mokgames.com/screenshots/4.png

As you can see, the more span tags there are, the bigger the framedrop. (1 span per message)

However, Chrome doesn't have that issue.

So, I'm wondering, is this an IE only issue? It probably has to do with recomposing the screen. And maybe a scrollable div container is just too heavy.

The scrollbar on the last screenshot is entirely written in pixi and so are the input fields.

So the only thing causing an issue must be the span tags that populate my div container.

Now I am debating on using PIXI Text Objects for the chat.. or maybe detecting if the player is using IE.

If that issue also exists in other browsers, then I might have to go full canvas, just in case.

I do have quite a lot assets that I did not yet publish on my Github, but which I might publish when I feel like it is good enough to do so. So, if anyone can help me with that ridiculous framedrop, then it will help me alot.

Did anyone else encounter an issue when displaying HTML on top of a PIXI Stage?

regards

Link to comment
Share on other sites

Hello,

It is not IE only, but it appears that with your code, only IE needs to redraw your static UI every frame when on top of a canvas element. If one of your UI element were to be animated (forcing repaint every frame), you would see the same framerate drop in other browsers.

Maybe that some of your code is the cause of continuous repaints or redraws in IE.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...