見出し画像

Unity1週間ゲームジャムに参加して「もじもじフラグメンツ」という超ハイコンテキストオンライン協力クイズゲームを作った話

青木とと(ˊᗜˋ*)

青木ととです。マリオ35周年おめでとうございます🎉
マリオカート ライブ ホームサーキット、やりたい！

さて先日、1週間でゲームを作るイベント Unity1週間ゲームジャム お題「ふえる」に参加しました。 unityroom で実施される unity1week は今回で16回目で自分の参加は14回目になります (残りの2回目も途中まで作っていたのですが挫折しました😭)

毎回投稿者数が増え、今回は500作品以上も投稿されています。
1週間でゲームを作る人(チーム)がそれに近い数いると考えると本当にすごくないですか！

画像12

今回自分は「もじもじフラグメンツ」という超ハイコンテキストなオンライン協力クイズゲームを作りました。未プレイの方、この記事を読んで少しでも興味をお持ちいただいたら、お友達をお誘いの上、是非プレイしてください😍

なかなかマッチングしない、なおかつコミュニケーションを主軸にした不確実性の高い (例えば相手が発言しなければゲームが成り立たない) ゲームであるにも関わらず、面白さや斬新さを評価していただき(現時点で) 総合評価6位を頂きました。前々回の Δatled や前回の Sweet^2 Honey Hive に続いて高く評価していただき、遊んでくださった皆さんには頭が上がりません🙇‍♂️

少しでも遊んでくださった方に還元出来たらと思うので、制作の過程であったり頭の中を公開しようと思います。

最初は脱出ゲームを作りたかった

試したいことやアイデアを頭の中に置いておいて、それを unity1week の機会にアウトプットするということをしています。今回実は最初にやりたかったことは脱出ゲームを作ることでした。自分のこれまで作ったゲームには殆どナラティブもカタルシスがないので、プレイヤーに物語で感情の起伏を与えるようなゲームにチャレンジしたかった。

特に直近 DOTween というアセットにアップデートが入り、テキストアニメーションが柔軟に扱えるようになったことから「テキストだけで脱出ゲームを表現する」ということをやりたかったのです (もしくは本文に干渉できるテキストノベルという表現) テキストを選択することで調べ、テキストを獲得し、テキストにテキストを適応することで場面が切り替わるゲームを作りたかった (これは機会があればどこかで作りますし、もしくは誰か作ってください)

▲テキスト毎にアニメーションが適応できるようになりました

実は今回のお題発表前に小さなプロトタイプを作っていたのですが、お題「ふえる」との相性があまり良くなかったため、一旦御蔵に封印しました。他に何かやりたかったことがあったか ... と考えていた時に思ったのが「マルチプレイのゲームをまだ作ってなかった」ということでした。自分の作りたいゲームリストにオンライン要素が必要なものがあったので、この機会に素振りしておくというのをまず第一の「自分次第な」目標に据えました。

▲「自分次第な目標」に関しては u1w共有会 #1 における丸ダイスさんの資料を見てください。めちゃくちゃいい話です。

その上で何が増えたら良いか、ということを考えたのですが .... 「物理的なオブジェクト」や「数値」が増えるというのは確かに面白さを得やすい一方、皆がやるだろうと思ってなるべく避けようと思いました (公開後、実際にオブジェクトが増えることがレベルデザインに作用するような面白いメカニクスのゲームが多くあってめちゃくちゃ楽しかったです) 

言葉が増えると世界を広げる

そこで思いついたのが「言葉」「語彙」が増えるということでした。
着想は日本語研究部さんの作られたゴリラ人狼というボードゲームにあります。

「ウホッ」しか喋れないゴリラとなったプレイヤーが、夜に殺害されるタイミングで、遺言として他のプレイヤーに3文字の好きな言葉を授けることが出来ます。「アイツ」「ヤバイ」「マモル」「オスシ」... 等々。

最初の「ウホッ」しか喋れない時の制約がある中でのコミュニケーションの面白さ、言葉が増えていくにつれ安定感が増して世界が書き換えられ「あの時ああいうことを言いたかったんだ！」とハッとする感覚、これを表現できないかと考えました。

ただ人狼は (メジャーではありますが) 知らない人にとってはハイコンテキストなルールなので、このゲームを知った人がサッと遊べるように、もう少し目的・やることをシンプルにする必要があると感じました (それ以前に当たり前ですがゴリラ人狼をそのまま作るわけにはいかない)

