Most of the code on this repository was created and explained by HashLips on his main YouTube channel.

Make sure to visit him for more info:

📺 Youtube / 👄 Discord / 🐦 Twitter / ℹ️ Website

A node app that combines png sprite sheet layers and converts them to a .gif file

Install an IDE of your preference. Recomended

Install the latest version of Node.js

• Run this command on your system terminal to check if node is installed:

    node -v
  

• Download this repo and extract all the files.

• Run this command on your root folder using the terminal:

    npm install
  

• All your assets must have attached a "rarity weight" on their file name. Example:

  File name + # + Number = File_name#10.png

• Sort your layers assets into folders and add them to the 'Layer' directory.

• All your layer assets must be a series of evenly spaced frames horizontally. The number and size of your frames must be consistent in order to work properly.

• This code only works with layers that are in Sprite Sheet format. Example:

  

Before running the code, go to src/config.js where you can make the next changes:

1. 'description' : the description of your nft that will be written in the metadata.

2. 'baseUri' : uri where the nft is going to be stored.

3. 'layerConfigurations' :

   • 'growEditionSizeTo' : the amount of images that will be generated.
   • 'layersOrder' : the order of generation of the layers, from back to front.
   • 'name' : the folder name of your layer.

//Example: creates up to a 100 images with 3 kinds of layers
const layerConfigurations = [
 {
   growEditionSizeTo: 100,
   layersOrder: [
     { name: "Layer_folder_1" },
     { name: "Layer_folder_2" },
     { name: "Layer_folder_3" },
   ],
 },
];

4. 'shuffleLayerConfiguration' : shuffles the generation order of the output images.

5. 'debugLogs' : prints the debug logs on the terminal.

6. 'format' : determines the heigth and width of the generated images, make sure this values are the same as your input images.

7. 'background' : generates a background with a random color in case you dont provide one.

8. 'extraMetadata' : add extra metadata to the .json file.

9. 'uniqueDnaTorrance' : determines the maximum amount of unique images that can be generated.

After everything is setup, you can proceed with the png generation with the next command:

node index.js

This will create a new directory called build that will cointain 3 folders:

• Images : the generated png sprite sheets will be output here.
• Json : here you can find the .json files of each image generated.
• Gifs : here you can find the gifs generated by the second part of the code.

When the image generation is finished, you can now proceed with the png to gif convertion using the following command:

node script.js

Running this command will prompt some questions on the terminal where input regarding the gif format will be required:

On the utils directory you can find some tools you can use after you generated your collection.

You can check the rarity stats of your collection with:

    node ./utils/rarity.js

You can change the description and base Uri of your metadata even after running the code with:

    node ./utils/update.js

Most of the code on this repo was originally created by HashLips, this is a modified version created for the nft community interested on gif nft generation.

This version is now suitable for a full collection creation, but there's always things to work on and improve.

Hopefully i can release new and more efficient versions of this code, so please stay tuned.

___ Things to work on: ___

• Add a rarity system and more hashlips code features.
• Create metadata for .gif files.
• Improve efficiency by just needing to run one single .js file.

Be sure to follow me for more updates on this project:

MichaPipo Twitter

MichaPipo GitHub