Jump to content

My Pixi.js ticker stops all application. (browser crashed)


Recommended Posts

Hi. I'm not a html5 game developer but Front-end developer trying to draw a line chart with pixi.js.

So, my question is not about the html5 game but just about how can I use pixi.js correctly. I was recommended this forum from pixi.js official site.


Anyway, the problem is chrome browser stopped after about 2 minutes later ticker started.

See this code (https://www.pixiplayground.com/#/edit/S~1QvhfSNDyACDvb0nkfc)


It's a simple code for a line chart.

1. Add a basic PIXI container
2. Draw the first line with 4 dots.
3. Add next line every second using PIXI ticker and Change line x position.

It works nicely at the moment But about 2 minutes later, the browser is crashed.

I don't know why and how can I fix it.
Help me!


Link to comment
Share on other sites

You can maintain 2 or more Graphics objects and delete the old one when it goes outside the screen, creating new one at the right side. Or just clear() and move it to right.

Also I saw that you depend on RAF too much, if you switch tabs and then switch back, something wrong can happen ;)

2 minutes is strange, i think it'll crash later. First you'll have too many lines inside and everything will disappear because we have only 16-bit indices at the moment. It'll become slow because of constant reupload. The next day it will crash.

Are you on linux?

Link to comment
Share on other sites

@ivan.popelyshev Thanks to your answer.

I'm using mac OS mojave.

and the crash time is not exact 2 minutes, it's about 2~3 min.


I understood that I have to maintain 2 or more Graphics to delete some lines.

But still cannot understand what is mean "depend on RAF too much, if you switch tabs and then switch back, something wrong can happen"
Is it means that there is much calculation in ticker? likes addLind(), moveLine()?
so it causes something wrong when clicking other links? 

Link to comment
Share on other sites

The problem with that is that the line gets really long as new points are added to it and old points are not removed.

Do you need to have it scroll back? If not, then you could keep track of all the points line needs to draw and clear the line graphics every time new line is added and remove the  points that have gone past the screen.

Link to comment
Share on other sites

I have a general idea about that kind of things. "maintain a window of x2 camera size, refill or spawn new elements when camera touches it, move the window.". I have implementation here : https://github.com/ivanpopelyshev/pixi-starfighter , but it requires hour or two of investigating the tilemap. Its very rare that people understand this thing from one sentense , but I do not have any other ideas how to explain it except that code. You need a window and if there are lag spikes - you need to add chunks to it.

Link to comment
Share on other sites

Keep a list of points and only draw the section you actually need to show. That way you wont need to upload a very large amount of vertices to gpu.

Another way to optimize a large set of lines would be to use rendertextures, though if the lines are dynamic then that wont be of help. But for static lines you could build a rendertexture for every 2048 (or lower) pixels and draw the line into that, then clear the line and start drawing again. Then when the old portion would need to be shown you could just use that texture instead of a line.

Link to comment
Share on other sites

@Exca Wow. It's a brilliant solution for me. very very thanks again.

Last question (minor) is that
I attached a new line using .moveTo(endPoints) and .lineTo(nextPoints) instead of adding a new line using new Graphic().

Can you recommend which way is correct or better?

Link to comment
Share on other sites

The code i have there is for general case, whether its backed by Graphics or pixi-tilemap or just sprites.

I dont understand your question :)

I recommend to use one graphics per many lines, but not just ONE graphics. That's "chunk" optimization, i dont have small example for it, only big ones like https://github.com/ivanpopelyshev/bombermine-shuffle , thats very old one that doesnt use pixi.

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.

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.


  • Recently Browsing   0 members

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