How to render an overlay window within a Processing sketch?

Processing Coding Questions
1

Hello everyone,

I’m working on creating a (relatively) simple Pokemon-like game in Processing – but it is complex enough that there are several different screens the user can be viewing. For example, there’s a user profile screen, settings screen, Pokedex screen, Pokemon training, etc.

Switching between these “metascreens” is no problem – I simply have a global variable named screenState and assign it to a specific value corresponding to the screen being viewed. Within my draw() function, I draw all the globally consistent GUI elements first, then I have an if/else if statement based on the value of screenState that conditionally calls other functions to draw the applicable screen – so I have a drawUserProfile() function, drawPokedex(), drawTrainingScreen(), etc.

The problem I’m running into is that I’d like to be able to draw popup windows within the various screens as well. Specifically, if you’re on the training screen and you level up a crit, I want to have a smaller “window” (a rect filled w a background color and other graphics drawn on top of that) be drawn on top of everything else previously drawn for the training screen. I tried my same method from above, by creating a trainingScreenState variable, which would equal 0 if no overlay window should be shown and 1 if it should be shown. In my drawTrainingScreen() function, I have all the code to draw the user’s various crits before my conditional statement about trainingScreenState, because I want the smaller overlay window to appear to be on top of (or in front of) the larger training window.

This works, in that my sketch successfully displays my “you leveled up” rectangle when it should, but the problem is that anything previously drawn on the training screen is visible through this rectangle. Other button outlines and text will show through the rectangle unless the rectangle is black. I also tried drawing a black rectangle first and then drawing all the components for my popup window on top of that (hoping that the black rectangle could function like a sort of localized background(0) for only the area of the popup window), but it’s still not cleanly sitting on top of the other elements, some things (black & darker colors) are showing through the popup window elements.

I’m confused because in my drawTrainingScreen() function, all the code drawing what should be the “underneath” elements is at the top of the function, and then it calls the drawOverlayWindow() function at the bottom. So why doesn’t it just draw everything within the drawOverlayWindow() function on top of everything else?

Am I misunderstanding something about Processing’s program flow? Is there an easy way to tell Processing, “draw all of these things on TOP OF everything else on the screen”?

2

Hi @benvining

Please check processing examples, examples -> Demos -> Tests ->MultipleWindows

Is this what you are looking for?
Best regards

3

@MiguelSanches no, I don’t want to create an actual SYSTEM popup window, I’m trying to draw my own custom GUI “window” within my Processing sketch by drawing a rectangle on top of everything else being displayed.

4

Do you draw the pop-up rectangle last? Last in the draw() function I mean. Otherwise other stuff can be drawn “on top of” (after) it.

5

It sounds like a complex question to answer without the code or visual examples!

In general, when having to draw multiple elements over each other, I would recommend giving each element a Z index, and then in your draw loop you draw everything in the order of Z from low to high.

This way you can easily adjust the ‘height’ of an element later on by changing the Z.

6

I agree with @raron, depeding on the order that you have your objects being drawn, they will appear on top of other drawn elements.
Further, it will also depend on the elements and libraries that you are using. Some libraries, like the controlP5, draws objects always on top of everything, so you would need to set them to hide.
But to better understanding the problem, we would need some examples of your code to replicate the problem, as @Hapiel said.

Maybe a piece of advice would be to create a page menu, something like:

void draw(){
   draw_page(int page_number);
}

void draw_page(int page){
  switch(page){
     case 0:
           //place code here to draw what you want on page 0
           break;
     case 1:
           //place code here to draw what you want on page 1
           break;
  }
}

Then, you can set which page you are and switch between user interface windows using the same main sketch window. Hope it helps

1 Like