GUI with Java2d - Need help

Newbie & Debugging Questions
#1

Hello everyone! I hope this is the right place for this thread.

I need help to make a GUI for my game Alien Eyes Invasion!.

Right now I have a “GameGUI Entity” that it’s very much like any other entity in the game (the ship, the shots, the aliens). That entity has a sprite of 800x600 pixels with borders and a bottom bar for displaying the game’s info. Its center is transparent and the other entities check borders within it.
On the info bar, there is a text “Ship’s hp” and an “empty life bar” drawn on it.
Upon it, I draw 10 entities which holds “first”, “mid” and “last” health bar sprites, like this:

Picture of health bars:
First:
http://imageshack.us/thumbnmail.png
 Mid:
http://imageshack.us/thumbnmail.png
 Last:
http://imageshack.us/thumbnmail.png

Picture of how the GUI it is right now:

http://img59.imageshack.us/img59/6678/gamegui.th.gif

Picture of the game running (showing the health bar with some hits, allowing to see the empty effect):

http://img842.imageshack.us/img842/5748/gameplayd.th.png

The health bar is held in an ArrayList and depending on the Player’s hp, they are allowed to be drawn or not (boolean field on the HealthBarEntity object).

This approach lets me draw a decent game GUI and show the player’s life. But I hate it. I need help to make:

  • Game Menu window (New game, Option…)
  • In Game GUI to show Player Health, Current Level, Weapon Selected and the like.

Please point me to somewhere, I tried the search option in the forum before posting this but came to nowhere :slight_smile:

#2

I am assuming your using java2D for this, if you are that’s great because you have access to some fairly simple techniques!

I always like to separate out the game render and gui render code.

so in your game loop have something like this:
(pseudo code)

while game running

update game
render game
render gui
…
sleep

in the update method you will calculate new positions for enemies, weapons fire, and the player. As well as increase / decrease health for various entities.

in the game render method, you draw the game (obviously) what I would do is draw to a bufferedImage (that is the same size as your window) and then paint that to the window’s graphics content

finally in the gui render method, draw the gui to another bufferedImage, but this time make sure this image has alpha support

BufferedImage image = new BufferedImage(witdh, height, BufferedImage.TYPE_INT_ARGB);

then simply draw it on top of the game render.

It is a really quick solution, but I hope it gets you thinking in a good direction.

#3

zngaa, just, thanks. :-*

I’ve been thinking here at work about making the separation you mention and you just made it very clear and simple, thanks!

But about the GUI itself, I need a bit more of help:

  • First, is it ok to do it as I did? One picture loaded into the sprite field of an entity? What if I need to show some numbers, should all be entities and sprites?

  • Why do I need to make sure it has alpha support?

  • What about the game menu? Should I do it with JPanel?? How do I use custom background and buttons then? Any insight would be very much apreciated.

#4

This should be fine for your entities, if you need to show numbers just include that in their render methods

Using the way I suggested you would be drawing the game render first, then drawing an image representing the gui on top of the game render, if there isn’t alpha support on that image it will simply cover up the game render. Which is no good, you want people to see the game render, haha!

What I do is create game states, one for the menu another for the game. Something like this:
(pseudo code)
game state class

init method

put all your initialization code here, does the state need access to images (sprites) or other system files, does it need to set up any specific output settings? Put all that here

render method

put all the drawing stuff here

enter method

call this method every time your changing from ANOTHER state to this state, if any settings need to be reset, this is where that happens

leave method

call this method any time your changing from THIS state to another state

game loop

update current state
render current state
…
sleep

I modify this post later to add in some code, but I am really busy now… about an hour.

#5

Hey! Don’t you worry, this is a hobby, no need for hurry. You already done A LOT! If you want, come back tomorrow (it’s 19:00 here) :slight_smile:

I should learn about game states, because I really don’t fully understand how states work, not the methods, they are ok, but the general concept and implementation it’s what bugs me. Do states allow me to implement pause, escape to menu, and other stuffs like accessing a map?

#6

Game states allow you easily change the flow and the state of the game. This code shows how to implement Screens/States. With that, you can then call the current Screen’s update and render methods from the main class.

Also, don’t use 2 BufferedImages for game and GUI, especially since blending is slooowww using Java2D. Draw everything onto a BufferStrategy using Canvas, on 1 Graphics2D instance. If you don’t know how to use BufferStrategy, this code should be helpful.

Good luck! :slight_smile:

#7

I already told you I like you r4king, how many times do I need to repeat it :slight_smile:
Thank you very much ;D

#8

Great post ra4king.

Yeah, it’s best to do all your rendering/painting with 1 Graphics2D object. If you use 2 BufferedImage objects, every render you need to get the graphics context from both images, which could cause unneeded slowdown. Not to mention that one is alpha-enabled.

I’ve yet to try BufferStrategy out, but it sounds good.

#9

After doing some bench-marking I agree that 2 bufferedImages is slower than passing around a graphics2d object. Though having 2 images certainly made the rendering logic less complicated. But the basic premise remains the same. Game States with update and render methods.