Stable Diffusion

「WebUI」でRPG風のドット絵を手軽に作成！呪文公開＆拡張機能「Pixelization」＋α

今回はクオータービューのゲーム風ドット絵を作る呪文と、Stable Diffusion webUIの拡張機能をご紹介！「クオータービュー」とは2Dゲーム等で見られる斜め上から見下ろしたような俯瞰型の画面で「アイソメトリック」という立体物を表現する図法を使ったタイプが多いです。
プロのドッターが生み出すドット絵は芸術品ですが、ここではWebUI＋外部ツールを使って手軽にそれっぽいドット絵を作ってみます。

なお「タクティクスオウガ」や「ファイナルファンタジータクティクス」などがこの画面スタイルですね。個人的にも大好きなゲームです。
くらつひわ
ドット絵のクオータービュー形式と言えば
「ウルティマオンライン」の2Dクライアントも…
ブリタニアの民よ、エンターテイナーたれ！

ドットアイコン化の手順

STEP
「Stable Diffusion WebUI」で建物の画像を生成
STEP
拡張機能「Pixelization」でドット化
STEP
拡張機能「Rembg」等で背景透過
くらつひわ
ね、簡単でしょ？（言いたかった台詞）
実際に簡単なので、さくさく進めていきます

「Stable Diffusion WebUI」で画像生成

まずは、こういう絵を用意してみましょう。
正式なアイソメトリックは縦・横・高さの三方向を120度ずつになるようにしますが、生成してるとその辺りが怪しげなのも出来上がります。ふわっと、雰囲気でいきましょう。
no humans, knolling, simple background, brown background, fantasy,
miniature house knolling,
Negative prompt: EasyNegative, text, signature, title, copyright name, copyright, watermark, modern architecture, modern object,
Steps: 30, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 3736566419, Size: 768x512, Model hash: ded0c94f95, Model: ShiratakiMix-fixed, Clip skip: 2
なお、この「knolling」は本来、別の意図で使われる言葉です。
教えて！ChatGPT先生
ノーリング（knolling）とは、物の整理法の一つで、同じ種類の物を平面上に整然と並べて配置することを指します。具体的には、物を並べる前に全てを取り出し、形状やサイズ、色などで分類し、それらを整然と並べて配置することで、視覚的に整理された状態を作り出す手法です。この手法は、製品やアート作品、写真などで使用され、美しく整ったデザイン効果を生み出すことができます。
打率が高くてコントロールしやすいプロンプトは他にもあると思いますが、記録として掲載しておきます。後ほど、別のプロンプトを試してますので併せてご参照ください。
ちなみに特に時間帯を指定しなかったのですが、良い感じにライティング＆照り返し発生。

では、これをドット絵に仕立てます。

拡張機能「Pixelization」でドット化

まずは必要な機能をインストールを実施します。
こちらはStable Diffusion WebUI（AUTOMATIC1111）の拡張機能です。

Pixelizationのインストール

  1. 拡張機能（Extensions）タブをクリック
  2. 拡張機能リスト（Available）タブをクリック→読込ボタンをクリック
  3. 一覧から「stable-diffusion-webui-pixelization」を探す
  4. 右端の「インストール（Install）」をクリック
  5. 最下部の「Reload UI」をクリック（自動でリロード反映されるかも？）
  6. 下記ページのリンク先にあるモデルファイル（checkpoints）をダウンロード
    stable-diffusion-webui-pixelization
    ・pixelart_vgg19.pth
    ・alias_net.pth
    ・160_net_G_A.pth
  7. 上記３点のファイルを下記ディレクトリに置く
    webui\extensions\stable-diffusion-webui-pixelization\checkpoints

Pixelizationの使い方

  1. その他（Extras）タブをクリック
  2. ドット化したい画像ファイルを単一画像（Single Image）エリアにドロップ
  3. 下の方に追加された「Enable pixelization」に✅を入れる
  4. 上の方にあるオレンジ色のボタン「生成（Generate）」をクリック
出来上がり！
ドット化されたファイルは「webui\outputs\extras-images」にあります。
ピクセルサイズ（Pixel size）はデフォルトの「4」がちょうどいい感じですが、お好みで変更が可能です。ちなみに「4」の場合、元画像の1/4サイズに縮小されます。

なお、解像度を保持（Keep resolution）にチェックを入れると元サイズと同じになります。
※原画のサイズのままだと解像度がやや大きいのでいったん縮小して元サイズとしています
元サイズ：400×266px

解像度を保持／ピクセルサイズ：4

解像度を保持／ピクセルサイズ：1

拡張機能「Rembg」等で背景透過

透過済みの完成品
背景透過が出来るツールであれば何でもOK。WebUIにも下記の拡張機能があります。
  • Rembg（別ページで詳しく解説しています）
  • PBRemTools（最近出た拡張機能です！）
関連記事簡単に背景を除去して透過できる！Rembgの使い方（WebUI AUTOMATIC1111 拡張機能）
では今回も、下記のイメージを使って背景透過の比較テストをしてみます。

Rembg（WebUI拡張機能）

デフォルト設定の状態です。右側の隙間はやや透過しきれませんでしたが、綺麗です。
アルファマット合成（Alpha matting）に✅を入れると、さらに細かく調整が出来るので良い数値を模索するのもアリだと思います。

remove.bg（外部）

https://www.remove.bg/ja/
これは優勝では。外周はこれが最も綺麗に透過できましたね！画像内部だと抜かなくていいところをやや抜きかけてる気配がありますが、外周さえ綺麗に処理してもらえれば内部はそこだけ切り貼りも可能なので個人的には問題なし。
パソコン／スマホ用アプリもあり、プレビューで確認しながら調整したり、複数ファイルの一括処理も出来るようです。
くらつひわ
ちなみにタイトルの「+α」がこれです
外部サイトのツールなので…

Remove background｜Clipdrop（外部）

Clipdrop: Remove the background of images for free with incredible accuracy
Remove your image background in a click
https://clipdrop.co/remove-background
画像が劣化してしまいました。背景透過の他にアンシャープか何か自動的に適用された結果だと思いますが、止めるオプションが見当たらず…なお、APIの提供があります。

Anime Remove Background（外部）

「Anime Remove Background」はキャラ特化のようで、建築物等は「背景」としてそもそも除去されて何も残らず…という結果でした。
くらつひわ
あとは自力で気になる部分をドット打ちして修正！
筆者はSAI2の「2値ペン」を使ってるけど、使いづらい…
アイコン制作ツールとかの方が楽だと思います
どうしても白っぽいフリンジ（境界線の汚れ）が残る！という場合、いっそ2～3pxの境界線を付けてしまうのもデザインっぽくて個人的には好きです。
こういう感じ

おまけ：他のプロンプト例

「knolling」でもそこそこ打率は高いんですが、カスタムしやすいように色々と模索しました。なかなか決め打ち出来ない状態ですが、呪文の叩き台として参考になれば幸いです。

本来の意味合いでの「knolling」

そもそも、Twitterのタイムラインでたまたま見かけた「knolling」が面白そうで始めたので最初でした。これは「ファンタジー世界の盗賊の持ち物ノーリング」がテーマ。
Medieval thief's tools knolling items, brown background, simple background,
Negative prompt: EasyNegative, text, signature, title, copyright name, copyright, watermark,
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 3087265636, Size: 808x512, Model hash: ded0c94f95, Model: ShiratakiMix-fixed, Denoising strength: 0.7, Clip skip: 2, Hires upscale: 1.5, Hires upscaler: Latent
くらつひわ
その後は「アルケミストのノーリング」とか
「死霊術師のノーリング」とか出して喜んでました
これはアルケミストの方。これもドット化→背景透過してみました。はい、かわいい！！

高さのある立体物はどうなるか

no humans, knolling,
chair collection knolling items, simple background,
Negative prompt: EasyNegative, text, signature, title, copyright name, copyright, watermark, modern architecture, modern object,
Steps: 20, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 676493656, Size: 768x512, Model hash: ded0c94f95, Model: ShiratakiMix-fixed, Denoising strength: 0.7, Clip skip: 2, Hires upscale: 1.5, Hires upscaler: Latent
くらつひわ
お！それなら「ファンタジーRPG風の家アイコン」とか
ずらっと並べられたりしない？
…と思ったのが、きっかけでした。クオータービュー形式のミニチュアハウスを並べたい。

呪文サンプル・その１

no humans, knolling, simple background, white background, fantasy,
a set of six low polygonal houses with trees and bushes on the roof and a small courtyard on the ground, 2d game art, concept art, plein air
Negative prompt: EasyNegative, text, signature, title, copyright name, copyright, watermark, modern architecture, modern object,
Steps: 20, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 2562719859, Size: 768x512, Model hash: ded0c94f95, Model: ShiratakiMix-fixed, Denoising strength: 0.7, Clip skip: 2, Hires upscale: 1.5, Hires upscaler: Latent
ググって海外サイトのプロンプト例も参考に組み込んでみました。ただ、建物を示す部分が長文スタイルなので、さくっと変更しづらいのが難点。でも打率は高め！

呪文サンプル・その２

best quality, masterpiece, Isometric rendering of single building on a white background,
fantasy, ancient broken ruins,
(white background, isometric:1.2),
Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2),
Steps: 30, Sampler: Euler a, CFG scale: 7, Seed: 763405787, Size: 768x512, Model hash: 3c2a53d009, Model: SukiAniMix-V1.1, Clip skip: 2
「knolling」から「Isometric」という単語にチェンジ。建物自体の指定は出来るだけ単語だけでシンプルに詠唱できるように検討しました。遺跡かっこいい。

たまに背景がグラデーションになったり、ただの背景画像になったりしたので
(white background, isometric:1.2)
と再度、強めに指定してます。お守り程度の効力ですが、まずまず効果あり。

4/27追記：最近使ってる呪文

absurdres, best quality, fantasy, isometric, (waterway, ancient ruins:1.2), knolling style, knolling items, white background, 

Negative prompt: EasyNegative, text, signature, title, copyright name, copyright, watermark, 

Steps: 30, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 2193174021, Size: 512x512, Model hash: 369feec07a, Model: breakdro_I1464, Denoising strength: 0.6, Clip skip: 2, ControlNet-0 Enabled: True, ControlNet-0 Module: none, ControlNet-0 Model: None, ControlNet-0 Weight: 1, ControlNet-0 Guidance Start: 0, ControlNet-0 Guidance End: 1, Hires upscale: 1.5, Hires steps: 10, Hires upscaler: Latent (nearest-exact)
「isometric」と「knolling」を併用するスタイル。あくまでStable Diffusion用。
ファンタジー系なら「(waterway, ancient ruins:1.2)」の中身だけ変更すればOKだし、現代の町並みなどは「fantasy」を削除してください。

また、生成中にちょくちょく端が切れてしまう惜しい画像が誕生すると思いますが、その場合は下記記事を参考に「切れたその先」を補完することも可能です。
関連記事【webUI】端が見切れた画像を救う！Poor man’s outpainting（簡易アウトペインティング）を使って続きを描き足してもらおう

呪文サンプル・その３

best quality, masterpiece, Isometric rendering of single building on a white background,
fantasy, medieval small house and garden on block tiles, dim light,
(white background, isometric:1.2),
Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2),
Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 3388075331, Size: 768x512, Model hash: 3c2a53d009, Model: SukiAniMix-V1.1, Clip skip: 2
最初の頃にたまたま出た夜っぽい雰囲気のライティングを再現したくて「dim light」追加。
「night」と入れた場合、それに引きずられて背景が黒系になったりしますが、透過に問題なさそうなら多少、別の色が付いてもOKだと思います。

呪文サンプル・その４（失敗例）

best quality, masterpiece, Isometric rendering of single building on a white background,
fantasy, medieval port town, ocean,
(white background, isometric:1.2),
Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2),
Steps: 30, Sampler: Euler a, CFG scale: 7, Seed: 3133489649, Size: 768x512, Model hash: 6eef675349, Model: breakdro_A521, Clip skip: 2
これは失敗例。港町が作りたかったんですが、海が普通の表現になってしまう…
海も同じようにブロックタイル化して欲しいんですが、どうしたものか。

呪文サンプル・その５

best quality, masterpiece, Isometric rendering of single building on a ocean tile,
fantasy, medieval port town,
(white background, isometric:1.2),
Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2),
Steps: 30, Sampler: Euler a, CFG scale: 7, Seed: 258347410, Size: 768x512, Model hash: 6eef675349, Model: breakdro_A521, Clip skip: 2
「Isometric rendering of single building on a ocean tile」に変更してみました。
そうそう、それだよ！！　ただし、打率はかなり低め。10枚に1枚ぐらいですかね…
くらつひわ
ちなみに「single building」とやってるせいか、
例えば麦畑とか草原の丘陵地帯とか、建物以外については
上手に出せてません…ダンジョンとかの「内部」も！
良さげなプロンプトがあれば、そっとネットの海に流してください…（Twitterとか）
お待ちしてます！

追記：室内／ダンジョン内部

Twitterで検索したら、欲しい雰囲気のプロンプトを海外勢が過去に流してました！
キーワードは「inside」でした。そんなシンプルな…！

室内

best quality, (isometric:1.5), white background, simple background, 2d game art, concept art, no humans, BREAK
(inside a dining room:1.2), white wall, wooden floor, red couch, 
Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2), 3d, Interior,
Steps: 30, Sampler: Euler a, CFG scale: 7, Seed: 3378005679, Size: 512x512, Model hash: 5a23f6ba50, Model: AC0.2-v1.0-fp16, Denoising strength: 0.55, Clip skip: 2, Hires upscale: 1.5, Hires steps: 10, Hires upscaler: R-ESRGAN 4x+ Anime6B
ファンタジー要素を忘れましたが、綺麗に出来たので掲載！
適当な場所に「fantasy」「medieval」等と入れつつ、インテリアの指定すればOKかと。

ドット化

ダンジョン内部

best quality, (isometric:1.2), fantasy, white background, simple background, 2d game art, concept art, no humans, BREAK
(inside a dungeon:1.2), darkness,
Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2), 3d, Interior,
Steps: 30, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 3832041840, Size: 768x512, Model hash: 5a23f6ba50, Model: AC0.2-v1.0-fp16, Clip skip: 2
実は意味がわからないままコピペしてた「plein air」を削除して様子見。大丈夫そうです。
内部と言いつつ、窓があったりしますが…やや打率が悪く、窓やインテリアも出やすい。

ドット化

追記：麦畑

ぎりぎり成功例…黄金の麦畑にしたかった
best quality, masterpiece, (Isometric rendering of miniature wheat field on tile:1.2), extremely detailed CG,
fantasy, single bungalow in miniature golden wheat field,
(white background, isometric:1.2),
Negative prompt: Negative prompt: EasyNegative, east asian architecture, (signature, sign, text, copyright name, title:1.2), car,
Steps: 30, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 3400348346, Size: 512x512, Model hash: 5a23f6ba50, Model: AC0.2-v1.0-fp16, Denoising strength: 0.4, Clip skip: 2
「miniature wheat field」「miniature golden wheat field」と、とにかく「miniature」を入れないと小麦だけ原寸サイズみたいな面白い画像しか生成してくれず…
そうはならんやろ、の典型
「golden」と入れると他まで輝き出す。仕方ないね…成功例は、そもそも麦畑すら黄金色になっていないので、もはや手を加えるしかない。
SAI2のレイヤーモード「カラー」で黄金の小麦色にざっくりと塗った上でi2iしたけど、もしかしなくてもこのままドット化しても良かったのでは。

ドット化

本当は「丘陵地帯」も入れてたけど麦畑の再現で精一杯でした。イメージしてたのは下記。
よかったらシェアお願いします！