Texture2D from bitmap? or better ways (Combine Football Player template with Team shirt)

1

For my game I have one png template of a “football player”, but each team has different shirt. So I have a png per team with the shirt (users can edit database and add extra teams and extra shirts).

What I thought I would do is when I load the texture2D for a football player is first, via a bitmap object, combine the png of the football player template and the png of his team and than convert that bitmap to a texture2D.

Another option I thought of was: just drawing the player & shirt seperatly each draw/update, but that looks kinda overhead and I thought it would be better to combine them first into one Texture2D.

Or am I missing something obvious to do this?

2

How would you combine? I am a newbie but I guess that combining the two images in your code (CPU land) would be more expensive than passing the two images to SpriteBatch to draw one on top of the other.

3

I think that would be GDI+ indeed, two bitmap objects… but I have to do this only once… the drawing together option is done every draw()…

4

Maybe I don’t fully understand the situation, but can’t you simply merge the texture while you are loading the game? I’m doing something similar with the maps I’m parsing from the editor: I load each layer individually, and then I merge all the static (non-parallax) layers on top of each other as one Texture2D object when I’m loading the game, and I just that one big Texture2D runtime with the spritebatch.
I imagine you have pretty small textures for your players, I don’t think it would add much to the loading time to “prepare” the new textures and just draw them from memory.

1 Like
5

Could you elaborate a bit more on how you would do “merge the two into one texture2d”, because that is exactly what I am after but I don’t know how to merge two PNG files into one texture2d

6

I see now.
When you load any PNG, you’ll get a Texture2D object. That has method called GetData() which will return you the color data as an array, something like this:

Color[] playerData = new Color[playerTexture.Width * playerTexture.Height];
playerTexture.GetData(playerData);
Color[] shirtData = new Color[shirtTexture.Width * shirtTexture.Height];
shirtTexture.GetData(shirtData);

Then simply overwrite the pixels in the playerData array with the shirtData array in the correct positions (although be careful to take only the non-transparent pixels from the shirt) and once that’s done, then you can just create a new Texture2D object to store result. Texture2D also has a SetData in which you can just pass your new Color[] array, look up how to parameterize and you’re good to go.
Just be careful, the Color[] arrays are one dimensional arrays, so if you are like me who prefers thinkign in 2D arrays when it comes to images, you might need 1D->2D index conversion.
2D to 1D conversion:

i = x + width*y;

1D to 2D conversion:

x = i % width;    // % is the "modulo operator", the remainder of i / width;
y = i / width;    // where "/" is an integer division

Do this once when you are loading the game/match and use this new Texture2D as your player texture.

3 Likes
7

I think you are over complicating it. Just draw the two textures in the right order so that the shirt overlays the player. The shirt image should have transparency in it where you want the player graphic to show through.

You could potentially use a render target to render to a texture in memory (using multiple calls to Draw similar to above) before then converting the render target to a Texture2D object but I don’t think you will gain much from this over the above suggestion. It’s certainly more complicated.

1 Like