NFTアートを大量に作る方法の紹介(パーツを自動で組み合わせる方法)

みなさんこんばんは。

 

今回はNFTアートを大量に自動で作る方法を紹介したいと思います。

 

私はNFTアートを作ることを考えて、最近各パーツを大量に作っていたのですが、最後に全のパーツを手動で融合する作業が大変なことに気がつきました。

そこで、最後のまとめて合成する方法を探すと、企業に依頼する方法が一番上に出てきました。

 

それは嫌だなと思いさらに思い探すと、YouTubeで紹介している方もいました。

大変わかりやすかったのですが、若干冗長に感じたのと、動画だと何回も見るのが大変なので、他にブログ記事がないか探しました。

しかし、ブログでNFTアートを大量に作る方法を紹介している人が日本人でいなかったため(探しきれなかったため)、自分用に書くことにしました。

 

ほぼYouTubeの方が紹介している方法をブログにまとめたので、時間に余裕がある方はYouTubeの方を見たほうがわかりやすいかもしれません。私は機械音痴なので、失敗したことなども全て記事に書きました(動画では失敗例は出ません)。

ちなみにMacでの方法となっています。

 

簡単に今回の記事の概略(手順)を書きます。

最初にイラスト、各パーツを準備します。各パーツイラストの保存名(名称)を変更します。Visual Studio Codeとコードをダウンロードします。Visual Studio Codeがソフトになり、コードを走らせることでイラストの合成を行います。イラストサイズやフォルダの設定を行いコードを走らせると、準備したパーツが合成され目的のイラストが複数できます。

 

コインチェック

NFTアートを大量に作る方法

パーツ作成

最初に各パーツを用意します。

これは自分で描きましょう。ここの説明はほぼ省略します。

 

一応簡単に紹介しますと、画像サイズを仮にまず決めます。ピクセルだと縦横500~2000ぐらいがいいのではないかと私は思いました。私自身縦横10000ピクセルにしてしまったのですが、最後の合成に時間がかかったため、1000ピクセルに最後変更しました。

 

あとはパーツごとにイラストを書きます。例えば人であれば、頭、髪、顔、体、靴、背景など部品を描いていきます。そして、各パーツを描いたら、あるパーツだけ表示させ、png形式で保存します。バランスを取るために、書くときは他のパーツも表示させ、保存する時だけ表示を消すのが良いと思います。

 

あるパーツだけ表示させないと、最後の融合で他のパーツと重なってしまいます。またjpg形式で保存すると背景が白くなり、他のパーツが透過しなくなります。この点は注意です。

 

これで、各パーツのイラストを描きます。私は全部で9つのパーツを作っているので、まだ全て描ききれていません。私の場合、だいたい1つのパーツは100個用意しています。つまり900個ですね。これが途方もないので、お試し版では、1パーツあたり10~20個ぐらいで十分だと思います。

 

イラストの名前は後で付け直しますので、保存時はhair-1などで良いかと思います。

 

イラストの名前を変える

次に、実際の融合の手順です。

 

例えば、人型のアバターを描く場合は、以下のようにフォルダ準備します(あくまで例です)。名前は外国人の人もわかるように英語で名前をつけましょう(後述します)。

  • hair
  • face
  • body
  • clothes
  • shoes
  • background

 

イラスト作成時の注意点は、jpgではなく、png形式で保存することです。

jpgだと、背景が自動で白くなり組み合わせられなくなります。pngで保存しないと透過しない点には注意が必要です。

私は失敗して、150個近く書き直しました。本当に大変です。

 

 

各フォルダ、例えばhairなどを準備します。

その中に、書いたイラストの絵を入れます。

 

この時、保存名が重要です。

名前ですが、opeanseaで販売する際に、コレクションのNFTに各パーツの名前を表示できるようです。そのため、表記は英語できちんと名前をつけましょう。

保存時の名称は、

名前#〇〇.png

とします。

 

例えば、赤い髪のパーツを書いたとします。

そしたら

redhair#20.png

と保存します(私は後で全てのパーツをまとめて名前を変更しました。イラスト作成時に名前をつけても、どちらでも良いと思います)。

 

#〇〇の部分ですが、ランダムに生成される確率を表します。

YouTubeでは10をデフォルトにしていましたが、数値はいくつをデフォルトにしてもいいのではないかと思います。

例えば、10を基準にすると、5にした場合は半分の確率になりますし、20は10の2倍になります。

 

全てのフォルダのイラストの総和が確率になります。

例えば、髪のパーツが3つあるとします。

