SpriteBatch slow on scaling

[zarstar]

Hi all.

I have a main DisplayObjectContainer which contains a SpriteBatch.

It renders faster than a nested DisplayObjectContainer, but when I scale the main DisplayObjectContainer, it is really really slow.

 

Maybe the SpriteBatch isn't done for scaling?

Or what else could be?

[hubert]

Can you provide some code? In what moment you are scaling the spriteBatch. How is it nested? (there can be no nested elements in spirteBatch - that is why it's so fast). Anything more than that?

 

Scaling should not affect the performance the way you are describing it. Plus how many objects are there in your batch?

 

Does your batch contain more than one sprite type? (it should not in case of maximum performance).

 

http://www.sevenative.com

[zarstar]

This is what I do:
 
I have a for loop in which I create Sprites to print a polygon border (I don't use PIXI.Graphics because I tried it and it resulted to be really slow):
 

border = new PIXI.DisplayObjectContainer();for (j = 0; j < len; j++) {    // Calculate Coordinates and sizes    ...        // Create and add the top border    borderCell = new PIXI.Sprite(self.whiteTexture);    borderCell.tint = 0xFF00FF; // Color the border    borderCell.width = calculatedWidth;    borderCell.height = calculatedHeight;    borderCell.x = calculatedX;             borderCell.y = calculatedY;    border.addChild(borderCell);  // Add border}

I have a lot of Cells (about 3000) so it means that it creates borders (usually 4 Sprites) for each Cell (they are not squares, that's why I create borders dinamycally).

 

The greatest problem is that if I change the first line from

border = new PIXI.DisplayObjectContainer();

to

border = new PIXI.SpriteBatch();

 

It goes so slow that crashes if I am displaying all the 3000 tiles (while it's still kinda fast if I use the DisplayObjectContainer).

[zarstar]

Furthermore, all objects (Borders and Cells) are inside a main DisplayObjectContainer.

If I scale it with SpriteBatch with an animation (using a Tween), fps drop drastically.

[xerver]

Not much we can say without seeing the code, besides "never heard that before".

[zarstar]

The code is really complex (and it's not mine).

I'll ask if I can share it.

 

However, do you have any ideas of what could slow the SpriteBatch so much?

I can record a video, if you want, to give a better look.

 

I re-read my post and I think that I wrote any possible details:

Stage -> main DisplayObjectContainer -> DisplayObjectContainer -> 3000 Sprites (image textures, each one different from the other) - They are Pictures

                                                             |                                              They are sometimes cropped images, sometimes single images, sometimes RenderTexture images.

                                                             |-> DisplayObjectContainer -> 3000 x 4 = 12000 Sprites (texture generated by a PIXI.Graphics object) - They are borders (like frames).

 

I often change Sprites position, size and scale.

I also change the main DisplayObjectContainer position, size and scale.

 

Wherever I use the SpriteBatch, if on the screen are shown about 3000 Sprites the browser crashes (infinite load, I have to hard reset the PC).

If there are few Sprites, like 100, it is only slow.

 

I use autoRenderer, so I think that I am using the WebGL one.

[hubert]

Ok. So your sprites come from different assets as I understand right?

 

IF YES this is a normal behavior of a spriteBatch. You should use only one sprite in the same spriteBatch.

 

Since this is not possible you should create a different spriteBatch for each type of sprite if this is possible to group them.

 

If all of your sprites are different you should not use them in a sprite batch.

 

Some additional code would be nice in order to suggest some kind of your solution.

 

Are all of them visible at the same time in your viewport?

Can parts of the sprites be rendered into a new single sprite so you would have to deal with less sprites combined on a one element?

Do you have to upload all of them at the same time and keep inside your container?

In case that the sprite is outside your viewport what do you do with it and the texture?

 

http://www.sevenative.com

[xerver]

> You should use only one sprite in the same spriteBatch.

 

This isn't necessarily true, you should be using the same *BaseTexture* for each sprite in a sprite batch. As long as the source is the same for each texture of the sprite (they can have different frames) you should see the speed increases.

 

For example, you can use a tileset image and render a tilemap with sprites for each tile that use a different frame in the same base texture.

[zarstar]

I knew that it shouldn't be fast with different BaseTextures, but what I don't understand it's why it is slow when a texture generated with PIXI.Graphics.generateTexture().

 

As I wrote, my structure is:

Stage -> main DisplayObjectContainer -> DisplayObjectContainer -> 3000 Sprites (image textures, each one different from the other) - They are Pictures

                                                             |-> DisplayObjectContainer -> 3000 x 4 = 12000 Sprites (texture generated by a PIXI.Graphics object) - They are borders (like frames). <- SpriteBatch should be used here

But it seems to be a lot slower.

 

The code is simply:

// Create a base texture (white texture to be tinted)graphics = new PIXI.Graphics();graphics.beginFill(0xFFFFFF);graphics.drawRect(0, 0, 1, 1);graphics.endFill();graphics.boundsPadding = 0; // Reset Graphics paddingwhiteTexture = graphics.generateTexture();border = new PIXI.DisplayObjectContainer(); // Should be PIXI.SpriteBatch()for (j = 0; j < len; j++) {    // Calculate Coordinates and sizes    ...        // Create and add the top border    borderCell = new PIXI.Sprite(whiteTexture);    borderCell.width = calculatedWidth;    borderCell.height = calculatedHeight;    borderCell.x = calculatedX;             borderCell.y = calculatedY;    border.addChild(borderCell);}

Just to answer to your questions:

 

Are all of them visible at the same time in your viewport?

Yes, the app needs to show a lot of images at the same time.

 

Can parts of the sprites be rendered into a new single sprite so you would have to deal with less sprites combined on a one element?

No, each Sprite is dinamically moved separately (when needed).

 

Do you have to upload all of them at the same time and keep inside your container?

Yes, it's how it should work.

 

In case that the sprite is outside your viewport what do you do with it and the texture?

Nothing at the moment. I was thinking about setting the visibility (Sprite.visible) to false.

But the main problem is that the app needs to show all images on start and later, so it will improve the performance only "sometimes" (even though it will be still a good thing)

 

Thank you very much for your help!

[hubert]

could you please console.log(whiteTexture) and copy it into a pastebin or give a jsFiddle example please? This way we could test this part of the code on ourselves.

 

By the way what pixi version are you using? is 1.6.0 or older?

 

http://www.sevenative.com

[zarstar]

This is the result of console.log(whiteTexture) (in the stamp there is also the PIXI version: 1.6.1

 

I'll try to give you a jsFiddle example in next hours (or next days, as soon as I find a little bit of free time!)

Thank you for your great support anyway!

I really appreciate it.

[hubert]

Sure!

 

I'm getting a hell out of knowledge helping others on this forum!

 

http://www.sevenative.com

[zarstar]

Is it possible that my app is slow because I have "a lot of " SpriteBatches?

Because I checked my code and pratically I'm just creating Sprites using the same texture and adding them to a correspondent SpriteBatch, but I have about 100 of them.

[zarstar]

PS: how can I tint the content of a SpriteBatch?