> For the complete documentation index, see [llms.txt](https://docs.witchpot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.witchpot.com/production/ino.md).

# 使い方の例

ここでは具体的に2Dゲームの背景画像を題材にstable-diffusion-for-unityの使い方の例を紹介します。

2D横スクロールゲームのステージ制作を行うワークフローを想定しています

## 概要

* ゲームシステムの簡易モデリング
* Depth2Imgによる画像生成
* 必用に応じてText2Imgによる背景画像制作
* 画像編集＋Img2Imgによる生成画像の調整

## カメラ及び画像生成の準備

Unity内のカメラ情報から取得したDepthを用いてDepth2Imgをします。

このためのカメラ設定および生成した画像を使用するCanvasを設定します。

* Gameビュー解像度\
  今回は横スクロールゲームを想定しており大きな横幅で生成するため1920x540を設定します<br>

<div><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FWgnBB9hRnW1FdnZLMe6c%2Fgameviewaspect1.png?alt=media&amp;token=585e3865-7d42-4a60-bc75-d1815265ba63" alt=""><figcaption></figcaption></figure> <figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FhxpiI2Cli2A6cK8vi3Rl%2Fgameviewaspect2.png?alt=media&amp;token=2bfcc81a-d548-439e-af72-a820b48eb793" alt=""><figcaption></figcaption></figure></div>

* Cameraを設定

  * CameraをDepth用に設定します。ここではRawImageがDepthに影響を与えないようにするためCameraのRendering > Culling MuskのUIを外します。

    <div align="left"><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2F8B0AEHaT6CGCkRVdZAg1%2Fimage.png?alt=media&amp;token=88623485-ae05-41e6-a800-ece8c8859bd4" alt=""><figcaption></figcaption></figure></div>

  * ProjectionをOrthographicに変更

    <div align="left"><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FM78U4zvUtzP5w4DCsIQ2%2Fimage.png?alt=media&amp;token=f7a930cf-1be7-47d5-9147-797d51d8f6fb" alt=""><figcaption></figcaption></figure></div>

  * ClippingPlanes Near/Farを調整\
    Near<->Farの差がを小さめに設定してください。これによりDepthが反映されやすくなります。<br>

    <div align="left"><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FHeYECANVHa7tLSenEmUJ%2Fimage.png?alt=media&amp;token=cde36079-bca4-49df-a761-f0fa63753227" alt=""><figcaption></figcaption></figure></div>

* Canvas, RawImageを作成

  <div align="left"><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FcITYBfj7iQd5JR94otWL%2Fimage.png?alt=media&amp;token=57fe6689-d8f7-47ba-baf0-5977c019097a" alt=""><figcaption></figcaption></figure></div>

* CanvasのRenderModeをWorldSpaceに変更

  <div align="left"><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2F8EnigZrjBK81u3qc0L5O%2Fimage.png?alt=media&amp;token=14194c58-21dd-4438-a06a-172ec73f3a22" alt=""><figcaption></figcaption></figure></div>

* Canvas/RawImageのサイズをカメラに合わせて調整する

  <figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FFLgeI1GV4TXSyIoDnKUK%2Fimage.png?alt=media&amp;token=58de1c56-dbfd-471a-90f3-2fcc5a13e47a" alt=""><figcaption></figcaption></figure>

* RawImageにText2ImageWithControlNet.csをアタッチし生成する画像のサイズを指定\
  今回はGameビューで設定した1920x540を設定します。

  <div align="left"><figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FAWtZe6vfb9gM85HGjMSg%2Fimage.png?alt=media&amp;token=aee115fe-9c46-4b6c-a9d4-5fd5a1e17a7c" alt=""><figcaption></figcaption></figure></div>

## ゲームシステムの基礎となるステージ3Dモデルの作成

作りたいゲームのステージのベース形状を作ります。今回はProBuilderを使って制作しています

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FdEJ8BzilS9O3RLYvbM0r%2Fimage.png?alt=media&amp;token=bf3c329b-b4de-4c3a-a3b3-098027866c27" alt=""><figcaption></figcaption></figure>

## Depth2Imgによる画像生成

※Depth2ImgにはControlNetを使用しておりVRAMをかなり使用します。VRAM不足で生成できない場合は解像度を落とすなどが必用となります。

作った3Dモデルの形状に合わせて画像生成をします。

RawImageのText2ImgWithControlNetコンポーネント上でパラメータを設定してGenerateより画像生成を行います。

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FHopoCg1krhRMj8L70NpT%2Fimage.png?alt=media&amp;token=8df41fbb-1d14-469a-9aeb-aa2850a07300" alt=""><figcaption></figcaption></figure>

ControlTypeでDepth/Normalを選ぶことでUnity上のカメラ位置からの情報を利用してUnity上の3Dモデル形状に則した画像生成を行うことが可能です。

| Input                                                                                                                                                                                                              | Depth                                                                                                                                                                                                                                             | Normal                                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FEx2AG8wqXbqOETCabhlc%2Fimage.png?alt=media\&token=82a25746-016f-4a70-8c67-c9213606bf86) | ![](https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FfrYsyhJKX80s37N0fAfP%2Fa76b827e-2172-4dc7-a985-f1b8b62c558f.png?alt=media\&token=2afec399-6d74-4e97-911a-abcaa588f308) | ![](https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FdVWGlien5tv0baQQBHHW%2F0d6300a8-6609-4eed-adc9-46bb88c5d125.png?alt=media\&token=24291ccc-8696-4433-8025-b03478f979b0) |

