Combining images


is it somehow possible to combine multiple images into one image? Here are some pictures to show what I want to do:

+ =

Is this possible?

Simplest way to probably make both images transparent and overlay them on each other. Actually, just make whichever is on top transparent.

How would I overlay them in jMonkey? Which methods/class would I use?

I actually dont know, to be honest. I recommend searching through the API to look for something called a sprite. That might help.

Is this for a GUI? GUIs might have better image manipulation techniques.

Nope, it’s for character sprites. I want players to be able to customize the look of their character through combining their preferred shoes, pants, top, etc. for their character.

I suggest doing that simply with the raw image data. Just add / mix / replace the pixels in the main image.

Something like:

[snippet id=“14”]

Yep, forgot that one. Now I need a Color getPixel(int x, int y) method to get a pixelvalue from a texture so I can copy it over. Any suggestions on how to implement it?

Just loop through the array? The question is how you want to combine the images. You could just copy all pixels from image B that have no alpha value to image A to replace it, I guess thats the most used case. getPixel would basically be the same as setPixel, just combine the data that setPixel sets to a ColorRGBA.

I have one more problem. When I create a texture pixel by pixel with this class and attach the texture to a spatial, some pixels are duplicated when I look at it in a scene (some, not all).

Any idea why? I load the texture from my disk with assetManager, get the bytebuffer of the image and copy it to a byte array. Does something get wrong in this process? Or does the engine duplicate the pixels?

What do you mean by “duplicated”?

I mean that some pixels appear twice (one below or right to the original pixel).

So instead of: it looks something like this ingame:

Here the top and left line is duplicated one below/next to the original line.