そこで例えば、ウミガメのスープ、インサイダーゲームのように「何かを当てるクイズ」の形式に倒したらプレイしやすくなるのでは .... と組み合わせて考えたのが今回のゲームとなります。賛否あると思いますが、自分はこんな形で好きなゲームから好きな要素を組み合わせてゲームを作ることが多いです。

[1日目] デザインモックの作成

自分は個人でゲームを作る場合、デザインからゲームを作って自分が「面白そう」と思える見た目に整える ようにしています (「面白そう」の話は、かえるDさんの 「面白そう」と「面白い」の違いから、ネット時代に流行るコンテンツの作り方 が分かりやすいです)

これは unity1week 共有会 #1 でもトークしたのですが、要素の洗い出しが行えるため開発時のクラス設計に役立つという副次的な効果もあります (やり方に関しては合う・合わないあると思うので絶対オススメ！という訳ではない)

スクリーンショット 2020-09-01 9.24.52

そんなこんなで、お題発表後はデザインモック固めて寝ました。(皆そうだと思いますが) 仕事や家庭などの事情で実装期間に限りがあるので、自分はゲームアイデアに関しては結構「えいや！」で決めちゃうことが多いです。

その分、演出や小手先の要素を確実に作り上げ、クオリティにウェイトを割くようにしています (ファーストアイデアが面白くなかったら、それはもう仕方ないなぁという割り切りが自分にはあります。評価されるのに越したことはないですが、自分次第な目標として unity1week 自体をそういうアイデアの実験場とも見ています)

今回はフラットで見やすいUIを目指しつつ、操作レイヤーが分かりやすく、実際のオブジェクトを操作している感覚を持たせるためにシャドウを置いたり、一方ポップで楽しげな雰囲気を出すために背景をピンクにしました。この背景は フリー素材 を使用しています。

その後、イラレからデザインモックの素材を書き出し、Unity側にもくもくと配置していきます。毎回この辺りは手癖/手作業でやっているので、そろそろ効率化していきたい気持ちはあります。次回は XuidUnity を使って AdobeXD からUnity用UIを生成するのをやっていきたい。

あとUnityに移植した時点でPostProcessを適応しています。今回は液晶でテレビ番組に参加している雰囲気を出すために Vignette (四隅が暗くなる効果) と Lens Distortion (レンズの歪み効果) 、後は ChromaticAberration (色収差/色ずれ表現) を適応しています。この辺りを適応するだけで少しリッチになって差別化が図れる気がするのは自分だけでしょうか。どの効果も好きで毎回手癖で使っちゃっています....。

▲この辺りの記事でもちょっと説明しています

また、動くオブジェクトが少なすぎて画面が死んでいます。higo さんの子供向けアプリを作るときに気をつけていること に記載されている内容ですが、画面に動く要素がないと落ち着いて見えはする一方、興味も合わせて失ってしまう可能性があります。基本的に「考える」ゲームで、ダイナミックにオブジェクトを動かして注意を引きすぎたくもなかったので、とりあえず背景UVスクロールで動かすことにしました。ShaderGraphで実装しています。

画像3

[2日目] マルチプレイはPhoton(PUN2)で実装

次に作ったのはPhoton周り、ロビーの実装です。実は昔PhotonCloudのワークショップに参加したことがあるので既に素振り済みだったりするのですが、それもかなり昔の話 (5,6年くらい前かも) なので調べつつ対応しました。o8que さんのPUN2開発入門の記事だけで殆ど完結できました。同期方法の列挙からの最適な同期方法に至るまで非常に分かりやすく記載されており非常にオススメです。

とりあえず予めルームを規定個数作成しておき、各ルームに参加できるところまで作成しました。

[3~4日目] もくもくコーディング

最低限の挙動が成り立つようにコードを書いていきます。コードに関しては以下に公開しています。キーボードから入力して投稿する流れからまず作り、それからゲームの状態を定義して、必要な要素を1つずつ実装していきました。

アセットとしては UniRx / DOTween(Pro) はいつも通り使っているのですが、今回は Zenjectの代わりに ハダシA さんの開発した VContainer を使用しています。Zenjectより高速に動くことを目的に開発されたDIコンテナで、SignalやFactoryなどZenjectにある一部機能は存在しないですが、概ねZenjectと同じような使い方をすることができました。

