CODEWITHSUNDEEP
javaslick2dsprite-sheet
user1221546
user1221546

Reputation: 25

Using a sprite sheet with different sized sprites in Slick2D

I searched through the API for SpriteSheet, but I couldn't find anything on how to make a sprite sheet with different sized sprites.

The sprite sheet that I'm using has a row of 16x16px tiles, a row of 24x24px tiles under it, a row of 8x8px under that, and so on.

Originally, not using Slick2D, I used BufferedImage.getSubimage() to obtain each sprite from a temporary BufferedImage of the sprite sheet. Is there a similar method here that I can use?

Upvotes: 0

Views: 1826

Answers (2)

tom van green
tom van green

Reputation: 1734

You can just keep an Image and use an overload of the Graphics object's drawImage method to specify where to draw which part of the image:

g.drawImage(image, x1, y1, x2, y2, srcX1, srcY1, srcX2, srcY2);

See [javadoc](http://slick.cokeandcode.com/javadoc/org/newdawn/slick/Graphics.html#drawImage(org.newdawn.slick.Image, float, float, float, float, float, float, float, float))

The first parameter is the instance of the image. The next two parameter define the point on screen, where the rendering begins. X2 and y2 define the end point of the rendering. Usually x2 is x1 + spriteWidth and y2 is y1 + spriteHeight, but you can change those values to draw the sprite in different sizes. The last four parameters work the same, but they define the area of the sprite sheet, that will be drawn on screen.

If we take your example and we want to draw the second tile from the third row the call would look like this:

int tileWidth = 8;
int tileHeight = 8;
int sourceX = 40;
int sourceY = 8; //as its the sec
int drawX = 34;
int drawY = 65;
g.drawImage(image, drawX, drawY, drawX + tileWidth, drawY + tileHeight
    , sourceX, sourceY, sourceX + tileWidth, sourceY + tileHeight);

When I work with spritesheet, I have hardcoded values in some (very rare cases, mostly tests) and a sprite class, that has the source x1, x2, y1 and y2 values stored. I can pack a bunch of them in a list or a map and like that I have a sprite index. Usually I generate the definitions somehow and then serialize the list, so I can simply reload that list, if I need it.

Here is a short example of my XML definition (I store the width and height rather then the x2 and y2 values in the xml, as I find it more human readable and more convenient for manual editing. After deserialization I calculate the x2 and y1 values):

<spriteSheet imageName="buildings" name="buildings">
  <sprite name="1x2 industry 01" spriteX="0" spriteY="0" width="50" height="112"/>
  <sprite name="1x2 quarters 01" spriteX="50" spriteY="0" width="50" height="112"/>
  <sprite name="1x1 spaceport 01" spriteX="243" spriteY="112" width="51" height="56"/>
      ...
</spriteSheet>

Upvotes: 0

jefflunt
jefflunt

Reputation: 33954

I don't believe there is a way to do a direct sub-image in the current version of the API, at least at the time of this writing.

However, there are three possible options that I can think of (in addition to the option of just adding said method calls yourself - it's open source after all):

  1. You could instantiate several SpriteSheet objects from the same source Image, one for each Sprite size, if you really want to keep them in the same source file.
  2. You could take the Image instance, and call getSubImage on it to split the Image into three images, one for each size (24x24, 16x16, and so on). Then, from those sub-images, instantiate SpriteSheets.
  3. You could split the source file into separate files based on the size. That is, have your 24x24 sprite cells in one file, your 16x16 in another file, and so on.

Upvotes: 1

Related Questions