tanaka's Programming Memo

プログラミングについてのメモ。

Unity1週間ゲームジャム「Space」に参加しました！

Unityメモ unity1week

前回の【フロー】の回は不参加でしたが、１年生の皆さんの初参加タイミングだったので、自分もやらねばということで今回は参加しました。以下から遊べます。

(2017/11/25 学生さん作品リストに How many meters を追加しました)

ロ-α版- | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

目次

学生さん作品

Unity1週間ゲームジャム２回目から学生さんを焚きつけ始めて、6回目の今回は一年生も参加して、以下の作品が揃いました。まだ3本ほど開発中のものがあるので、もう少し増えそうです。

  • 範囲チェッカー
    • 動くバーをタイミングよくスペースキーを押して止めて、ステージに広がる箱をなるべく小さい体積で囲んでいくゲームです。
  • ぶつかるな！
    • 飛んでくる障害物を避けながら前方に進んでいく避けゲーです。
  • いい旅、夢ごこち
    • 左右移動とジャンプ、ショットを駆使して、奥にいるボスにたどり着いてやっつけるゲームです。
  • 鰯！鰯！鰯！
  • How many meters
    • 星の間を抜けて、バッテリーを取りながら進んでいくゲームです。

個人的な目的

個人的な目的は以下でした。

  • これまで勢いだけでクリアできて深みがなかったので、攻略や中毒性がありそうなネタにしたい
  • 写真で素材を作ってどうなるか実験したい
  • アセットでお気に入りのキャラクターを登場させたい

できたのは上２つ。３つ目は未だにゲームが完成していないぐらいなので、一週間では盛り込めず見送りましたf^^; そしてやはり地味なことに・・・。

一週間の進捗

ツイッターから一週間を振り返ります。

初日 11/13(月)

ここからスタート。

まずはシーン遷移やオンラインランキング、BGMや効果音制御などの共通部分を準備します。基本的なものは用意済みなのでそれをコピーして終わり。

この時点で地味になりそうなのは察知していて、キャラクターを登場させようと考えてアセットも探していたのですが・・・。

画面の解像度も事前に決めておくと楽です。今回はiPhone SEを想定して、640x1136ピクセルを基準にしました( iPhone SE - 仕様 - Apple（日本） )。Canvasやゲーム画面の素材を、このピクセル数で設計していきます。

Main Cameraのサイズは、640x1136ではなく、64x113.6にしました。モデルが大きくなると影に影響が出るためです。然るべき設定をすれば動くと思いますが、Unityは大きすぎたり小さすぎるとあちこちに不具合が起きることがあるのでこうしました。

午前中でここまでやって、日野に講義へ。夜帰ってから作業再開です。

この時点では動きやプログラムはつけず、スプライトやモデルなどをシーンに並べてレイアウトや必要な演出を検討していきます。今回はスケッチブックの紙面や、鉛筆で描いた素材をiPhoneで撮影して、Photoshopで加工。それをスプライトに貼り付けて画面を作って、画面の雰囲気がわかったところで初日終了。

2日目

スコアの実装からスタート。紙に鉛筆で数字を書いて、iPhoneで撮影して、Photoshopで加工して素材を作りました。それをTextMesh Proで絵文字として表示するようにしました。

以上で基本的な画面レイアウトが完了したので、ゲーム作りに取り掛かりました。まずは自分の操作から。ボタンを押したら全角スペースが発射されるようにします。

全く目立ちませんが、ロは発射時に少しずつ現れるようになっています。ロの１枚のテクスチャーから、アルファー値を設定して以下のようなテクスチャーを生成しています。

f:id:am1tanaka:20171122221058p:plain

シェーダーでやればリアルタイムでメモリーも消費せずにできるので、いずれやってみたいなということで宿題です。

画面レイアウトが整ったので、Unity CollabotateとUnity Cloudを仕込んで、WebGLの動作確認をして２日目終わり。

