はじめに
第17回UE4ぷちコン応募作「怪盗Qとアンサー警部」制作メモです。使用したUE4は、4.27.2です。
17回目が始まる前から、今度のぷちコンは久々に2Dにしたいな～と思ってました。
ぷちコンの開始とともにキービジュアルが発表されましたが、そのキャラクターがとてもいい感じだったので、これをドット絵にしてしまおうと思い立ち、発表があったその日からすぐの土日を使って必要になりそうな絵のパターンを作りました。ぷちスタも同時に発表され、期間も開始直後というタイミングだったので、素直にステルスアクションに乗ってしまおうと思いました。なので企画で悩む時間をとることもなく、トップダウン型の2Dで必要になりそうな絵の仕様を考えてがーっと集中して作業しました。さっさと始めたいと思った自分にとっては「ぷちスタ」ありがたいです。
この制作メモでは2Dのトップダウンを作った流れで、どんなことをしたのか書いていきます。だれかの参考になったりすると幸いです。
ぷちコンの応募動画はこちら
ゲームのパッケージ
パッケージをアップしました。
安全ではないアプリとして警告されると思いますが「詳細」をクリックして実行すれば大丈夫だと思います。WIN10(21H2)と11(21H2)で動作確認しました。
概要
このゲームは2Dのトップダウン型です。プレイヤーキャラや敵キャラは、ペーパーキャラクターを使いました。ペーパーキャラクターは絵を差し替えただけだと、ムーブメントの回転にしたがってペーパースプライトの絵も回転してしまいます。それを回転させず、さらに進む方向によって絵を切替えるという処理がわりと面倒でした。もうちょっと簡単になんとかなるだろうって思ってたのですが甘かったです。UE4の2Dは、横スクロール向きなんだな～と実感しました。
作業するにあたり、CGとかさんのYoutubeチャンネルの動画が参考になりました。ありがとうございます。
他、ステージとのヒットをどうしたかとか、ナビメッシュが動かなかったこととか後編で書きたいと思います。
キャラ絵の仕様
キャラのドット絵は、48*48ドットのサイズにしました。しかし、みっちり詰め込まずだいぶ余白をとりました。だいたい32*32よりちょっと大きいというイメージです。ドット絵作成に使用したソフトはAsepriteです。
待機状態で4方向、移動で4方向、あとは怒っている絵やびっくりしている絵などを追加しました。アニメーションは4パターン分でリピートしてます。再生速度はUE4で調整しました。どのキャラも、かならず同じ絵の並び順になるように設定しました。
プレイヤーキャラは、しゃがみ状態も作っていたのですが未使用です（演出の一部で使ってますが）
キャラクターの向きとドット絵をあわせる
まずは真上から見たカメラに合わせるので、ペーパースプライトのフリップブックも上から見た方向に合わせました。最初は単純にX軸で90度回転させて上に向けてみたのですが、キャラクターが進む方向と絵が合わないので、さらにZ軸も90度回しました。頭のてっぺんが、X軸の正方向を向く配置です。
絵をこの方向にすると、今度は操作したときにX軸とY軸が逆になってしまった感覚になります。最終的にはムーブメントの軸をサードパーソンテンプレートの値と逆にすることで解決しましたが、絵の方向にあわせるか操作の軸に合わせるかで、どちらがいいのか悩みました。スプライトの向きを切り替えるときにX軸の方向を向いてる方が都合が良かったので、ムーブメントの方でつじつま合わせました。図のCanMoveのフラグは、ゲーム中に歩くのを止めることが多いので設定しました。
各移動方向に合わせた絵の切り替えは、Tickを使って処理しました。
関数の中身は、まず見つかってるかどうかを判定し、さらに動けるかどうかを判定して、それぞれスプライトの切り替えを行いました。
割と大変だったのは動いているとき（歩きの絵、4方向）と止まっているとき（待機の絵、４方向）の切り替えです。前方向と右方向をゲットして０以上なら動いていると判断します。SpriteDirectionというEnumを作っておいてそれでSelectしました。
SpriteDirectionの値を設定するのは、下図の流れになります。右方向を取得して左右の方向を判定し、そうじゃないなら上下を順番に判定する感じです。止まっているときの方向はとくに切り替えないことで、歩いてきた方向のままにしておけます。
プレイヤーキャラは、操作によって方向を取得できるのでこの流れでよかったのですが、敵キャラはAIが動かしているので、別の方法をとりました。
敵キャラの場合
まずTickの流れは下図の感じです。
プレイヤーキャラのようにYawインプットをオフにすると敵キャラの回転角度が取得できなかったので（方法が間違っていたかもですが……）、回転はそのままにしました。そうするとスプライトの絵がムーブメントにあわせて回転してしまうので、スプライトだけ毎フレーム回転値を設定して強引に回転を止めました。
次にアクターのYaw回転を取得して変数に格納しておきます。この値をもとに方向を決定してスプライトを切り替える流れにしました。
敵キャラのスプライト切り替え関数の全体像は下図の感じです。敵キャラは３種類なので、フリップブックは配列にして引数にしました。
Velocityが０と限りなく等しいかを見て、歩いているか止まっているかを判断しました。
SpriteDirectionはプレイヤーで使っていたものと同じものを使い、それによって絵のセレクトをしました。
SpriteDirectionは、Yawの回転値で決定するようにしました。絵が向いてる方向になるであろう角度を設定しました。下方向は、-180度と180度の二通りがありえるので両方大丈夫なように設定しました。
プレイヤーを見つけるのは、スフィアトレースを使いました。BPの図は割愛します。ビームな感じの絵があるので、それのオーバーラップで判定する方法も試しました。しかし、プレイヤーと重なるとHitは無効にしているはずなのに、なぜか曲がったりずれたりしたのでやめておきました。
演出シーン
シーケンサーを使わないで、全部ウィジェットのアニメーションでやりました。単純な流れなのでウィジェットで直接動かせばいいかなと思ったのですが、余計な苦労をした感じがします。素直にシーケンサーを使っておけばよかったのかもしれません。演出はシンプルなのですが、設定する項目はけっこう多くて大変でした。
キャラの動きは上段と下段に分けて、その中で動くように設定しました。背景の帯の絵は、マテリアルのUVスクロールでつねに流れるようにしています。
帯の部分はCanvasPanelにして、クリッピングすることで中の絵の見えない部分が隠れるようにしました。
セリフも上段と下段のテキストで分けて、それぞれに入るセリフを現在のレベルの値でスイッチするように設定しました。
セリフ用のマクロの中身はこんな感じです。アニメーションの設定とテキストのセットをまとめてできるようにしました。
ミニマップ
UE備忘録本舗さんの動画を参考にしました。ありがとうございます。
SceneCaptureComponent2Dをおいたアクターを作って、キャプチャーのテクスチャを設定するだけというお手軽さでした。色々設定できるようですが、このゲームではシンプルにほぼデフォルトの設定にしました。
プレイヤーも敵キャラも、ミニマップ上でだけ見えるアイコンを作って設定しました。
Renderingの項目の中にある、Visible In Scene Capture Only にチェックを入れることで、ミニマップにだけうつるアイコンにできます。
ミニマップのアクターは、プレイヤーにくっついて動くようにしましたが、一定の範囲を超えて動かないように制限をつけました。マップの端っこにいくと切れ目が見えてかっこ悪いので設定しました。ステージごとに範囲を変えられるようにして、XとYのそれぞれの最小値と最大値の間だけプレイヤーにくっついて動きます。
ドット絵編としては以上です。つぎは、ステージとその他について書く予定です。
↓ 後編書きました。
