おそらく日本で一番自動描画ツールを酷使しました

# 【0.まえがき】

こんにちは！くつしたすきぞうです！

代表作としてこんなゲームを作っております

https://twitter.com/KutsusitaSukizo/status/1513028884672917505?s=20&t=6XqB2MaGBagrtoajbHGMOA

皆さんは自動描画ツールはご存知でしょうか？
ゲームにオリジナリティを出すためにはテクスチャノードンで絵を描くことは欠かせませんが
精密なテクスチャを描くのにはそれなりの手間が付き物です

![2022112009272000-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/c6b78446-d76b-c39a-65da-b739e05fb240.jpeg)
<font color= "orange">( ↑ いちいちめんどうよね～:sob:)</font>

ところが自動描画ツールを使えば比較的少ない手間で再現度の高いテクスチャ作成が可能になります
自分のゲームにも自動描画ツールで作ったテクスチャが多く取り入れられています
詳しい導入方法はこちらの動画で説明されています
(どうやって導入するの？とかそういう話は今回は割愛します)

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


既にツールを実用化している方も多くいるかと考えますが
どのように利用しているかは千差万別かと思います

今回は私の自動描画ツールの使用環境を説明し 便利なツールとかを共有していきます
こういうやり方もあるんだな～くらいに思っていただければ幸いです！

後半では自動描画ツールを駆使して作った 自作ゲームの中で
紹介したいギミックもあるので ぜひ最後までご覧いただければと思います
では行くぞ！

# 【1. 自動描画ツールってこんな感じ?】
## 【1.1 私の作業環境】

![DSC_01344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/ebec28c4-6ec7-c6b2-966c-c68f24d53d29.png)

<font color= "orange">( ↑ 机上だけキレイにしても配線から分かる普段の雑さ)</font>


| No. |品名 | 説明 |
|:-:|:-:|:--|
| ①|  Nintendo Switch | スマブラ購入時に一緒に買ったモデルのやつ |
| ② |   ディスプレイ|中古で買った富士通の安いやつ   |
| ③ |   HDMI切替器| Switchを使わない時はPCをデュアルディスプレイで使える   |
| ④ |   コントローラ(HORI)|ゲーム作る時は左手が定位置   |
| ⑤ |   マウス(Switch用)|ゲーム作る時は右手が定位置   |
| ⑥ |  Arduino Leonardo |テクスチャ描く時はUSBの抜き差しが大忙し   |
| ⑦ |   キーボード(Switch用)| ことばつきモノとか新作投稿ツイートの入力で使うくらい  |


## 【1.2 主な使用ツール】
大まかな制作の流れってだいたい
「なんやかんやして元ネタの画像を用意する　→　用意した画像をGBG Texture Builderに突っ込む」 
という感じになるものかと思いますがこの「__なんやかんや__」の過程を共有している人ってあんまりいない気がするので
私個人の例としてどういったツールを使っているのかご紹介したいと思います！

---
### 便利ツールその1 Edge
ブラウザ？いいえ、ドット絵エディタです
色々試しましたがペイントとあんま変わらない操作感が気に入って愛用してます

https://takabosoft.com/edge


![KutsusitaSukizo-1535771674347716608-img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/78cdadfd-fd0d-57c1-e19f-7ae71c94a78f.png)
<font color= "orange">( ↑ 使用画面例① ペイントとの差別点で大きいのはグリッドとレイヤーがあることくらい)</font>

![スクリーンショット_20221120_133433.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/083b06a6-7821-b073-7706-2e7c2c88b716.png)

<font color= "orange">( ↑ 使用画面例② 文字入力もこの通り簡単に！)</font>

---
### 便利ツールその2 美咲フォント　
ファミコン調のフォントの一種です
上記の使用画面例にもありますが8x8のドットで漢字含む文字をかなり分かりやすく入力できるのでおすすめです
1個のテクスチャの中に最大64字まで情報を詰め込めるのはやっぱ魅力的ですよね
愛用者多数！

https://littlelimit.net/misaki.htm

![Fh--JNuaUAEj--T.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/254c4373-b91b-c6c1-0020-c143bad5dbe3.jpeg)
<font color= "orange">( ↑ 使用例 ことばつきモノ無くてもなんとかなるワイ！)</font>

---
### 便利ツールその3 Siluette AC
無料で使用許可不要の素材サイト
DLした画像をそのままGBG Texture Builderに突っ込めばコスパよくドット絵に変換できます


https://www.silhouette-ac.com/

 ↓ 元はこんな風に滑らかな素材ですが…
![スクリーンショット_20221120_135524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/b1633345-bdb4-09f7-0e2e-0a2198bef2a4.png)

 ↓ PNG形式でDLして直接Texture Builderにぶちこむとそれなりにドット絵っぽくできます
(テクスチャ上に書き出した後に多少修正は必要ですが)

![スクリーンショット_20221120_135421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/e90d41f4-2625-8285-a2ae-e93696124c29.png)

以上、ツール説明でした～

他にも皆さんがテクスチャを描くのに使っているツールなどあれば 
ぜひコメント欄で共有してもらえたらありがたいです！
ではでは！

