2Dアクションゲームを作る　その1　画像の変更(UE4.21)

はじめに

　公式ドキュメントをただ読んだだけですべて理解し記憶できるような頭脳の持ち主ではないので、習作として2Dアクションゲームを作る。FPSやTPSを作ることに最適化されているであろうエンジンで2Dゲームを作るのもなんだが、Paper2Dという2D向き機能もあることだし、何より作りたいのだから仕方が無い。3Dモデルの扱いにまったく不慣れというのもあるが、言い訳はこのくらいにしておく。

　作るのは下の画像のようなゲームである。画像はGameMakrStudioという2Dゲーム作成用ツールで実際に作ってみたものだ。キャラの操作、敵の行動パターン作成、自弾や敵弾の制御、ライフゲージの表示など、アクションゲームに必要なものはある程度揃っているし、過去に作ったのと同じ物を作るので、UE4の学習に専念できるということもある。

f:id:fncl:20190204230425p:plain

　お分かり頂けただろうか。

f:id:fncl:20190204230543p:plain

　お分かり頂けたものとして先へ進む。

　なお、ボス1体との戦闘のみでステージ道中や別ボスなどは無いし、ましてや武器の変更は無い。

素人なので公式の入門用動画で作成したものをベースにする

　UE4で2Dアクションを作り始めるにあたり、公式動画を参考にさせてもらった。

　日本語音声なので英語が苦手でも安心。エンジンのバージョンによっては微妙に異なる部分もあるが、概ね指示通りに作れば新規プロジェクト作成時のテンプレートの一つ『2Dサイドスクロール』に少し機能を追加したようなものが出来上がる。これで作成したブループリントなどをベースに進めていく事にする。

キャラクターの画像を入れ替える

f:id:fncl:20190206231512p:plain

　まず画像を全て自作したものに変更する。使用する画像が違うだけで、動画と流れは同じ（バージョンが違うため若干機能に違いはあるが）。画像をインポートしたあとに右クリックし、Sprite Actions→Apply Paper2D Texture Settingを選択すると2D用に変換してくれる（変換設定はメニューバーの編集→プロジェクト設定→Paper2D Importで変更できる）。背景画像が単色であれば、この時点で自動的に透明化してくれるようだ。

　その後、キャラが複数描かれているテクスチャは動画でも説明があったように右クリック→Sprite Actions→Extract Spritesでそれぞれのスプライトに分割したら、それらを元にフリップブックを作成しアニメーションを設定する。画像の分割は、自動の他にも自分が指定したグリッドサイズで行うことができる。

背景をタイルマップで作成してみる

f:id:fncl:20190205114805p:plain

　背景はペイントソフト等で一枚絵を作ってもいいが、お試し運用中らしいタイルマップ機能があるので、せっかくだからそれを使ってみる。マップチップをまとめた画像をインポートし右クリック→Sprite Actions→Create Tile Setでタイルセット化し、編集画面でTileSizeの変更やツールバーのAddBoxなどを使って当たり判定の追加（当たり判定はツールバーのColliding TilesやStatsをオンにすれば見える）をした後、さらにタイルセットを右クリック→Create Tile Mapでタイルマップ化する。

　レイヤー機能もあるほか、四角のタイル以外にもヘクスなどに対応しているようだ。アニメーション機能はなさそうなので追加されると嬉しい（あるかどうかちゃんと調べたわけではないが）。

　完成したタイルマップをビューポートへドラッグ＆ドロップして貼りつけたら、PlayerStartと合わせて位置を調整して背景が完成。動画で作った足場など不要なものは全てビューポート上から削除し、ビューポート内にあるのはタイルマップとPlayerStartだけにておく。