見出し画像
Photo by yossy1022

わたしのUnity12週間ゲームジャム（後編）

POPLINER '99

2023年9月18日スタートのUnity1週間ゲームジャム（お題「１ボタン」）に参加しました。
その時に挑戦したこと、思い、得たものなどを整理のために書いてみます。
前後編の後編です。


前編のふりかえり

ゲームジャムでの自分なりの課題に取り組んでみた。
ゲーム内の要素の実装方法や問題の解決方法、ゲームジャムへの参加という意味での反省など。
くわしくは、以下をご覧ください。

後編のまとめ

後編では、1週間ゲームジャム後～12/9までの、ゲームのアップデートについてお話ししようと思います。
自分の思いというよりは、具体的に何をどのようにやって実現したのか、というところを重点的に描いていこうと思います。
メインのコンテンツとしては、

  • イラスト未経験から、自作ゲームのイラストを製作した体験談

  • 予測軌道の描画方法の調査と実装

かなぁと思います。

終わり、そして続く。

1週間ゲームジャムが終わって。

前編でお伝えした通り、今回のゲームジャムのテーマは

  • 「納得いくまでやってみる。」ということ。

  • 「デザインを自分でやる」ということ。

でした。
納得いくまでやってみようとした結果、期限（投稿の期限ではなく、開催期間という意味）までに間に合わないという問題にぶつかりつつも、
「今まで参加したゲームジャムりも、自分がイメージするものを形にできている」という実感はありました。
（時間をかけているのだから、色々と当たり前ではありますが。）

完成イメージにはまだ遠かった。

とはいえ、「本当の期限が来てしまったのでやむなく投稿した」ということには変わりはなく。
自分がイメージしていた完成形には至っておらず、それ以前にそもそもバグが結構残っている、という状態でした。

ゲームジャムをきっかけに開発を始めたこのゲームですが、上記の事情があるので、もうしばらくアップデートを続けることにしました。
「できれば、モバイル版としてもリリースしたい」という思惑もありましたし。

残タスクの整理。

延長戦を続けるにあたって、まずはタスクリストを整理することにした。
一旦、無理やりリリースしたため、優先順位を入れ替えたり予定外のタスクを追加したりして、タスクがごちゃごちゃになっていたため。

その結果、最低でも対応したい大きなタスクとしては、以下となりました。

  • 致命的なバグの修正（特に、WebGL上の表示範囲の問題と、ネームエントリー用ダイアログのレイアウト崩れの問題。）

  • タイトル画面の修正など、ゲームの背景が分かるような対応

  • ドット絵のリファイン

  • 予測軌道の描画

  • 必殺技の実装

  • レベルデザインの調整

  • 演出面の調整（ポストプロセスを使ってみたい）

なのでこの後は、上記の対応について具体的に描いていこうと思います。

対応したバグ、できなかったバグ

ゲームの進行上致命的な問題は、比較的優先して対応しました。

WebGL上の表示の問題

WebGL上での表示が全般的におかしい状態でした。
開発環境では画面サイズが大きかったため、違和感はあったもののプレイ上は問題なかったのですが、ノートで試したときに「見切れてる！」と気づきました。
ゲームジャム久しぶりだったので、忘れていました・・・

ダイアログのレイアウト崩れ

「基本だろ～ｗ」じゃないだろ。
フォントの問題は、WebGLで起こりがちなトラブルの代表的な原因で、本当に最初に確認すべきことでした。
「フォントが表示できていない」ではなく「レイアウトが崩れている」と思い込んで、迷走してしまった感じです。

接触状態から敵にダメージが入らない問題（未解決）

これは、Xにポストした通りです。未解決です。
「ゼロ距離からの衝突だからダメージがなくても問題ないのでは」という解釈もあるけど、やっぱり不自然な感じは否めない。
少なくともモバイルにリリースするときは、何らかの解決をしないと。

イラスト未経験から、どこまでできたか！？

前編でも触れたのですが、今回のゲームジャムの（自分の）テーマは、デザインを自分でやること。
期限までにドット絵を作ることはできましたが、しかし、タイトル画面などゲームのキービジュアルともいうべきものは、全く対応できませんでした。

