Jump to content
  • Advertisement
Sign in to follow this  
FirstStep

Breakout Animation for bricks.

This topic is 850 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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()
}

I tried putting a timer on the brick class but none of them seem to work since you have to call the brick.render in the gameclass. Meaning even if I give them a timer, you wont see the difference on rendering as it is so fast and the interval for each bricks will be like a milliseconds. Any idea how to make a brick render right after another brick finished rendering using a list?

 

Share this post


Link to post
Share on other sites
Advertisement

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();
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Should be the the brick will be rendered from left to right top to bottom. Something like that. Any ideas?

Edited by FirstStep

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by FirstStep

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!