tanaka's Programming Memo

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

ClusterGAMEJAME 2022 in SPRINGに参加した48時間

天翔ける腕輪

天翔ける腕輪|メタバースプラットフォーム cluster(クラスター)

 

Cluster GAMEJAM 2022 Springの参加記念メダルが届きました!!

参加記念メダル

書かねば書かねばと思いつつなかなか手が付けられず開催から1ヶ月以上過ぎてしまいましたが、テーマ発表から公開までの48時間の記録です。

※本ブログのアセットへのリンクはアフィリエイトリンクです。

 

目次

 

一人企画会議(3/18 20:30-25:00)

開会式への参加からスタート!

テーマは「かける」!!翔ける、架ける、掛けるなど色々解釈ができて楽しそうなお題です。ちなみにこの時はデフォルトアバターでの参加でした。

 

テーマが判明した21時ごろから一人企画会議の開始です。Notionに思いついたことを箇条書きしたり、iPadのメモ帳に落書きしながら企画を模索しました。

  • 虹を動かす、あるいは発生させて橋をかけて、ワールドを巡ってスタンプ帳を完成させる
  • クレーンで橋を操作する
  • アイテムを使って橋を出現させる

準備段階で考えていた巨大ロボを動かしたいとか、ステージを大きく動かすところから着想。他のプレイヤーごと、ステージの地形をごっそり動かしたいとか、俯瞰でステージを見たいとか、ざっくりとしたイメージは沸くのですが、今ひとつ形にならず。引き続きアイディア出し。

  •  雨雲を操作して、雨が去ったら虹の橋がかかるので、それを歩いてゴールを目指す
  • クマを操作して、木を倒して橋をかけて移動する
  • クレーンを操作して、クレーンの先に吊り下げられているやかんからステージに置いてあるカップ麺や、他のプレイヤーにお湯をかけるというインパクト系のやつ

最終形までイメージが広がらないし、プレイヤーが移動している状態と何かを操作している状態の2つの状態があるとプレイ感が散漫になりそうです。乗り物に乗っている状態だけで完結することを考えて、靴を乗り物にする 案が出ました。

天翔ける腕輪の最初のイメージ

スタート地点から夜空を見上げると、他のプレイヤーが跳んでいる靴からパーティクルとトレイルが放たれて虹がかかっているように見える、そんなイメージです。操作方法、やること、見せたい画面のイメージがハッキリと思い浮かびました。この案はいけそうです。

 

当初は奇抜で驚けて笑えるものにしたかったのですが、アイディアが降ってこないのでは仕方ありません。それはまたの機会ということで、降りてきてくれたこの案を48時間で形にします!!

 

仮タイトルを「天翔ける靴」として、Notionに全作業を書き出して、大項目をツイート。

18日の21時から25時の4時間で企画と作業リストを作成して、少しUnityのプロジェクトの整理などをして初日を終えました。

制作1日目 3/19

画面作り -9:20

画面作りから制作開始です。予め調査していたPureNatureの岩のプレハブをシーンに配置して足場を作ります。

assetstore.unity.com

パーティクルやトレイルを奇麗に見せるために夜のステージにしたかったので、以下のようなアセットからよさげな星空を探しました。

PureNatureの空はデフォルトのSkyboxに雲のシェーダーで構成されていました。上空の設定なので星空が欲しいので不可です。Clusterのサンプルの星空も良い味わいなのですがディテールが合わなかったので不採用。Space Graphics Planetsは星そのものを作るのがメインのアセットでした。星空もあったのですがスクリプトが必要でClusterと相性が悪そうだったので不採用。ということで、最後はいつものFantasy Skybox | 2D Sky | Unity Asset Storeに落ち着きました。以前見た時より表現が増えていてかっこよくなってました!

assetstore.unity.com

 

いい感じの夜空と舞台ができました!

画面作り完了

プレイヤーのアニメ作成、音探し、BGM再生 9:20-13:50

プレイヤーを動かすのに必要な跳ぶ時のアニメーションを作成します。作業に取り掛かったところで、Clusterの乗り物に乗った時の足の位置は、乗り物に設定したアニメから変えられないことに気づきました。跳ねる時に足が動かないのは寂しいです。制御できるのは座る位置と腕の位置。ということで、飛ぶためのギミックは足ではなく、腕につけることに変更して「天翔ける腕輪」になりました。

 

腕輪をProBuilderで作成して、乗り物としてClusterのギミックをアタッチします。腕輪を拾ったり、置いたり、浮遊、加速、というアニメを腕輪や手の位置のオブジェクトの移動で作っていきます。腕輪の位置の調整は、Unity Editor上だとアバターが表示されないので、ビルドとClusterへのアップロードを繰り返して行いました。

 

昼食を食べながらBGMと効果音探し。今回は音楽の卵さんの曲でぴったりなものが見つかりました。

ontama-m.com

 

効果音はお世話になりまくっているUniversal Sound FXです。

