• Advertisement
  • entries
    503
  • comments
    1888
  • views
    334053

Atlasing and More on Composition

Sign in to follow this  

721 views

'lo all

Seeing as I've been talking a lot about 2d character composition, I thought I should mention.

If you're writing a 2D game, you should probably be atlasing as it is kind of a no-brainer.

I'll assume some people here don't know what image atlasing is - in a nutshell, the idea is you take all of your 2d source images, and stick them into one large image.

Now in practice this usually ends up being several large images, due to the art asset needs for non-trivial games.

How large should the images be? 2048x2048 is a good number that should cover just about any modern hardware out there.

Why atlas?

There are really no downsides to atlasing beyond the need for a bit of forethought; here are some of the benefits.

  • it reduces the number of times you switch textures in 3D rendering hardware, which is generally expensive.
  • atlasing means storing a lookup rectangle, and if you're going through that trouble already, why not clip all the whitespace from your images.
  • you can design your graphics with ample whitespace for alignment/registration; making your life easier, but knowing it gets clipped for deployment.
  • you deploy fewer files, this means fewer file opens and that can mean faster load times, especially if we're talking thousands of frames.

    Atlasing is a job for a computer

    If you're going to atlas use an atlasing tool; I can recommend Texture Packer it is a great tool to get you started.

    Texture Packer is what we used when we started Revel Immortal, but be aware we outgrew it pretty quick; as of the time of this writing Texture Packer doesn't support a concept of packing into multiple pages (not that we found at least); so if you need multiple atlas pages for your game, it might not be ideal.

    After Texture Packer, we moved on to an off-line command-line tool written by the very talented Tom Novelli, who has had a very influential hand in Revel since its HTML5 switch.

    Tom saw fit to open source this code, so you can use or re-purpose his powerful atlaser free of charge


    After that bit of toil you should end up with nice compact atlases such as this:

    atlassample.png




    Oh right, more on Character Composition...

    Per my explanation in a previous post, I decided to make a little visual aid to show how composition works:

    charcomp.png
Sign in to follow this  


9 Comments


Recommended Comments

The short answer to that is yes; having your images in a few large textures, means those textures can remain bound the the appropriate texture stage longer during the construction of the frame.  This allows effective batching.

 

 

I should also add it is just about required for using HTML5, as each induvidual image needed results in an http call, which is comparatively extremely expensive during load time.

Share this comment


Link to comment

Not having tons of graphical experience I will begin trying this out to see if my project benefits from this method. :)

Share this comment


Link to comment

You may want to check and see if your library already does this, some 2D libraries/apis or sprite libraries do, for obvious reasons.

Share this comment


Link to comment

Currently the game I am designing does not have any 2D libs or apis. They are all very small programs wrapped in a single container.

Share this comment


Link to comment

Question: On your "2D Character Composition" image, you show the different pieces being multiplied by the color for them to use. So it makes sense that they are quite reasonably grayscale images.

 

Why isn't the armor greyscale also? 

 

Also, the armor is dark bluish but has a gold belt. Multiplying the armor with a color would unfortunately change the armor's belt color as well! But, that can be avoided by making the game only multiply colors that have all R G and B color channels equal. You can have greyscale for multiplying, but anything "off-grey" or not grey wouldn't be colorized. See here for what I mean - alas, but I still can't find the original GameDev.net journal on that. =(

It didn't have much details, but I'd like to cred the original author at least once!

 

I think this idea would work especially well with your existing system.

Share this comment


Link to comment

@Servant of the Lord

 

The reason the armor isnt grey in this case, is it illustrates that you can use a detailed multi-colored piece of equipment, as long as it is multiplied with white. (not dyeable).

 

As you pointed out a straight-up multiplication will affect everything.

 

They grey-only multiplication trick is a cool idea, though sadly it can't be used to preserve bona-fide greys.

 

I may eventually implement 'spray masks' if I wish to do multiple colors per piece of equipment.  The idea is just dicing up the equipment into parts, and colorizing (or not) those components seperately.

 

This would allow highly decorative items, while still having an ability to 'spray' on a dye in certain areas.

Share this comment


Link to comment

If you read the post I linked to, you can see a clever way someone showed me to add multi-colored pieces of equipment without using 'spray masks' and without damaging any of the work you've already done or having to redo any of your existing assets (dicing up equipment is also not needed).

You just apply your dyes only to the parts of the armor that are pure grey (where all three color channels are equal, such as rgb(210,210,210)) and any non-grey parts keep their color (such as rgb(210,210,211)).

 

If you ever actually need the feature, that is. I tend to get bogged down writing alot of features I probably don't need in my development, and dragging out development longer. smile.png

Share this comment


Link to comment

Yes, I understand what you're saying.  But as I said, it still doesn't allow you to preserve grey areas that are meant to be grey.

 

Spray masks would allow for that, but it is more work; I'm also not sure how well the grey-only colorization method would work with gradients; but it would probably be fine with pixeled graphics.

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement