Reset the screen without calling background()

alextheinfinite

Hello,

I am making a GUI for a game, and I encountered some performance issues when animating buttons. I have a selector where the user can scroll through options horizontally across the screen.

The problem I am having is that each time I draw the button, the image does not disappear, so I need to reset the background. I have a saved image as the background, and images take a while to load in, so the frame rate drops significantly when the buttons are moving. I have also tried taking the center of the image, and only replacing the area where the buttons are moving, but it did not help.

Is there any way I can create an object that does not leave a trace, or a more elegant way of resetting the screen?

Thank you.

http://i.gyazo.com/d29e0cb349644925f47891f14b235423.gif http://i.gyazo.com/3aa5f69d92c1eb4238cfd96fa370e620.gif

TfGuy44

Post your code. It is impossible to see if you are doing anything wrong without it.

You say "and images take a while to load in" which troubles me. Are you using loadImage() inside draw()?

alextheinfinite

 void movePlantSelectButtonsLeft()
 {
    //Drawing background image
    loadHomeBackground();                            

    //Drawing other four buttons
    PlantBack.drawButton();                            
    confirm.drawButton();
    Left.drawButton();
    Right.drawButton();

     //Continue until second button is in the position of the first 

    if (plantArray[arrayPosition2].X > displayWidth/4)                             
    {
    //Move Second and Third Boxes

                plantArray[arrayPosition2].X -= 10;                      
                plantArray[arrayPosition3].X -= 10;

                plantArray[arrayPosition2].drawButton();               
                plantArray[arrayPosition3].drawButton();

    //Control Left Button Shrinking

                if (plantArray[arrayPosition1].Width > 20)             
                {
                  plantArray[arrayPosition1].X -= 5;
                  plantArray[arrayPosition1].Width -= 10;
                  plantArray[arrayPosition1].drawButton();
                }

     //Start growing the right button when there is enough space

     if (plantArray[arrayPosition3].X - displayWidth/10 <= displayWidth/2 + displayWidth/10)
                {
                  rectMode(CENTER);
                  fill(plantArray[arrayPosition1].R1, plantArray[arrayPosition1].G1, plantArray[arrayPosition1].B1);
                  rect(LeftTempX, displayHeight/2, LeftTempWidth, displayWidth/5); 

                  LeftTempX -= 5;
                  LeftTempWidth += 10;
                }
              } else
              {
                //Reset Values, Reorder Button Positions, and Exit Loop 

                plantArray[arrayPosition1].Width = displayWidth/5;
                plantArray[arrayPosition1].X = int(displayWidth * 0.75);

                if (arrayPosition1 == arraySize - 1)
                  arrayPosition1 = 0;
                else
                  arrayPosition1++;   

                if (arrayPosition2 == arraySize - 1)
                  arrayPosition2 = 0;
                else
                  arrayPosition2++;        

                if (arrayPosition3 == arraySize - 1)
                  arrayPosition3 = 0;
                else
                  arrayPosition3++;  

                LeftTempX = int(displayWidth * 0.75 + displayWidth/10);
                LeftTempWidth = 0;

                loadHomeBackground();
                screen = "PlantSelect";
              }
            }

alextheinfinite

Sorry my code is so clunky, first time using the forums

GoToLoop

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

alextheinfinite

Thanks, I was about to post this all in google drive

alextheinfinite

I wonder if I can use PGraphics to create buttons instead of just rect(). Ill try it out and post and update.

https://processing.org/examples/creategraphics.html

alextheinfinite

PGraphics runs on a separate buffer as the main window, but the two buffers are merged together to create one display output, overwriting the background. In the end, you need to reload the background...

http://i.gyazo.com/7d763cbfacc598f6491112ff2f85ee27.gif

I think I will try to use animations, since it won't erase the background

https://processing.org/examples/animatedsprite.html

alextheinfinite

I was half-way through screenshotting each frame of my menu, when I realized I wanted to put images on each of the buttons.

I was looking at some other code on open processing, since i'm quite new to java, and programming in general. I realized that other programs had no trouble loading in images at a full 60 frames, meaning I must have a bottle neck somewhere.

You were right TfGuy244, I must have an issue with my code. I go optimize my code and come back.

alextheinfinite

It turned out that I made a very stupid mistake, and I was loading from my data file each time I drew the background. That solved my problem. I'm sorry for wasting your guy's time over such a trivial thing, and thank you.