画像生成AI「DALL-E3」を使って２Dドットゲームの背景を生成する

## 最初に
　ChatGPT Plusには画像生成AIの機能が備わっているとのことを記事で知りました。早速試してみたところ、その精度の高さに驚きました。これは、ゲームの背景作成やステージデザインに非常に役立てそうだなと思い、今回はその機能を使って背景画像を作成してみました。


## 今回使用するもの
・unity
・DALL-E3
・ChatGPT Plusで使用できる機能「Advanced data analysis」
・画像の一部を切り抜ける編集ソフト


### ・DALL-E3について
DALL-E3はOpenAI社が公開したばかりの最新の画像生成AIで、テキストプロンプトからその内容を反映した画像を生成するDALLシリーズの最新版です。ChatGPTとの統合により、ユーザーは直感的な方法で画像を生成できるようになり、この強力な機能はChatGPT Plusを通じても利用可能です。<font color="Red">DALL-E3によって生成された画像は商用目的での利用も認められています。</font>

### ・ChatGPT Plusの「Advanced Data Analysis」機能について
「Advanced Data Analysis」は、ChatGPT Plusで利用できる機能の一つです。この機能を使用すると、ユーザーはChatGPTに対して実行したいプログラムの指示をするだけで、Pythonコードの生成からプログラムの実行までを自動的に行ってくれます。
簡単な画像処理などのタスクにもこの機能を活用できるため、今回はこの機能を使い、画像のリサイズを行います。



## 背景を作る流れ
1.DALL-E3で画像を生成
2.その画像の中で使いたい部分を画像編集ソフトで切り抜き
3.ChatGPT「Advanced data analysis」で画像をリサイズ
4.unityでリサイズした画像を配置、タイルマップ化







### 1.DALL-E3で画像を作る
　今回は夜の図書館っぽい背景を作りたいのでそれっぽいプロンプトを書きます。
出来上がったのが以下のような画像。いい感じですが、奥行きがでてしまっています。ただ、部分的に使えそうなところがあるため、その部分を切り取って使用します。

![dell-e3_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/b2bc214d-80cb-3c79-bf7c-be76cc56d33f.jpeg)

　
　いろいろなプロンプトを試した結果、絵画や本棚といった特定の要素の数を少なく指定すると、奥行きのないような画像が生成されやすかったような気がします。また、「平面的な」というフレーズを入れても出やすかったです。
![dell-e3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/beb02b12-8d5f-a662-0be0-f8d3d3075a5b.jpeg)


### 2.画像の中で使いたい部分を画像編集ソフトで切り抜き
　生成した画像から使いたい部分を画像編集ソフトで切り抜きます。以下の画像の赤枠の部分を切り抜きます。
![スクリーンショット 2023-10-20 181502.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/0c5b94e0-2822-a1b7-ad12-b5c2da04cbef.jpeg)
![絵画、本棚.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/f9f21071-fab4-e066-d972-5845e7e8afa4.png)

　今回はGIMPという無料ソフトを使いました。切り取った画像を透過PNG形式で保存できれば他のソフトでも問題ないです。
　以下の画像が切り取った画像。
![スクリーンショット 2023-10-21 203343.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/359111ec-290b-9e9d-bcc2-e1351296cb3e.jpeg)


### 3.ChatGPT「Advanced data analysis」で画像をリサイズ
一マスのサイズを32x32ピクセルに設定するため、画像を32の倍数の解像度にリサイズします。
![スクリーンショット 2023-10-20 002503.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/2cbda27a-0a34-3727-58f0-269ccf68aced.jpeg)

### 4.unityでリサイズした画像を配置、タイルマップ化
unityでタイルマップとして使いたい画像をタイルマップ化します。

![スクリーンショット 2023-10-21 203606.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/709148b7-fb80-2532-4401-3d0dab4ea87a.jpeg)

![スクリーンショット 2023-10-20 170643.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/4f9c0378-3357-f2ee-64f0-752bd48802aa.jpeg)


複数のタイルマップを作成し、ソート順やZ位置を変えてレイヤーを重ねていきます。

#### 壁を作成
![スクリーンショット 2023-10-21 205329.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/8b2da502-fb72-dafa-29ea-9a4a7ba96b9f.jpeg)

#### 柱や柵を作成
![スクリーンショット 2023-10-21 205702.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/bf6930bf-0374-c01d-27ff-d82405c652ab.jpeg)



![スクリーンショット 2023-10-21 205729.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/961089cb-e5ea-a474-4d7c-9c5bc6457337.jpeg)

#### 松明、絵画、本棚の画像を配置
![スクリーンショット 2023-10-21 205917.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/ffcd53bd-0721-a37d-4edd-57d24d2887d4.jpeg)
#### タイルマップや画像の明るさを調整
![スクリーンショット 2023-10-21 210006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/93f2b6fe-6000-5e6d-8ef0-4d0ab880add1.jpeg)

### 完成！
それなりにいい感じの背景が出来上がったんではないでしょうか。
![スクリーンショット 2023-10-21 214731.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1477630/2e017a84-c177-fdba-9fb3-85081c180b51.jpeg)


## 最後に
　今回はDALL-E3で背景画像を作成しました。今後は、ゲームの障害物やステージ要素の作成にもこの技術を活用してみたいと思います。