次頁からはテクスチャづくりに特に苦労した自作ゲーム紹介と 開発までの苦労の数々をお見せしたいと思います


# 【2.自作ゲーム紹介 メイドインマルバツ】


自動描画ツールを使うようになりボクは思いました
__「これを使えば本格的クイズゲームが作れないか？」__
ことばつきモノノードンの8個制限により これまでたくさんの文章を使ったゲームは制作が困難でした
ただしテクスチャノードンは128個まで配置可能です
1問あたり1ノードンとすれば100問くらい作れるんじゃないか？
…
…

作れました
![2022112014540300-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/9d562a67-a67c-a54e-16aa-a994e2c345d6.jpeg)

https://twitter.com/KutsusitaSukizo/status/1550655088707874816?s=20&t=6XqB2MaGBagrtoajbHGMOA

いや～大変でした
アドベントカレンダーでもなければ長々と苦労話を書く機会もありませんから
今回は特に大変だったポイントを2点ご紹介したいと思います

## 【2.1 大変ポイント①　問題を100問考えるのが大変すぎる！】

とにかく クイズゲームで解答パターンを覚えられてしまったら すぐに飽きられてしまうので
プレイを続けてもらうためには　それなりの問題数を作らなければなりません

特にこだわったのは下記の点です
* 解答が「○」「×」にきっぱり分かれなければならない
    * (「どちらでもない」はダメ)
* 文字数は16文字に収めるようにする
    * (前述の美咲フォントを使って文字を詰めても良かったのですが、制限時間10秒以内に読める文字数にしたかったのと見やすさ重視で今回はMSゴシックを採用)
* ジャンルはある程度バラけさせる
    * (国語・文学、英語、音楽、生物、寿司、地理、交通、天体、ゲーム、科学、アニメ、神話・昔話、スポーツ、政治経済、家庭科、インターネット、数学、行事、芸術、特殊)
* ギリギリわからないくらいのラインにする！(これは失敗してるかも)

これを生み出すのに多分1ヶ月位はかかってますね
クイズ作家という職業が成り立つのも納得できます

![スクリーンショット_20221120_161248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/65ca3f81-a58c-7433-b1b7-8957412658a8.png)
<font color= "orange">(スプレッドシートで作った問題一覧抜粋)</font>

問題の形式は基本的に「〇〇は～である。」という形式にして 出題画面の右側は基本的に4パターンを組み合わせる運用としました
こうすれば少ないパターンで画面の狭さを気にせず出題できますね
![KutsusitaSukizo-1595218639963459585-img1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/61a729a2-1830-1f94-5dbe-3e9e36f63a43.jpeg)
![KutsusitaSukizo-1595218639963459585-img2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/a6e5c23a-f5d2-b56d-f9c0-bf46fefad6e6.jpeg)


![KutsusitaSukizo-1595212594163642368-img1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/b0fe464b-6b6b-a950-3dfe-f45081ae949b.jpeg)
<font color= "orange">(こういう例外的な問題も作りましたけどね)</font>

こうして出題100問に対し○×判定と右側に来る文章のパターンを紐づけました
テクスチャの枚数を数えたら126枚でした。ギリギリ。
![KutsusitaSukizo-1595212594163642368-img3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/84ddf6e0-ae16-401a-13f1-d86371869097.jpeg)
![KutsusitaSukizo-1595212594163642368-img2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/a33044dc-db0d-ae81-9948-faeed5df5350.jpeg)




## 【2.2 大変ポイント②　出題がかぶらないようにする仕組みづくりが大変すぎる！】

1ゲーム中に同じ問題が2回出てくる展開は避けなければなりません
ただし、ランダムノードンで問題を抽選し　→　それが今まで出した問題と被っていないか確認する（被っていれば再抽選）
というやり方は非常に手間がかかるしそもそも実現できるか怪しい

実際にはこうしました
* 最初に出題する問題をランダムノードンで抽選する→その問題から数えてX番目の問題を次に出題する→その問題から数えてX番目の問題を次に出題する→以下繰り返し

上記のような処理をした際に、100問消費し終わるまでに一度も問題がかぶらないXって何パターンかあるのではないか？と思いました
思い立ったら即実験！
この実験すらはじプロ上で簡単にできるのはとてもありがたいですね

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

上の動画で作ったゲームでは問題を青い立方体に見立てて、リンゴが直方体を破壊(=出題)したらX番目の問題に移動してまた破壊する、という実験をしていました
もしリンゴが既に直方体を壊した場所にもう一回来ることがあれば、出題済の問題をもう一回出題していることになります
そうならずに100個の直方体を全部破壊できるパターン(=100問被り無しで出題できるパターン)を探していました

何回か試行していくうちに「Xは2か5の倍数以外であれば何でも成立する」ということが確認できました
やってみれば当たり前のような悔しさ
よってゲーム本編ではクイズ1問正解する毎に、その問題からX(=1の位が1,3,7,9の1~2桁の数字)番目の問題を次に出題する実装と致しました

# 【3.最後に】
いかがでしたか？(お決まりのセリフ)

実はまだまだ紹介し足りない自作ゲームのギミックがあるので カレンダーもう1枠取っちゃいました
テーマは「カードバトル」です
次回の更新をお楽しみに！