トップダウン 2D ゲームの設定

プレイ可能なキャラクターを使ってトップダウン ゲームを簡単に設定する

Windows
MacOS
Linux

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

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

プロジェクト設定

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

  1. Third Person Blueprint プロジェクトを新規作成します。

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

    TopDown1.png

    例えば 「TopDown」 など、フォルダに好きな名前を付けます。

  3. ダウンロードしたサンプル アセットを見つけて、 SoldierSprites.paper2dsprites アセットを コンテンツ ブラウザ へドラッグします。

    TopDown2.png

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

    TopDown3.png

    アセットのインポート設定については、 Paper 2D Import Options をご覧ください。

  4. SoldierSprites アセットを 右クリック[Create Flipbooks (Flipbook を作成)] を選択します。

    TopDown4.png

    スプライト シートに合わせてフリップブックが 2 つ自動的に作成されます。

    TopDown5.png

  5. (オプションで) [Idle] の Flipbook を開き、詳細パネルの [Frames Per Second]3.0 に設定します。

    TopDown6.png

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

    TopDown7.png

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

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

キャラクターの設定

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

  1. コンテンツ ブラウザ 内を 右クリック して、[Blueprint Class] を選択して新規作成します。

    TopDown8.png

  2. [Pick Parent Class (親クラスを選択)] ウィンドウで [All Classes] ドロップダウン メニューから PaperCharacter を検索して追加します。

    TopDown9.png

    新規に作成したブループリントに 「TopDownCharacter」 などの名前を付けます。

  3. TopDownCharacter ブループリントの [Components] ウィンドウの中の Sprite コンポーネントをクリックします。

    TopDown10.png

  4. [Details (詳細)] パネルの [Sprite] から [Source Flipbook] のドロップダウンをクリックして [Idle] の Flipbook を選択します。

    TopDown11.png

    キャラクターが ビューポート の Capsule コンポーネント内に追加されます。

    TopDown12.png

  5. 再び [Details (詳細)] パネルの [Transform (トランスフォーム)] で、XYZ に対して [Rotation]-90、0、90[Scale]0.75 に設定します。

    TopDown13.png

    この設定により、フリップブックが適所で回転して縮小するので、 Collision カプセル内にぴったり収まります。

  6. [Components] ウィンドウの [CapsuleComponent] をクリックして [Details (詳細)] パネルで [Shape] の設定を調整します。

    TopDown14.png

    この設定は使用するキャラクターによって異なります。ここでは [Half Height (半分の高さ)][Radius (半径)] を両方とも 45.0 に設定しました。

  7. [Components] ウィンドウの [TopDownCharacter(self)] をクリックし、[Details (詳細)] パネルの [Use Controller Rotation Yaw] のチェックを外します。

    TopDown15.png

    このサンプルでは、コントローラーの回転は使用せず、キャラクターの向きを移動方向に自動的に調整します。

  8. [Components] ウィンドウで CharacterMovement コンポーネントをクリックします。

  9. [Details (詳細)] パネルの [CharacterMovement] で、 [Max Walk Speed (最高歩行速度)]400 に変更し、[Orient Rotation to Movement (回転を移動に合わせる)] にチェックを入れます。

    TopDown16.png

    この設定により、キャラクターの移動速度が遅くなり、移動に合わせてキャラクターを自動的に回転させます。

  10. [Components] ウィンドウから [Add Component (コンポーネントを追加)] をクリックして Spring Arm コンポーネントを追加します。

    TopDown17.png

  11. [Add Component (コンポーネントを追加)] ボタンをクリックして Camera コンポーネントを追加します。次に、それをドラッグして Spring Arm コンポーネントにドラッグしてアタッチします。

    TopDown18.png

  12. Camera コンポーネントを選択ます。次に [Details (詳細)] パネルの [Location (位置)] 設定をすべてゼロにします。

    ZeroCamera.png

  13. Spring Arm を選択したら、[Details (詳細)] パネルで以下のように変更します。

    TopDown19.png

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

  14. [Compile][Save] をクリックします。次にブループリントを最小化します (またすぐに最大化します)。

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

仕上げ作業

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

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

  1. コンテンツ ブラウザ「ThirdPersonBP」 フォルダから 「Blueprints」 フォルダを開き、次に ThirdPersonCharacter ブループリントを開きます。

  2. Event Graph の中で マウスの左ボタン で選択ボックスをドラッグして Ctrl+C を押して、Movement Input セクションをコピーします。

    TopDown20.png

    カメラ、コントローラ入力、ジャンプの操作など、他の 3D ゲームプレイ用スクリプトもここにあります。このチュートリアルでは、一般的な移動のみを取り上げます。

  3. Paper Character ブループリントに戻り、 Event Graph 内で Ctrl+V を押してペーストします。

  4. ThirdPersonBP「Blueprints」 フォルダから ThirdPersonGameMode ブループリントを開きます。

  5. [Classes]Default Pawn Class「Paper Character」 (TopDownCharacter) に変更します。

    TopDown21.png

    Paper Character をゲームプレイ中に使用するデフォルト キャラクターに設定します。

  6. レベル内の Blue Character を削除して、ゲーム起動時に制御しないようにします。

    DeleteMe.png

  7. メイン ツールバー で [Play (プレイ)] ボタンをクリックしてエディタで再生します。

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

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

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信