# Non square Spritesheets S4P

**URL:** https://discourse.processing.org/t/non-square-spritesheets-s4p/12369
**Category:** Libraries
**Created:** [June 29, 2019, 1:41am UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369 "2019-06-29T01:41:32Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)
#### Post date: [June 29, 2019, 1:41am UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/1 "2019-06-29T01:41:32Z")

</div>

Given a sprite-sheet which doesn’t have sprites placed out in a square form, what precaution could one take to load it in properly. As I am finding an issue that the sprite-sheet isn’t being ‘cut-up’ properly and the sprites are not displayed effectively.

 ![Player](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/249e93b9c9ebb71ac84b9bce232f02ce435c6354.png)

---

<div class="post-metadata">

### Author: ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)
#### Post date: [June 29, 2019, 12:54pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/2 "2019-06-29T12:54:05Z")

</div>

I have a txt with the position of eachSprite but I do not see anyway to be able to load this up into S4P does it feature this functionality ?

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 29, 2019, 1:15pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/3 "2019-06-29T13:15:29Z")

</div>

S4P assumes sprite sheets have sprites all the same size and tiled without any gaps.

I would be prepared to add a new S4P feature that would accept an ASCII file containing the sprites position and size. The problem is the format of the sprite position/ size metadata, I would think either XML or JSON what do others think.

---

<div class="post-metadata">

### Author: ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)
#### Post date: [June 29, 2019, 1:49pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/4 "2019-06-29T13:49:08Z")

</div>

I would love that ! Many SpriteSheets online assume you have some kind of loader for position of each one or a parser like I’m unity. Like for example on OpemGameArt so many are irregular spritesheets and it just a pain. I really don’t want to be loading every single individual frame that just a pain ! Maybe I should switch this project into unity ? But so started it off in Processing as I wanted to prove / build my own little game engine. To be featured with Processing. Going have to see then I guess. Thank you @quark either way !

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 29, 2019, 2:15pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/5 "2019-06-29T14:15:39Z")

</div>

I just did a google on unity sprite metadata and I suspect it uses its own unity-specific format for storing this data and probably has its own utility function to allow users to create this data.

The first step is to define the file format and the metadata used to describe a sprite. As I said I would use XML or JSON which is likely to be best?

Personally I would probably go for JSON but that might not be the best option.

So if you or anyone else has any ideas on how this feature would be implemented please chip in. 😃

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 29, 2019, 2:34pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/6 "2019-06-29T14:34:28Z")

</div>

> [@quark](#):
>
> So if you or anyone else has any ideas on how this feature would be implemented please chip in.

Perhaps you should pick an already existing format used by other spritesheet libraries.

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 29, 2019, 2:50pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/7 "2019-06-29T14:50:53Z")

</div>

> [@GoToLoop](#):
>
> Perhaps you should pick an already existing format used by other spritesheet libraries.

Good point - that was why I looked at Unity because the OP mentioned it.

I didn’t make it clear but I was looking to see if anyone was aware of any standard format for this type of data.

To take GoToLoop’s suggestion further is anyone familiar with any sprite library that uses text files to define sprite sheet metadata.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 29, 2019, 9:39pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/8 "2019-06-29T21:39:08Z")

</div>

+10 for offering to add useful features to a library.

Possibly of interest:

Atlas files and json:

[https://phasereditor2d.com/docs/texture-packer.html](https://phasereditor2d.com/docs/texture-packer.html)

Looks like until recently a no-dominant standard problem.

> **[Open sprite sheet metadata format](https://opengameart.org/forumtopic/open-sprite-sheet-metadata-format)**
>
> I wanted to run an idea past the community here to get some feedback and see if this is something that would be useful to both artists and developers. Problem: There are tools for creating, packing, and exporting sprite sheets but no common format...

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 30, 2019, 8:21am UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/9 "2019-06-30T08:21:31Z")

</div>

For this feature to be useful we need a tool to generate the metadata files because creating them by hand would be \*\*\*\*. The atlas files seem promising I will have to investigate further.

In the past I have used GIMP to copy and paste from a spritesheet into a new graphics.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 30, 2019, 4:05pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/10 "2019-06-30T16:05:25Z")

