Optimizing performance

[nonamedude]

I am simply moving the same image from the top of the screen to the bottom and once the image reaches the bottom I just move it back to the top. I do the same to every image in the batch (around 15 - 20). They are relatively small images. I am solely using the canvas renderer to do this.

 

As of now, I use a spritebatch and then add it to the stage. Are there any optimizations I can do or is this just a limitation of canvas? It works perfectly fine but drains a lot of power if you're on a laptop.  

[xerver]

SpriteBatch is only going to speed you up in WebGL, there isn't much of a difference on canvas.

[nonamedude]

I see. Thanks!

Is there a way to optimize repeat animations? (For example if I am always moving a circle from left to right at 10 pixels per second)

[SolarJS]

You can batch sprite when being in canvas mode by using sprite atlases. This way your whole texture is uploaded into the GPU (when the browsers optimizes your code) and does not cause state changes when showing sprites. However, if you don't, each time you blit a new sprites from a different image file a state change is initiated. This brings the GPU in some kind of wait mode (you don't want this). So, when ever possible, use sprite atlases to get a chance to reach 60fps on mobile too.

[nonamedude]

What do you mean by sprite atlases?. Do you mean using the Sprite Sheet Loader or are you referring to something else?

[SolarJS]

Yes, you should use the sprite-sheet. If somehow possible, try to package all your sprites in one sprite-sheet, or at least in as less as possible. Also note, that some older iOS devices do not accept sprite-sheets bigger than 1024x1024. A solution might be to have different sprit- sheets for different devices. For example, if needed, you have multiple 1024x1024 on iOS (since those devices are mostly also faster it shouldn't cause a lack in performance) and for android go ahead with a single 2048x2048 sheet. I hope that helps.