【NFT】ジェネラティブNFTを学ぶ - ２.ジェネラティブ画像を生成 -

前回　ジェネラティブNFT開発の準備として環境構築を行った。

tenomeuonome.hateblo.jp

今回も以下のページを参考にしていきます。

(誰でもできる！ジェネラティブNFT開発　第２章）

crypto-code.jp

１．プロジェクトの初期設定

１．プロジェクトの初期設定

VSCodeでArt Engineのプログラムを開く

パッケージのインストール

githubからダウンロードしたプロジェクトはすべてのファイルを持っているわけではないので、必要なパッケージをインストールする。

VSCode　＞＞　ターミナル　＞＞　新しいターミナル

編集するのは以下の２つ

設定ファイル・・・　src/config.js
素材画像の格納先・・・　layers フォルダ配下

設定ファイル(config.js)の詳細

＞１．コレクションの設定

// General metadata for Ethereum
const namePrefix = "Your Collection";
const description = "Remember to replace this description";
const baseUri = "ipfs://NewUriToReplace";

namePrefix・・NFTの名前

description・・NFTの説明文

baseUri・・NFT画像のアップロード先（画像をアップロードしてから確定）

＞２．レイヤーの重ね合わせ設定

const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" },
      { name: "Eyeball" },
      { name: "Eye color" },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid" },
      { name: "Top lid" },
    ],
  },
];
 
 

growEditionSizeTo・・　何番までの画像を作成するか

layersOrder・・　どの順番でレイヤ画像をかさねあわせるか

＞３．順番をシャッフルするかどうか

通常は１から順番につけられるが、偏りが出る？のでtrueにした方が良いらしい。

const shuffleLayerConfigurations = true;

shuffleLayerConfigurations・・　レイヤー設定をシャッフルするかどうか

＞４．出力画像のフォーマット

出力する画像の高さ、幅、平滑化をするかどうかの設定

const format = {
  width: 512,
  height: 512,
  smoothing: false,
};

width・・　画像の幅

height・・　画像の高さ

smoothing・・　平滑化するか

画像の重ね合わせ設定

＞１．重ね合わせ設定の基本

Layersフォルダ配下に、プロパティのカテゴリ名があり、その下に画像を格納する。

プロパティ名#重み1.png

重みが大きいと、そのパーツの出現頻度が高くなる。

重みは必ず設定すること。

↑の例の場合

Bottom Lid（下まぶた）プロパティ

High / Low / Middle が20 : 40 : 40 で、Highの出現率が20/100＝20％となる。

＞２．重ね合わせの順序

const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" },
      { name: "Eyeball" },
      { name: "Eye color" },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid" },
      { name: "Top lid" },
    ],
  },
];

growEditionSizeTo・・何番までの画像を作成するか

layersOrder・・どの順番で画像を重ね合わせるか。先に定義されたものが画像の背面にくる。↑の例の場合、Backgroundが一番背面。

＞３．重ね合わせ設定を複数パターン設定する

const layerConfigurations = [
// 設定A
{
growEditionSizeTo: 5,
layersOrder: [
{ name: "Background" },
{ name: "Eyeball" },
{ name: "Eye color" },
{ name: "Iris" },
{ name: "Shine" },
{ name: "Bottom lid" },
{ name: "Top lid" },
],
},
// 設定B
{
growEditionSizeTo: 15,
layersOrder: [
{ name: "Background" },
{ name: "Eyeball" },
{ name: "Eye color" },
{ name: "Iris" },
{ name: "Shine" },
{ name: "Bottom lid" },
{ name: "Top lid" },
],
},

];

重ね合わせ設定を複数可能。

growEditionSizeTo　は、それぞれの数ではなく合計数

↑の設定の場合、設定Aで5体。設定Bで10体生成される。

ジェネラティブデータの生成

＞１．NFTデータの構成

NFTの画像データはブロックチェーンにはなく、ブロックチェーンにあるのはURLだけ。

tokenURIの先にはNFTの名前、説明書き、プロパティなどが書かれたメタデータファイルが置かれている。

ジェネラティブデータはメタデータと画像データの２種類があり、それぞれ別の場所にあることを理解しておく。

＞２．ファイル生成コマンド

ターミナルから以下を入力する。

$node index.js

これで現在の設定から生成が開始される。

Created edition: 1, with DNA: 97ef0454612392183c73478ecbb4c79c5268c893
Created edition: 2, with DNA: 82604ee19889e166553f901f9b6d9ae6ecc203eb
Created edition: 3, with DNA: 82bf6e68fe2a300fb0d04e1d968c25be514928bf
Created edition: 4, with DNA: 1386d3ebaca3cfdbb8a5af4a740b469f8ec4b95b
Created edition: 5, with DNA: 396fe28c3b53ae48e25000f728b508db821cd02a

設定で5枚出力となっているので5枚出力された。