assetstore.unity.com

 

14時ちょっと前にBGMを鳴らして一段落です。

 

星モデル、スタンプカードの組み込み、クレジット表示 13:50-17:10

本体の開発に入る前に、準備済みのスタンプカードの組み込みとクレジット表示を実装しました。集める星のモデルをVoxelorerBirdから持ってきたり、スタンプ欄を7つに増やしたり、カードのデザインをしたり、クレジットを書いておくUIを設置したりして17:10ぐらいに完了しました。

星とスタンプ実装

夕方になってまだゲーム本体に手がついてません^^;

 

買い出し

リフレッシュを兼ねて買い出しへ。ご飯を作る時間を節約するために弁当やおにぎり、あとは景気づけのおやつをゲット。帰宅してご飯食べて作業再開。

 

ジャンプの実装 -25:24

日没後からようやくギミック作りです。まずはジャンプから。着地している時と空中にいる時で方向キーとスペースキーの操作が変わります。Is Grounded Character Item Triggerを使えば簡単に実装できると見込んでいたのですが、着地判定が甘くて飛べないことが頻発。Clusterのポニーのギミックをカンニングすると、着地判定はタイマーを使ったりして複雑なことをやってました。

まだできたばかりの機能なのでやむなし。今後の改善を願いつつ、ポニーの着地判定を参考にして必要な動きができました。

 

次は方向キーが押された時の前後左右への加速ギミックです。この時点では、左右は旋回ではなく直に移動でした。24:00ぐらいに作業完了です。

初日終わり

Clusterは内部の値が分からないので、左上にデバッグ用に文字列を表示していました。この辺りがInspectorに表示されるようになると、より開発がしやすくなりそうです。

 

移動周りの効果音を組み込んで開発1日目終わり。残りの作業量から睡眠時間を計算して就寝しました。

 

制作2日目(最終日) 3/20

操作の実装の続き 5:00-9:35

5:00頃から作業再開。前日は左右は直移動でしたが、マウスでカメラを旋回させてもプレイヤーの向きはそのままというのに気づいて、左右キーをプレイヤーの旋回に変更します。2時間ぐらいで対応完了。

 

トレイルとパーティクルを加えて、操作が一通りできるようになったよ報告ツイート。

 

企画の狙いだった軌跡で夜空に虹をかけるがいい感じで実現できてます。企画の筋が良さそうだと感じることができました^^ 

 

ジャンプの動きやジャンプ時にパーティクルを沢山出すとか演出を調整して、寝る前に考えた想定から30分ほど早い9:35に操作の実装を完了しました。

 

星の収集からエンディングの発動、リセット 9:35-12:40

星と星の収集、収集完了後のリセットです。以下のような感じでテストステージに星を並べて、色やアニメを付けたり、スタンプ帳へ反映させたり、全て取った時にクリアのタイムラインを開始したり、状態を元に戻すギミックを作ったり。

星のギミックの開発の様子

マップ作り 12:40-16:50

前日に購入していたおにぎりを食べながらマップ作りに取り掛かります。この段階まで想定より20分早くたどり着きましたが、余裕があるのはここまででした。

 

当初の予定は、スタートの地面があって、そこから上空に向かってところどころに地面が浮いていて、星も浮いていて、スタート地点から他のプレイヤーを含めてステージ全体が見上げられる、という感じでした。しかし実際に跳んでみると、近くにオブジェクトが無いと浮遊感を感じません。ということで、浮いている岩の間を抜けながら星を集めていくという方針に変更しました。

 

7つの星をどのように配置しようか。星が7つ > 7つの傷を持つ男 > 北斗...七星...。という電波を受信。ネットで北斗七星の画像を探して、真上から見てざっくり同じような形に星を配置しました。高さや岩の配置は後回しにして、星を並べた状態で跳んでみてステージの広さを確認しました。最初は1Kmぐらい必要かな?と予想していたのですが、飛んでみたら星まで遠い^^; 調整の結果、スタートからゴールまで250mぐらいになりました。

真上から見た星の配置

広さが決まったら、岩を並べたり、星の高さで緩急をつけたり、外に出られないように見えない壁で囲ったり、PureNatureによさげな雪のパーティクルがあったのでゴール付近に配置したり、ちょっとシロクマ隠したりして、16:47頃にマップの初期版が完成しました。

 

遊んでいるとなかなか面白いし、シロクマなどの予定になかったことをしたため、ここで2時間ほど予定オーバー!ゲーム説明やアップロードにかなり多めの時間を割り当てたり、20時に完了するような余裕を持たせた見積もりだったのでまだ間に合いますが、ここからは時間との勝負です!

 

クリア演出 16:50-17:50

全ての星を取り終えた時のクリアの演出の作成です。タイムラインを使って空に星を流そうと考えていたのですが、Playerの状態を反映させられるのはPlayer UIだけ、ということに作り始めてから気付きました^^; Canvas上でアニメするか・・・とも考えたのですが、時間がありません。ここはメッセージだけ!と割り切って、それっぽいメッセージをPanelで表示する演出をして、あとはスタートに戻るワープを作って、見込み通り1時間で完了させました。

