Now and Nawoo

NFTの制作記録、技術メモ → C#, Solidity, Blockchain, Bitcoin, Ethereum, NFT

白黒ピクセルアートNFTを作りました (MonoPixelNFT)

NFT第3弾として、白黒の16x16ピクセルアートのNFTを作りました。

  • フルオンチェーンNFT
  • ピクセルアートを描いて、それをNFTとして発行できます(ガス代のみ)
  • 同じピクセルアートは1枚しか発行できません
  • Polygonのメインネットに公開
  • ピクセルアートを作成するためのUIサイトも作りました

UIサイトはこちら

OpenSeaで見る

Polygonscanで見る

使い方

まずUIサイトにアクセスしてください。

  1. 16x16サイズの白黒ピクセルアートを描く (マウスポチポチ)
  2. ピクセルデータがuint256のTokenIDに変換される
  3. [Connect MetaMask]ボタンでMetaMaskに接続 (ネットワークは Polygon Mainnetに設定してください)
  4. [Claim NFT]ボタンでNFTを発行する

という手順です。

直コンがいいという方は、2のTokenIDをコピーして、Polygonscanで claim関数の引数に指定してください。

なぜ白黒の16x16サイズにしたのか

16x16サイズの白黒ピクセルアートのデータ量は 16x16x1bit = 256 bit です。 256 bitといえば、NFTを区別するためのTokenIDも256 bit (uint256)です。 ということは、ピクセルデータをTokenIDとして保存できるんじゃないか?、と思いついたのが今回のNFTを作るきっかけです。

ピクセルアートの右下のピクセルを0番目のbit、左上のピクセルを255番目のbitとして、uint256に変換します。 ピクセルが白ならば1、黒なら0です。 UIサイトでエディタを触りながら、下に表示されるTokenIDを見てもらえれば、なんとなくわかると思います。

同じピクセルアートは同じTokenIDとなります。そのため、同じピクセルアートは1枚しか発行できません。

UIサイトについて

今回はコントラクトはわりと簡単にできたのですが、UIサイトに苦労しました。 Reactとweb3.jsの勉強しながら作ったのですが、Webアプリ開発になれていないので大変でした。 本当はCSSフレームワークを使ってかっこいいサイトを作りたかったのですが、そこまで余裕がなく、、、 次回の課題とします。

ホスティングはVercelを使いました。最初はNetlifyを使ったのですが、ページの表示にすごく時間がかかるので調べてみると Netlifyは日本からのアクセスはかなり遅いようです。Vecelに乗り換えるとサクサクになりました。 どちらもGitHubと連携できるので、GitHubにpushすれば自動的にビルド&公開されるので便利です。

 

コントラクトのコード解説や、React関連の話は、また後日記事にしたいと思います。 UIサイト完成で燃え尽きてしまったので、今日はこのくらいにしておきます。