Unreal Engine での Paper 2D サンプル | Unreal Engine 5.3 ドキュメンテーション

このページでは、既存の Third Person Template プロジェクトを修正して、 Top Down 2D 形式のゲームを作成する方法を学習します。

このチュートリアルでは、ご自分のサンプルを使用することもできますし、以下のリンクからサンプルキャラクターをダウンロードすることも可能です。

Sample Assets

プロジェクト設定

このチュートリアル用のプロジェクトを設定します。このセクションの作業中は、自分のアセットをインポートしたり、提供されているサンプルアセットを使用することができます。

Third Person Blueprint プロジェクトを新規作成します。
プロジェクトの中の コンテンツブラウザ の 「Content」 フォルダを 右クリック して [New Folder] で新規フォルダを作成します。

例えば 「TopDown」 など、フォルダに好きな名前を付けます。
ダウンロードしたサンプルアセットを見つけて、 SoldierSprites.paper2dsprites アセットを コンテンツブラウザ へドラッグします。

これにより自動的に SolderSprites の Sprite Sheet アセット、および Frames と Textures が含まれるフォルダが作成されます。

アセットのインポート設定については、 Paper 2D Import Options をご覧ください。
SoldierSprites アセットを 右クリック し [Create Flipbooks (Flipbook を作成)] を選択します。

スプライトシートに合わせてフリップブックが 2 つ自動的に作成されます。
(オプションで) [Idle] の Flipbook を開き、詳細パネルの [Frames Per Second] を 3.0 に設定します。

[Run Flipbook Frames Per Second (Flipbook の実行 FPS)] は 8.0 に設定します。

この設定により、両方のフリップブックアニメーションの再生速度が遅くなります。

プロジェクトの設定が完了しました。トップダウンキャラクターの設定を始めましょう。

キャラクターの設定

Paper 2D Character ブループリントを新規に作成し、キャラクターの設定を行います。

コンテンツブラウザ 内を 右クリック して、[Blueprint Class] を選択して新規作成します。
[Pick Parent Class (親クラスを選択)] ウィンドウで [All Classes] ドロップダウンメニューから PaperCharacter を検索して追加します。

新規に作成したブループリントに 「TopDownCharacter」 などの名前を付けます。
TopDownCharacter ブループリントの [Components] ウィンドウの中の Sprite コンポーネントをクリックします。
[Details (詳細)] パネルの [Sprite] から [Source Flipbook] のドロップダウンをクリックして [Idle] の Flipbook を選択します。

キャラクターが ビューポート の Capsule コンポーネント内に追加されます。
再び [Details (詳細)] パネルの [Transform (トランスフォーム)] で、XYZ に対して [Rotation] を -90、0、90、[Scale] を 0.75 に設定します。

この設定により、フリップブックが適所で回転して縮小するので、 Collision カプセル内にぴったり収まります。
[Components] ウィンドウの [CapsuleComponent] をクリックして [Details (詳細)] パネルで [Shape] の設定を調整します。

この設定は使用するキャラクターによって異なります。ここでは [Half Height (半分の高さ)] と [Radius (半径)] を両方とも 45.0 に設定しました。
[Components] ウィンドウの [TopDownCharacter(self)] をクリックし、[Details (詳細)] パネルの [Use Controller Rotation Yaw] のチェックを外します。

このサンプルでは、コントローラーの回転は使用せず、キャラクターの向きを移動方向に自動的に調整します。
[Components] ウィンドウで CharacterMovement コンポーネントをクリックします。
[Details (詳細)] パネルの [CharacterMovement] で、 [Max Walk Speed (最高歩行速度)] を 400 に変更し、[Orient Rotation to Movement (回転を移動に合わせる)] にチェックを入れます。

この設定により、キャラクターの移動速度が遅くなり、移動に合わせてキャラクターを自動的に回転させます。
[Components] ウィンドウから [Add Component (コンポーネントを追加)] をクリックして Spring Arm コンポーネントを追加します。
[Add Component (コンポーネントを追加)] ボタンをクリックして Camera コンポーネントを追加します。次に、それをドラッグして Spring Arm コンポーネントにドラッグしてアタッチします。
Camera コンポーネントを選択ます。次に [Details (詳細)] パネルの [Location (位置)] 設定をすべてゼロにします。
Spring Arm を選択したら、[Details (詳細)] パネルで以下のように変更します。

ここでカメラをキャラクターの真上に配置するために Spring Arm (延長すると Camera) の [Rotation (回転)] を 180、-90、180 に設定します。[Target Arm Length (ターゲットとするアームの長さ)] を 600 に設定して、キャラクターからのカメラ距離も調整します。最後に、カメラからの設定を継承しないように Pitch, Yaw and Roll の [Inherit (敬称)] オプションのチェックを外しました。
[Compile] と [Save] をクリックします。次にブループリントを最小化します (またすぐに最大化します)。

キャラクターは設定されましたが、それに適用する移動スクリプトがないので、 Third Person Character ブループリントから取得します。

仕上げ作業

このテンプレートには移動がスクリプト化された機能を伴うキャラクターが付いているので、車輪を改めて作らなくても Paper Character へコピーすれば移動させることができます。

キャラクターの移動設定およびブランクのプロジェクトからのキャラクターの移動設定の詳細は、「Setting Up Character Movement in Blueprints」を参照してください。

コンテンツブラウザ の 「ThirdPersonBP」 フォルダから 「Blueprints」 フォルダを開き、次に ThirdPersonCharacter ブループリントを開きます。
Event Graph の中で マウスの左ボタン で選択ボックスをドラッグして Ctrl+C を押して、Movement Input セクションをコピーします。

カメラ、コントローラ入力、ジャンプの操作など、他の 3D ゲームプレイ用スクリプトもここにあります。このチュートリアルでは、一般的な移動のみを取り上げます。
Paper Character ブループリントに戻り、 Event Graph 内で Ctrl+V を押してペーストします。
ThirdPersonBP の 「Blueprints」 フォルダから ThirdPersonGameMode ブループリントを開きます。
[Classes] で Default Pawn Class を 「Paper Character」 (TopDownCharacter) に変更します。

Paper Character をゲームプレイ中に使用するデフォルトキャラクターに設定します。
レベル内の Blue Character を削除して、ゲーム起動時に制御しないようにします。
メインツールバーで [Play (プレイ)] ボタンをクリックしてエディタで再生します。

2D キャラクターはアイドルですが、 WASD キーを使ってデフォルトマップの回りを移動することができるようになりました。

このチュートリアルでは、プレイ可能な 2D キャラクターを作成し、トップダウンゲームの基本設定を図説しました。このサンプルを使って、アニメーションステートマシンの設定 (使用キャラクターに異なるフリップブックアニメーションステートを設定する) や Paper 2D タイルマップ (2D マップを作成する) を行うためのチュートリアルも用意しています。トップダウンゲーム用にカメラフォローではなくカメラを定位置に固定させたいですか？ ブループリントでカメラを使う で設定方法と詳細を説明します。