I am trying to make an animation for breakout game where every bricks will render one after the other. It sounds simple but it is hard to me to get.

I have a list of brick object. This list will be called on loadContent to give every brick their position, color, etc. When I am on the render() of the game class.

I use foreach just like this

foreach (var brick in bricks)
 {
brick.render()
}

If I understood you correctly you want the bricks to appear with a certain delay between them.

To do this you want to add a new brick to the list of rendered each time the delay amount of time has been passed.

So basically something like this:

//each frame
if(currTime - lastTime > delay)
{
  maxRenderBricks++;
  lastTime = currTime;
}

//render loop
for(int index = 0; index < maxRenderBricks; ++index)
{
  bricks[index].render();
}

In terms of understanding how the game loop works, this might be useful: http://gameprogrammingpatterns.com/update-method.html

Instead of adding bricks to the list as they become visible, you could instead keep them all in the list like you have now, and simply have each one have a boolean variable for "visible." Then in the render call, you would choose whether to actually draw or not based on that variable. This way, each brick handles whether it draws or not. This method comes in handy in the future as well, as you get used to each class handling its own affairs. Technically, you have a bit of overhead calling those Render functions for them not to draw, but I think it is worth the organization purpose, and in this type of game it shouldn't affect anything anyway.

Instead of adding bricks to the list as they become visible, you could instead keep them all in the list like you have now, and simply have each one have a boolean variable for "visible." Then in the render call, you would choose whether to actually draw or not based on that variable. This way, each brick handles whether it draws or not. This method comes in handy in the future as well, as you get used to each class handling its own affairs. Technically, you have a bit of overhead calling those Render functions for them not to draw, but I think it is worth the organization purpose, and in this type of game it shouldn't affect anything anyway.

I have this bool variable named shown in the brick class

Problem is, The time interval for the next brick to shown

foreach (var brick in bricks)
 {
    if(timer >= 1.0f)
      brick.shown = true;
}

foreach (var brick in bricks)
 {
if(brick.shown)
    brick.render()
}

The thing here is that the first loop will iterate all over the list before getting to the next loop to render. So its the same thing that will happen. The brick will just show instantly.

Edit. This seems to work but on different way

   foreach (var brick in bricks)            {


                timer += (float)gameTime.ElapsedGameTime.TotalSeconds;
                timecounter += (int)timer;
                if (timer >= 5.0F) timer = 0F;
                if(timecounter >= 5)
                {
                    brick.shown = true;
                    timecounter = 0;
                }


                if (brick.shown)
                {
                    brick.render(gameTime);
                }
            }

Problem with this code is that it randomly shows what brick show up and not one after the next brick on its left side.

This is my level

11111111
10000001
12222221
10000001
12222221
11222211

So you have 48 bricks.

You could just use a brick counter.

Draw only 1 brick per tick.

Would take 48 ticks. You would definitely see that.

You could replace the "shown" variable inside brick with a "hiddenTimer" or something -- an initialize the timers so that the top-left one has a short timer and the bottom-right has a long timer.

When updating, decrement the hiddenTimer for each brick.

Then, when drawring, instead of "if (brick.shown)" you could do "if (brick.hiddenTimer < 0)".

You could replace the "shown" variable inside brick with a "hiddenTimer" or something -- an initialize the timers so that the top-left one has a short timer and the bottom-right has a long timer.

When updating, decrement the hiddenTimer for each brick.

Then, when drawring, instead of "if (brick.shown)" you could do "if (brick.hiddenTimer < 0)".

Oh wow oh wow oh wow. I was thinking of some complicated stuff. This trick works! All it takes is just this simple trick. Thanks..