Depth/Normalはそれぞれ3Dモデルの形状に則した画像が生成されますがそれぞれ上記の画像のような情報が入力となっています。大まかにNormalの方が直線的な線は正しく生成されますが平行な段差などが表現されにくいといった特性があります。

思ったような画像を出力できない場合、CfgScale, Weightなどのパラメータを調整したりModelやLoRAの設定を行ってください。

各パラメータの設定方法はこちらをご確認ください

{% content-ref url="/pages/riVo8g0CCBfqDyCEy6EW" %}
[Text to Image With ControlNet](/component/text-to-image-with-controlnet.md)
{% endcontent-ref %}

おすすめは絵柄を学習したLoRAを適用することで複数ステージで一貫性をもたせる使い方です。

※LoRAなどモデルの学習に許諾のない他人の画像を利用するなどの行為は規制が追い付いていない領域です。運営は一切の責任を負いません。クリエイター同士敬意を持って人の権利を侵害しないよう注意して使用してください。

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FEvevjaYHETJmTl1uAPRD%2F8d277046-3276-4597-af74-0b135bec56f5.png?alt=media&amp;token=3abba6f0-3b4a-4c53-80f3-6facd61d8492" alt=""><figcaption></figcaption></figure>

ある程度よい画像が出来たら、他のツールやImage to Imageなどと組み合わせることで調整が可能です。

## 最終画像の調整

生成された画像をImage2Imageや別の画像編集ツールと組み合わせてこまかな調整をします。

生成された画像はStreamingAssets内にあるのでこの画像をPhotoshopで大雑把に修正

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FwRLgpLW8BhVmcdFdQ7Ny%2FDemo2DEdited.png?alt=media&amp;token=8c1e277d-e256-495b-90ef-ab4632ca8047" alt=""><figcaption></figcaption></figure>

この画像をImage2ImageやInpaintを使って調整

stable-diffusion-for-unityではStableDiffusionWebUIを動かしているためコマンドプロンプトに記載のURLよりWebUIの機能を使用することが可能です。

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FGPKsFvrgawqcsrhZLZxn%2Fwebui.png?alt=media&amp;token=0a414b01-2af9-4965-863d-5bbe479bae1b" alt=""><figcaption></figcaption></figure>

今回はImage2ImageとInpaintを使用して整えました

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FvOoFu9g8GFewxjw53hFP%2Fimage.png?alt=media&amp;token=5ea14afb-7556-479c-9974-7f5c48acf981" alt=""><figcaption><p>Inpaint</p></figcaption></figure>

調整で以下のステージ画像を作りました。

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2F3GS5U1poWIe1MnvYhSNL%2Fimage.png?alt=media&amp;token=6037288c-6077-4b5b-8a4a-d85c9f04cacf" alt=""><figcaption><p>元のステージ</p></figcaption></figure>

<figure><img src="https://501701507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxpygm4kgEjp47Cbyg5EY%2Fuploads%2FooRZxuAqdCy1MgMdovaT%2F00026-4237068665.png?alt=media&amp;token=63b5aa09-e91c-4d05-a496-c5985e84f2cf" alt=""><figcaption><p>完成ステージ</p></figcaption></figure>

この画像を背景画像として、作った元のステージモデル上にキャラクター等を配置、SortingLayer,Order in layerを適切に設定することでゲームステージとしてりようすることが出来ます。