手把手教你用开源软件对图层进行跑图生成NFT

作者:糊糊

个人推特地址:

https://twitter.com/FrankRaglan

1、下载必备软件

1、跑图软件下载

访问github链接:https://github.com/HashLips/hashlips_art_engine根据图片中的教程将软件下载下来。

post image

2、VS代码下载

下载网站:

https://code.visualstudio.com/

根据图片中的教程下载并安装vs代码到本地

post image

3、 node.js 下载

https://www.runoob.com/nodejs/nodejs-install-setup.html

根据链接中的教程下载并安装node.js

2 使用VS代码导入跑图软件

选择打开文件夹,然后点击打开你的文件夹,选择下载本地软件的文件夹,将VS代码的上角目录导入到这

post image

3 设置跑图软件内容并跑图

导入跑图软件代码之后,此时VS代码显示的内容如下:

post image

鼠标点击VS code的Terminal,选择 New Terminal,这一步是打开命令行(如下面的图片所示)

post image
post image

接着在命令行输入 npm install,并点击键盘上的回车键。

此时VS code会自行在网络上面下载跑图软件运行时候需要的软件包。

post image

此时跑图软件已经可以正常启动了,但是软件内部的设置和我们的图层的文件夹名称可能会不一致。所以接下来是修改这些内容。

1、 修改图层的文件夹名称

找到跑图软件的config.js文件并打开,将18~24行中的代码修改为你自己的图层的文件夹名称,注意文件夹名称不能有空格,修改完毕之后,要将修改后的代码保存起来。保存方式:ctrl + s

post image

接着打开跑图软件的layers目录,将里面的文件都删除掉,并将你自己的图层文件夹复制到里面。

post image
post image

准备工作已经做好了,接下来就是跑图,还记得我们打开了VS code的命令行吗,在里面输入 npm run build,如果显示如下图,那么就说明你的图片跑出来了,可以打开跑图软件的build文件夹查看跑出来图效果怎么样。

其中images 文件夹是跑出来的图

Json文件夹是你图片的元数据

post image
post image

4 将图片上传到IPFS

现在市面上还有自建IPFS的节点,IPFS是有服务器的。或者是收费的ipfs,你的样片等。

这里介绍什么免费且注册就可以的ipfs产品

官网地址:https ://nft.storage/

进入官网并注册好账号,只需要一个邮箱就可以,注册好在官网下载该ipfs的本地上传工具软件。

post image

打开点击官网的API密钥,获取你自己的密钥,将密钥添加到本地软件中,这样ipfs内容就知道你上传了哪些

post image
post image

将我们上一步生成的图片拖进输出该ipfs进行上传

注意是只上传图片文件夹,json文件夹还不用上传。

post image

当显示为这样就是上传成功了。(如下图,点击第三个跳转到浏览器,你的图像目录)

post image

5 修改元数据内容并将元数据上传到ipfs

记得上一步中在浏览器查看你上传的复制品吗,将图片的链接下载下来,也就是上图的网址,也就是上图的网关地址的链接,

然后我们继续回到 VS 代码的 config.js,找到第 9~11 行

将复制的链接替换掉config.js第11行的代码.项目名称和描述也自行替换

(如下图所示)

修改完要保存好代码,使用:ctrl + s保存代码

post image
最后我们重新生成元数据,在命令行输入: npm run update_info

并回车,就搞定了。

最后将生成元数据文件夹(json文件夹)上传到ipfs。

这样,我们就完成了将 NFT 上传到 IPFS 的过程。

去吧,去写你的ERC721合约上链,发行你自己的NFT