2020年3月6日金曜日

Unity room 1週間ゲームジャム ｢逆｣に参加しました

unityroom さんが定期的に開催している｢1週間ゲームジャム｣に初参加しました。

作った作品は以下です。ぜひ遊んで見てください。
https://unityroom.com/games/speed-reverse-quiz

1週間でゲームを完成させるのはハードでしたが、達成感は大きかったです。

記憶が残っているうちにやったこととかを残しておこうと思いこの記事を作成しました。

大目標

とりあえず｢期間内に完成させる｣ということを第一目標にして、試したことのある技術、知ってるアセットで完成まで持っていくことを意識しました。

結果、ちょうどいい感じの期間で完成させることができたので、丁度よい目標設定だったと思います。

初日(月曜日)にやったこと

アイデア出し

色々ロジカルにアイデアを出そうとしましたが、結局はひらめきと技術力的な妥協の結果決まりました。

最初｢逆｣と聞いて色々単語とかを考えました。｢逆立ち｣｢逆走｣とかですね。
キャラクターを操作するアクションゲームっぽい感じですが、技術的に厳しいと思い今回は避けました。

また、ゲーム性を逆にして、｢普通なら障害物になるものを目標にする｣とかも考えましたが、そうなるとまず｢普通｣のゲームをベースとして作成する必要があり、これもまた結構大変そうだなと考え、避けちゃいました。

※投稿作品を見ると結構そこをテーマにしている作品がありました。テーマを真っ向実現出来る力って凄い。。。

で、その後、どういう流れか忘れましたが、｢顔写真を上下逆さまにしたら、不自然なパーツがあっても気づかない｣という錯視を昔見たなー。と思い出し、｢逆さまの画像の中から正しい画像を選ぶ｣というアイデアを思いつきました。これならUI操作でゲームが完結するので実装難易度も高くなさそうです。

少し｢ありきたりかも。。｣と不安になりましたが、完成を目標にしていたのでこの案で進めることにしました。

簡単な設計

アイデアは決まりましたので、実装に入る前にUMLでクラス図を描きました。参加前、Unityでの設計方法について色々調べて試してたりしたので、それの影響です。ざっくりですが、どんなクラスにどんな機能をもたせるかを考えました。

クラス図を書くのに使ったツールはPlantUMLです。テキストファイルで記述出来て便利です。

作ったクラス図を眺めると、頭の中が整理できてどんなクラスが必要になるか何となく把握できるようになります。いきなり実装に入ると、後でより良いクラス構造を思いついたとしても変更しにくいです。クラス図を書くと、その｢より良いクラス構造｣に、実装前に気づくことが出来(ることがあり)ます。

クラス図、個人的に覚えておいて良かったです。

初日の実装

まずは、Zenject、UniRxをアセットストアからインストールしました。最近勉強していて、個人的に便利を通り越して必須な存在になってます。

次にuGUIのボタンとかImageとかのパーツを仮で配置して、｢タイトル画面｣｢ゲーム画面｣｢リザルト画面｣の3シーンを作成しました。
Unityに元から入ってる素材なので、見た目は｢ザ･Unity｣という感じです。レイアウトと場面遷移だけ作成して、画像は後で差し替える前提なので、この時点ではこれでOKです。

次に、問題データを表すScriptableObjectを作成しました。
問題データの構造は以下のような感じです。

使用する4枚の画像と、それぞれ｢正解｣として使用してもよいかどうか、水平、垂直、回転の問題に使用してもよいかどうかです。

このデータから情報を取り出して画面表示させれば、ゲームとしての体裁は整いそうな感じがします。
ここで初日終了。

開発で使ったツール

バージョン管理にGit、タスク管理にTrelloを使いました。これらは全期間を通してお世話になりました。

バージョン管理をしておくと、いつでも過去に戻せる安心感があるので良いですね。この記事を書いているときもログで過去の進捗を確認しています。ブランチは分けず作業の区切りでmasterにコミットしていくスタイルでも、やっておいた方が良いと思います。

Trelloは付箋のようなカードでタスクを管理できるサービスです。シンプルで、気軽にToDo管理ができます。
シンプルに｢未着手｣｢着手｣｢完了｣｢ドロップ(やらない)｣のリストを作成し、やるべきことを思いついたときに｢未着手｣リストにカードを追加していく感じです。

開発の流れは
Trelloの｢未着手｣のカードを一つ｢着手｣に移動。実装してGitでコミット。｢着手｣のカードを｢完了｣に移動。
を繰り返す感じです。この方法だと同時にやるべきタスクを一つに決めて集中でき、作業途中でプログラムの色んな場所を同時に変更して混乱することが防げます。
また、2日目以降も、PCを開いてまずTrelloを見れば次にやるべきことを思い出せるので良かったです。

2日目(火曜日)にやったこと

以下を実装しました。

  • ゲーム画面シーンを開いてから問題の画像を画面に表示させる
  • 選択肢の画像を、左右、上下、回転の反転で表示させる
  • 4択の画像をクリックして正解、不正解の判定をする
  • 選択肢画像をアニメーションさせる

ゲームに表示されるオブジェクトは全てuGUI上のものです。選択肢画像の反転もImageのRotationを変えるだけで実現出来ました。

ゲームの進行はコルーチンで、アニメーションはDoTweenを使いました。以下のような感じです。ゴリ押しな感じがします。

    public IEnumerator GoNextQuestion()
    {
        // すでにタイムアップなら何もしない
        if (gameUseCase.isTimeUpFired)
        {
            yield break;
        }

        // ボタンの無効化
        SetButtonActive(false);

        //2問目以降はカードの回転をリセット
        Debug.Log("Is first question?" +  isFirstQuestion);
        if (!isFirstQuestion)
        {
            Debug.Log("not first question");
            
            questionView.AnswerImage0.rectTransform.DORotateQuaternion(Quaternion.identity, 0.2f);
            questionView.AnswerImage1.rectTransform.DORotateQuaternion(Quaternion.identity, 0.2f);
            questionView.AnswerImage2.rectTransform.DORotateQuaternion(Quaternion.identity, 0.2f);
            questionView.AnswerImage3.rectTransform.DORotateQuaternion(Quaternion.identity, 0.2f);
            yield return new WaitForSeconds(0.3f);
            setCorrectAnswerImageColor(Color.white);
        }
        isFirstQuestion = false;
        ...
        ...

この時点でようやく｢正しい反転画像をクリックして選ぶ｣というゲーム部分の基本的な実装ができました。

3日目(水曜日)にやったこと

タイムアップ後のリザルト画面へのシーン遷移を作成しました。これで、ようやくゲーム全体の流れが一通りできたことになります。

ここからは、問題の作成は後回しにして、見た目の細かい部分の実装になってきます。

  • ゲーム開始時の演出(メッセージのアニメーション)
  • スコアの表示
  • 残り時間の表示
  • 押してはだめなタイミングではボタンを無効にしておく

あと、この時点で、画面はデフォルトのスカイボックスにデフォルトのuGUIが浮かんでいる｢ザ･Unity｣という見た目だったので、ここから見栄えも良くしようと頑張りました。

  • uGUIのデフォルトのスプライトを変える
  • ロゴの作成
  • タイトルに賑やかしのオブジェクトを配置

Before

After

画面がいい感じになっていくのは見てて楽しいです。

素材の作成について

UIの素材は主にKritaを使って作成しました。といっても、ロゴと数種類の枠(角丸の四角とか)だけです。色を白にして、9-sliceの設定をすれば、色と大きさはUnityで指定できて汎用的に使えるので便利です。あと、白くてぼかしっぽい素材は、グローやドロップシャドウ等、色々使えました。

ロゴは、ラノベPOPフォントのテキストに、レイヤーエフェクトで枠線を追加したり色をつけたりして作成しました。レイヤーエフェクトはPhotoshopの｢レイヤースタイル｣に相当する機能です。これを使うと、テキストのサイズや文字を変えても動的に効果がつくのでゲームUIを作るにはかなり便利と思います。

ここらへんの技術は今後上げていきたいです。

｢ま｣を反転させたのが、個人的に気に入ってます。

4日目(木曜日)にやったこと

引き続き見栄えの向上。

  • シーン遷移でフェードする
  • ゲーム画面の背景を動かす
  • 各種シーンのUIの見た目を向上

ゲーム的な面ではあまり大きな変化はありませんでした。粛々と進めていった記憶があります。

ゲーム画面の背景スクロールは、Imageを縦横2枚ずつ用意し、画面外に出たら反対側に移動させる方法で実現しました。

5日目(金曜日)にやったこと

  • タイトル画面からの作者Twitterへのリンクの実装
  • ゲーム画面のいろんなアニメーション時間を短くしてスピード感を演出
  • 矢印や｢?｣のようなアイコンの用意
  • 結果のツイート機能の実装
  • ランキング機能の実装

矢印の画像はIcon rainbow のものを使わせていただきました。

ツイートとランキングに関して、解説とアセットが公開されててめっちゃ助かりました。

6日目(土曜日)にやったこと

  • BGM、効果音の追加
  • 問題の作成。

音声の再生は色々実装が面倒なのですが、以下で公開されているAudioManagerを利用することで簡単に追加することが出来ました。

誰でも簡単に使える最強のAudio(BGM, SE)Manager【Unity】 - (:3[kanのメモ帳]

この喜びを表現したツイート

BGMはMusMus さんのものを使わせていただきました。クオリティ高くて雰囲気バッチリな音楽凄いです。

SEはOtoLogic（オトロジック） さんとOn-Jin ～音人～ さんのものを使わせていただきました。イメージピッタリのSEで最高です。

問題の作成

ようやく問題の作成です。

問題の作成には1問につき4枚の画像が必要です。しかもその4枚は似てる必要があります。Kritaのようなペイント系のソフトでは辛いと思ったので、Inkscapeを使って作成しました。

Inkscapeはベクター形式の画像を作ることが出来るソフトで、問題の作成に適していました。元となる図形を作成し、反転や回転、色の変更等をして画像をエクスポートする、という手順でゴリゴリ問題画像を作成していきました。

といっても、Inkscape自体そこまで使ったことがなかったので、作成スピードはそんなに速くありませんでした。結局出来たのは14問。画像だと56枚分ですね。

14問しか出来なくて少し絶望したのですが、いざプレイしてみると案外少なく感じませんでした。というのも、選択肢の4画像は全て正解となる可能性があり、さらに反転は3種類あるので、実質の問題のバリエーションは14問x4枚の正解x3種類の反転=168種類 となります。

これに気づいたときに集中力が切れて｢あー、もうこれでいいや｣となり、一旦提出することにしました。

WebGLのビルドについては、特に問題なかったです。Twitterを見てると色々トラブルに遭っている方が見られたので、運が良かったのだと思います。

最終日(日曜日)にやったこと

ぶっちゃけ完成でも良かったのですが、遊んでみて、ちょっと難易度が高すぎると感じたので、簡単な問題を増やしました。開発中だと適切な難易度がわからなくなる現象ですね。

単純な図形の組み合わせの問題でも、案外いい感じな難易度になることに気づいたので、サクサクっと12問追加し、1問ボツにして、合計25問で、問題の作成を終了しました。

問題の追加もScriptableObjectをインスペクタで編集するだけなので簡単です。

で、再度提出。

提出に関して、説明文やアイコン画像等用意してなかったので、この時点で作りました。

これにて完成です。かなり疲れましたが達成感がすごいです。

所感

期間中に感じたりしたことの語彙力壊滅メモ

  • 毎回参加してる人マジ尊敬。
  • よく使う素材はストックしておくと良い
  • UIだけで済んだから完成させられたけど、本格的なゲームだと無理だ。。。
  • 実現方法(プログラム、非プログラム両方)のパターンを持っておいたほうが良い。
  • 完成させた自分を褒めたい
  • 他の人のゲームクオリティやべえ。
    • アイデアがすごい。それを実現してくるのもすごい。
  • 作成記録の記事書いてくれてる人凄い
    • ｢あのいい感じの動きって、そうやって実現してたのか｣的な
  • unityroomありがとうございます。
    • ハードルを低くして参加しやすい雰囲気作り
    • 相互評価しやすい雰囲気作り。評価するほどプレイされやすい仕組み
    • 充実したサンプル、ヘルプ
    • 使いやすいUI
  • スマホアプリで出したいなあ。
  • 実況配信、実況動画出してくれてる人すごいありがたい
  • 公開するときのアイコンはロゴよりもプレイ画面のGifアニメの方がプレイヤーに嬉しい
  • #unity1week のハッシュタグは開発の心の支えと同時に時間泥棒(褒め言葉)
  • 次も参加したい。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)