元パティシエがプリンのNFTを作ってみた🍮

はじめに

読者のみなさまGM、NFT開発Gの西澤です。
普段Coincheck NFTの開発を行っています。

実はわたくし、エンジニアになる前はパティシエだったんです！
ある日会社にイタリアンプリンを作っていったところ、同僚に一言いただきました。

「せっかくNFT開発GなんだからNFTでもプリン作ったらどう？」

ここからNFT作成が始まりました。

構想を練る

NFTマーケットプレイスに携わっておきながら自分でNFTを作ったことないというのはいかがなものでしょう。
クリエイターの目線に立って考えられるよう、そして、理解を深められるようぜひとも作ってみようではないかと意気込みました。

さて、どんなNFTを作ろう？

考えたところ３つの特徴を持つNFTを作成することに決めました。

プリン
- とりあえず、これです。どれをとってもプリンなNFTにしよう。
フルオンチェーン
- IPFSなど外部にメタデータや画像を置くNFTが多いですが、どうせなら純粋にすべてのデータがブロックチェーン上にあるNFTを作ります。
ジェネレーティブ
- スマートコントラクト内で自動的に画像が組み上がってこそ実装の面白みがありそうなので、mint時に5つレイヤーのパーツがランダムに組み合わさって出来上がる仕様にしました。

パーツを描く

イラストなんか描いたことがないのでなるべくシンプルにします。
まずは落書き

これをイラストレーターでパーツごとに描いていきます。

出来上がったパーツたちをSVGとして出力していきます。

contract実装

基本的な環境、実装方法は以下のサイトを参考にさせていただきました。

HOW TO WRITE & DEPLOY AN NFT
https://ethereum.org/ja/developers/tutorials/how-to-write-and-deploy-an-nft/
How To Create On-chain NFTs with Solidity
https://medium.com/coinmonks/how-to-create-on-chain-nfts-with-solidity-1e20ff9dd87e

それぞれ作成方法が詳細に記載されており、サンプルがすんなりとできたので、実装は簡単だろうとたかを括っていました。

そんな訳ありませんでした。

パーツのSVGデータが重すぎて定数として定義できない
まずこれです。
当初、SVGをBase64にした画像パーツの文字列をcontract上に定数として定義しようとしていました。
パーツ数は44個、合計179キロバイトです。
これらを定義して、contractをデプロイしようとしたところgas limitを超えてしまいできませんでした。
Blockのgas limitを超えてしまったようです。
※2022/11/06現在のBlock gas limitは3000万

しょうがないので各パーツを格納する空の配列を定義しておき、contractのデプロイ後、別トランザクションとしてパーツデータを設定するようにしました。

    string[] private PARTS_BOTTOM
    string[] private PARTS_FACE;
    string[] private PARTS_PUDDING;
    string[] private PARTS_TOP;

    function setBottom(string memory bottom) public onlyOwner {
        PARTS_BOTTOM.push(bottom);
    }

    function setFace(string memory bottom) public onlyOwner {
        PARTS_FACE.push(bottom);
    }

    function setPudding(string memory bottom) public onlyOwner {
        PARTS_PUDDING.push(bottom);
    }

    function setTop(string memory bottom) public onlyOwner {
        PARTS_TOP.push(bottom);
    }

パーツのランダムな組み合わせどうするか問題
mintの度にランダムでパーツが組み合わさるように実装を行っていました。
唯一無二というのがNFTなので、同じパーツの組み合わせを作成したくありません。

単純にmintした組み合わせを記憶しておき、次のmint時には記憶された組み合わせの場合はもう一度ランダムで組み合わせを計算する実装を行おうと思っていました。
この場合、mintすればmintするほど再計算の量が多くなってしまい、最後の1個の組み合わせのmintをする時に最もgasがかかってしまいます。

そこで、二次元配列形式で組み合わせデータを用意しようと思いました。

[
  [ボトムパーツindex, 顔パーツindex, 本体パーツindex, トップパーツindex],
  ...
]

組み合わせ数は11760通りあり、すべてを定義すると膨大なgasがかかってしまうので、もう少し工夫する必要に迫られました。

いろいろと考えた結果、uint256型の一次配列で定義することにしました。

1つのアイテムのパーツの組み合わせを16進数4桁で表現します。
ボトムパーツindex=1, 顔パーツindex=2, 本体パーツindex=3, トップパーツindex=4
の場合は

0x1234

という形になります。

この塊を16組つなぎ合わせます。

ボトムパーツindex=1, 顔パーツindex=2, 本体パーツindex=3, トップパーツindex=4
ボトムパーツindex=9, 顔パーツindex=8, 本体パーツindex=7, トップパーツindex=6
ボトムパーツindex=3, 顔パーツindex=5, 本体パーツindex=2, トップパーツindex=8

...

の組み合わせを表現する場合、