Performance problem rendering 30.000 shapes

[danideluxe]

Hi guys,

I'm developing an app which has to show over 30.000 shape objects on screen.
All shapes are like rectangles and the final result seems a huge code bar.

To create all shapes the app takes about 10 seconds. After this creation phase, begins the process of showing that objects on screen. This process is scheduled by a timer which triggers the function responsable of adding childs and update screen via updateAfterEvent. 30.000 shapes are broken into segments of shapes. The number of shapes included in each segment is fixed by "pasoMums" parameter.
Rendering process works fine with first segments of shapes. For example, it renders pasoMums shapes, then the function is trigered again and it adds to the screen another segment of pasoMums shapes, and so on. Each render takes about 0.5 seconds.
The problem is that performance goes lower and lower after a number of iterations. It takes TOO MUCH time to render. Why first shape rendering phases works fast and after some of them, that rendering process works slow ? How can it be solved ?

Her is the code:



// ...
// Planificación de displaying
// Contadores
var mumInicial:uint = 0;
var mumFinal:uint = totalMums;
var pasoMum:uint = 5;
var mumActual:uint = mumInicial;
var mumFinalParcial:uint = mumActual + pasoMum;

stage.frameRate = 1;

var timer:Timer = new Timer( 50, 0 );
timer.start();
timer.addEventListener( TimerEvent.TIMER, timerListener );

function timerListener( e:TimerEvent ):void {

for( mumActual; mumActual < mumFinalParcial; mumActual++ ) {

canvas.addChild( mums[mumActual].getMumShape() );
}

trace( mumActual );

if( mumActual < mumFinal ) {

mumFinalParcial = mumActual + pasoMum;
if( mumFinalParcial > mumFinal ) {

mumFinalParcial = mumFinal;
}
}
else { // mumActual = mumFinal

// Detener Timer
timer.stop();

// Liberar variables y objetos innecesarios
mumInicial = 0;
mumFinal = 0;
pasoMum = 0;
mumActual = 0;
mumFinalParcial = 0;
}

addChild( canvas );
e.updateAfterEvent();
}
// ...


Thanks by interest !

[Padaxes]

Are you getting rid of the previously drawn shapes at all ? Or are you displying more and more objects on screen ? If so that will obviously destroy your frame rate.

[FizixMan]

If I read this correctly, are you adding 30,000 objects/display objects?

Maybe you can try instead having a single display object/drawing layer, then use lineTo/fill methods to draw each object to the single layer then calling the clear() method between renders.

[danideluxe]

Are you getting rid of the previously drawn shapes at all ? Or are you displying more and more objects on screen ? If so that will obviously destroy your frame rate.

I'm adding objects to screen in segments of N objects. I mean each object is added by addChild to canvas Sprite. When this Sprite contains N number of shapes that are displayed onto the screen: addChild( canvas ). However, adding this amount of childs seems to overload flash player and the performances goes lower and lower after having added +2,000 shapes to the screen.

[danideluxe]

If I read this correctly, are you adding 30,000 objects/display objects?

Maybe you can try instead having a single display object/drawing layer, then use lineTo/fill methods to draw each object to the single layer then calling the clear() method between renders.

Yes, you've read well !
Probably your suggestion solves my problem. Instead of this I've already solve the lag of performance. the solution consists in using draw() method of a BitmapData object where all shape data is stored. Then, a Bitmap object loads that BitmapData and it's rendered on screen. The performance has been dramatically increased.
Now all 30,000 shapes are rendered fine and fast.