Revamping my GUI to be more efficient and less brute

Question

I am building a Java game from scratch right now. So far, it runs fine, but the issue is with my GUI and how it works. Basically, it's a tile-based game. Each time the person moves a different image is displayed (basically I check to see what terrain they are on, and in what direction they moved then update that tile's Imageicon). I feel like it is a lot of brute force graphic work and I was wondering if anyone here could help me find a simpler method or class to preform the action. I use ImageIcons to basically make the game's GUI function right now. I was thinking about finding a way to have "layers", so I could have the terrain in the background and my person could just walk over it. Unless someone has a better idea.

Another long-term goal is to make the walk movement an animation. Right now, the person just pops over 1 tile, I want to implement some basic walking animation for that movement of tile to tile. I feel like that would be easier to do if I had a way make the person be a separate object compared to the terrain/map.

Any suggestions on how to do this would be very helpful! :)

IMAGE REQUEST: Here is an older and later dated image of one region. Basically, I have a tile (ImageIcon) for each possible instance of where the hero is, and which way he is facing. But as stated, I want to get rid of that because it requires soooo much. There has to be an easier way to overlap the person and allow animation to each tile.

Answer 1

OK, i hope you don't try to market your game with the current obvious copyright issues.

Aside from that if I understand your problem your hero sprite has a background of every combination of background. In response I will say all you need to do is render top to bottom of your view port and make sure the hero has a transparent background.

As for the UI you could also draw it onto the map in a separate layer above the map making it able to be slightly transparent and any other effects.

EDIT

Since your player is a single cell in size it would be easy to render your grid like you are doing then simply render the player afterwards with a transparent background to ensure that what the play is standing on is seen.

A more advanced way is to render in layers in such a way that your player can walk behind backs of buildings and trees.

To do this you will need to multiple passes of rendering for example one way could be

1. Render the ground information, in your current map you have grass and water etc.
2. Render the tiles that cant be passed through sprites such as bottom part of buildings and bottoms of trees and your bushes.
3. Render the player on top of all that.
4. Render the tops of buildings and tree, this will allow a player to be rendered behind the tops of objects.
5. Finally render your UI layer with buttons etc (these will be drawn and the click handled by you not java).

The advantage to doing 1 and 2 separately comes into play when you want different ground textures for example, rocky grass, desert. by having transparency on all objects backgrounds it will allow the background through for example your bushes could be rendered on desert or grass with no extra images.

Remember tho to render all of this to an off screen image and then display the image after completions as it will ensure your frame rate don't drop to the increase in rendering.

If I haven't understood your question please clarify and i will update my answer.