3日目

この日は朝から夕方まで専門学校。通勤電車の中で、ロが揃ったかの判定を考えたりしてました。

放課後、有志で集まって開発作業をしました。質問に答えたり、ちょっかい出したりしつつなので、ややこしいステージデータを考えるのは難しかったので、見た目の調整をしました。スコア部分が貧弱だったので、ロールを置くことにしました。これでかなり画面が締まりました。また、凸凹をつけてみようと紙の画像からNormalマップを作って設定したのも成功でした。

帰宅後は、降りてくるロの内部ロジック作り。ブロックは、5x10の2次元配列で管理しています。一番上の段がどこかを表す変数を用意して、１段分下がると、その変数を更新して、参照位置を変えるということをしています。更新時に、一番下にブロックがあればゲームオーバーです。

4日目

午前中は家事で、作業は午後からでした。

ステージデータをTiledで作成して読み込みまでやったところで、今回はステージを自動生成してエンドレスで遊べるようにするべきじゃないかと思い至って、ボツにしました。

UnityではNormalマップが使えるけど、Phaserではどうだっけ、とかあれこれ考えていました。自分でシェーダーを書ければ、ノーマルマップの機能がなくても大丈夫だなということで、シェーダーに手を出す理由が増えてきました。

はい。気にしない。

マップ＋滑らかスクロールは、開始点を基準点にして絶対座標で管理するのがセオリーです。久々のループさせるマップ構造で、そこをすっかり舐めて進めてしまいました。これが後々のトラブルにつながりました。改めて、スクロールものは絶対座標を持たせること！この日は解決を諦めて寝ました。

5日目

午後から専門学校なので、午前中作業。

寝ている間に解決の方針がまとまって、無事に動かせました。夜が更けて混乱していたら寝るに限ります。

放課後に自主活動をして、帰宅してさらに少し作業をしました。ややこしい部分に差し掛かっていたし、形になってきたので早めの就寝。あとは週末勝負。

6日目

影がロに落ちなかったので、どうも見栄えがよくない。ということで、シェーダーに手を出しました。

と言っても、コピペしただけ...。改めて勉強します。細かいところですが、見栄えが変わりました。

そしてこれ。

最近はWebGLでもかなり速いので、Fantasticで良いと思います。

自動ブロックパターン生成、オーディオ関連、消える判定などを実装して、6日目終わり。

最終日

最終日は、タイトル画面作成から。

紙をひらひらさせようと思って、Clothコンポーネントに手を出しました。頂点ごとに、拘束させるかや、当たり判定のあるものにどれぐらいめり込むかの設定ができるのですね。Clothを適用するモデルは、Scaleを設定すると動きがおかしくなります。ということでPlaneは使えず。ProBuilder BasicのモデルはRendererがかち合うので非対応でした。仕方ないのでBlender3Dでモデルを作りました。前回に続き、Blender入門(2.7版)さんにお世話になりました。

時間がかかった割にはイマイチな出来になりましたが、まだ足りないものがあるので操作説明の作成へ。必要な状況のスクリーンショットを撮って、Screenpressoで矢印をつけたり、文字を追加して画像作成。それをペタペタシーンに貼り付けて完成。

タイトルと操作説明で時間を食い、こんな状況に。ひとまず、時間がかかりそうな部分や、クオリティーを上げる時間はなさそうなので、一旦公開する方向で調整に入りました。難易度はスクロール速度を上げるだけにして、画面幅を広げるとバグが出るので、アスペクト比はそのままに、などなど。

こんな一週間でした。

今回新しく挑戦したこと

  • カメラ2つを使って、ゲームのレイアウトの外側の描画
  • テクスチャを書き換えて、動的にテクスチャパターン作成
  • Animationで画像やテキストに動きをつける
  • 半透明に影を落とすためのシェーダーの利用(ブログのコピペですが)
  • Clothコンポーネントによる布シミュレーション
  • Blender3Dでクロス用のモデル作成
  • Unity Affiliateに登録

