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:
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:
-
'description': the description of your nft that will be written in the metadata. -
'baseUri': uri where the nft is going to be stored. -
'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" },
],
},
];-
'shuffleLayerConfiguration': shuffles the generation order of the output images. -
'debugLogs': prints the debug logs on the terminal. -
'format' : determines the heigth and width of the generated images, make sure this values are the same as your input images. -
'background': generates a background with a random color in case you dont provide one. -
'extraMetadata': add extra metadata to the .json file. -
'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:
| Question | Description |
|---|---|
| 1. 'Enter folder directory' : | Select the input folder where png files will be extracted, leave this space blank and press enter for auto (build/images) |
| 2. 'Enter name' : | Enter a png file name inside the directory to specifically convert that file. Leave blank and press enter to convert everything. |
| 3. 'Enter storage folder directory' : | Select the output folder where gif files will be stored. Leave blank and press enter for auto (build/gifs). |
| 4. 'Enter frames per second' : | Type the desired frames per second value. Press enter for auto (30 fps). |
| 5. 'Enter frame width' : | If your sprite sheet frame width isnt the same as your frame heigth, you can change that value here. leave blank for auto (frame width = frame heigth). |
| 6. 'Enter transparent color' : | change transparent color using a hex value. leave blank for auto. |
| 7. 'Enter quality' : | select the output gif quality (20 = best , 10 = worst). Default value is 10. |
| 8. 'Proceed with conversion?' : | type 'y' to proceed and 'n' to cancel the process. |
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: