LOOTを使ってボクセルジェネレーターを作る

LOOTを使ってボクセルジェネレターを作る。

一回LOOT本体の理解の為文字改変を行ったものも置いておく（単純に配列の文字を替えただけ）

↓

NinjaBag #1 - NinjaLoot | OpenSea
Loot is randomized Ninjaparts.
opensea.io

手順

①ボクセルをSVG化

②Lootを改変して、配列に<g>のSVGを格納する

↑今回はここまで行った。

ninjaBag #1 – kirinLoot V4 | OpenSea

①そもそも、SVGは、３Dを表示できないため

blenderを通してobj（FBX）をSVGに変換して書きだすという必要がある。

Blender のラインアートの使い方 (dskjal.com)

↑これが、参考になりそう。この手段であれば、普通の３Dでも同様に出来そう。

SVGパーツはイラストレーターを使って作った。塗りつぶし機能があるからだ。

線が多い＝それだけSVG行数が長くなるので、極力単純化することが必要。

（ガス代が無限にかかるので）

イラストレーターから、書き出しをおこなうとSVGが出来る。

☆ポイント☆

SVG書き出しをするとそれぞれのパーツの大きさにあったサイズで出力されてしまうので、

ジェネレーターをやる場合、表示したいサイズに合わせた枠線を引く必要があるかも。

②Lootを改変する。↓

Loot: LOOT Token | Address 0xff9c1b15b16263c61d017ee9f65c50e4ae0113d7 | Etherscan

今回は↓

Loot | Address 0xbbd2e76c1dec7b1c3a13f9db7c0b166d93091efb | Etherscan

第５回 solidity学習会　講義ノート（3/19 AM8:00~）｜ユウキ｜note

このコントラクトコードをコピーして、remixに張り付ける。

ユウキさんの、作ったランダムな円を表示させるためのコードを用いる。

remixにコピペ。

contract NinjaLoot is ERC721Enumerable, ReentrancyGuard, Ownable {
string[] private radiuses = [
"<g ><path d=\"M85.94,71.73a8.14,8.14,0,0,1-1.43,1.93,7.73,7.73,0,0,1-2.52,></g>"
];
string[] private strokes = [
     "<g ><path d=\"M37.9,91.55a.64.64,0,0,0,0,.09,1,1,0,0,0,.13.27c.13.24.27.47.41.71\" style=\"fill:none;stroke:#4e3e24;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.900605119263332px\"/></g>"

];

function random(string memory input) internal pure returns (uint256) {
    return uint256(keccak256(abi.encodePacked(input)));
}

function getRadius(uint256 tokenId) public view returns (string memory) {
    return pluck(tokenId, "MIMI", radiuses);
}

function getStroke(uint256 tokenId) public view returns (string memory) {
    return pluck(tokenId, "ME", strokes);
}


function pluck(uint256 tokenId, string memory keyPrefix, string[] memory sourceArray) internal pure returns (string memory) {
    uint256 rand = random(string(abi.encodePacked(keyPrefix, toString(tokenId))));
    string memory output = sourceArray[rand % sourceArray.length];
    return output;
}

function tokenURI(uint256 tokenId) override public view returns (string memory) {
    string[4] memory parts;
    parts[0] = '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 350"><style>.base { fill: white; font-family: serif; font-size: 14px; }</style><rect width="100%" height="100%" fill="lightgreen" />';

    parts[1] = getRadius(tokenId);

    parts[2] = getStroke(tokenId);

    parts[3] = '</svg>';




    string memory output = string(abi.encodePacked(parts[0], parts[1], parts[2], parts[3]));


    string memory json = Base64.encode(bytes(string(abi.encodePacked('{"name": "ninjaBag #', toString(tokenId), '", "description":"ninjalootisinterasting.", "image": "data:image/svg+xml;base64,', Base64.encode(bytes(output)), '"}'))));
    output = string(abi.encodePacked('data:application/json;base64,', json));

    return output;
}

1291行あたりからを改変している。↑

改変元では、円のSVGを描いてそれを配列をつかって要素部分を変化させるというものだった。

今回は

Aパーツ【耳】

Bパーツ【目と口と眉】

を合体させるという方法にしている。

parts[0]では、<SVG>の設定を行っている。

xmlns=”http://www.w3.org/2000/svg”　このURLを参照しているらしい

preserveAspectRatio=”xMinYMin meet　SVGの画面に合わせてというやつ。

縦横比の違う画像などを使用するときに効いてくる。

SVGのviewBoxをわかりやすく紐解く｜NEWS｜株式会社INDETAIL（インディテール）


はじめの、
string[] private radiuses = [
“<g ><path d=\”M85.94,71.73a8.14,8.14,0,0,1-…]

というのは配列。

string =文字 の配列である。文字要素という物（りんごなど）をいっぱい入れられるかごという感じだ。

[“A”,”B”,”C”] という感じで表記する。

このAの部分に耳を示すSVGを入れるのだが、

初めの2行は不要なので消す。（共通にparts[0]に記載される）

一番最後の</svg>も消す。（重複する為最後に共通のparts[最後の数字]を入れる。）

また、”<””>”と、二重””になってしまうため、一度メモ帳にコピペして

編集⇒置換で

“を/”に変える。

☆ポイント☆

parts[3] = ‘</svg>’;

最後に必ずこの<svg>閉じタグをつける。

☆メモ☆

出力形式をCSSにしておくと <style>が.cls-1というので表示される。

<defs>
    <style>
        .cls-1{fill:#d8ac36;}.cls-2{fill:#4b3b20;}
        .base { fill: green; font-family: serif; font-size: 9px; }
    </style>
</defs>

↑このように変更すれば、イラストレーターでつくった<path class=”cls-1″＞も表示できそう。

<defs></defs>タグはここの間は画面に表示しないやつだよという意味。

コメント

タイトルとURLをコピーしました