第20回UE5ぷちコンを振り返る
第20回UE5ぷちコンの振り返り記事です。
素人による物なので、もし参考にされる場合はご留意ください。
Unreal Engine 5.1.1 を使用しています。
- あいさつ
- 謝辞
- 何をコントロールするか
- コマ落としの簡易的実装 (キャラクター)
- ゲーム性の決定
- コマ落としの簡易的実装 (オブジェクト)
- 簡易的実装の問題点
- デザイン
- 映画のような体験を
- 自己評価
- 最後に
あいさつ
どうも、Wanoです。
先日「第20回UE5ぷちコン」に参加しました。
応募した作品はこちら ↓
物体のフレームレートをコントロールしてゴールを目指すアクションパズルゲームとなっています。動画の最後の最後で誤字ってるのは勘弁して下さい。また「Frame“s” Per Second」が正しい表記かと思いますが、これは単純に私が英語を勉強していなかっただけです。恥ずかしいですがこのままで行かせてもらいます。
さて、今回は備忘録を兼ねて本作の制作過程を振り返っていきます。
それではどうぞよろしくお願いします。
謝辞
本コンテストにて最優秀賞をいただきました。
数ある素晴らしい作品の中から私の作品を選んでいただいたこと、大変嬉しく思っています。
皆様、本当にありがとうございます。
また、以前X(Twitter)にていくつかのご感想をいただいておりました。
大変恐縮ですが、この場をお借りして感謝申し上げます。
(Twitterは初めてで、引用リツイートに対してコメントして良いのかどうか、マナー的に分からなかったのです。)
何をコントロールするか
今回のぷちコンのテーマは「コントロール」
他の方も既におっしゃていると思いますが非常に幅の広いテーマであり、その自由度ゆえにどのような作品にするかは悩ましいところだったと思います。
(逆に言えば、なんでもいいからとりあえず参加できるという気軽さがあったかも。)
私の場合は「フレームレート」をコントロールすることにしました。自分で言うのもなんですが、奇抜なアイデアだったと思います。
しかし、実はテーマ発表前から私はフレームレートをコントロールしたいと考えていました。
きっかけは、映画「スパイダーマン：アクロス・ザ・スパイダーバース」を観に行ったことにあります。
映画「スパイダーマン：アクロス・ザ・スパイダーバース」のトレーラー
前作「スパイダーマン：スパイダーバース」を観た時から印象に残っていたのが、作中で用いられている「コマ落とし」(あるいはコマ抜き、2コマ打ち、リミテッドアニメーションなど)というアニメーション技法です。
簡単に言うと背景やカメラの動き、キャラクターの移動量はそのままに、キャラクターのアニメーションの更新を数コマに1回行うことで、カクカクした動きにしています。
よく分からなかったと思うので、気になる方はこちらの動画をご覧ください。
コマ落としについて触れている動画。該当箇所は1:44〜
また、この表現は既にゲーム作品でも用いられています。最近で有名なのは「GUILTY GEAR -STRIVE-」でしょうか。
「GUILTY GEAR -STRIVE- 」のトレーラー
これらの作品では、場面によってコマの落とし方を変えています。2コマずつだったり、普通に1コマずつ再生している箇所もあります。
この独特な表現に憧れ、自分でもやってみたいと思っていたのです。
コマ落としの簡易的実装 (キャラクター)
キャラクターのコマ落としの実装もテーマ発表前に成功していました。
恐らくここが目玉かと思うのですが、今回の方法は実装と呼ぶにはあまりにも簡単すぎて拍子抜けすると思います。
なんなら先駆者様がいらっしゃいました。
グラフィニカのUE4映像制作のツール・ワークフローの裏側紹介！【UNREAL FEST EXTREME '22 SUMMER】 | ドクセル
こちらの講演で説明された方法と非常に似通っていますが、私が行った方法はより簡易的になっていると思います。(もしかしたらその分問題点があるのかもしれません。)
本来はあらかじめコマを落とした状態でモーションを作る必要があるでしょう。しかし今回は“ぷち”コン。時間は多くないですし、何より私には技術力がありません。
そこで既存のモーションをエンジン内でコマ落としさせられないかと考えました。また、先ほど述べたように場面に応じて動的にコマの落とし方を設定できるようにします。
最初はアニメーションBP内で、FPS, Frame Rate, Tickなどといったキーワードを入れて検索していました。しかしそれっぽいものは見当たらず、次にBP_ThirdPersonCharacerのSkeletal Meshコンポーネント内で検索してみたところ、ありました。「Tick Interval (secs)」という項目が。
試しに“1/12”と入力します。 これは1秒間に12回Tickが走ることを意味します。
(スパイダーバースは全体が24fps、キャラクターは12fpsになることが多い。)
すると…
できちゃいました。
ちゃんとコマを落としつつ、移動量には影響が出ていません。
恐らく処理を軽くするための設定かと思いますが、この手軽さは今の私に打って付けです。
もしこれがなかったら全く違う作品を作っていたと思います。
フレームレートを指定する関数を作ります。
グラフエディタ上でTick Intervalと検索すると、「Set Component Tick Interval」というノードがあります。見てみるとどのコンポーネントをターゲットにするか指定できるようですね。
(この発見が後述するオブジェクトのコマ落としにつながってきます。)
このように“1 / [指定したフレームレート]”をノードに入力するだけです。
たったこれだけでキャラクターのコマ落としは完成。
ただしデフォルトだと変な残像ができてしまうので、モーションブラーは切っています。
また、ゲームのフレームレートは60fpsで固定しています。映画のように24fpsにする案もありましたが、ガクガクして気持ち悪かったのでやめました。
ゲーム性の決定
いざテーマが発表されて最初に思いついたのは「自身の価値をコントロールするゲーム」でした。
例えば背景に小さく映るエキストラのようなキャラクターは、近づいて見てみるとテクスチャが荒かったり、動きがカクカクしていたりすると思います。(もはや板だったり。)
そんなモブ主人公が善行を重ねてヒーローになったり、あるいは悪行を重ねて大悪党になったりと、なんらかの価値を育んでいき、エキストラから主要人物を目指す。その過程で描画品質やフレームレートが向上するというものでした。
この案を採用しなかった理由は単純に1ヶ月半での実現が難しいと判断したからです。
また、すぐには思い付きませんがなんだか見たことあるような設定だなと感じました。勘違いなら良いのですが… (思い当たるものがあったら教えて欲しいです。)
その後、キャラクターではなく物体のフレームレートに着目しました。その際、移動量は変化しないというアニメ的表現は忘れてしまっていたのですが、結果的にそれが良い方向へとつながりました。
はっきりとは覚えていませんが最初に思いついたのは、目にも留まらぬ速さで移動する物体のフレームレートを下げれば見えるようになるのでは？というものだっと思います。
それは実装しませんでしたが、その調子で「回転する物体」「直線移動する物体」の場合を考えました。ちなみに本作の最後に登場する「点滅する色を混ぜる」ギミックですが、あれはFRCと言って実在するディスプレイの技術です。
他にはフレームレートの変化がもたらすゲームの問題をあえて再現しようとも考えていました。ジャンプ力の変化、多段ヒットの発生などです。これは十分に面白くできる要素かなと思っていますが、要素が増えると締め切りに間に合わなくなりそうなのでやめました。もしこのゲームを発展させるのであれば取り入れてみたいですね。
コマ落としの簡易的実装 (オブジェクト)
さて、オブジェクトのフレームレートを変化させる方法ですが、キャラクターと何も変わりません。
Movement系コンポーネントのTick Intervalを変えるだけです。
キャラクターのコマ落としを実装する際に、他のコンポーネントでも同じことが可能であるということに気が付けていて幸いでした。
下の例ではProjectile Movementコンポーネントを使用しています。
ただし、設定次第ではこのままだとすり抜けが発生しません。
しかしこれもコンポーネントの設定から「Sweep Collision」を切るだけで解決します。
Unreal Engine サイコー！！
簡易的実装の問題点
とっても簡単な分、いくつか問題点があります。
詳しくないのでよく分かりませんが、秒数を指定する処理なので何かよからぬことが起きる気がします。
そもそも、フレームレートを操作するというコンセプトは環境次第で破綻してしまうでしょう。もしかしたらそれを解決する方法があるのかもしれませんが、私にはその様な技量はありません。あくまで実験的な作品であるということをご理解していただけると嬉しいです。
実際に遭遇した問題には、現在のインターバルが終わるまでフレームレートが切り替わらないというものがありました。
例えばインターバルを[1秒(fps1)]にしたとします。それから0.2秒後にインターバルを[0.1秒]に設定したとしても、実際に切り替わるのはその0.8秒後となります。
つまり、フレームレートの切り替えに許容できないほどのタイムラグが生じる場合があるのです。
よって、この実装方法を本格的なプロジェクトで使用することは厳しいと判断しました。この問題をクリアしたとしても、やはり最初からコマを落とした状態でデザインした方が見栄え的にもいいということには変わりないでしょう。後から機械的にコマを落としてしまうと、カッコ悪いポーズで止まってしまう事態が十分にあり得ます。
しかし、一瞬で再現が可能であるということを考えると、場合によっては使えるかと思います。
デザイン
本当は3Dモデルの自作に挑戦したかったのですが、それだけの時間と技量は明らかに足りていませんでした。よって、キャラクターはマネキン、背景はジオメトリブラシなので完全にプロトタイプのままです。
しかし、言い訳じみているように聞こえるかもしれませんが、「下書き」が放つ独特の良さが好きだったりもします。素人の私が下手にリッチな既存アセットを使うよりも良い絵が作れたと思っています。クオリティーの高い物を配置すると周りの物もそのレベルに合わせる必要が出てくるので、より高度なセンスが問われてしまうのではないでしょうか。
また、UE5のライトがビジュアル面を支えてくれました。同じ景色でもライティングの差で見違えるということは、以前参加したアンリアルクエスト5で実感しました。
デフォルトの空だと寂しかったので、全体的に暗いシチュエーションを作るためにステージを地下に潜らせています。UE5マネキンは光を当てるとかっこよく映ってくれるので助かりました。
映画のような体験を
最近は映画鑑賞にハマっています。
その影響を受け、映画っぽさを取り入れたいと考えました。
一番分かりやすいのが画面上下にあるレターボックス風の黒帯ですね。
完全に雰囲気作りのためだけに設置しています。
カメラの位置も少しだけ映画っぽさ、と言うより絵になるかどうかを意識しています。
こちらの記事で「エンプティフレーム」と呼ばれているレイアウトをなんとなく再現しているつもりです。やりすぎるとゲームとしては見辛かったので程々にしています。
エンプティフレームは最近発売したゲーム「ARMORED CORE Ⅵ FIRES OF RUBICON」にも意図的に使用されている気がします。
Steamのスクリーンショット機能を用いて撮影。
こういった“絵になる”を作りたかったのです。
主人公がポツンと佇んでいる構図は、個人的にエモさを感じます。
雰囲気の良いゲームを遊んでいると、ついついスティックを軽く倒して歩いてみたり、爆発をバックにポーズをとってみたくなりませんか？そんな体験を目指し、横スクロールだけどカメラワークを自分でいじれるようにしました。
また、歩き操作がしやすいようにスティックの入力値を歩行時と走行時の2段階にスナップするようにしています。
エンドロールも映画には欠かせない要素ですね。
実際に文字を3D空間上に配置しており、文字の流れる方向が通常と逆向きになっているのは、主人公がエレベーターで上へと向かっているからです。
自己評価
突飛なアイデアをそれなりに形にできたなとは思っています。しかし物足りなさを感じます。現状ギミックのバリエーションが少ないですし、敵との戦闘もフレームレートが活かせていません。(一応巨人のフレームレートを低下させると腕が当たらなくなったりはする。)
ですがもう少し頑張れば面白いゲームにできそうな感触があります。
今回はゲームとしての面白さより、アイデアの珍妙さや見た目の雰囲気で勝負していた節があります。応募動画もゲームの紹介というより、映像作品を見てもらう様なつもりで撮影していました。
個人的にはもっとゲームの面白さで勝負したかったと思っています。しかし、ゲーム作品を良いものにする要素には色々な形があるということが分かったので満足しています。
最後に
最後まで読んでいただき、誠にありがとうございます。
初めての挑戦ばかりだったのでとても新鮮で楽しかったです。学習目的のコンテストとして有意義な夏休みとなりました。
以上となります。
ありがとうございました。
