Enter to askでEnterを押した瞬間に動いている10のデザイン

None

GGJ参加された皆さんお疲れ様でした、僕は今回軽井沢会場で参加してきました。

前回のLudumDareで味をしめてしまって今回も1人チームです、実際ゲームジャムって1人のほうがいいんじゃね?とか、他のゲーム遊ぶ機会足りなすぎね?って話は次回書きます。

出来上がった作品はこちら。まだ遊んでない方は是非。なんだかよくわからないかもしれないけど、なんかすごい感じがするゲームになったかと思います。

Enter to ask | UnityGameUploader http://unitygameuploader.jpn.org/game/3512.html

ネタバレも多少してしまうかもしれないので、5分くらいで終わるので先にプレイしてきてください。

今回はこれの

雰囲気を作り出すのに使った10の工夫

を一気に紹介しようと思います。

実際、ノベルと音楽が主体のようでありながら、話を考えて曲を作ったのは一番最後です。

今回はゲームジャムの初日をすべて雰囲気作りに注ぎ込むという手法を取ってみました。

この前自分で書いたブログ

Kawaz - ゲームデザイナーになろう!その17 - 最後のピース http://www.kawaz.org/blogs/geekdrums/2015/1/16/681/

に倣ったというわけでもありますし、

最近話題になった

ウィル・スティーヴン 「頭良さそうにTED風プレゼンをする方法」 - YouTube

https://www.youtube.com/embed/ToJD5r2SmwI

と何か手法的に似ているような気がしなくもないです。要は、演出って大切なんです。

ゲームデザインのプロセス

…と、その前に一応企画がこれになったプロセスを簡単に記しておきます。

テーマは

画像

(は?)

さらにその意味については

画像

(ふざけてんのか)

まずここで

テーマを無視しよう

という決定を下します。

しかし、テーマは最初このように発表されていました

画像

今年のテーマは質問形式です、と。

これを見て、「A QUESTION」がテーマ?だと思った方も多いのではないでしょうか。僕もそういうことにしました。

後は色々考えていたネタをあさって、ちょうどVQ3でシステムを伝えるために

「ゲーム中のテキストは読まれないというけれど、強制イベントは読まれないだけで、

自分から村人などに聞きに行ったことは読んでくれる

のではないか?」

という推測から

徐々に「聞ける質問」を増やしていくシナリオ、チュートリアル形式を構想していたので、これの実験として(テーマにも合うし)質問ゲームを作ることにしました。

あとは操作方法とか質問と答える時の画面遷移とかを考えて、

質問はVQ3のコマンドグラフみたいに手元で簡単に選べるのを最初は考えたんですが、それだと作業感が強くて、

どっちかというとRPGのように「移動してわざわざ聞きに行く」(だからこそちゃんと読もうとする)という構造が必要だったので、

色々考えた末に、上下左右キーで接続されたノードに1つずつ移動、という仕様に決定しました。

(その点では、最終的にできたマップはほぼ一本道になっていて、作業感を拭いきれなかったのは失敗でした)

デザインを実装するプロセス

というわけで初日の夕飯ごろには既におおまかな仕様が決まり、あとは演出をどこまで入れられるか、を時間と闘いながら判断していくことになります。

あくまで調整するのは演出の量であって、システムの実装時間はこの時点で半日程度でできるように考えています。

途中で諦めた演出仕様としては、

  • 「文字を途中で90度回転させて配置してカメラも90度回転させる」→実装がキツそうなので却下
  • 「回答時と質問時でBGMのレイヤーを変更」→曲が用意できなさそうなので却下
  • 「回答者を表す3つの四角の重ねあわせをアニメーションさせる」→周りが波打ってるのであまり気にならなかったので放置
  • 「質問以外の意味深な言葉を空間内にちりばめる」→案外質問だけで画面が埋まってきたのでそのまま実装しないで終わった

などがありました。

というわけで、以降覚えている範囲で実装していった順(すなわち自分が大事だと考えている順)に細かな工夫を列挙していきます。

1, Enter押した瞬間に気持ちいいSEが鳴る

まずこれです。

SEにこだわるのは今回個人的なテーマでもありました。

ずっと大事だとわかってはいたのに、いつも後回しになって納得出来ないままだったので、今回はここから作るぞと。

そのためにDSP Anime, DSP Retro という効果音ジェネレータ(各4900円)も購入しました。

