MMO strategy game. Drawing graph map

[DavidBM]

Hi!

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:

https://www.dropbox.com/s/sqro8ylbdkzqgfk/Starriser%20Galaxy.png?dl=0

 

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!

 

Thanks!

David.

 

 

 

 

 

 

 

 

 

[agamemnus]

You can use a vertex filter thing to change the thickness, perhaps... but I haven't mastered that.

[BasomtiKombucha]

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

[DavidBM]

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?

[DavidBM]

Finally I made a library for this: https://github.com/DavidBM/pixi-nativeGLline