ここでは、そんな私が実際にどのように作成したかを書いていこうと思います。
私のように「プログラミングはともかく、絵心は全くないので、自作ゲームのデザインに困っている」という方は、それなりにいらっしゃるのではないかなと思っています。
わたしもそうで、自分の完成イメージ通りの出来を目指すと、
デザインができる方と組んだり、フリー素材やアセットを活用させていただいたり、解決方法はいろいろあると思いますが、「自分でやってみる！」というのも一つの手だと思います。

それを、どうやったか、どういった結果になったか、というところを率直に書いていこうと思います。
「そんな奴の体験談を聞かされても……」とおっしゃる向きもあるかもしれませんが、デザインで困っている皆さんにとっては、多少なりとも判断材料になるかもしれず、書いてみる次第です。
お役に立てたら嬉しいです。

自分のレベル

POPLINER '99のデザインに関する経験値ですが、これは「未経験」と言ってよいかと思います。
人それぞれ色々な背景があり、「未経験」と言ってもいろいろな意味、色々な範囲があるかと思いますが、自分に関しては普通に「未経験」です。

使ったアプリ

デジタルのイラストを描くわけで、デザイン用のアプリは必要になります。
結論としては、Windows版のアイビスペイントを使うことにしました。
色々なデザイン用のアプリがあって、それなりのアプリであればイラストを描くこと自体はそれほど困らないのではないかとおもいます。
ですが、「イラストを描く」ということにフォーカスすれば、いわゆるお絵かきアプリ（クリスタとかアイビス）だと「入りやすい」のではないかと思います。

「クリップスタジオ」か「アイビスペイント」かは、好みの問題かなと思います。（あとコスト）
個人的な感想では、アイビスのほうが「絵を描く」という行為にすんなり入っていける感じがしました。クリスタは多機能な分、目移りするというか。
使い方のレクチャー動画は、どちらもたくさんありますが、クリスタのほうが多い気がしました。
プロのイラストレーターさんは本格仕様のクリスタを使っていることが多い⇒いきおいクリスタの解説動画が多くなる、ということかと。

その中で、大変分かりやすくとっつきやすかったのが、以下でした。

この方は、クリスタとアイビス、両方の動画を出されていますね。

使った機材

デジタルでお絵描きをしようとすると、一般的にはタブレットなどが必要になってくると思います。
これについては、わたしの環境はやや特殊で、タブレットなどを追加購入することはありませんでした。
なぜかというと、PCがタッチパネル（Surfaceとかタブレットではない）になっており、ディスプレイにスタイラスで直接、線描していました。
タブレットと違い筆圧感知は働かないので、そういう繊細なタッチは表現できないのですが、今回はなくても困りませんでした。

なお、家にとても古いWACOMのペンタブレットもあり、ちょっと試してみました。
ですが、目で見る場所（ディスプレイ）と手元（タブレット）が違うのはかなり違和感があり、ただ線を引くのも一苦労でした。
慣れれば行けるのかもしれませんが。

どうやってイラストを描いたか

アプリや機材は買えば何とかなるわけですが、実際に限られた時間の中で、イラスト未経験者がどのように制作し、どのようなレベルの成果物ができたのか、というお話です。

まずは、主人公キャラの「ウリ坊」を描くことにしました。
自分の脳内には、「こんな感じ」という「もやっ」としたイメージはありました。

このイメージを、まずはラフ（下書き）としてアウトプットする必要がありました。

前編でも述べましたが、そのためにはまず「練習」することにしました。
ただ練習と言っても、「自分の中のもやっとしたイメージを紙に描き出す」という目的がはっきりしているので、「ウリ坊　イラスト」で画像検索し、それらのかわいいイラストたちを模写し、ウリ坊のイラストを描く上での要素を押さえることにしました。
例えばウリ坊の場合は、シマシマで、手足は短くて、ブタ鼻、ひづめ、おなかは白い、など。
どんな要素があるかは見れば分かるのですが、やはり手になじませないと体得が出来ないと思い。
そのため、できるだけ同じように模写しました。（目的がラフなので線画だけですが）
あと、画像検索することで「自分の理想に近いウリ坊」の具体的なイラストを見つけ、自分のイメージに肉付けできる、という効果もあったかと思います。

わたしが「うわかわいい！　こういうの描きたい！」と思った理想のウリ坊。↓

