Home

画像の重ね合わせ設定

目次 [hide]

重ね合わせ設定の基本

layersフォルダについて

まずは画像を格納するlayersフォルダの構成を見ていきましょう。複数のフォルダと画像ファイルがすでに格納されていると思うのですが、基本形は以下の通りとなります。

📁 layers
┗ 📁 プロパティのカテゴリ名
  ┣ 🖼️ プロパティ名1#重み1.png
  ┣ 🖼️ プロパティ名2#重み2.png
  ┗ 🖼️ プロパティ名3#重み3.png

#以降の数字に合わせて、ジェネラティブ画像を生成する時に使用される頻度を調整することができ、レアリティのばらつきを作ることができます。

#以降の数字=確率というわけではなく、同じフォルダに入っている画像の重みのうち、どれくらいの割合を占めるかで計算されす。具体的には画像の重み / フォルダ内の画像の重みの合計 × 100で計算が行なえます。

なお、画像名に「#重み」部分がないと予期せぬ挙動をしうるので、必ず何かしらの数字を入れるようにしてください。
❌ High.png
⭕ High#20.png

デフォルト構成を見てみよう

では、実際にデフォルトのフォルダの構成を確認してみましょう。
layersフォルダ以下にBottom lid(下まぶた)フォルダがあるので、中を確認してみてください。

📁 layers
┗ 📁 Bottom lid
  ┣ 🖼️ High#20.png
  ┣ 🖼️ Low#40.png
  ┗ 🖼️ Middle#40.png

ここでは「High」「Low」「Middle」の3種類の画像が「20」「40」「40」の重みで設定されています。「High」の使用率を計算してみると、20 / (20 + 40 + 40) × 100 = 20%となります。

ついでに、ここで設定された画像が実際にOpenSea上でどのように表示されるのかも見てみましょう。
以下のように、フォルダ名がプロパティのカテゴリ名に、画像名がプロパティ名に対応していることがわかると思います。
（フォルダ名はすべて大文字に変換されるようです）

設定ファイルについて

前パートでも

src/config.js [25~38行目]const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" },
      { name: "Eyeball" },
      { name: "Eye color" },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid" },
      { name: "Top lid" },
    ],
  },
];

変数名	意味	初期設定内容
growEditionSizeTo	何番までの画像を作成するか	5つ
layersOrder	どの順番で画像を重ね合わせるか	先に定義されたものが画像の背面にくる

重ね合わせ設定を複数パターン設定する方法

ArtEngineでは、複数パターンの重ね合わせ設定をすることが可能です。{から},までをコピーして、すぐ下に貼り付ければOKです。

}の後の,を忘れたり、];の外側にコピーしてしまうと予期せぬ挙動になってしまうので、慎重にコピーしましょう！

↓

複数パターン設定するときに気をつけるべきはgrowEditionSizeToの数値です。

この数値には「その設定でいくつ画像を作るか」ではなく「その設定の時点で合計いくつ画像ができているか」を設定する必要があります。

これだけだとわかりづらいので、設定①で画像を10枚、設定②で画像を5枚作りたい場合を考えてみます。設定①は何も考えずにgrowEditionSizeTo: 10を設定すればよいのですが、設定②でgrowEditionSizeTo: 5とするのは間違いです。

「設定②の時点で画像がいくつできているか」で考えると10 + 5で合計15枚ですね。つまり、設定②ではgrowEditionSizeTo: 15とするのが正しいということになります。

テスト用NFTの例

今回もぼくのテスト用NFTを例に紹介していきます。漢字の部首を各レイヤーとして分離して、画像をランダムに組み合わせてオリジナルの漢字を1000通り作成するといったものになります。

設定ファイル

設定ファイルですが、こちらでは2つの設定があります

① 背景→へん→つくり→かんむり→あしの順に重ねた漢字画像を1〜950まで作成(950枚)
② 背景→単漢字→かんむり→あしの順に重ねた漢字画像を951〜1000まで作成（50枚）

今回の例だと重ね合わせ順番あまり意味が無いのですがあしからず、、

src/config.jsconst layerConfigurations = [
  // 重ね合わせ設定①
  {
    growEditionSizeTo: 950,
    layersOrder: [
      { name: "Background" },
      { name: "Hen" },
      { name: "Tsukuri" },
      { name: "Kanmuri" },
      { name: "Ashi" },
    ],
  },
  // 重ね合わせ設定②
  {
    growEditionSizeTo: 1000,
    layersOrder: [
      { name: "Background" },
      { name: "Single" },
      { name: "Kanmuri" },
      { name: "Ashi" },
    ],
  },
];

ここで注意するのはgrowEditionSizeToです。1つ目は単純に作成したい「950」を指定すればOKなのですが、2つ目は951以上の数字を設定する必要があり、「1000」を指定することで1000 - 950 = 50枚の画像が生成されるようになります。

重ね合わせ設定①

① 背景→へん→つくり→かんむり→あしの順に重ねた漢字画像を作成

重ね合わせ設定②

② 背景→単漢字→かんむり→あしの順に重ねた漢字画像を作成

まとめ

気をつけるポイントとしては

画像ファイルの最後にに必ず#数字を入れること
設定ファイルのgrowEditionSizeToは前の設定の番号より大きい数字を入れること
設定ファイルの{ } , ]の位置関係を間違えないこと

となります。

画像作成に関してはクリエイターさんによってバリエーションが様々なので、ここまで説明した内容を元に、layersフォルダ以下の構成と、src/config.jsのlayerConfigurationsの設定をしてみてください！