Monday, 23 April 2012

"Asset Creation" explained

This is not an amendment to the previous asset creation posts. I realise from your collective feedback that I was doing a pretty crap job of communicating (sorry about that) so I'm going to try to explain things more clearly.

Basically when we put sprites into the game the way it works is it reads that image file in a vertical order at a set height and width. So take this example: This is what the entire file looks like.


You could tell it to divide the file up into 128 by 128 pixel "rectangles", resulting in this output:



It only reads from the top left hand corner in the y direction, but you can offset it in the x direction by adding the width to the default value (which is 0). Here is an example of the output of a 32 by 64 pixel rectangle offset by (1 x width) in the x direction:


Since I'm offsetting using the width rather than a different value each time, every graphic needs spacing at equal distances. Here is a diagram to summarise everything I've just said:



The game automatically calculates the size of the file and will apply the cropping to everything in that file equally. The best way to store images in this manner is to put similar sized images together in one file. Here is an example from the last game I made.

File ONE:


File TWO:


In that game the image file was processed horizontally. This game processes things vertically. Either way, same principle.

As you will notice from the last image, there is an awkward quantity of white space at the end, which leads me onto my next point, which is FOR CHRIST'S SAKE I'VE WRITTEN THIS SENTENCE 14 TIMES AND EVERY TIME I'VE TRIED TO EXPLAIN STUFF IT'S RESULTED IN A LONG WINDED MATHS EQUATION. ...sigh. Ok, try again.
  • Image's must fit within bn1 by bn2 pixel rectangles.
  • Similarly, file dimensions have to equal bn3 by bn4 pixels.
  • bn1 must be less than or equal to bn3.
  • bn2 must be less than or equal to bn4.
Does this make sense?

Anyway, here are some templates I made for you:


"size.psd" is the above image and has a load of stuff that is the exact size's I'm talking about when I refer to "bn". Unless we have bullets we probably won't have any 2 x 1 pixel image files, but note that the bn sequence can go in any direction. Easiest way to figure it out is just to think of the binary equivalent. (0, 1, 10, 100, 1000, 10000, 100000 etc). 

The ones called "environment template [something].psd" are for environment artwork.


Basically the light blue boxes are the size of the screen. The character will always appear on top of the "background" layer, and behind the "foreground".

Save "environment template multilayer" as png-24 and "environment template standard" as png-8 as described in the last asset creation post.

I'm going to implement a camera panning system so feel free to make the environment larger than the screen size in any direction. 

Hopefully I've done a better job explaining stuff this time round, but as usual ask questions and call me out on it if I start assuming you know something you don't or don't know something you do.

1 comment:

  1. You are a hero, this will be awesome. I'll understand it better when I can get hands on I'm sure.

    ReplyDelete