Animations editor new importing options

2 favourites
From the Asset Store
Supports 1D, 2D, 3D arrays. Import and export arrays in JSON format
  • 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.


    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": [
    			[{"originX":0.5,"originY":0.5}, {"name":"Image Point 1","x":0.5,"y":0.5}],

    This special file can be placed at the root of a folder or zip structure and will affect all content found.

    Another file with the same name can be placed further down the hierarchy and will take precedence over the ones found before. That way you can configure different sets of files to be interpreted differently when imported.

    I think that covers everything about this new feature.

  • Awesome, seems pretty useful!

  • ok so with this new update, i want to make a construct 3 project to read directly from .pyxel files

    .pyxel files contain a json files with all of the information about my animations, where they start, end, their name, alpha, animation speed, width, height, etc...

    and also all of the layers as separate png files.

    So it would be technically possible to, and stop me if i'm wrong, open a pyxeledit .pyxel file, read all of the animation names and data, load the layer pngs one by one into a sprite, selectively export the animations as spritesheets with the drawing canvas and browser invokedownload, and then import into our games these animations very quickly with this new feature?


    Use effects with .pyxel file palette data to replace colors and export variants automatically

    export a single .zip file instead of spritesheets one by one, with a full folder architecture for the different layers so it'S easyer to drag and drop into the animation editor if animations are separated by folders


  • here'S my work in progress

    I can get it to read the content of the pyxel file but i can't figure out to put the json file into a json object, only to read some information about it

  • 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
    		// Parse string into Javascript object
    		const jsonObject = JSON.parse(text);

    I found in JSZip's documentation that you should be able to read directly as a string, but that didn't work. Fortunately, it supports reading as a typed array and you can then decode that using the TextDecoder object.

    That snippet is the most basic use case, watch out when doing asynchronous work inside a for loop, it might have unexpected results if you don't manage it properly.

  • Thanks for the help DiegoM !!


  • But there still isn't reload images feature ( which Construct 2 can do ). Or I can't find it

    Is this some limitation of being a browser based app, or what?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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"

    "horizontal-cells" and "vertical-cells" indicate how the sprite sheet should be sliced up in order to generate frames out of it.

    "direction" is how the frames will be added to the animation. "horizontal" means looking at the frames one row at a time and moving down, while "vertical" means looking at the frames one column at a time while moving to the left.

    If all your sprite sheets are the same, you can just place a single configuration file at the root, and it will be applied to all files that need it. If you have different sized sprite sheets, each one will need it's own configuration file placed next to it in the folder structure.

  • 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"

  • 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.

    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

  • Look at it go exporting all of those animations !!

  • The option to replace frames in animations of the same name would be HUGE

    Right now i still have to change options like looping or not looping, speed, etc, on them because part of the process is deleting all animations and then importing them and all those settings get cleared in the process

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)