そのようにいくつか模写した後、自分が描きたいのはどんなウリ坊か、構図はどうか、ウリ坊要素以外で表現したいものはあるか、というところを念頭に、自分なりに描きたいものを実際に紙に描きました。


このラフは結構気に入っています。

線のキレイさは、後でデジタルにするときにどうにでもなるはず！　と思ったので、ここではちゃんと思った通りの形、バランスになることを意識しました。
その後は、その下書きをスキャンして、アイビスペイントに取り込んで。
私は、ラフは紙へ描きました。アイビスペイントに直接下書きしてももちろん良いと思うのですが、自分にとってはこちらの方がやりやすく。
お絵かきソフトに直接下書きできる方は、その方が良いのかなと思います。その方が、紙もペンもスキャナもいらないですしね。

それ以降の手順は、各種解説動画にある通りでした。
仕上がりの品質向上を目指そうとすると、もっとできることはあったかと思いますが、自分としてはこれで納得しました。

やはり無から有を生み出す「下書き」が、一番大変だったと思う。それ以外の工程も奥が深いと思いますが、今回大変だったポイントはここでした。
（時間がかかった、という意味ではなく。）

主人公キャラの「ウリ坊」ということで、人間を描くのよりは若干ハードルが低かったかと思います。
一方、人間の描き方解説（動画）はかなり大量にあり、今後ゲーム内で人間を描く機会があれば（あるだろ）、ぜひ描きたいです。

かかった時間

正確に測っていたわけではないのですが、上に上げたラフだけだったら、サンプルイラストの検索や練習も含めて2～3時間だったかと思います。
それをアイビスペイントに取り込んで、線画にして彩色して・・・という工程まで含むと、もっともっとかかっていますね。
またそれ以外にも目に見えにくい、動画でアプリの使い方を学習した時間、色々な準備の時間、その他のアイビスペイントの使い方を検索したりした時間も含めると、かなりの時間

できたもの


今見ると、もっと手直ししたい！

イラスト未経験者が、これだけアプリにお金をかけて、練習して、時間をかけてアウトプットしたものが上のイラストです。
これのパフォーマンスの判断はお任せするとして、一つの現実です。
私と同じような悩みを持たれている人に、判断の一助になれば幸いです。

ただ私としては、このイラストによって「自分のイメージしたゲームが作れた」と思っています。
提供いただいているフリー素材の範囲内で作るということ自体にも意味があるし、またデザインができる方とコラボすることで想定以上のものを作り上げる、ということもできると思います。
ただ今回はそういうことではなく、自分が納得いくように作ってみる、というのがテーマだったので、それは達成できたのかなと思っています。


ドット絵のリファイン

リリースまでに作ったドット絵は、前編にも書きましたが、下書きをそのまま32x32に落としたような感じでした。
それでも、ドット絵２回目の身としては、結構よくできたという印象。

とはいえ、もっとブラッシュアップの余地があるはず、とも思っていました。
また、タイトル画面のイラストの描き起こしよりも、低コストで高い効果がありそうですし。
そこで、動画やサイトなどを見て、リファインを目指しました。

まずは基礎

ひろはすさんの「ドット絵講座」。
基礎からとても分かりやすい解説で、助かりました。

良いドット絵を見ることが一番の勉強

The Spriters Resource
動物のドット絵を検索して、参考にしました。
良いものを見るのが一番の勉強だと思います。

その他、勉強になった記事

線の描き方などについて、具体的な解説がうれしい。
他にも、色々と知見が得られた。

できたもの

見比べると、「こなれた」感がわかるかと思います。
イラストなので、何をよいと思うかは人それぞれだとは思いますが、私としては良くなったと思っています。
これもまた、「納得するまでできた」ことの一つです。

リファイン前
リファイン後
リファイン前
リファイン後

予測軌道の描画

いろいろな理由でほしかった機能

引っ張って弾いて、マップ内を反射させまくるゲームなので、やはり引っ張っている間に予測軌道が出ると、わくわく感が増しますよね。
また、（現在のバージョンでは解消されたが）当時は障害物のコライダーがスプライトの輪郭に依存していたので、反射角が全く想像できない、という問題もありました。
そこで、「たぶんすごいむずかしい・・・」と思って恐れていましたが、予測軌道を実装することにしました。

メカニズムが分からない

