Saturday 7 April 2012

Object Grid

When it comes to providing the graphics for our objects, we can do it one of two ways.
  • Each object can have it's own image file
  • The object can share a single large image
The original Alchemy game uses the first option
Which means each image has to be loaded individually.

We are going to use the second so that only one image is needed.

To start with, we will use a template image which shows the position of all the objects as numbers.  This allows us to test that the correct objects are being used before we put actual images in.

The image is 1024 x 1024 which are power of 2 dimensions best suited to mobile devices, and is divided into a 16 x 16 grid with squares 64 x 64 pixels.
This should provide us with 256 unique objects, however you might notice that the last four squares have been joined into one, so we are actually going to have 252 objects that are 64x64 and one that is 256x64.

Save the image to the artwork folder so we have an unedited master and save another copy to the media folder with the name objects.png.  This will be the version used by the application.

To include this image in the project, first we add a field called iconImage to the displayType definition;

type displayType
   physWidth#
   physHeight#
   virtWidth#
   virtHeight#
   iconSize#
   textHeight#
   lastFPS#
   iconImage
endtype

And add a line to load the image, as part of the set-up of the display variables

display.iconImage = SafeloadImage( "objects.png" )

Finally, we add a return function to the ones we have already at the end of the program

function IconImage()
endfunction display.iconImage

The image is now ready to use.  We can test that it has loaded ok with the following lines, just before the do command.

testSprite = createSprite( IconImage() )
setSpriteSize( testSprite , PhysWidth() , - 1)
setSpriteDepth( testSprite , DEPTH_WORK )

Which creates a test sprite using the image.

The second command sets it's width to be the physical width of the screen and uses -1 as the height value to instructs AGK to scale the height in proportion to the width.

The third command sets the depth to be the depth we have defined for the work area.

No comments:

Post a Comment