Language:
Page Info
Skill Level:
Engine Version:
The translation of this page is out of date. Please see the English version for the latest version of the page.

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

このページでは、既存の 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 マップを作成する) を行うためのチュートリアルも用意しています。トップダウン ゲーム用にカメラ フォローではなくカメラを定位置に固定させたいですか? ブループリントでカメラを使う で設定方法と詳細を説明します。