Lagging issue while adding 300 or more movie Clips

[idzcoder]

Hi all,

My app requires  2500 movie clips But as the number of movie clips exceeds 400, the app starts lagging. I have tried using shapes instead of movie clip but it's almost the same.

can anybody suggest what's going wrong or how many movie clips I can add to app??

Many thanks.

[kglad]

can you benefit from using cacheAsBitmap?  that's usually the most beneficial with the least effort.

here's the full-spiel (excerpted from Flash Game Development: In a Social, Mobile and 3D World)

Greatest to Least Benefit

1.   Use stage blitting (if there is enough system memory).

2.   Use Stage3D.

3.   Use partial blitting.

4.   Use cacheAsBitmap and cacheAsBitmapMatrix with mobile devices.

5.   Explicitly disable mouse interactivity when mouse interactivity not needed.

6.   Do not use Filters.

7.   Use the most basic DisplayObject needed.

8.   Reuse Objects whenever possible.

9.   Event.ENTER_FRAME loops: Use different listeners and different listener functions applied to as few DisplayObjects as possible.

10. Use reverse for-loops and avoid do-loops and while-loops.

11. Pool Objects instead of creating and gc'ing Objects.

12. Strictly type variables whenever possible.

13. Use weak event listeners and remove listeners.

14. Replace dispatchEvents with callback functions whenever possible.

15. Explicitly stop Timers to ready for gc.

16. Stop Sounds to enable Sounds and SoundChannels to be gc'd.

Easiest to Hardest to Implement

1. Do not use Filters.
2. Always use reverse for-loops and avoid do-loops and avoid while-loops.
3. Explicitly stop Timers to ready them for gc (garbage collection).
4. Use weak event listeners and remove listeners.
5. Strictly type variables whenever possible.
6. Explicitly disable mouse interactivity when mouse interactivity not needed.
7. Replace dispatchEvents with callback functions whenever possible.
8. Stop Sounds to enable Sounds and SoundChannels to be gc'd.
9. Use the most basic DisplayObject needed.
10. Always use cacheAsBitmap and cacheAsBitmapMatrix with air apps (i.e., mobile devices).
11. Reuse Objects whenever possible.
12. Event.ENTER_FRAME loops: Use different listeners and different listener functions applied to as few DisplayObjects as possible.
13. Pool Objects instead of creating and gc'ing Objects.
14. Use partial blitting.
15. Use stage blitting.
16. Use Stage3D.

[JoãoCésar]

Hi.

2500 objects is a huge amount and will require a lot of graphical and code optimization.

You may need a framework like Starling to achieve this.

Please see this demo:

https://gamua.com/starling/first-steps/

Anyway, in what kind of situation you need all these objects? Can you give us an example?

Regards,

JC

[kglad]

no it won't.  with a decent gpu it shouldn't cause noticeable lag unless you're doing something significantly time-consuming.

billiardBalls

[JoãoCésar]

o_O

Really?!

Please give us an example with code (your link is broken).

I tried a benchmark here rotating sprites with the basic transformation properties randomized and I could only get a stable decent 60 fps with around 250 instances using the regular Display List.

[kglad]

rotation is a problem because you can't use effectively use cacheAsBitmap

billiardBalls

[JoãoCésar]

Thank you, kglad! Pretty cool!

I took the time to make a benchmark by only moving vector squares around. I could get ~60 fps with 2500 squares and ~35 with 5000 squares.

Please let me know if I can improve something in my code.

Thanks.

Link (benchmark):

animate_cc_as3_multiple_sprites

Code (FLA):

import flash.display.Sprite;
import flash.events.Event;
import flash.display.DisplayObjectContainer;
import flash.events.MouseEvent;
import net.hires.debug.Stats;
const DEGREES:Number = Math.PI / 180;
var sprites:Vector.<Square> = new Vector.<Square>();
var speed:uint = 5;
var total:uint = 2500;
function generateSquares(total:int):Vector.<Square>
{
    var vector:Vector.<Square> = new Vector.<Square>();
    for (var i:int = total; i >= 0; i--)
        vector.push(new Square());
    return vector;
}
function setSquares(vector:Vector.<Square>, container:DisplayObjectContainer):void
{
    for (var i:int = 0, total = vector.length; i < total; i++)
    {        
        vector.cacheAsBitmap = true;
        vector.mouseEnabled = false;
        vector.mouseChildren = false;
        vector.alpha = 0.1 + Math.random() * 0.1;
        vector.scaleX = vector.scaleY = 0.25 + Math.random() * 0.75;
        vector.x = -stage.stageWidth * 0.5 + Math.random() * stage.stageWidth;
        vector.y = -stage.stageHeight * 0.5 + Math.random() * stage.stageHeight;
        vector.speed = Math.random() < 0.5 ? 1 + Math.round(Math.random() * speed) : - (1 + Math.round(Math.random() * speed));
        vector.angle = Math.round(-180 + Math.random() * 180);
        container.addChild(vector);
    }
    container.visible = true;
}
function enterFrameHandler(e:Event):void
{    
    for (var i:int = sprites.length - 1; i >= 0; i--)
    {
        var square:Square = sprites;
        square.x = square.x + square.speed * Math.cos(square.angle * DEGREES);
        square.y = square.y + square.speed * Math.sin(square.angle * DEGREES);        
        if (square.x < -square.width * 0.5)
            square.x = stage.stageWidth + square.width * 0.5;                    
        else if (square.x > stage.stageWidth + square.width * 0.5)
            square.x = -square.width * 0.5;            
        if (square.y < -square.height * 0.5)
            square.y = stage.stageHeight + square.height * 0.5;                    
        else if (square.y > stage.stageHeight + square.height * 0.5)
            square.y = -square.height * 0.5;
    }
}
function clickHandler(e:MouseEvent):void
{    
    total = Math.abs(int(totalSquares.text));
    if (total == 0)
        return;
    for (var i:int = container.numChildren - 1; i >= 0; i--)
        container.removeChildAt(0);
    sprites = generateSquares(total);
    setSquares(sprites, container);    
}
function start():void
{
    addChild(new Stats());
    container.visible = false;
    container.mouseEnabled = false;
    container.mouseChildren = false;
    sprites = generateSquares(total);
    setSquares(sprites, container);
    resetButton.addEventListener(MouseEvent.CLICK, clickHandler);
    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
}
start();

Code (Square class):

package
{
    import flash.display.Sprite;
    public final class Square extends Sprite
    {
        public var speed:int;
        public var angle:int;
        public function Square()
        {
        }
    }
}

FLA download:

animate_cc_as3_multiple_sprites_benchmark.zip - Google Drive

[kglad]

there are some small things you could do but they're not likely to be significant.  this is the most important step:

vector.cacheAsBitmap = true;

but you should execute that after the transforms are complete.

[JoãoCésar]

Excellent!

I've updated the links.

Thank you!

[Colin Holgate]

stage.quality = "low"; might help.

[JoãoCésar]

Thanks, Colin!

[Robert Mc Dowell]

don't know if it can help

https://code.tutsplus.com/tutorials/actionscript-30-optimization-a-practical-example--active-11295

Starling, Greensock and others game target are useful too

[JoãoCésar]

Thank you, Robert.

I did took a look at this article.

BTW, this site is a really great resource for Animate CC (Flash) and AS3 tutorials.

[dmennenoh]

2500 is hardly anything. Just think particle system... as3 can easily handle that.

[JoãoCésar]

Nice!

Can you give us an example?

Thanks,

JC

[dmennenoh]

Google can. There are many examples of AS3 particle effects where there are tens of thousands of particles.