[5日目] オンライン対応

オンラインで互いの投稿を見えるようにする必要があるので、その実装を対応しました。細かい話ですが、PunPRC属性を付けたメソッドを叩き、各プレイヤーのクライアントで生成処理をするようにしています。結構色々な処理をPRCで処理するようにしたのですが、ゲームステートや時間などの共通要素はルームのCustomPropertiesに回しても良かったなぁと思ったりしてます。

 GitHub でProject管理しているので、複数マシンに clone して動作確認していました。オンラインゲームのデバッグ面倒臭い。

この時点ではまだ文字が増える実装が出来ていなかったり、結果発表を含めたゲームフローができていなかったりで、ゲームとして成立していなかったので非常に焦りました。

[6日目] ゲームフロー整形

妻に事前に許可を頂き、土日は黙々作業をして良いということで、某ビジネスホテル に缶詰で作業することにしました。毎回unity1weekの時に作業時間を確保することを快諾してくださる妻には頭が上がらないです......🙇‍♂️ 

とりあえず一通りのゲームフローは完成させないと話にならないので、急いで「時間結果に応じて文字が増えるロジック」や「結果画面」を完成させ、加えてタイトルのロゴやロビーのデザインも作りました。

タイトルも実は決めていなかったのですが、この時点で「文字のカケラを繋ぎ合わせる」「必要な文字が見つからずにもじもじしてしまう」みたいなことを掛け合わせた「もじもじフラグメンツ」というタイトルに決めました 。

▲この進捗ツイートの後、夕食も食べずに力尽きて寝ました

[7日目] チュートリアル / 演出 / 音周りの作成

最終日です。遊び方が伝わるようなものが一切なかったので、取ってつけたかのような遊び方を実装しました。時間も惜しかったので ボタンを押したらSpriteが切り替わるだけ のシンプルなものになりました。

画像3

名前の変更も未実装だったので対応しました。今回コミュニケーションが主軸のゲームだったので相手に親しみを持ってもらう必要があり、日本語での名前入力を行えるようにしたいと考えていました。この辺りは 志麻ひぬこ さんの記事が非常に助けになりました。最終的には 楊 志恒 さん のWebGLInputを使用させていただきました。ありがとうございます！

この後、演出周りを実装していきました。前回の Sweet^2 Honey Hive でも同じようなことをしている のですが、今回も各ステート毎にTimelineを用意して、ステート変更時に再生するようにしてあります。

画像4

実際のTimelineでのアニメーション例は以下の動画を見てください。

例えばこのリザルトの演出でやりたいことは

・不必要なUI要素を捌ける
・順番に結果の要素を表示する
・適切なタイミングで音を再生する
・ツイートボタンなどのUIを有効かする

なのですが、複数の要素のタイミング制御を早いイテレーションで視覚的に調整できるのがTimelineの強みだと思っています。

その他対応した地味な演出としては、キーボードにカーソルを重ねた時に色を塗り、離れるとフェードアウトをするという点があります。

画像5

字が細かいので今どの字にカーソルが当たっているかを分かりやすくし、またキーボード上を移動する時間が長いので少しでもなぞることに気持ち良さを覚えてもらえたらと思って対応しました (その他キーボード周りの細かい工夫点として、タップした時のSEのピッチをランダムで変更して自然に聞こえるようにしています)

演出周りの対応が一通り終わったら、最後にBGM/SEの実装です。BGMは正直フリーでも配布されているものの方がクオリティは高いのですが、毎回自分で作るようにしています。曲はFLStudioで作成しています。有料のDAWで購入済みですが、実は体験版でも (保存したProjectの読み込みができない以外は) 全ての機能を使うことが出来ます。是非お試しください。

スクリーンショット 2020-09-03 21.38.22

作曲を練習したいという側面もあるのですが、好きに音源を足したり引いたり出来るというのが大きいです。今回は「ロビー > 入室 > ゲーム開始 > ステージ3 > 結果発表」という流れの中で音の足し引きを行い、だんだん盛り上げるように (結果発表の場合はキックとベースを引いて少しあっさりした感じにクールダウンしてロビーに繋げやすいように) しています。実装が適当なので正直繋ぎは甘いですが.....

▲もしよかったら聴き比べてください🙇‍♂️

