Jump to content

MMO strategy game. Drawing graph map


Recommended Posts


I'm David, co-founder and front end of Arpic Games, a startup in Valencia (spain).


We are making Starriser, an MMO of space strategy in real time. We are talking hundreds of thousands of players in real time in a giant world steering huge fleets of ships and managing planets, waging wars and trading with other players.


A snapshot of the Starriser's galaxy:




This is a little one. Basically, the map is a graph.


Nowadays Starriser uses Canvas 2D natively.


I'm researching for graphic libraries and Pixi seems to be the best. The only problem is the primitives draw system.


Pixi makes polygons from lines to have nice corners. The problem here is that its computation is slow. Well, not slow in general, slow if you put 5.000 lines and need to change their thickness every time the user zooms in. Even more if you smooth the zoom.


Basically, I need to change the thickness of 5.000 lines without affecting performance. Computing every frame's line's polygons in a zoom animation its too much.


A possible solution I thought is to use native webgl primitives. They don't have nice corners, but I don't need then. Is there any way to use native webGL lines in pixi?


Finally, in my research I've noticed that pixi is a great solid library. Great work!













Link to comment
Share on other sites

Well, pixi is a rendering engine optimized from drawing large amounts of bitmap sprites. Sure it can draw primitives, but as you've pointed out, they're not really that fast. I would suggest finding a different framework for project that relies heavily on them.

If you need both the bitmap sprites and the primitives then indeed, you're in a difficult position :D Unfortunately, I'm not experienced enough to help you with it. But finding a way to draw WebGL primitives over it sounds like a good idea to me. After all, pixi is open source, you might find a way to re-write it somehow.


Hopefully someone else will be of more help than I was :D Good luck.

Link to comment
Share on other sites

I've been researching a bit more and I found that drawing lines with a variable width is not trivial. Here the explanation: https://code.google.com/p/angleproject/issues/detail?id=119


Nowadays firefox, chrome and explorer 11 in windows can only draw lines of 1px width. :(


The main reason is that directx doesn't support lines and OpenGL ES standard only requires 1px line width to be implemented.


These are my ideas:


1- Draw rectangles, rotate it and scale the X and Y coordinate separately. I remain worry about the performance.


2- Use baricentric coordinates. Creating a mesh that represent the lines and draw it with a personalized shader. Explanation: http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/


Any ideas?
Anyone has experience with barycentric coordinates?


The next week I will investigate the baricentric coordinates.


Have fun!


Edit: Baricentric coordinates is for triangles. Maybe a triangle for line and a shader that only render one edge?

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...