作ってみると何かしら新しいことに手を出して経験が増えます。宿題のテーマもできましたし。

1週間が終わって

これまでで最も未完成の状態での投稿でした^^; 他の皆さんが公開予約しました～とかいう報告に「うっ」となりつつ、学生さんに「締め切りすぎても大丈夫だから」と言っていた手間、そのまま突っ込みました。

今回も見てもらったり、遊んでもらうための仕込が足りなかったと反省が多いですが、自分的には楽しく遊べるものになりました。スマホアプリにするのが最終目標なので、これから画面レイアウトなどごっそり変えたりしながら継続して開発していくつもりです。

次回に向けて

自己満足はしていますが、これまで課題だった魅力的な画面作りは今回も失敗でした。敗因はいつも通りですが、魅力を伝えるコレ、というものを用意できなかったことだと思っています。

次回は三ヶ月後なので気分が変わって別のことをしそうですが、今の所、プリミティブな素材をフラットデザインかグラデーションで魅せるか、キャラクターに徹底的にフォーカスした作品を作ってみたいです。参加してない跳ねるかフローのを作る手も。皆さんの作品を見ていると、サクッと遊べてすごく面白いものがあって、そういうのを2,3日で完成させてみるというのもやってみたいです。

利用アセット・参考URL

今回も沢山のアセットによって、楽しくゲーム作りができました。作者の皆様、ありがとうございました。

文字表示に使いました。グラデーションとかつけられるし、プリセットのフォントも良い感じのがあるので、とりあえず入れておくと吉です。

タイトルやゲーム中のBGMに利用しました。 イメージが近い曲が見つかるのでいつも助かってます。

【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル - naichi's lab

今回も利用させていただきました、オンラインランキングシステムです。パーツが綺麗になって更にいい感じになっていました。

Online converter - convert video, images, audio and documents for free

SoundEngine FreeはMP3が扱えないので、MP3からOGGに変換するのに使いました。 Webページで変換できるので手軽で便利です。

SoundEngine・RadioLine公式サイト！【ダウンロード・ヘルプ・豆知識・関連情報など】

OGGなどの音素材のトリミングやエフェクトをかけられるフリーウェアです。効果音の一部を切り出したり、冒頭の無音部分を削除したりするのに利用しました。 とても使いやすいです。

UnityのWebGL出力に簡単に無料でグローバルランキングを実装できる仕組みを考えてみた - Qiita

オンラインランキングのバックエンドをGoogleワークシートで構築するdivideby_zero氏の記事です。今回もありがたく利用いたしました。

効果音ラボ - フリー、商用無料、報告不用の効果音素材をダウンロード

生活音などのさりげない音が揃っていて、好みの音を見つけやすくて重宝しています。

Unity5で半透明オブジェクトに影を投影する方法 - プログラムの素

ハムエッグ氏のブログです。 半透明のオブジェクトに影が落ちず、ロが消える時に影に入っていると綺麗にならなかった問題が、こちらで紹介されているシェーダーを使って解決できました！

Blender入門(2.7版)

タイトルで揺れる紙のモデルを作成する時に、UVの貼り方の確認をしました

Home | Screenpresso

操作説明画面の作成に使ったスクリーンショット＆画像装飾ツールです。有料のPro版を使っています。

[OFFICIAL]Filmora Video Editor(Win&Mac) | Download Video Editing Software

今回も画面動画の作成はこちらを使いました。Twitterの投稿時はMP4、UnityRoomのアイコンはGIFで出力しました。有料版を使っています。出力時にカスタムで自由に解像度を設定できることにこれまで気付かず、新しい発見でした。

Textureをスクリプトから編集してみる - のしメモ アプリ開発ブログ

ロを上から出現させるテクスチャーパターンを作成する時に参考にしました。