hair1#10.png

hair2#20.png

hair3#30.png

 

これらの数値の合計は60になります。

1は、10なので、10/60の確率で生成され、2は20/60、3は30/60となります。このように#の後が確率を表します。つまりhair1がレアになり、hair3がコモンで出現率が多い設定になります。

 

私は20を標準にしました。そうれであれば、1にする場合は1/20となり、まあまあレアになるかなとの判断です。もちろん総計なので、パーツの数を増やしていけば1/20よりもはるかに選択される確率は低くなります(1と20が2つあれば、1の確率は1/21)。

 

実際にイラストを大量に作る:コードを動かす

NFTのパーツを組み合わせる方法ですが、アプリケーション、コードをダウンロードする必要があります。

1つ目はVisual Studio Codeです。

まずはダウンロードしましょう。

Visual Studio Code is free and available on your favorite pl…

 

2つ目ですが、Githubのコードです。

 

これは、個人のエンジニアhaships氏が書いてくれたコードです。これをダウンロードしましょう。

このコードを読み込むことでランダムにNFTを生成できます。

ダウンロードですが、右上のCodeをクリックし、Download ZIPでダウンロードします。

 

 

Visual Studio Code、左上からfile→open folderで、先ほどダウンロードしたhashipsのフォルダを開きます。

 

 

次に、四角にチェックを入れ、yesを選択します。

(そのファイルを信用するかどうかです)

 

上のツールバーにあるterminalから、new terminalを選択します。

 

しかし、私はここでYouTubeの説明と違う状態になりました。

本来ならterminalに記載されるテキストが少ないのですが、私の場合、以下のような表示が出ました。

The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
〇〇-no-iMac:hashlips_art_engine-main 〇〇$

 

これはデフォルトシェルがzshになったと教えてくれているようです。

【解決!】「デフォルトシェルはzshになった」と表示される対処法

MacOS Catalinaから、ターミナルを開くたびに「The default interactive shell i…

 

色々対応方法はあるようですが、私はシステム環境設定から変えることにしました。

システム環境設定のユーザとグループに行き、鍵を開けてから自分の管理ユーザーを選択し右クリックを押します。

 

すると詳細オプションと表示されるので選択します。

 

ログインシェルを/bin/zshに変えます。

 

これでターミナルにメッセージが表示されなくなります。

 

これで次に進められます。

下のterminalのテキスト最後に以下の文字を入力します。

 

npm install

 

 

ちょっと見えにくいですが、%の後ろですね。入力しているのがわかると思います。

 

この後、エンターキーを押します。スペースも重要です。忘れず入力してください。

 

これで、YouTubeの方は、順調に進んでいきますが、私は進めませんでした。

zsh: command not found: node

と表示されます。

 

 

他の質問者が質問していると、nodeをダウンロードしてくださいとの返信があります。

nodeは、ネットワークを接続する結束点らしいです。よくわかりませんが……

カゴヤのサーバー研究室

コンピュータネットワークに関してまとめた文章を読んでいると、「ノード(node)」という用語が使われていることがあります…

 

 

とにかくnodeとやらをダウンロードします。

以下のサイトから行けます。

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc…

 

 

ダウンロードした後、再度npm installと入力し、エンターキーを押すと、プログラグが走って成功しました。

画像は特に載せませんが、やればわかると思います。実際プログラムが走ります。

 

次に左にあるsrcからconfigを選択します。

 

const formatを選択し、数値を変えます。

widthとheightですね。一応説明すると、widthが幅、heightが高さですね。これは生成される画像サイズを示していると思います。

 

 

自分が作成した画像サイズに変えましょう。

ちなみにYouTubeの方は、1500ピクセルで作っていたようです。私はミリメートルで作ったので、ピクセルに直すと11811でした……でかい……

 

 

数値を変えたら必ずSaveを押しましょう。

fileからSaveできますし、コマンド+Sでも保存はできます。

 

 

ちなみに、haships氏のダウンロードしたフォルダに、全てeye colorなどのパーツのデータが入っています。

そのため、ジェネレートを試すこともできます。

試したい人は以下のテキストを入力しましょう。

 

node index.js

 

上記コードと入力すると、全て生成されます。やってみたい人は、先ほどnpm installと入力したのと同じ場所に入力しましょう。

 

もし生成したら、左上のbuild→imageの中に生成されます。

 

これで次にやることはわかると思いますが、hashipsのフォルダの中身を自分のデータに入れ替えていきます。

 

ダウンロードした、hashipsのフォルダを開きます。

