Best practice for creating a composite image output for Java Swing

Question

Im working on a 2d game in java swing, where a procedurally generated environment is represented by a tiled array of low-res images. Currently this is all within html tags (for line breaks) in a JLabel.

On top of this, I would like to display character sprites, which will not take up an entire tile, but will have some alpha components. In the past, in JS/html and JS/canvas, I have simply made sprite tiles with alpha channels and positioned them directly above a floor tiles, using tables and/or absolute positioning.

In java swing, however, absolute positioning (and most of html for that matter) doesn't seem to work so well.

Since a sprite will never be between/overlapping two floor tiles, the obvious solution is to make a bunch of pre-computed image files outside the game -- one for each character over each type of floor tile, however, this would scale disk space (and work) exponentially with the number of images used, and seems like it shouldn't be necessary.

From what I've seen, it looks like it should be possible to create all these images in runtime as Bufferedimages, either by pre-computing them all at startup, or making some each frame as needed.

If I can do the above, I might also be able to put all the images I need into one big bitmap each frame, and display that. This could also reduce non-synchronized loading of frames if I overload the system.

Of the above options, what seems like the best? or is there another obvious solution that I am completely missing? If the solution is to make composite images, could someone point me in the right direction as far as how to do that? Thanks a lot.

Answer 1

This topic would take entire book, but essentially, what you can do is...

Create a custom component (extending from JPanel or example), which is used to render the view of the world, how much this renders will depend on your needs, but you could render only a small subset of the overall world. This is important, because if you it's not displayed, you don't want to render it.

Within the paintComponent method of this component, you would render the various layers of the current view.

If you use png images, then this is as simple as calculating the position between the view and the virtual world and using Graphics#drawImage. If you're model is well optimised, you could even achieve this within a single rendering loop, that is, for each "tile" position, you could determine what is to be displayed within in and build up the output for each tile individually, rather then using multiple loops to renderer each layer.

Instead of rendering the entire view within the paintComponent method, you could also use a backing buffer, which is prepared offscreen, such as the ground layer, which would simply be painted as a single step in the paintComponent method, this would help increase the overall performance.

Depending on you needs, you could render more or less to this backing buffer as your needs required...

Take a look at Performing custom painting for more details

Best practices would come down to much more context about the overall engine design. From a performance point of view, the less you can paint, the faster it will become.