Combining multiple sprites into one sprite

Hello. I’m just getting started in MonoGame. The first project I’m messing around with is a cardgame.

This game has three types of cards: Heroes, Monsters, and Treasure.

I have multiple .png images I made in Photoshop that make up each of the cards:

  • A background image with a border
  • A rectangle for the card title
  • A rectangle image for the card art
  • A circle image for an attack value
  • A circle image for an defense value

Different cards are built using different card parts (all cards have the background image with a border)

The Hero card has:

  • A background image with a border
  • A rectangle for the card title
  • A circle image for an attack value

The Monster card has:

  • A background image with a border
  • A rectangle for the card title
  • A circle image for an defense value

The Treasure card has:

  • A background image with a border
  • A rectangle image for the card art

I have the building part done, and I can create each of the types of cards.

My issue is that I now want to incorporate drag-and-drop. I can figure out how to move all components of a card when one component is moved, but that doesn’t seem efficient. And there will be a lot of cards on the screen, and eventually they will be more complicated.

So is there a way to build each of these types of cards, with all the individual parts, and then “save” each completed card as a new, single sprite? That way when I click on any part of the card, the entire image moves.

I can guarantee you that this will not be an issue on performance. Do it this way, because it’s way easier.

I’ll answer your question for completeness. Instead of drawing to the screen, you can draw to a RenderTarget2D (which is just a Texture2D that you can draw to really). So you’d create a RenderTarget2D and draw a complete card to it. To set the RenderTarget2D as the target of draw calls use GraphicsDevice.SetRenderTarget. To reset it so you draw to the screen call GraphicsDevice.SetRenderTarget(null). If you care about performance, you’d want to combine all your cards in a single RenderTarget2D, that way SpriteBatch can combine (or batch) all draw calls and send them to the GPU in 1 go. If you have different textures the draw calls are sent to the GPU seperately and performance will suffer.

Thanks! I got it working.

Quick question: I know you’re not supposed to draw stuff outside of Draw(), or load stuff outside of Load(), but is it ok to create another class, and then create a method called CreateCard() that does the drawing to the renderTarget via spriteBatch.Begin()…spriteBatch.End(), and then call CreateCard() from Draw()?

Yes that’s would work fine in fact that is a very good way to organise your code.

Also as for loading content many games will do this outside the load content function. For example loading a level. The load content function is generally for initial loading but as soon as you get lots of content(load load times) you will probably want to load it in a separate thread.

1 Like

Another way of doing the above is to implement some kind of ‘container’ class that is a sprite that can have other sprites added to it. In my libraries I call this a ‘scene’ and it gets used all the time.

So all the sub-sprites are drawn relative to the location of the containing sprite or ‘scene’. You can nest these as much as you want because a ‘scene’ is also a ‘sprite’ so you can add scenes containing other scenes to a base scene etc etc.

I tend to use the offscreen rendering method for complex groups that are static (or need to be rendered with a shader) and the scene method for simpler groups of for groups where I want each sprite to move relative to the container (or animate) each frame.