jump to navigation

TexturePacker XNA Content Pipeline Extension August 2, 2012

Posted by Jesse in : Game Development , trackback

TexturePacker is pretty awesome.

The next St. Louis game jam will take place this coming weekend, so I’ve been going through and cleaning up some of my base code. I haven’t seen an XNA content pipeline loader for TexturePacker atlases, so I decided to share mine.

ThirdPartyNinjas.XnaUtility.1.0.zip

There’s a simple test included, and it shows how to load a texture atlas, look up a texture in the atlas, and render that texture using a few different origin options.

If you have trimming turned on, using the origin options can make things easier. There are four main options:

  1. TextureRegion.OriginTopLeft. This will draw/rotate around the original (pre-trimmed) top-left.
  2. TextureRegion.OriginBottomRight. The original bottom-right.
  3. TextureRegion.Center. The original center.
  4. Calculate your own origin using Width and Height in TextureRegion.Bounds.

A few things to keep in mind:

  1. While the loader supports rotated sprites if you choose that option in TexturePacker, the XNA SpriteBatch doesn’t easily support UV rotations so you’ll need to do extra work.
  2. By default, TexturePacker will name the texture and atlas with the same base filename. (i.e. foo.png and foo.xml) You’ll need to change that, or change the asset name of one of them to prevent a filename collision at build time.
  3. The content importer supports either the JSON-Array or Generic XML export options in TexturePacker.
  4. I didn’t put any sort of license notice in the source, but feel free to use it however you want. Not attribution or acknowledgement required. (If you need a specific license or info, let me know.)

Yell if you have any problems.

Comments»

1. AndreasLoew - August 2, 2012

Nice! I’ll link to it from my tutorials page.

2. GravitySoul - February 3, 2013

Hi, I don’t have the opportunity to check any codes as I’m responsible for the drawings and don’t have visual studio or XNA- how does it work and is there anything I should keep in my mind? I figured if this is a nice option, one might as well try to use it. How is it possible to load different sprite sheets (like character walking, or jumping) from one file? It’s really hard to comprehend.

3. Jesse - February 3, 2013

Rather than using different sprite sheets for running and jumping, you can use a tool like TexturePacker to combine all of the individual frames down to a single sheet. In fact, if you have a small enough game, you can fit all of the graphics for the game into a single sheet. (That’s what we did with Hypership Out of Control for iOS.)

There’s even some easy way to automate sprite sheet generation for your programmer. I recommend the tutorials on the TexturePacker site: http://www.codeandweb.com/texturepacker

The code I’ve shared here is just a way to load the sprite sheets exported from TexturePacker into a game written with XNA.

4. GravitySoul - February 4, 2013

I see, thank you. I’ll take a look at your recommended website. Also, thank you for the fast reply. Anything that can be of any help, I’m grateful for- I’d rather know of it than not.

Your example code here may anyway pose as a good resource if the programmers agree to using TexturePacker.

5. John - July 15, 2013

Just out of curiosity, can this work with Monogame (a cross platform implementation of XNA) without changing any code?

6. Jesse - July 17, 2013

I’m actually not sure. Did they add the Content Pipeline to Monogame?

If not, you can easily use the XML or JSON loading code to create a runtime loader, but that would involve messing with the code.

7. Tyler - August 7, 2013

Firstly, thank you so much for saving me all this trouble.

Secondly, I’m a little confused as to how to calculate my own origin. Just to be clear, I am able to pass an origin point to the Draw() method, and the bounds will still make it draw correctly?

E.G. My sprites contain effects on the character, so the original center of the sprite isn’t where I want it to be drawn. There’s fire coming off of the left arm, so the technical center of the sprite is the left half of his body, but I need to draw it based on the center of his body, because the other sprites don’t have that extra fire.

So, to make it simple,
1. How do I define my own ‘Center’ point for the sprite?
2. Do I need to change anything else in the Draw() method, or can I just pass region.myCenter instead of region.OriginCenter?

8. Jesse - August 9, 2013

Tyler – Sorry for the delay, it’s been awhile since I’ve looked at this code. Here’s what I’d do:

Define your origin in the range of 0-1, where 0 in X is the left side, and 1 is the right side. (And Y works the same way.)

Then you can use:
newOrigin.X = MathHelper.Lerp(region.OriginTopLeft.X, region.OriginBottomRight.X, myOrigin.X);

Does that make sense?

9. Tyler - August 12, 2013

Yes, that makes sense. Thank you for the help! ๐Ÿ™‚

10. Mark - November 29, 2013

Hi Tyler – content extension looks very good. Are there any restrictions on using it in projects (in this case one on google-code)

Thanks.

11. Jesse - November 29, 2013

Mark – Yep, use the code how ever you like. I’m glad it’s useful to you. ๐Ÿ™‚

12. Mark - November 29, 2013

oops Jesse – sorry , read the wrong post name. Thankyou!

13. John - February 17, 2014

Hey I took your code and created a mongame PCL for it. I know you said it is free to use but I wanted to see if you minded if I did a post explaining it and how to use it.

14. Jesse - February 17, 2014

No, I don’t mind at all. That’s awesome!

If you don’t mind, hit me with a link when you write your post. ๐Ÿ™‚

15. Diego - March 12, 2014

Hi!
Im a software developer venturing on game development with XNA!

I want to do a game like “pixel dungeon*” but with different scenarios!

what i am doing now is drawning all the scenario in one PNG and drawning the same scenario just with colors, that i use to check collisions and events triggered by the position of the char, like a button on the floor for example.

i dont know if this model is the best, have some tips for me?
and for cross-plataform, monogame with xamarin is a good option?

*pixel dungeon:
https://play.google.com/store/apps/details?id=com.watabou.pixeldungeon

thank you very much!!
nice blog and sorry for the misspelling english!! ๐Ÿ™‚

16. Jesse - March 12, 2014

Generally, these sort of games are built on tile-based engines, where the maps are composed of small square tiles, rather than one big image per level. Tiled (http://www.mapeditor.org/) is very commonly used (I used it for Bluebones’ Curse) so I’d recommend you look into that.

As for Monogame/Xamarin, I haven’t ever published anything made with XNA on any platform but XBLIG, so I can’t offer you much advice. If you’re going to use Mac/Linux, from what I’ve read you should start with Ethan Lee’s Monogame branch. (https://github.com/flibitijibibo/MonoGame)

Good luck!

17. Diego - March 12, 2014

Hi! Thank you for the quick answer!! and for the tips too! i’ll take a look on Map Editor!

Thank you!!

18. zecmo - July 17, 2014

i think you guys have saved my life.
i was down to my last 3.

19. zecmo - July 17, 2014

thanks a bunch for this post.

20. click vร o ?รขy - December 26, 2016

An intriguing discussion is worth comment. I believe that you ought to
write more about this subject, it might not be a taboo subject but typically folks don’t talk about these subjects.
To the next! Kind regards!!