この「どうでもいい演出案」が、クリア時に星をアニメさせるとか、シロクマに乗るとか、動く星があるとか、敵がいるとか、そういったものです。無くても成立するものは省いて公開に向けて集中です。

 

ハイスコアと仕上げ 17:50-20:20

自分の記録は保存できるので、クリアまでの時間がこれまでの最短だったら記録更新を称える機能を付けました。これで予定していた最低限の機能が揃いました。まだバランス調整に使える時間が残っていたので仕上げに入ります。

 

繰り返し遊んでみて、マップの配置を調整したり、ちょっと印象的なものが欲しくなってストーンヘンジみたいなのを配置しました。また、当初からあった案の一つである動く星を1つだけ実装。

 

まだバグが残っていましたが、時間内に解決できるか分かりません。一先ず、バグの内容をスタートの後ろのパネルに操作説明と一緒に書いておいて、バンカー版として公開することにしました。

 

ラストスパート 20:20-21:00

少し時間を残して応募ができました。あとは時間が許す限り、開始時に腕輪を置く音が同時に鳴ってうるさかったり、腕輪を置いて30秒するとスタート地点に強制的に戻されるバグを潰していきました。

 

20:46

 

20:55

 

バグ修正版のアップロードが完了したのは20:59でした。応募締め切りはサーバーの負荷が大変なことになっていたと思いますが、Clusterさんのサーバーは見事持ちこたえてくれました。素晴らしい環境です。

 

21:22

 

以上で「天翔ける腕輪」の応募が完了し、Cluster GAMEJAM 2022 Springを完走しました!!

 

今後のテーマ

今回の参加の目的の一つは、自分に足りないところを知り、これから取り組むテーマを見つけることでした。以下が挙がりました。

  • 「奇抜」「驚き」「笑い」の企画を考えるための入力とイメトレ
  • 他のワールドで圧倒された演出やギミックを観察して、ノウハウを増やす

他に取り組んでいることがあれこれあってこの一ヶ月で早速できていませんが^^;

これを書きながら思い出しました。振り返り大切。

 

最後に

結果は、お陰様で乗り物部門の大賞をいただくことができました!!

 

名前が呼ばれるまでは、他の受賞者の皆さんの作品を眺めて一人反省会をしていました。参加の目的だった今後のテーマを得ることや、実際にワールドを作る経験を得ること、応募作品数を1つでも増やして大会を盛り上げることは達成することができました。これでよし!と思っていたところで受賞というボーナスが加わりました。全力で取り組んで公開すると、時々、想定していなかった良いことがあると改めて感じました。参加すること大切

 

この後、念願だったシロクマに乗れるようにしたり、操作性を調整したりしたものが、現在公開されているものです。実は、当初の目的であった他のプレイヤーの飛ぶ姿を見る、というのが叶っていません。是非、お誘いあわせの上、大勢で星を巡ってみてください!!

cluster.mu

 

授賞式の時は、MagicaVoxelで作ったボクセルキャラクターをオリジナルアバターにしました。作成手順はこちら。

am1tanaka.hatenablog.com

 

使用アセット

AssetStore以外の素材

github.com

なにはなくとも。このプロジェクトを整理して作り始めました。乗り物をはじめ、様々なギミックの応用例が見れる有用な作例の塊です。

 

ontama-m.com

プレイ中、クリア時のBGMはこちらから。ワールドの雰囲気を作り出してくれました。

 

kenney.nl

スタンプ帳の星などちょっとした素材に利用しました。CC0で一通りの素材が見つかるので重宝してます。

 

freefonts.jp

日本語用のフォントアセットはこのフォントから作成しました。

 

fonts.google.com

等幅フォントはこちらから。

 

www.mixamo.com

リング装着中の基本姿勢などはこちらから。

 

Asset Store

※以下はUnityのAsset Storeへのリンクはアフィリエイトリンクです。よいアセットでおススメです。

assetstore.unity.com

背景の足場や構造物、雪のエフェクトに利用しました。

 

assetstore.unity.com

夜空に利用しました。空で迷ったら大抵これに行き着きます。

 

assetstore.unity.com

効果音はいつもお世話になっている自分的定番アセットです。

 

assetstore.unity.com

スタート付近のリセットゾーンや、ゴールの先にあるワープゾーンはこのパーティクルから。

 

assetstore.unity.com

シロクマ親子のモデルとアニメモーションはこちらから。本当はここから沢山動物出したかったのですが間に合わず。またの機会に。

 

assetstore.unity.com

Mixamoで入手したモーションの編集に利用しました。

 

assetstore.unity.com

星のボクセルモデルの読み込みに利用しました。作品内ではありませんが、Cluster用のカスタムアバター作成でも利用しました。