第8回UE4ぷちコン応募作品「ねこ缶クライシス！」の制作メモです。
だいぶ長くなってしまいましたが、まずは企画面と全体の作業した内容をざっとまとめました。
この記事のブループリントの内容は素人が作ったものです。「自分はこうした」というメモのような内容です。「こうすればいいのに」等ありましたら、教えていただけるとうれしいです。
使用したUE4のバージョンは、4.16.3です。
●目次
- ●ダウンロード
- ●はじめに
- ●企画内容を考える
- ●基礎構築
- ●仮キャラクターを先に作成
- ●仮レベルを作る。
- ●動く床を作る。
- ●キャラクターをゲームに取り込む
- ●ブループリントでフリップブックを切り替える
- ●小物を作る
- ●早めにGUIの構築
- ●タイトルレベルとリザルトレベルの作成
- ●2Dで動く敵を作る
- ●おわりに
●ダウンロード
Windows版のみとなりますが、下記リンクからダウンロードできます。
Windows10でしか動作確認していませんので、動かない環境もあるかもしれません。自己責任でお願い致します。あと、とても軽そうなカジュアルな見た目をしていますが、DX11対応のグラボを要求されたりして、なかなか厄介なやつです。
●はじめに
ぷちコン３位、本当にありがとうございました。
会場では休憩時間が短めで、こっそり見ている時間も少なかったのが少し残念です。
このまとめでは、だいたい作業した順番に内容を書いていきます。（まとまってない気もします）
●企画内容を考える
２Dで作るのはあらかじめ決めていて、６０秒というテーマを聞いた時すぐに「素直に制限時間にしよう」と思いました。これにより、自分としてはなんでもありになったので、制限時間で何をするかを考えました。
サイドスクローラーのプラットフォーム型に挑戦してみたいというのも決めていたので、できることはマップの攻略とか、何かを集めるとかかなと考えました。
制限時間内にマップを攻略しつつ走り抜けるタイプだと、マップをけっこう広く（長く）しないとだめで、しかも６０秒はかなり長いので、そのタイプはやめておこうと思いました。
狭い範囲を使いまわすというか、同じところを何度も通っても大丈夫というタイプが良さそうだと思い「何かを集める」ということに決定です。というところまで、テーマ発表を聞いた出張ヒストリアの会場内で決めました。
では、「何を？」集めるか。
主役はグレイちゃんにする。＞飼い猫が居る。＞ごはんを集める。 か
と、要約しちゃえばそんな感じです。
むしろ悩んだのは「どこで？」です。
集める場所は、街中では唐突ですし、自然の風景や洞窟とかもちょっと違和感あります。絵としては洞窟とかわかりやすいのですが。
無限にスポーンする場所と理由が必要と思ったので、工場とかどうだろうと考えましたが、グレイちゃんがそこに行く理由が微妙なので、「買いに行く」という理由でスーパーマーケットと、あと敵が（なぜか）占拠してることにして倉庫も作ることにしました。スーパーマーケットはディテールが多めなので、ちょっと避けたかった面もありますが、倉庫を入れて変化を持たせて、マップ用のタイルの使い回しをしやすく、広げやすくした感じです。結果的には、メリハリがでたかなと思います
●基礎構築
ロブさんのペーパー2D入門チュートリアルを真似して基礎を作りました。UE4のバージョンが上がったおかげかチュートリアルの内容とくらべると便利に変わっていた気がします。少なくとも、チュートリアル内でやっているスプライトの番号振り直しの作業はやらなくても大丈夫でした。
プロトタイプのMaterial（拡大するとテクスチャの基本サイズをたもったままリピートされる）もつくりましたが、ゲーム中は未使用です。
●仮キャラクターを先に作成
基礎はできたのでゲーム面を作り込みたい気分を置いといて、仮塗りでキャラドット絵を作りました。最初からドット絵でサイズとか雰囲気を合わせないと意味が無いと思ったので先に時間取ってやってみました。
ツールは、Asepriteを使っています。
ブロックごとに色分けしてベタで塗る感じで、できるだけ簡単に作りました。ただし、顔はディテールとバランスの確認に必要なのでちゃんと作ります。おかげで、仮とは言え結構な時間がかかりました。
仕上げるときに縁取りを入れることを考えていたので、上下に１ピクセル以上の隙間を作っておきました。
この時点では、まだ夢見てる状態だったので、パンチとかスライディングとかのパターンも作ってました。結局使ってませんが。
ここで時間をかけていたおかげで、仕上げの工程は迷いも少なくスムーズに進みました。
（グレイちゃんのドット絵はちゃんと仕上げて、なんらかの形で公開できればいいなと考えています）
●仮レベルを作る。
プロトタイプMaterialを使って、外周の床と壁を作成し、その中に足場にするスプライトを配置していきました。タイルエディタはまだ使ったことがなかったので、直接レベルに配置していきました。
１６、３２、６４ピクセルのスプライトを並べて仮の障害物を作り、走るスピードとジャンプの高さを調整しました。
だいたいジャンプの頂点付近で64ピクセルの足場にのれるようにしました。
床の幅は32ピクセルだと滑って落ちる事が多かったので、最低でも48ピクセル必要とわかりました。自分が設定したキャラクターが滑って落ちやすかっただけで、ペーパーキャラクターの調整次第で大きくプレイ感覚が変わります。プロトタイプ作りは重要です。
●動く床を作る。
これもチュートリアルの真似で作りました。詳しくは「Paper2D入門09」を御覧ください。
動く床は、２Dプラットフォームには欠かせないのでとてもありがたいです。
一気にアスレチック感が増します。
動く床に乗るのは積極的になる行動なので、あればあるだけ楽しめると思います。
最初は１個だけ設置してましたが、待ち時間が発生して微妙にリズムが悪いので、２個設置して交互に上下させました。
●キャラクターをゲームに取り込む
仮背景ができたので、いよいよキャラを動かします。
ドット絵のアトラスを作って、テクスチャとしてインポートして、それぞれ１枚ずつのスプライトに分離してから、必要なパターン分のスプライトをまとめてフリップブックにする流れです。
※これの詳細はべつでまとめます。
チュートリアルにしたがって、ペーパーキャラクターでプレイヤーキャラを作ります。
ウインドー内のクラスの中にはないので、検索窓から検索します。
このペーパーキャラクターはすごく精度が良い気がします。さんざん飛び回り、走り回りしましたが、ヒットが抜けたり、障害物の微妙な（見えない）隙間に挟まったりすることがなく快適に動かせます。
●ブループリントでフリップブックを切り替える
2Dに対応したanimationブループリントがなく、ステートマシンを自分で作らないとならないらしいです。
これもチュートリアルと同じ仕組みで構築しました。EventTickからUpdateAnimationというカスタムイベントを呼び出し、その先にステートマシンを作ります。
フリップブックの切り替えは専用の関数を作って、その中でフリップブック型の変数にいれたフリップブックを切り替えるためのフラグをつくります。
そのフラグによって、アニメーションのステートを切り替えて、ステートにあったフリップブック変数をセットします。
寝る動作はチュートリアルにはなかったので少し悩みましたが、一番最初の条件判定にしました。寝ている間は何もできない状態なので、まずそれを判定するのが先だろうと考えました。寝ていないから動けるという流れです。
下の図は、フリップブック切り替え関数の中です。
→
→
AnimStateという列挙体を作って、その中にステート名を入れておき、そのインデックスによってフリップブックをセレクトで選択します。列挙体に新たにステート名を追加すれば、セレクトにも自動的に項目が増えてました。
ジャンプ中のフリップブックは単純に再生すると、アニメーションパターンが上昇用と下降用とで全部動いてループするので不自然に見えます。特に高いところからの落下はわりと長時間になるので目立ちます。
色々ググって調べた所、着地時に発行されるEventOnLandedというイベントがあるのがわかりました。これを使って、着地するまでは降下時のフリップブックをループしておくという流れにしました。これはグレイマンにも使っていて、着地時にちょっとポーズをつけてます。あまり目立ちませんが。
図のフラグを設定して、ステートマシン関数の中でフリップブックを切り替えました。
グレイマンのフリップブック切り替えは、下記リンクの動画を参考にして別の方法でやってみました。
Blueprint Creating a 2D Side-Scroller | 01 | Live Training | Unreal Engine
フリップブックの変数を作らない方法ですが、行動パターンが増えるとノードの並びが縦に広がっていくので管理しにくく感じました（並べ方次第ですが……）。動画だとライブでやってるので所々行き当たりばったり的な感じもあるようですが、色んな方法があるのが学べて良かったです。
こちらもステートを記述した列挙体を作成し、その内容でスイッチするという流れです。分岐先でフリップブック名を直に指定しています。
列挙体の各ステート名は、歩きやダメージ等の、それぞれの動きを処理しているところでSetしています。
とりあえずグレイマンは、その場に置いとくだけにしておいて先に進みます。
●小物を作る
肝心要の猫缶と、敵の爆弾、ふみつけて壊せるダンボール箱を作りました。
まず猫缶で２Dの物理がどんなものか調べました。フリップブックを直接ブループリントにすると物理が働かなかったので、透明のスプライトを作って、その子コンポーネントとしてフリップブックを入れました。
２Dで物理なのでスプライトが良いかな？ と思ったので、こんな構造にしています。
親のスプライトで物理挙動して、子のボックスでオーバラップします。
缶はオーバーラップできない時間を設定しています。時々取ろうとして蹴っ飛ばすのはこのせいです。すぐにオーバーラップしてしまうと、箱から出た時や敵を倒した時、見える間もなく拾ってしまうので、その状況を避けました。
この仕組みを作っておいたおかげで、時間切れになると取れなくするという仕組みもすぐにできました。
デフォルトの設定のままだと、当たった途端すごい勢いで飛んでいくので、１００ｋｇくらいに設定してます。猫缶なのに。
爆弾も同じくらいの重さで、ダンボールは蹴っ飛ばしても簡単に動かないように、２００ｋｇくらいにしてたかも。缶一個しか入ってないのに。
ダンボールは踏まれるためのコリジョンを上部につけてます。
オーバーラップしたら、つぶれるフリップブックを再生して、ほぼ同時に猫缶をスポーンさせます。
爆弾も、オーバーラップしたら本体を消して、煙のフリップブックを再生します。爆弾はAddImpulseで飛ばしました。フラグによって与えない設定もできるようにしました。インパルスはX軸に80,000、Y軸に900,000みたいな数字入れないと放物線で飛びませんでした
※素でミスってました。Y軸は値設定しても無駄でした。値を設定するのはZ軸です。Z軸はもともと０でしたが改めて値を入れても挙動は変わらなかったので、なにか根本的に間違っていたようです……。
実は爆発後の煙は、スプライトのコリジョンを消すの忘れていたので上に乗れたりします。だいたい当たると寝てしまうので、しばらく気づきませんでした。でも、特に修正してません。
●早めにGUIの構築
キャラクターが動き、拾えるものができたので、次はGUIを作りました。
まずは重要なテーマでもある制限時間の設定をしました。
ググればカウントダウンの例はいっぱいあるだろう、とか思っていたのですが、意外とありませんでした。
とりあえず、みつけた動画を参考にして作りました。
１秒ディレイして、－１しながらループする流れです。
残り５秒になったら赤く色をかえました。テキストのプロパティのカラーにバインドがあるので、できそうと思いやってみました。
同じように、ゲームスタート時のカウントダウンも作れそうと思い入れてみました。スタートのカウントを入れたおかげで、プレイヤーに「身構えさせる」ことができるので、緩急がうまれて良い感じになったと思います。
次は獲得数のカウンターを設定しました。
獲得数は、複数のブループリントで見ることになるはずなので、どんな管理にするのが良いのかちょっと悩みました。インターフェイスとか使うと良いのかもしれませんが、自分はまだその辺把握できてなかったので、ゲットしてキャストして変数引っ張ってくる作戦でやってます。
オーバーラップして缶を取得するのはプレイヤーなので、プレイヤーに保存しておいて、ゲームインスタンスにも同じ値を書き込むようにしました。
UMGは、ゲームインスタンスから獲得数の値を読みとってます。
缶を取得したらアニメーションを再生して、文字が拡大するようにしています。ちょうどCEDECでのゼルダの講演で、UIは「シンプルなので動きをつける」と話されていたので「これだ！」 と思ってすぐに動きをつけました。これによって、「何か動いた＞数字が増えてる」と気づかせるとともに、よいリズムが出た気がします。
●タイトルレベルとリザルトレベルの作成
あとで作ればいいかと思ってましたが、獲得数ができたのでリザルトレベルを先に作ってしまうことにしました。ほぼ演出だけのレベルです。
ここでふと、「もし、フェス用に選ばれたら複数の人がプレイしてくれるんだな～」「ハイスコア記録しておけば、モチベーションアップにつながるかな～」という考えが頭をよぎります。
ということで、最高獲得数の表示もつけました。結果的に選ばれたので入れておいて良かったと思います。
会場での最高は78個らしいです。
グレイちゃんと猫のフリップブックを直において、２秒毎にランダムで再生するようにしてます。
これも、秒数のカウントダウンで学んだループの方法を使ってやってみました。
リザルトができたので、ついでにタイトルレベルも作りました。
最初は全く動きがなく、スタートボタン押し待ちするだけのレベルにしておきました。
2つのレベルを作ってみて気づいたのですが、画面がほんのりと想定より明るくなってました。「自動露光」という機能のようです。このゲームでは不要なので下記を参考にしてOFFにしました。
【UE4】画面が勝手に明るくなったり暗くなったりする"自動露光"について【備忘録】:かーずのブロマガ - ブロマガ
自分もどのように対処していいかわからない状態でしたが、助かりました。
タイトルレベルの演出面は後で作りました。そのあたりのことは「その他編」な感じで別でまとめます。
爆弾のみだけど「敵ができて、取得するものができて、制限時間がある」ということで、ここまでで最低限の流れ「制限時間内に、敵やマップを攻略して、集める」ができました。とりあえず、ここまでの要素で終わらせてもゲームとしては成り立ちます。マップのデザインや取得物の配置だけでも、難易度はいくらでも変えられるので。
あとは時間があるかぎり、入れたいものを入れられるだけ入れていくことにしました。
●2Dで動く敵を作る
グレイマンもペーパーキャラで動かしました。
プレイヤーの方を見て、ムーブメントに、－１と１を入れて強引に動かすようにしてみました。
プレイヤーが接触しない限り、何もしません。
意外と２Dの敵を動かす解説動画がなく、けっこう試行錯誤しました。
よくわからないまま、よくわからない事をしていたので、やばい時間の使い方をしていたかもしれません。
ちゃんとコントローラーを分離して、動かすようにした方が良かっただろうな～と思います。
プレイヤーの横移動処理をそのまま持ってきてます。プレイヤーの移動方向の入力はインプットから取ってますが、グレイマンは入力用の値として１と－１を設定してます。
コンポーネントで、センサーにするためのボックスをつけました。オーバーラップするとプレイヤーの方を向いて、その方向にしたがって入力値を設定しました。
頭上に踏まれた時に反応するためのコリジョンも設置しました。
爆弾を投げるのは、試行錯誤している時間も微妙だったので強引にやってしまったのが反省点です。爆弾が見えてないのに当たって寝てしまうのは、ちょっと良くないです。
投げるフリップブックの再生にあわせて時間を調整してボムをスポーンさせました。
→
→
→
→ミス
→修正版
ボムが飛んで行くのは、ボム側のイベントをよんでフラグをONにしてインパルスを与えています。
※上図のようにVectorをブレイクして、X軸のみに向いている方向と掛け算することで、Z軸の値が反映されるようになりました。挙動を変えてはいないので、頒布しているexeファイルは特に修正していません。
あと、プレイヤーが本体に接触したらジャンプするようにしてみました。少し派手に見えてこしゃくなヤツになったので、そのままにしました。
●その他
その他の下記の作業内容については、また別でまとめます。
・スプライトの設定（フリップブック作成までの流れ）
・マップの設定（タイルマップエディタでの作業）
・カメラの設定（キャラと分離した）
・演出面（シーケンサー使った）
まとめました。こちらになります。
●おわりに
２Dゲーム作りはけっこう楽しめました。なんだか懐かしさもありました。
２Dだと、３Dとちがって独特の設定がありますが、２Dの方が考えやすいというか、なんか適当な設定してもペーパーキャラクターの基本性能のおかげでなんとかなる感じがします。各種設定もシンプルだと思います。
またいくつか、２Dで挑戦してみたいと思います。でも３Dも学習ふくめてやっておきたい物もいくつかあります。
やりたいこといっぱいです。
