Jump to content

SpriteBatch slow on scaling


zarstar
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

93f785f775.png

 

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

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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