極力AIを使用してドット風ゲームを制作をしてるので素材のAI生成を中心に説明します

## 始めに
11月に以下のChatGPTにスイカゲームを作成してもらう動画を確認しました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/iUAzL_1f8ZE?si=kLCNSuOCn-CpuVuh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Chat GPTを利用してスイカゲームが作れるということを感銘し、どうせなら素材もAIたくさん利用してスイカゲームのクローンゲームを作成しようと考えたのでその工程を記載していきます。

## 追記(2024/01/13)

最終的に完成したゲームです。PC・スマホどちらでも遊べるので、よければ試してください！

https://unityroom.com/games/debu_game


## 制作中のゲーム

このゲームは、[でぶ Advent Calendar 2023](https://adventar.org/calendars/8539)の10日目に公開する予定でしたが、出来なかったので、また日を改めて出す予定のゲームです。
（鋭意作成中...画像は開発中のもので、食べ物と背景の色が重なってることに気づいたにも関わらず修正する時間がなかったほど進捗は微妙です…）
![制作中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/ec9582c1-cbdb-b725-80ac-fd37a9b1e140.png)



## 素材について

以下の素材は基本的にAIを利用して作成しています（部分的に手を加えています）
この記事ではAIによる素材の作り方を中心に説明していきます。
ただし、細かな設定までは解説していませんので、抜け漏れあることはご了承ください。
わけあって、プレイヤーキャラは[ツカッテさんのハロウィンおばけのイラスト](https://tsukatte.com/ghost-halloween/)を利用する予定です。

- ロゴ
- 背景
- 全体的な画像素材
- BGM
- 効果音

## ロゴ

gifアニメーションロゴを作成しました。
若干手を加えていますが、基本的にはAIを使って作成できます。
![ロゴアニメーション.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/d2bbdaac-aa53-223e-d3b4-f7fad97d4d1d.gif)

### Bing Image Creatorで題材を作成

文字を含む画像は、Bing Image Creatorなどがお勧めです。
試行回数は少々ありますが、いい感じのロゴを作ってくれます。ある程度の妥協も必要。

プロンプトは `"DEBU"と"ゲーム"が描かれたロゴ、高画質、ghostと食べ物を含めて` 
![ロゴ元.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/f8dba258-a936-deb8-60e1-0e58d748a554.jpeg)

#### スクショ
![BINGAIロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/80eddb45-004d-910f-6fd0-2e7a1d44ff15.png)

### クリスタで修正
気になる部分が残っていたのとと帽子を被せたかったため、手で直します。荒くで構いません。

![手書き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/e41448b5-c212-3433-fc96-0ea197842262.png)


### アニメーション
Stable Diffusionを利用して、アニメーションを作成します。
よく見るとちらちら動いています。
![00011-1260537103.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/bfb03ed1-b0ad-8028-7d3c-df4f9807719e.gif)

#### スクショ
Stable Diffusionの拡張機能Animate Diffにより、アニメーションが作成できます。
基本的にはがっつり動くので、同じく拡張機能のControlNetを利用して、元としたい画像を指定し、大きな変化は起こさないようにします。
出力はgifと同時にpngで1フレームごとに出力することも可能です。

![SDアニメロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/e402ae91-7635-4dba-804c-ff9aa91ce2c2.png)

#### プロンプト
ポジティブ
`ghost,(fat:1.2),purple hat,(angry:0.3),food,neon,light,white background, (black eyes:1.5)`
ネガティブ
`EasyNegative,lowres, bad anatomy, bad hands, text, error, humans`
EasyNegativeは、https://civitai.com/models/7808/easynegative を導入する必要があります。
出てきて欲しい情報をポジティブに、出てきてほしくない情報をネガティブに入れていきます。


##### 使用モデル
モデルはポップな感じの質感が出せる[Manmaru mix](https://civitai.com/models/86277/manmaru-mix)をcivitaiから取得しました。
人以外も綺麗に出てくれるのが今回の採用理由です。
![モデル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/d87ff142-5e87-18f1-4598-4d72d80914a8.png)

#### 補足
ControlNetで指定しないアニメーションはこのようにそこそこ動きます。
![00000-1153060046.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/ad940777-ce62-9f80-3a41-12ffb48e271c.gif)

### ドット化
Stable Diffusion Web UIでの[a1111-sd-webui-haku-img](https://github.com/KohakuBlueleaf/a1111-sd-webui-haku-img)の拡張機能をインストールしてドット化します。
基本的なドット化のパラメーターは変更可能です。
![ドット化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/0902533c-7d24-db10-c596-d25554b5090b.png)



### 透過

透過は長年お世話になっているツール[手軽に透明png](https://www.officedaytime.com/toumei/)で一枚ずつ、透過します。

![透過.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/43eda6ae-17d1-a209-4e5d-84d1c96c3389.png)

### gifに連結

[アニメーションGIF作成](https://ao-system.net/gifanima/)というサイトで透明のgif作成に対応してたため、利用しました。
16枚出力しましたが、チラチラしていればいいため5枚ほどでアニメーションにしています。
これで上記のロゴが完成です。

## 背景
以下の方法で生成して、ロゴと同様の過程でドット化します。
![back.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/eef07c70-75ce-e92e-d1d6-fa62b2510465.png)


### 低画質で作成
Stable Diffusionを利用して作成していきます。
毎回高画質で作成すると時間がかかるので、高解像度補助を抜いて低画質で何度か試したのち、よさげな出力があればSeedを固定して高画質で作成します。
![変換.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/ee0d54bc-5d23-ae40-f891-bdb58b98a023.png)

### スクショ
![背景.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/1715cd2b-5716-0da8-b013-8e8f8d4dd386.png)


## 素材

スイカゲーム同様食べ物の素材を作成しました。
Unity 2Dでは、透過の画像があれば衝突判定可能なので後は切り取って透明化すれば使えます。
一番小さいのはクッキーなんですが見えないですね…

![素材ドット_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/d47064c0-7eb5-7340-800e-1b4240f04818.png)

### LoRAの使用
食べ物はそれぞれ出力していきます。
ゲーム風の画像が欲しいため、LoRaを取り入れて作りましょう。
調べるとちょうどよい[GameIconResearch_food_Lora](https://civitai.com/models/81308?modelVersionId=131782)がありましたので、使いましょう。
![料理RoLa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/f9f01209-17b8-7e87-8a0a-0bb4838369e0.png)

### 出力例

![00229-manmaruMix_v10-sampler-DPM++ 2M SDE Karras-steps32-scale7-seed736361201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/87adb054-cd43-798a-11fd-1cb61336720a.png)

ポジティブ
`best quality,extremely detailed,best quality, detailed, best quality,white background, <lora:game icon institute_food icon:0.5>,no humans,game icon,food,sandwich`
ネガティブ
`(EasyNegative:1.2),(worst quality:1.4, low quality1.4), normal quality, jpeg artifacts, signature, watermark`

おおよそこんな感じで1つずつ、512*512で出力していきました。
後の作業はこれまでと同様の手順でドット化したため省略します。
ドットがばらけないよう、ドット化する前に素材のサイズ調整するようにしてください。

### ほかの素材
パーティクル用に雪の結晶も作成しましたが、降らせるとあまり合わなかったので使用しないかも…

![Snowflake.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/318dd7df-e8e5-ad10-75a1-b37b6178cf6a.png)


## BGM
あまりうまく生成できませんでしたが、ひとまず採用と考えているBGMです。
音楽形式としてはwavとして出力されます。wavしか保存しておらず、Qiitaにはwavをアップロード出来ないため、生成時に出力されるデータから変換してアップロードしていることはご了承ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/Tm8RTE3oxV0?si=fqW0fm5mhob6HwPa" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/4fAAcSYR6hM?si=Ld-FcnEEcv7-Avbe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


### 生成方法
[MusicGen](https://huggingface.co/spaces/facebook/MusicGen)を使用します。
ちょっと長めのBGMを作成したかったので、ローカルで環境を整えたのですが、結構戸惑いましたし、思うような生成にはならなかったので、ぶっちゃけると今回みたいな目的でもない限りはフリー素材使った方がマシです。
ローカルで頑張った意味もあまり感じられれず、huggingface上で生成してもよかったなあと。


### プロンプト
どんなプロンプト使用していたかちゃんと保存してなかったので、残ってる情報は以下でした。
数が多く抽象的な単語も含まれているのはあまり良くなかったかもしれません。ゲーム中の音楽でループさせたいため、`loop`は必要そうでした。
``pop,game,puzzle ,game,80BPM,happy,food,chiptune,electronica,flat,happy,ghost,horror,fat,programming,loop,happiness,chill,slow tempo``

### NG例
一番の生成失敗例も紹介します。生成するまで結果が見えないですし、10分くらい待たされてこれが出来た時は悲しかったですね。
<iframe width="560" height="315" src="https://www.youtube.com/embed/yMC7kTrTHmY?si=p6WQ_WQdQbFQpuJt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

### スクショ
![音楽.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/cc4e4988-6de0-c605-d91d-2aa67917a51a.png)


## 効果音
[MEGA](https://mega.nz/folder/cKc1CIpQ#_Nws1sJrrdikFx4-GZoC_w)にアップロードしたのでご確認ください。
[AudioCraft](https://github.com/facebookresearch/audiocraft)をGoogle Colaboratory上で使用しました。
1秒だけなのでローカルで生成する必要性はありません。

### 環境
以下の動画を参考にして作りました。説明のある通りに行えば同じように生成出来ると思います。
<iframe width="560" height="315" src="https://www.youtube.com/embed/vYUL3g33FbE?si=FaX2sHfVWeuwU05K" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


### スクショ
スピーチと効果音は短い方がいいと思いますので、`duration=1`を指定しています。
![効果音.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/9f04a4fe-61ed-d0b0-86fe-64cd87a483ac.png)


## 最後に
今回の記事がどなたかのゲーム作りの参考になれば幸いです！
今回制作しているのはドット風ゲームなため、本格的なドットゲームを作ろうとするとさらに大変になるとは思います。

コードの面での活用でいうと、最近のいざこざでChatGPT Plusはアップグレードは止められていて、全く使用できていないです。
早く使わせて…
今は話題になったGeminiが使用できる[Bard](https://bard.google.com/chat)を使用しています。

![Bard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227398/a1b9e99e-458a-a234-5d5a-2f298a7c2d11.png)

そこそこ役に立つなあという感じですが、特に記事にする話は今のところなさそうです。
後は頑張って作っていきます！　せめてクリスマスまでには間に合わせたいですね…