</div>

I think (?) that the TexturePacker software is one popular way of managing this kind of metadata without hand-typing json values.

There is a great simple online tool for doing the basics of packaging irregular sprites with metadata – it is drag and drop, and uses a space packing algorithm. You drag files (of any irregular dimensions) into the window, and it does rectangle packing to try to create a compact, vertical, or horizontal sheet. You can also tweak the coordinates of individual files. Here it is:

> **[Sprite Sheet Packer - A free alternative to TexturePacker](https://www.codeandweb.com/free-sprite-sheet-packer)**
>
> This is a free online sprite sheet packer - an easy to use application to make css sprites and sprite sheets for Phaser 3. No installation required.

I believe it is hosted by the TexturePacker creators.

Then you select the data format setting (e.g. json) and click the button to download a metadata file (“json”) alongside the resulting spritesheet image (“png”).

Here is the json that it generates:

 ![TexturePacker_Online_screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d99c3b28810d7853165b954d7303f19d28d8d931.png)

```auto
{
	"frames": {
		"RunRight01.png": {
			"frame": {
				"x": 1,
				"y": 1,
				"w": 128,
				"h": 128
			},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {
				"x": 0,
				"y": 0,
				"w": 128,
				"h": 128
			},
			"sourceSize": {
				"w": 128,
				"h": 128
			}
		},
		"RunRight02.png": {
			"frame": {
				"x": 131,
				"y": 1,
				"w": 128,
				"h": 128
			},
			"rotated": false,
			"trimmed": false,
			"spriteSourceSize": {
				"x": 0,
				"y": 0,
				"w": 128,
				"h": 128
			},
			"sourceSize": {
				"w": 128,
				"h": 128
			}
		}
	},
	"meta": {
		"app": "http://www.codeandweb.com/texturepacker",
		"version": "1.0",
		"image": "spritesheet.png",
		"format": "RGBA8888",
		"size": {
			"w": 260,
			"h": 130
		},
		"scale": "1"
	}
}

```

I’m not sure that I understand rotated, trimmed, or scale – which are included but I don’t think can be set using the web interface – but most of it is pretty self-explanatory, and I believe the point is that it is a set of basic metadata features that are TexturePacker compatible. Global sheet metadata is in “meta” at the end. Documentation for the full software (not the quick web tool) is here:

> **[Texture Atlas Settings](https://www.codeandweb.com/texturepacker/documentation/texture-settings)**
>
> TexturePacker Documentation: Texture atlas settings, sprite packing, padding, optimization, removing artifacts, compression.

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 30, 2019, 4:13pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/11 "2019-06-30T16:13:44Z")

</div>

@jeremydouglass that looks great and as you say I would need to investigate the various TexturePacker metadata tags.

@InferNova please try out th “Free Sprite Sheet Packer” and / or Texture Packer and see what you think as a tool to create the text file. If it is OK then using the TexturePacker format is the way to go.

---

<div class="post-metadata">

### Author: ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)
#### Post date: [June 30, 2019, 8:03pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/12 "2019-06-30T20:03:08Z")

</div>

I have used this to generate the text file. The issue for me was how do I translate it with S4P it be nice to build that you load in the txt and S4P will keep track of the co-ords of each box.

---

<div class="post-metadata">

### Author: ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)
#### Post date: [June 30, 2019, 8:07pm UTC](https://discourse.processing.org/t/non-square-spritesheets-s4p/12369/13 "2019-06-30T20:07:24Z")

</div>

And as for what data type I would propose CSV. Each frame just stored with their X and Y and height and width.

I am gonna see if I can cook up something maybe that could be added to S4P ? Is there a github that I could post a request on with my code for S4P ?
