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”?