Animations editor new importing options

As of r252 support for importing animations frames from zip files and folders has been implemented, and as is usually the case, there are a few things which are not immediately obvious about the feature. So let's talk about that.

Let's start with the basic use cases.

Basics

Importing folders

• Dragging and dropping a folder into the Animations panel, will create a new sub folder with a new animation inside of it. The animation will have frames for all images found at the root level of the folder. Both the new sub folder and the animation will have the name of the dropped folder.
• Dragging and dropping a folder into the Frames panel or the Main drawing area will add all the individual images in the folder as frames of the current animation.

Importing zip files

• Dragging and dropping a zip file into the Animations panel, will create a new animation with all images found at the root level of the zip file. The animation will have the same name as the zip file.
• Dragging and dropping a zip file into the Frames panel or the Main drawing area will add all the individual images in the zip file as frames of the current animation.

Importing from the toolbar options

The toolbar Load button now has two options. Load frames and Load animations.

• Load frames allows you to pick images to be loaded as frames of the current animation. Is is now also possible to pick zip files from the file picker. All images in a zip file will be added as frames of the current animation.
• Load animations allows you to pick images to be loaded into a new animation. Is is now also possible to pick zip files from the file picker. A new animation will be created with all of the individual images picked, while each picked zip file will correspond to a new animation being created.

Nested content

Folders and zip files which in turn also have folders and zip files inside of them are supported, depending on how you try to import these, this is how C3 will behave.

• Dropping in the Animations Panel: C3 will process everything and create animations and sub folders as needed.
• Dropping in the Frames Panel or Drawing Area: all of the nested content will be turned into a flat list and added as frames to the current animation.
• Toolbar Load Frames option: all the nested content inside a zip file will be turned into a flat list and added to the current animation.
• Toolbar Load Animations option: if a zip file with nested content is loaded, the images at the root level of the zip will be used to create an animation, if other zip files are found, new animations will be created for them. If a folder is found in a zip file, a sub folder with an animation inside of it will be created, following the same patters as importing a folder.

The key points to remember are:

• Importing folders will create a sub folder with an animation inside of it, both named after the original folder. The animation will have frames corresponding to the images found at the root level of the original folder.
• Importing zip files will create an animation named after the zip file and will have frames corresponding to all the images found at the root level of the zip file.
• If nested content is found, the same pattern applies. Each folder will correspond to a new sub folder with a new animation inside of it. Each zip file will correspond to a new animation.

Optional configuration file

Normally when importing a single file, C3 asks if the file should be treated as a sprite sheet or as a single file. In the case of importing multiple files this isn't really an option. Because of that, when importing folders or zips, even if an animation ends up having only one frame, C3 never asks how it it should be treated.

To get around this problem, a special configuration file can be added to a folder or zip file to tell C3 how it should handle the files found on them.

It's a simple JSON file, must be named c3-import-settings.json and should look like this:

{
	"import-mode": "spritesheet",
	
	"sort": "alphabetical",
	
	"order": "ascending",

	"replace-existing-animation": false,
	
	"replace-existing-folder": false,

	"use-raw-folder-names": false,

	"spritesheet": {
		"horizontal-cells": 4,
		"vertical-cells": 4,
		"direction": "horizontal"
	},
	
	"svg": {
		"width": 100,
		"height": 100
	},

	"animation": {
		"name": "optional-animation-name",
		"speed": 5,
		"loop": false,
		"repeat-count": 1,
		"repeat-to": 0,
		"ping-pong": false,
		"frame-durations": [1, 2, 3, 4],
		"frame-collision-polys": [
			{"points":[0,0,1,0,1,1,0,1]},
			{"points":[0,0,1,0,1,1,0,1]},
			{"points":[0,0,1,0,1,1,0,1]},
			{"points":[0,0,1,0,1,1,0,1]}
		],
		"frame-image-points":[
			[{"originX":0.5,"originY":0.5}, {"name":"Image Point 1","x":0.5,"y":0.5}],
			[{"originX":0.5,"originY":0.5}],
			[{"originX":0.5,"originY":0.5}],
			[{"originX":0.5,"originY":0.5}]
		],
		"frame-tags":["tag-1", "tag-2", "tag-3", "tag-4"]
	}
}

