OnChainSlimeの紹介とコード解説 (1)

おひさしぶりです。しばらく忙しくてブログさぼってましたが、そろそろ再開したいと思います。

さて、今日はOnChainSlimeという新作NFTの紹介とコード解説です。

NFT「OnChainSlime」を作りました!

前々から作りたいと思っていた、フルオンチェーン&ジェネレーティブ&ドット絵のNFTです。コントラクトとドット絵を私が作りました。販売は 206taro さんが担当です。

フルオンチェーン
ジェネレーティブ
かわいい(?)ドット絵
アートワークはCC0 (流行に乗ってみたｗ)
最大発行数 999枚 (現在は100枚をミント済み)
OpenSeaにて販売

パーツの組み合わせによって画像を大量に生成するジェネレーティブNFTです。ローカルで合成した画像をアップロードしているのではなく、ちゃんとコントラクト上で画像を合成しています。

ジェネレーティブNFTの場合、何が出るかわからないガチャ方式での販売が多いと思います。 OnChainSlimeもその予定だったのですが、諸般の事情(?)により、今回は運営(＝コントラクトオーナー)がミントして、OpenSeaに並べて販売する方式になりました。まずは100枚をミントしています。

スライムのしくみ

パーツ

スライムは、

背景
体
口
頬 (オプション)
目
頭 (オプション)

のパーツを持ちます。頬と頭のパーツはオプションなので、無い場合もあります。

DNA

これらのパーツ情報は、DNAという変数で管理しています。製作の都合上、背景もDNAに含めています(^^;

上のスライムのパーツ番号は、背景が00番、体が00番、口が02番、頬が01番、目が07番、頭が05番です。この場合のDNAは050701020000になります。

背景を除く、体、口、頬、目、頭のパーツが全く同じスライムは1つしかミントできません。上の例だと 0507010200** のDNAを持つスライムは1体しか存在しないことになります。

組み合わせ数

現在、登録しているパーツ数は

背景: 10種類
体: 10種類
口: 14種類
頬: 11種類
目: 14種類
頭: 12種類

です。すべての組み合わせは 2,587,200通りになります。

さらに、このNFTでは新しいパーツを後から追加できるようにしています。将来的にパーツを追加して、さらに多様なスライムが登場する予定です。

ミント

スライムをミントできるのはコントラクトオーナーだけです。(現在は206taroさん)

最大999枚というのはコントラクトで設定しているので、それ以上はミントできません。

パーツごとの出現数を先に決め、その範囲内でランダムにDNAのリストを生成し、それを元にミントしています。 100枚のうち1回しか出現していないレアパーツもあるので、探してみてください。

DNAリストの生成はオンチェーン上で行っているのではなく、ローカルのパソコンで行っています。そんなのはジェネレーティブって認めない！って言われちゃうかもしれませんが、パーツごとの出現数を決めてランダムにDNAを生成する、というのを Solidityで作るとかなり複雑になりそうなので、ローカルでやることにしました。

(出現数ではなく出現率なら簡単なのですが、そうすると999体ミントしたけれど1度も出現しないパーツが出てくる可能性があります。)

画像生成のしくみ

スライムのドット絵は48x48ピクセルで描いています。一般的なフルオンチェーンNFTと同じように、コントラクト内でSVGを作成しています。

SVGの中に、各パーツのPNG画像をimageタグで順番に並べています。生成されるSVGを簡単に書くとこのようになります。

<svg>
  <image href="背景データ"> 
  <image href="体データ"> 
  <image href="口データ"> 
  <image href="頬データ"> 
  <image href="目データ"> 
  <image href="頭データ"> 
</svg>

hrefで指定するデータは、PNG画像をBase64 エンコードして、dataURLにしたものです。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAgMAAAAqbBEUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURUdwTAAAANIZKtjdiAMAAAABdFJOUwBA5thmAAAAHklEQVQoz2NgGAWDEjA6IHHYJiBxpJYgcURDhpa3AIIgAf89SeK8AAAAAElFTkSuQmCC

各パーツのPNG画像は、あらかじめオンチェーン上のストレージにアップロードしています。

tokenURL関数が呼ばれると、

ストレージから必要なパーツの画像データを取得
dataURLに変換
imagaタグを作成
SVGデータを作成

という流れになります。

PNG画像はすべて48x48ピクセルで作成していますが、そのままでは小さすぎるので、480x480ピクセルに拡大しています。 SVGのサイズを480x480に設定して、imageタグのスタイルにimage-rendring:pixelatedを指定します。これが無いとぼやけた画像になってしまいます。

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 480 480" width="480" height="480">
<style>image{width:100%;height:100%;image-rendering:pixelated;}</style>
...