App design help

[quarian]

Hello,

 

I am working on an venue editor, where seats are represented by shapes(circles or rect for now) and have a label.

I found Pixi.js and I want to see how it will perform when dealing with more than 10000 such objects.

 

Each shape may have a custom background color, stroke etc. Also each shape will have a text in the middle representing the label.

I need to be able to zoom an pan the stage, and move some of the shapes around.

 

I have an implementation done, but it doesn't perform as good as I expected.

Currently I have used a new PIXI.Graphics to draw each shape, and a PIXI.Text appended to each such object.

 

Without text, it works better but when adding the text the performance drops.

Is there a way to fill the text directly on the graphics object?

 

More importantly what are the aspects that I have to be aware of when dealing with a large number of dynamic elements with pixi.js?

 

Thank you for your help!

[hubert]

Are the shapes similar to each other so you could group them into sprites that look the same? You could use sprite batch for each group of the sprites instead drawing them all at the same time? Are they moving or your viewport is moving above them?

 

Could you please give us a link to a demo etc?

 

http://www.sevenative.com

[quarian]

Hello,

 

Thank you for your reply. Here is a link with what I have so far https://www.youtube.com/watch?v=-7GjcIQDuts

 

Although at the moment I have identical circles, this won't be case in the end.

The elements can have different background color, stroke color, shape and size.

Also they will have a label in the center.

 

Currently I draw the circles as individual PIXI.Graphics objects.

 

I have tried to draw them in one Graphics object, but failed... it worked for 400 circles, but with more the graphics gets scrambled as if the path wasn't closed and the circles where connected somehow:

I drew the circles in a loop using the following function:

/*Solution of drawing on one graphics object that didn't work.x,y - positiong - the main graphics object*/function drawCircle(x,y,g){    g.beginFill(backgroundColor, 1);    g.lineStyle(2,borderColor, 1);    g.drawCircle(x, y, radius);    g.endFill();}

For the text, I added  a text object as a child of each graphics object. For now they are removed becase the performance dropped a lot.

Is there a way of drawing the text directly on the graphics object?

 

For translating, I am changing the position of the Graphics objects.

The scaleing is done on the container of the Graphics objects(DisplayObjectContainer)

 

Thank you!

 

 

[hubert]

Neat demo!

 

hmmmm.... 

 

in case that you have more than 10 000 - will all of them be visible at the same moment or you will be showing only a part of the view and then slide to another?

 

If only part of them will be shown in the viewport you can use the visible property and set it to false only for the elements that are currently NOT in your viewport.

 

whenever you set the visible = false the pixi engine is not drawing them to canvas and no precious cpu cycles are used, but all of those objects are still part of the container and stage and all of them are moved around with the x, y position or something else depending on your code. Rendering is the most cpu extensive task in case of animating that big amount of objects, all the position changes and rotation are less cpu hungry.

 

I noticed that you can zoom in and zoom out with your viewport. You could consider redrawing the stage again without a scale after a certain level of height is reached BUT WITH DIFFERENT ELEMENTS THAT REPRESENT THE HIGHER VIEW. SORT OF LIKE GOOGLE MAPS! Scaled elements tend to slow pixi engine when there are many of them. (I think that under the hood pixi js is scaling all of elements inside a container but I AM NOT SURE OF THAT)

 

 

But in case that you want all of you objects to be in the same viewport at the same time you should consider having a couple of canvases divided between the portions of the "table" and render only those that are changed. I know that this technique is used in isogenic engine, but I'm not sure if this is what you want.

 

The second case is way more difficult to handle. 

 

I hope this helps.

 

As for text i don't really know what are you referring to. Please show an image that shows how the text is placed on the elements.

 

http://www.sevenative.com

[quarian]

Hello,

 

Thanks for the reply. I will try setting visible to false for the elements that are out of view.

 

I've attached a image that contains text as well. Currently I tried creating a new Pixi.Text element for each circle and add it as a child of the circle.

This obviousily is not good, as I am doubling the number of elements.

 

Thanks.

 

[hubert]

does the numbers on the circles change?!

 

If not you can render a new texture with the number overlapped on it so you won't have two sprites to manage, instead you will have only one sprite.

 

http://www.html5gamedevs.com/topic/6507-display-object-container-to-an-imagesprite/

 

If. you are using the 1.6 pixi js version you can set a frame for the image to set the width and length but in order to cut the rendered texture you have to use the crop property. I had an issue with this after migrating.

 

This example also shows how to render texture.

 

http://www.html5gamedevs.com/topic/8613-upgrading-to-pixi-160/

 

I hope this helps!

 

http://www.sevenative.com