その中の、layersの中身を全て消します。

 

代わりに自分の作ったデータを移します。

私はこんな感じです。

 

次にVisual Studio Codeのsrcのconfigをいじります。

どの順番でイラストが重なるかを設定します。

 

上の名前が一番下のレイヤーになります。

つまり一番上はbackgroundの背景になり、あとは重ねていきたい順に書き直します。

 

先ほど自分が移植したフォルダを見て、名前を書きましょう。

ここで間違えるとうまくいきません。気をつけて作業します。

 

私の場合は、backgroundとbodyが順に下になれば大丈夫だったので、後の順番は適当です。

 

とにかく下になるものを上から入力します。

ちなみに「”」がなくなると赤くなります。入力忘れには気をつけてください。

 

私は足りなかったので、3つコピペして、行を増やしました。

 

 

さらに、その上にある

growEditionSizeTo: 5
を編集します。
これは融合したイラストを何個作るかです。先ほどは5になっていたので、5個つくられました。
これを必要な数に変えます。
最初は実験で10~50ぐらいで良いでしょう。

 

そしてSaveします。

 

最後に、

 

node index.js

 

と入力すると、ランダムなイラストが作成されるはずですが、私はうまくいきませんでした。

以下のように表示されうまくいきません。

syscall: ‘scandir’,
code: ‘ENOENT’,
path: ‘/Users/〇〇/Desktop/hashlips_art_engine-main/layers/Eyeball/’

 

なせこうなったと思います?

 

 

実は保存、つまりSaveを押していませんでした。

Saveしたらうまくいきました。みなさんも気をつけましょう。

 

実行ですが、私は先述した通り1万ピクセルの巨大サイズを作ってしまったので、画像生成もすごい遅いです。

1個10秒ぐらいかかり、ようやく10個作ってくれました。

 

 

フォルダですが、hashipsのフォルダ内にbuildというフォルダがあり、その中のimagesに格納されます。

自分のイラストが量産されるのは嬉しいものがありますね!

まだ作成中なのでイメージはモザイクをかけています。背景を2色、体の色を2色しか用意していなかったので色味は似ていますが、それでも感動しました。

 

他にも重要な操作があります。

レアリティを見る方法です。

以下のテキストを入力します。

 

utils/rarity.js

 

と入力すると、何回どのパーツが使われたか、%などで表示されるそうです。

 

しかし、私はやっても

 

zsh: permission denied: utils/rarity.js

 

と表示され、確認できませんでした。

もしかしたら、生成数が少なかったのか、用意したパーツが少なかったのかもしれません。

今度パーツを増やして確認したいと思います。

 

以上、自動でイラストを大量に生産する方法でした。

最後に私が気を付けるべきと思った点を書きます。

 

コインチェック

注意点

  • イラストサイズは、縦横500~2000ピクセル程度にする
  • イラストの各パーツはpng形式で保存
  • 他のパーツと同時に表示しないように気を付ける
  • パーツは10~30ぐらいで十分
  • パーツ数も5前後で十分
  • nodeを先にインストールする
  • ログインシェルを先に/bin/zshに変える

 

この後の、独自コントラクトでNFTを販売する方法についても文字起こししました。

NFTアートを独自コントラクトで販売する方法の紹介(情報を書き込み売る方法)

 

 

このブログでは、NFTつながりで、Move To Earnの記事も多数紹介しています。

M2Eとは、Move To Earnの略で、歩いてお金を稼げる新時代のNFTゲームになっています。
興味があれば、他のプロジェクトも参考にしてください。

私の一押しはStepwatchです。

関連記事

みなさんこんばんは。   今回はMove To Earn(M2E)のStepWatchについて紹介したいと思います。 2022年7月19日現在では、Android端末しか対応しておりません。iOSは8月リリース予定だ[…]

次点では、THE SNKRZもオススメです。

関連記事

みなさんこんばんは。   今回は韓国発のM2Eゲーム、THE SNKRZ(スニーカーズ)の始め方を紹介します。 またテスト段階なので、プレイできるとしてもテスターとしてのプレイになります。 なお、2022年[…]

RunBloxもおすすめのM2Eのプロジェクトです。

関連記事

みなさんこんばんは。   今回はRunBloxのゲームの始め方を紹介します。 昔は、テレグラムのNFTスニーカー抽選からRunBloxを始めることができましたが、2022年6月30日現在では、NFTスニーカーを購入し[…]

 

コインチェック
最新情報をチェックしよう!
error: Content is protected !!