DSPシリーズの感想としては、いろんなシチュエーションが用意されていますがその使い方の額面通り使えるかというとちょっと微妙なサウンドデザインですが、色んな種類の音が入っていてパラメータ調整が簡単にできるので、「待てよこの音はこれに使えるのでは……?」という発想次第で色々使える、という感じです。 効果音ジェネレータなのに、フォーリーとかガヤの音とかがBGMのアンビエント成分として活躍したりしました。

すいません、いきなり話がそれました。

とにかくSE大事です。このEnter押した時に「ガウン!」って鳴るのが気持ちいいからこそ、また質問したくなるってものです。

シナリオはEnter押すときの気持ちよさを受け取るための言い訳でしかなく、このゲームの本質はEnterが気持ちいい事にこそあると思っています。

2, 選択中のテキストの周りをパーティクルが回る

次に、何かしら「選択中である」事をわかりやすく表示しようと思いました。

そうすることで、「選択を変更した」時も反応がわかりやすくなるからです。

最初はテキストの表示を変えようとしたんですが、

TextMeshProという有料アセットを使っていたにもかかわらず、細くてカッコいいフォントを使うと

どうしてもアウトラインとかも細くなってしまってわかりにくかったので、

そうだ、枠線にしよう!→いや、枠線はダサいから枠線上に何か飛ばそう

ということでパーティクルシステムを調整して作りました。

画像

テキストの四辺の位置を移動させているのはプログラムですが、パーティクル自体は標準のものを調整しただけです。

量と大きさを適当に調整した後は、Size over LifetimeとかInherit Velocityで小奇麗にしました。

画像

3, Enterを押した時に質問テキストを点滅させる

敵のダメージとかと同じですが、やっぱ点滅はわかりやすくていいですよね。

ちなみに、アニメーションって普通


public float BlinkTime = 0.2f;
float time;
...
time += Time.deltaTime;
renderer.enabled = (time%BlinkTIme) > BlinkTime/2;
...

みたいに、時間をカウントする変数と調整用の変数用意してって感じで2手間、コードも4行ほどいりますが、

僕は音楽エンジン使ってて、音楽にそれっぽいタイミングがあればそれを使えるので、点滅の実装も

画像

音楽を再生しているだけで、1行で済みます。

特に同期させる意味はないんですが、アニメーションを作るのが速いというだけでめっちゃ強いです。

でも、実装してみたら「なんかこれだけだと足りないなぁ……」って気がしました。

そこで

4, アンダーラインを引くアニメーションを加える

画像

ということをやってみました。

実はこれ、最初に回してたパーティクルを横にばーっと伸ばしているだけです。再利用!

こうすることで工数を削減しつつも納得できる「Enter!」を作り出すことができました。

さて、次に質問を複数にしてみてその間をつなぐわけですが、

配置したらまず、

5, カメラをゆらゆらさせる

事をやってみました。

要は背景を動かしたかったんですが、背景が空っぽなので、逆にカメラをゆらゆらさせておけば

画面全体が止まらないでいて、なんとなく異世界に生きている感じが醸し出せて、

没入感を持続させてくれます。

さらに、

6, 線とテキストの色をアニメーション

させることによって、「まだ行っていない質問を強調」しました。

これで、「まだ開けていないメールが○通ありますアイコン」みたいに、

色のついたノードを全部確認したくなるようなモチベーションを高めています。

画像

これでだいぶ、画面が動き続けて生きている感じが出てきました。

ちなみに、これの実装も、音楽に合わせたサイン波を正規化して返すMusicalSinという超便利関数により、1行で実装できました。

画像

周期とオフセットを渡すだけで、勝手に音楽に合わせてゆらゆらします。別に音楽に合わせる意味はあまりないんですが、さっさと書けることが重要です。

ここまでできたら、質問に行く時に他のテキストが邪魔なので、

7, Enterを押した時に不要なものを散らす

処理を加えました。邪魔にならない方向にいい感じにバラけるように調整しました。

あとついでに、ラインの色もアニメーションしていたのが白固定に変わったりしますが、

これはなんか実装漏れの結果そうなったけどかっこいいから放置したやつです。

画像

あと、ここで同時に回答者の周りに漂っている謎のパーティクルも四散させています。

回答者はとにかく謎めいた雰囲気を出したかったので、とりあえず

8, 回答者の周りにパーティクル回す

ことをやってみました。

これもUnity標準のパーティクルシステムを弄って調整しただけです。