eleanorjmorel

It sounds like it should be possible.

If you haven't already, you should try importing some folders and zip files manually into the Animations Editor, that way you will get a feel of what the results are going to be. That will help in making clear what your application should produce.

There is a subtle difference between importing folders and zip files, which is not too difficult to understand once you try it out yourself, but when explained through text it can get confusing and might seem more complex than it actually is.

As for your problem with reading the json content, this snippet should do it

	zip.file("docData.json").async("uint8array").then(function (d) {
		const text = new TextDecoder().decode(d);
	
		// Print JSON as a raw string
		console.log(text);
		
		// Parse string into Javascript object
		const jsonObject = JSON.parse(text);
	});

Thanks for the help DiegoM !!

OK I GOT IT TO WORK THIS IS SO COOL I AM THE SMARTEST PERSON ALIVE !!!

I use this to generate blobs that load image from url can use !!!

zip.file(localVars.pngname).async("blob").then(function (d) {
		
	runtime.globalVars.fileURL2 = URL.createObjectURL(d)
});

ok so DiegoM

does not work whatsoever with importing frames from strips

would it be possible to add a flag in the configuration file to overwrite the existing animation in the editor with the same name?

can you add more data to the configuration file to configure things like speed, loop, repeat count, repeat to, pingpong, and possibly individual frame duration ?

also, the naming scheme for creating duplicates seems to be okay for animation names, but wrong for folders, it always appends a space and a number instead of overwriting said number,

can you explain in different words what the existing options of the configuration file do ?

I see the problem with the duplicate folder names, should be an easy fix.

It's possible to add additional options to the configuration file, but first I would like to sort out issues in the basic use case.

Can you share the files you are trying to import? The whole folder structure, so I can try it out.

Have you tried creating the configuration file for the sprite strips? If there isn't one when a single image file is found, it will be imported as a single image. If you want a single image to be interpreted as a strip, place a configuration file next to it in the folder structure.

The file should be named c3-import-settings.json and look like this:

{
	"import-mode": "spritesheet", // set to "spritesheet" so the single image is treated as such
	
	"spritesheet": {
		"horizontal-cells": 4, // amount of horizontal slices
		"vertical-cells": 4, // amount of vertical slices
		"direction": "horizontal" // how the resulting cells will be added to the animation, either "horizontal" or "vertical"
	}
}

I initially tried to use spritesheets first, but couldn'T get them to work with the configuration file, so i assumed I misunderstood because in the editor it'S called "strips" not spritesheet, and it only supported single sprite and "file"

cdn.discordapp.com/attachments/646144635374403594/855893194180788275/FULL.zip

streamable.com/57s4ta

Ok, I fixed a few problems with that file structure.

The first was that the JSON files were malformed, there was a missing curly brace, sorry about that, you copied from my post and I missed it.

On the same vein, comments are not valid JSON syntax, so a JSON with line comments or block comments won't be parsed correctly, that was my fault. I assumed you knew that and just wrote it in my post as an example.

I also noticed that you named the files c3-import-setting.json, it should have been c3-import-settings.json with and "s".

Lastly, I changed the folder with 2 sprite sheets so that each one would be picked up as a different animation. What I did was put each of the files inside a zip file. That way and with the configuration file, C3 understands those files should be treated as spritesheets.

To summarize that last part, the importer will only interpret an image as a spritesheet if:

1. It is the only image in a folder or zip.
2. It can find a configuration for it (on the same folder or somewhere up the hierarchy)

Another important bit, is that content extracted from a zip file, will not create a sub folder. That means that if you want to import a folder with multiple animations at it's root, you need each animation to be inside a zip.

Here is the updated file.

dropbox.com/s/bv5lm4qrbjzb4my/FULL.zip

I think your application is going to need to be able to create zip files in order to take full advantage of C3's importer. I'm sure JSZip can handle that no problem.

oh my god thank you diego you are the best

oh by the way you spelled it that way in your post above