検索すると、結構いろいろ出てくるのですが、どれも難しい解説でした。
分からないなりに、読み漁りました。
難しくて消化にしばらく時間がかかりました。

色々な方法がありそうだったのですが、一番自分がやりたいことにあってそうなのが、
「RigidBodyにシミュレーションさせて、未来位置を取得する（それを元に描画する）。」という者でした。

「ウリ坊と同じパラメータを持つRigidBodyをシミュレーションさせれば、理論的には弾道が描けるはず。」とは思っていましたが、
そうは言っても実際に飛ばしたらいろいろ問題がある、と思っていました。
それを「物理挙動をシミュレートする」という（初めて聞く）機能を使うことで、解決できそうでした。
ただ、このシミュレートはかなりクセがありました。autoSimulationをfalseにするとか。

ですが、最終的には以下の記事が自分のやりたいことにかなり近く、かつ分かりやすい実装となっており、かなり参考にさせてもらいました。

記事は3Dなので、2D物理挙動に対応させる考慮が必要になるのですが、これが意外と大変でしたが。

これをテキトーに実装しようとして、変なことになっちゃったのが以下。
シミュレーション対象がUpdate()毎にAddForceしてしまい、すごい勢いでぶっ飛んでしまっている。
しかも当たり判定が残っていたので、自機や敵にぶつかりまくって大変なことになった。
これ、面白かったのですが、後で必殺技のアイデアになりました。

当たり判定の制御

物理挙動のシミュレートで起動を描画することはできましたが、いくつか問題がありました。
「壁や木などの障害物との衝突（反射）は表現したいが、敵との衝突はシミュレートしたくない」というものでした。
敵は可変のオブジェクト（いなくなる可能性がある）わけで、敵との衝突をシミュレートし始めると、「敵がやられて消えた後のことも想定に入れなければいけない」と考えたからです。これはきりがない。

これは、レイヤーを分けることで解決しました。
レイヤーを増やすと、制御が大変になりそうだよな（実際になると思いますが）、と怖くて今までレイヤーの追加をしたことがなかったのですが、やってみたら意外とあっさりできました。
ただ、管理が大変ですよね。

最終的に、以下のような感じなりました。
ほぼほぼイメージ通りかと。ただ、もっとリファインする余地はありそうです。

必殺技（ちょとつもうしん！）の実装

もともと、必殺技は実装する予定でした。
発動条件や、どんな効果かというのは曖昧な状態で、
アイテム発動するとか、敵を貫通する（密集地帯を抜けてボスを直接狙える）、といったことをぼんやり思っていました。
ただ、前述の予測軌道のバグの様子を見て、「こういうのでもいいかも」と思いました。絵面が派手で、よい。

方針さえ決まってしまったら、実装自体は特段難しくはなく、あっさりできました。意外でした。

ここまで、12週間。

2023年9月18日にゲームジャム（お題「１ボタン」）が始まり、そして終わり、そして投稿したゲームのアップデートを続けて、12月10日で12週間となりました。
冒頭でも描いた通り、今回は長丁場になったので、挑戦したこと、思い、得たもの、反省などを整理のために書いてみました。

誰に向けたものというわけでもない、自分の内面のアウトプットもありつつ、色々な機能の実装に関してつらつら記載したり、またイラスト未経験者がこの条件でイラストに挑戦したらどうなるか？という実験の結果も描けたし、一部のニッチな層にはもしかしたら参考になる内容になったかもしれません。

特にオチもなく、終わろうと思います。
「ちょとつもうしん！」のアップデートは今後も続きますが、今後の更新の情報についてもX(Twitter)でポストしようと思いますので、気が向いたら読んでいただければ、と思います。


次回のゲームジャムが始まる前に、この記事をアップしようと思っていたのですが、残念ながら間に合いませんでした。
ポストを張り付けてみますが、まだお題を見たくないので、薄目で作業しています。
前編でも描きましたが、次回の課題は「期限厳守」です。
納得いかない品質になっても、期限は守る！


最後になりましたが、拙作「ちょとつもうしん！～ボタン鍋からの救出～」、ぜひ遊んでみてください。
（今後もアップデート続けますが、ここから１週間は次回のゲームジャム優先ですね。）


この記事が気に入ったらサポートをしてみませんか？