そのまま使うとUnity臭が拭えない気もしますが、意外とサイズとか速度を調整するだけで↓のように動きます。

画像

画像素材はもちろんUnity標準のDefaultParticle。

今更ですが、このゲームもSpace to goと同様、画像素材を一枚も用意していません

9, 音に反応するライン

ここで突然趣味に走ります。

数日前に東京芸大のインタラクティブミュージックっていう授業の発表会見に行ったら、皆さんさすが芸大生という感じでクリエイティブな作品が多く、

中でも3つの色で波形を出してそれを加算合成しながら音→画像→音にフィードバックしていく、という作品がとってもカッコ良かったので、「あ、これやりたい」と思ってやりました。

Unityには標準でオーディオデータの周波数成分のデータ(スペクトラムデータ)を取得する非常に便利な関数が備わっていますので、これを使ってそのままLineRendererに流しこむだけです。

画像

ただ、最初は3つの色のラインを角度を変えたり位置をずらしたりしても中々かっこよくならず、

試行錯誤の末に「回転する速さと利用するデータの範囲をバラす」事でなんとなくそれっぽくできました。

画像

何気に初日はこれに一番時間かけたんじゃないかと思います。。

やってる途中で自分でもさすがに「これゲームに関係無くね??時間かけてたらダメじゃね??」って思いましたが、結果的にはよかったです。

10, テキスト読み上げ音

これ何気にめっっっちゃ大事ですね。

皆さん、テキスト出すゲームなら(ボイス入れないなら)読み上げ音、最低でもカーソル出てきた時と押した時の音は入れましょう

(最近やった某ゲームがそこに音ついてなくて死にそうなくらい退屈だったので)

今回はテキスト送り音とそれの音程を変えてカーソル音、エンター音を作りました。

ちなみに文字送りの速度は 0.07秒/文字 です。この他、カンマとかピリオドとか!とか?とか改行のたびに、それに応じたタメを入れています。

これで、テキストを読んでいる時もリズムが生まれて、しっかりと反応を返すことができました。

画像

さて、ここまでで大体の雰囲気ができてきました。

中には後からクオリティアップした部分もありますが、大まかに初日で雰囲気を作り上げることができました。

画像

そして最後に加えるのが、このゲームで最も大きいフィードバックである

10+1, 音楽と背景色を変える

です。

当然、背景色と一緒にテキストとかラインとかパーティクル、あらゆるものの色を変えなければいけませんが、

それはVOXQUARTERを作っていて色をガンガン変えるためにColorManagerという副産物ができていたので簡単に組み込むことができました。

音楽はフェードアウトして切り替えているだけなので大した事ではないですが、

フェードアウト時間は曲によって個別に指定しており、

鍵となる質問に対する回答の最後の文章でフェードアウトが始まるのですが、

だいたいテキストがクリティカルな場所に来るタイミングで曲が変わるように長さを調節しました。

(まぁ、プレイヤーがEnter押して飛ばしちゃう可能性もあるので、厳密ではありませんが)

なんか数え間違えて11になっちゃったけど、音楽と背景色はアクセントなんで!プラスアルファなんで!別枠ってことでひとつ!ひとつ!

最後に

というわけで、ここまで来たらあとは消化試合です。

シナリオ書いたり音楽書いたりするのはクリエイティブではありますが、実験段階に比べれば仕組みはもうできてるし、気持ちよさも保証されており、工数も個数で見積もれるので見通しやすく、「5時間で5曲だから……1時間で1曲!?」なんて言いながら作ってました(結局間に合わずに一個だけフリー素材を使いました)。

とても眠い中でシナリオ作ったので、翌朝見て「いやおかしいだろこれ!」ってなってちょっと手直ししたりしましたが。

シナリオに関してはやりたいネタがあまり無くて、それっぽくするのに案外苦労したので、こういった所を次回までに磨いていきたいです。

でも、とにかく上記のような「気持ちよさ」「丁寧さ」をしっかりと実装できれば、後半は(消化試合とは言いましたが)「これは絶対面白くなるから早く遊びたい!!」って気持ちで楽しく作ることができます。

チーム戦の場合も、プログラマが複数いるなら、システムは1人でやりながら、他の人はアニメーションをプログラムで作る、なんてのはどうでしょうか。

システムを分けるより楽だし、アニメーションはゲーム制作に間違いなく役立つスキルだと思います。

というわけで、Enter to askで使った10のデザインでした。

Only registered users are allowed to comment on the entry. Please log in to comment.