あとはアイコンを作成し、説明文を作り、22:30 頃に投稿しました。対戦ありがとうございました。ただ対人での動作確認がちゃんと出来ていなかったので Unityゲーム開発者ギルド 内で募集を行い、簡単にデバッグをしていただきました。本当に感謝🙏🙏🙏

新たなコミュニケーションが生まれる

投稿直後、自分が思うより多くの方にプレイしていただきました。このゲームの肝である「文字が少ない時にどういうコミュニケーションを取るか」という点に関しては様々な文化が生まれていて面白かったです。

例えば「なんもじ」「ええええ (文字数だけ入力する)」という流れが生まれたり、「はい = 2文字」「いいえ = 3文字」という風に決めたり、各自が工夫をして問題に挑む流れが出来ていたのが本当に自分の中では面白かったですし、このゲームを作ってよかったと思えました。正直、作っている最中はコミュニケーションが困難過ぎて誰も受け入れてくれないのではないか？とずっと不安でした.......。

▲とっても嬉しい感想！プレイありがとうございます！

反省点もいっぱい...

画像8

▲常にガラガラの部屋

オンラインでしかプレイできないゲームとなってしまったので、マッチングせずにプレイ出来なかったという方もたくさんいたと思います。コミュケーションのゲームなので中途半端にCPUを設けるわけにも行かず、募集周りに関してはもう少し工夫が必要だったと感じています。ルーム内でTwitterに募集投稿したり、ルームのスクショを投稿できたりするだけで、結構違ったのかなと思っています。

画像7

(上記はランキング公開時点の情報ですが) 評価の中では操作性がガクッと下がっています。これは恐らくキーボードUIが取っ付きにくかったという分析をしていて、文字が探せないケースが多くあったのではないかと思います。一方物理キーボード入力にすると文字が未解放だったときの判定が難しく、解放されて押せるようになったときの喜びも得にくかったと思います。中々都合の良い落とし所が見つけにくい要素で結構もやもやしています。

まとめ

・◎ Photon(PUN2)を使ってオンラインゲームを初めて実装した
・○ 制限された文字によってコミュニケーションの工夫を求め、文字が増えていくことで世界が広がる体験を提供し、他のゲームと比較した時に斬新さを感じることを目指した (一部には受け入れられた)
・△ オンラインゲームは人が集まりにくくプレイしてもらえずにもどかしい

ということで今回も個人的には実りの多い unity1week でした。実作業時間は30時間くらいでした。

あとボドゲが好きなので YutakaKINJO さんの 調査対象■■■山脈 が面白かったのですが「総合2位の Sweet^2 Honey Hive 作品から影響を受けています」と仰っていたのが非常に嬉しいというか、たまらない気持ちになりました🙇‍♂️ 感謝....... 

ちょっと次回以降の unity1week は家庭の事情で参加できるか分からない (少なくとも土日がっつり開発みたいなのは無理) ですが、やれる範囲で何か出来たらなぁと思っている所存です💪

📣 告知: u1w共有会をやります！

Unity1週間ゲームジャムには数多くのゲームが投稿されていますが、皆さんどういう風に作っているのか、どんな技術を使っているのか、そもそもどんな人が作っているのか、気になりませんか？ 自分はめちゃくちゃ気になったので、前回お題「密」の際に 📣 unity1week online共有会 というものを実施しました。

実際にやってみると非常に学びが多く、有意義な時間を過ごすことが出来ました。また多くの人に参加していただき、学びをシェアする機会に需要があると強く感じたので、今回第2回を実施します！なんと！2日開催で20名の方がトークします！すごい！🎉🎉🎉

画像9

画像10

📕 DAY1:9/12(土) https://meetup.unity3d.jp/jp/events/1254
📘 DAY2:9/19(土) https://meetup.unity3d.jp/jp/events/1256

📝 イベントページの申し込みは必須ではないですが、参加者の数と声が見えてくるとトークされる方と自分のモチベーションが上がるで良かったらご協力ください🙇‍♂️

今回も面白い話がたくさん聞けると思いますので、是非聞きに来てください！また即座にアーカイブを残す予定なので、時間が合わない方も後ほど是非ご確認ください！

画像11

▲期待値と言語化の話というスライドから抜粋

この記事もu1w共有会も「全員で成長できたらいいな」と思って書いたり実施したりしています。何か1つでも発見があったのであれば、嬉しく思います。青木ととでした。寝ます💤　


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