Spritesheets and atlases
krumza

Please give more info how use sprite sheets and atlases and how can it do

I try use json in WADE - but not understand how))

in TexturePackerGui utility   many formats for spritesheets - but how generate file for WADE??

All 4 Comments
Gio

Hi

The format that you want to use depends on what exactly you want to do with your aspritesheets and atlases, whether it's animations, separate sprites, separate objects etc.

In WADE an Animation is made with regular spritesheets, i.e. the size of each frame in the Animation is always the same. When adding an animation to a sprite in the editor, as soon as you specify which image you want to use, WADE can usually detect automatically how many rows and columns there are in the Animation spritesheet. You can also change these values manually (the numCells field).

In WADE you can also use a texture atlas to store multiple sprites and animations in the same texture. These sprites and animations don't need to be plaecd in any particular order inside the spritesheet, but you must tell WADE where they are. 

Assuming you are doing this in the editor, look in the Sprite editor where it says UV min and UV max. These are numbers between 0 and 1 that define the position of the Sprite in the spritesheet. (0, 0) is the top-left corner, (1, 1) is the bottom right.

Note that you can do the exact same thing to define where an Animation is located within a texture atlas. But even if the Animation spritesheet can be anywhere in the texture atlas, each frame of the animation must still be the same size as the other frames of the same animation. You can say where the spritesheet is, but not where each individual frame is, that is deduced by the number of columns and rows in the animation.

If you want to set these numbers in the Sprite's JSON structure (which you can edit by clicking the { } button at the top of the Sprite tab, next to the Sprite's name), then you want to modify the imageArea parameter. A simple Sprite JSON data structure can look like this:

{
	"type": "Sprite",
	"image": "myPicture.png",
	"imageArea": 
	{
		"minX": 0,
		"minY": 0,
		"maxX": 1,
		"maxY": 1
	},
	"name": "my sprite",
	"size": 
	{
		"x": 64,
		"y": 64
	}
}

There can  be lots of other fields too, but these are the relevant ones.

Now there are a lot of programs that let you arrange sprites into atlases. Each one supports its own set of formats. However most (all?) of them can export to a JSON format, and since WADE also uses a JSON format for its scenes, you should be able to easily convert the output of any of these programs to something that WADE understand.

Like I said above, the format of the JSON file that you want to use with WADE depends on how you want to use this data. You can use it to create a scene with multiple SceneObjects, or a SceneObject with multiple sprite, or an isometric tileset, or any combination of those. If you wanted this in an isometric tileset for example, you would create a .its file. The best thing that you can do to understand the format that is being used, would be to create a tileset in the editor, save it and then right-click the file and select Show in code editor.

For example, a simple .its file that contains a terrain tile and an isometric object looks like this:

{
	"tiles": [
		{
			"name": "grass",
			"type": "terrain tile",
			"texture": "grass.png",
			"scale": 1,
			"rotation": 0,
			"customHeight": false,
			"sprites": [
				{
					"type": "Sprite",
					"animations": {},
					"currentAnimation": "default",
					"sortPoint": {
						"x": 0,
						"y": 0
					},
					"layer": 1,
					"autoResize": false,
					"visible": true,
					"image": "grass.png",
					"imageArea": {
						"minX": 0,
						"minY": 0,
						"maxX": 1,
						"maxY": 1
					},
					"alwaysDraw": false,
					"name": "",
					"drawModifiers": [],
					"pixelShader": "",
					"pixelShaderUniforms": null,
					"pixelPerfectMouseEvents": false,
					"properties": {},
					"size": {
						"x": 32,
						"y": 32
					}
				}
			],
			"gridMap": [
				{
					"x": 0,
					"z": 0
				}
			],
			"behaviors": [],
			"imageArea": {
				"minX": 0,
				"minY": 0,
				"maxX": 1,
				"maxY": 1
			},
			"collision": false,
			"properties": {}
		},
		{
			"name": "house",
			"type": "isometric object",
			"scale": 1,
			"rotation": 0,
			"customHeight": false,
			"sprites": [
				{
					"type": "Sprite",
					"animations": {},
					"currentAnimation": "default",
					"sortPoint": {
						"x": 0,
						"y": 0
					},
					"layer": 1,
					"autoResize": false,
					"visible": true,
					"image": "house.png",
					"imageArea": {
						"minX": 0,
						"minY": 0,
						"maxX": 1,
						"maxY": 1
					},
					"alwaysDraw": false,
					"name": "",
					"drawModifiers": [],
					"pixelShader": "",
					"pixelShaderUniforms": null,
					"pixelPerfectMouseEvents": false,
					"properties": {},
					"size": {
						"x": 32,
						"y": 32
					}
				}
			],
			"gridMap": [
				{
					"x": 0,
					"z": 0
				}
			],
			"behaviors": [],
			"imageArea": {
				"minX": 0,
				"minY": 0,
				"maxX": 1,
				"maxY": 1
			},
			"collision": false,
			"properties": {}
		}
	]
}

 

krumza

HI. thank for yoyr answer but i misunderstand something: my atlases containing hundreds of sprites.

I trying and less understand how create .its file in online editor. But how then create a one png file for spriteshet/atlas?

I see it so difficult.

I think that texture packer from CodeAndWeb - the best and most popular decision for html5 (and other) developers and it contains many many mechanisms for image optimisation such a compression and joining in one file.

I create in Texture packer    some json (for pixi, for phaser, for create,js) but a cant marriage it with WADE, and also - creating a .its file work only when i in isometric mode in editor - in other case button "crete .its" disappear/

i just want do it with no effort with json and png atlases, creating in texturepackerGUI in your wonderful editor

Gio

You can create a new file of any type (including .its) by right-clicking the background of the current folder (the middle-bottom area of the editor) and selecting New File. You don't need to be in isometric mode. You only need to be in isometric mode if you want to create an .its file through the isometric tileset editor. Alternatively you can create the file outside the editor and drag it into it to import it.

I have personally used Texture Packer to export sprites into WADE before. Although there is no option to export it to a WADE format directly, you can easily convert the JSON data, it isn't difficult at all. Mostly a case of dividing the coordinates by the image size, and renaming some fields.

krumza

I kind of figured out.
I threw the sheet and then create all the objects handling UV and UV values, it is convenient

But is there any way to have the editor understand on the fly which is a leaf sprite and offered me a separate picture?

Post a reply
Add Attachment
Submit Reply
Login to Reply