Skip to main content

User login

What is OpenID?
  • Log in using OpenID
  • Cancel OpenID login
  • Create new account
  • Request new password
Register
  • Home
  • Browse
    • 2D Art
    • 3D Art
    • Concept Art
    • Textures
    • Music
    • Sound Effects
    • Documents
    • Featured Tutorials
  • Submit Art
  • Collect
    • My Collections
    • Art Collections
  • Forums
  • FAQ
  • Leaderboards
    • All Time
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
    • Weekly
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
  • ❤ Donate
2D Art

Working with PNG, Noob

anchorbricks
Tuesday, April 23, 2019 - 17:06
anchorbricks's picture

 

Howdy everyone,

I'm a beginner and so I thank you in advance for your patience. Please pardon me also if I am posting this topic in the wrong location.

In a similar vein to this topic: https://opengameart.org/forumtopic/merging-two-sprites-png-files , I was curious how best to work with png files.

Specifically I have a png sheet that is 272 X 1040, (Buch's and Rubber Duck's wonderful colony pack) and is full of all sorts of differently sized objects. I don't know what method or program I should use to determine the dimensions of a given object on the sheet. I was also curious if I should just start chopping it up, though this seems a bit inefficient, and if so, again what program I should use to do so.

I am working with the engine Orx, and my desire is to specify x by y coordinates to pull a texture from the png sheet to an object in my project. I don't mind sectioning off the file into smaller pieces, but I was hoping to avoid breaking each piece down individually from the sheet. Furthermore, if I were to do either of these things, I'm unsure what tool to use to identify and establish a standard pixel size that I can feed into my project.

Any help is much appreciated, and I offer my thanks again!

  • Log in or register to post comments
MedicineStorm
joined 12 years 10 months ago
Tuesday, April 23, 2019 - 23:18
MedicineStorm's picture

As mentioned in that other tread, I usually use GIMP, though Piskel also does well. It would help us understand what you're trying to accomplish if you would attach the spritesheet you're working with to this topic thread.

--Medicine Storm

 

  • Log in or register to post comments
anchorbricks
joined 6 years 2 months ago
Wednesday, April 24, 2019 - 07:23
anchorbricks's picture

Thank you MedicineStorm, for your reply.

Thank you for your recommendations on some tools I should investigate.

Here is the sheet I wish to work with.

 

 

Attachments: 
Preview
colony-other-ready.png colony-other-ready.png 39.5 Kb [8 download(s)]
  • Log in or register to post comments
MedicineStorm
joined 12 years 10 months ago
Wednesday, April 24, 2019 - 08:08
MedicineStorm's picture

The sprite dimensions for this sheet are not grid-aligned. They appear to be 16x16, but separate sections have different offsets, which makes this more of a "sprite-atlas" rather than a spritesheet. Can you tell me where this came from?

--Medicine Storm

 

  • Log in or register to post comments
anchorbricks
joined 6 years 2 months ago
Wednesday, April 24, 2019 - 08:37
anchorbricks's picture

Thank you again, for your quick reply. I downloaded this from this site. Here is the link:

https://opengameart.org/content/colony-sim-extended-version

I am also interested in working with the original:

https://opengameart.org/content/colony-sim-assets

  • Log in or register to post comments
MedicineStorm
joined 12 years 10 months ago
Wednesday, April 24, 2019 - 09:10
MedicineStorm's picture

Ah, looks like rubberduck set them up so the overflowing tiles are adjacent. I was wrong about the offsets. It's a 16x16 spritesheet with some tiles having overflow. So, here's how to split them out into individual tiles:

  1. open https://www.piskelapp.com
  2. click the "create sprite" button in the upper-right corner
  3. cick the folder icon "Import" along the right side
  4. click the "browse images" button beneath "Import from picture"
  5. navigate to your local copy of colony-other-ready.png and select/open it.
  6. on the Import and Merge dialog, select "Import as Spritesheet"
  7. enter a frame size of 16x16 with an offset of 0x0
  8. click "import"
  9. "This will replace your current animation. Are you sure you want to continue?" Yes.
  10. click the mountain icon "Export" along the right side.
  11. on the export dialog, find the [ Gif | PNG | Zip | Others ] tabs, select the "Zip" tab.
  12. click on the "Download ZIP" button at the bottom of the dialog.
  13. save your zip file somewhere you'll remember, then open and extract all the individual sprites!

--Medicine Storm

 

  • Log in or register to post comments
anchorbricks
joined 6 years 2 months ago
Wednesday, April 24, 2019 - 09:16
anchorbricks's picture

Hell yes! Thank you so very much for helping me reach an appropriate solution! I appreciate your guidance.

 

May I ask, how might I best source the frame size and offset, if they are not explicit, in the future? 

 

 

  • Log in or register to post comments
anchorbricks
joined 6 years 2 months ago
Wednesday, April 24, 2019 - 09:32
anchorbricks's picture

Just tested the process out that you detailed, and it worked quite well. Thank you.

I suppose I can apply a similar technique to pick out larger or smaller "cuts" of the sprites?

  • Log in or register to post comments
MedicineStorm
joined 12 years 10 months ago
Wednesday, April 24, 2019 - 09:39
MedicineStorm's picture

Yes, that method should work for other dimensions just as well. Simply change the values you're entering on step 7. :)

As for how to determine the frame size and offset... Rubberduck explicitly listed 16x16 in the tags for this one, but it's not always so easy.

  • Usually I'll pick a tile in the spritesheet with a clear border (for example, the trusses at 160,80)
  • Open the spritesheet in GIMP.
  • Menu bar > View > Show grid
  • Menu bar > Image > Configure Grid
  • Then I start adjusting the grid width and height until the grid lines seem to line up with the tiles, paying special attention to the tile I picked out earlier.

It involves some guesswork, but this method works pretty fast for me. Most spritesheets have dimensions in powers of 2, so 16x16, 32x32, 64x64 are pretty common. Often the width and height are mixed and matched, though: 16x32, 32x48. On the other hand, there's no rule that says sprites MUST be powers of two, so you'll sometimes encouter sprites with strange dimensions like 21x33. Other times, the graphics is set to conserve as much room as possible, so the sprites are not arranged in a grid (sprite-atlas) but in wherever they will fit. 

For example, this pixel dungeon spritesheet (below) has sprites in multiple sizes (16x16, 14x20, 32x32, 35x35, etc) In these cases, no amount of grid tweaking will properly slice all the sprites. Some tools like Unity have texture atlas tools that help auto-slicing the atlas, but other than that, there isn't a good easy way to do it with atlases. Just open it in gimp and start manually cutting each sprite out.

Fortunately, in this example, Zombietom uploaded all of watabou's individual spritesheets in a zip file as well, so there is no need to slice this one image manually: https://opengameart.org/content/pixel-dungeon-graphics-by-watabou

--Medicine Storm

 

  • Log in or register to post comments
anchorbricks
joined 6 years 2 months ago
Wednesday, April 24, 2019 - 09:49
anchorbricks's picture

Thank you again for your time and guidance. Thank you for walking me through some more of the details and your process.

Hopefully, I will be able to return with better questions in the future.

Again, much obliged.

  • Log in or register to post comments