Warning: Declaration of action_plugin_linebreak::register(&$controller) should be compatible with DokuWiki_Action_Plugin::register(Doku_Event_Handler $controller) in /home/stepism/www/ue4/wiki/lib/plugins/linebreak/action.php on line 41
Warning: Declaration of action_plugin_markdownextra::register(&$controller) should be compatible with DokuWiki_Action_Plugin::register(Doku_Event_Handler $controller) in /home/stepism/www/ue4/wiki/lib/plugins/markdownextra/action.php on line 16
Warning: Declaration of action_plugin_syntaxhighlighter3_action::register(Doku_Event_Handler &$controller) should be compatible with DokuWiki_Action_Plugin::register(Doku_Event_Handler $controller) in /home/stepism/www/ue4/wiki/lib/plugins/syntaxhighlighter3/action/action.php on line 28
====== UE4/Paper2Dシューティング/自機を表示する ======
===== 素材の準備 =====
http://game.yu-nagi.com/
* ダウンロードするファイル
* k6_p1a.png
* k6_p1b.png
ダウンロードしたファイルをは縦横60ピクセルなので、ペイントツール等で縦横64pxに編集しておきます。そのあと自機のテクスチャを横に並べて、128x64pxの一枚のテクスチャとして名前はPlayer.pngで保存します。(アトラス化)
\\
\\
\\
===== 新規プロジェクトの作成 =====
* 新規プロジェクト-> Blueprint[空き] ->No Starter Content(スターターコンテンツ無し)を選択。
* 適当なフォルダを選択してプロジェクトの名前はPaper2DShootingとします。
\\
\\
\\
===== 新規レベルの作成 =====
* ファイル -> 新規レベル -> 空のレベル を選択
* ファイル -> 名前をつけて保存 -> Gameフォルダ以下にMapsフォルダを作成して、名前をLevel_1に変更して保存。この空の状態から作っていきます。
\\
\\
\\
===== 起動時のレベルを設定する =====
* 編集 -> プロジェクト設定 -> プロジェクトのマップ&モード欄の、Game Default MapとEditor Startup MapLevel_1を選択して閉じます。
\\
\\
\\
===== 自機(プレイヤー)画像のインポート =====
* コンテンツブラウザのGame フォルダにTexturesフォルダを作成する。
* インポートを選択し自機にするテクスチャを選択する。
* ここで、インポートしようとしているテクスチャのサイズが2の累乗でなければ警告ダイアログが出ます。無事インポートできたら、インポートしたテクスチャをダブルクリックして確認します。
\\
\\
\\
===== スプライトの作成 =====
* プレイヤーをレベルに配置するためにはスプライトにする必要があるので、Playerテクスチャを右クリック -> SpriteActions -> Extract Spritesを選択しテクスチャをスプライト可します。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_001.png?300|}}
ここで、元のテクスチャがドット絵だったりすると、デフォルトでテクスチャ補完が行われて滲んでしまい都合が悪いので、
Playerテクスチャを右クリック -> SpriteActions -> Configure For Retro Sprites を選択するとテクスチャ補完が消えてドット絵らしくなります。できたスプライトはGameフォルダにSpritesフォルダを作成しそこに移動させておきます。
\\
\\
\\
===== アニメーションの作成 =====
* GameフォルダにAnimationsフォルダを作成し、フォルダ内で右クリック -> アニメーション -> Sprite Flipbookを選択します。名前はPlayer_Idleに変更します。
* Player_IdleをダブルクリックでFlipbookエディターが開くので、コンテンツブラウザからSpriteをドラッグ&ドロップします。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_002.png?300|}}
アニメーションが早いのでDetailsのFrame Per Secondでアニメーションのキーフレームを調整します。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_003.png?300|}}
\\
\\
\\
===== プレイヤーブループリントの作成 =====
プレイヤーを配置するためにBlueprintを書いていきます。
* GameフォルダにBlueprintsフォルダを作成し、フォルダ内で右クリック -> ブループリント -> ブループリントを選択。
* ダイアログが開くので、All Classesの入力ボックスにPaperCharactorと入力し、PaperCharactorを選択し名前はPlayerで保存。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_004.png?300|}}
* ブループリントを開いて「デフォルト -> コンポーネント -> グラフ」のコンポーネントモードを選択してSpriteの詳細 ->Source Flipbookから作成したPlayerアニメーション(Player_Idle)を選択します。
* 自機が小さい場合はスケーリング値を適当に10倍などに変えてあげます。
* 変更したらコンパイルボタンを選択してエラーが出ず問題なければ閉じます。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_005.png?300|}}
\\
\\
\\
===== GameModeブループリントの作成 =====
自機の開始位置や操作などゲームのルールを決めるためのブループリントを作成します。ツールバーの[設定 -> ワールド設定] のワールド設定覧のGame Modeのプラス(+)ボタンをクリックして新規ブループリントを作成します。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_006.png?300|}}
名前はPaper2DShootingGameModeとします。次にPaper2DShootingGameModeブループリントを開いてデフォルト -> コンポーネント -> グラフ」のデフォルトを開いて[Game Mode -> Default Pawn Class]から作成したPlayerのブループリントを選択します。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_007.png?300|}}
\\
\\
\\
===== 自機の配置 =====
[モード]の [基本 -> プレイヤースタート]をレベルに配置して、プレイヤーの開始位置を設定します。
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_010.png?300|}}
\\
\\
\\
===== カメラの配置 =====
自機を写すためのカメラを配置します。
[モード]の [基本 -> カメラ]をレベルに配置して、カメラを設置します。
* 名前:DefaultCameraActor
* 位置:Yを-500
* 回転:Zを90
\\
\\
\\
===== レベルブループリントの編集 =====
カメラが設置できたので再生してみると設置したカメラが反映されず、最初から自動で設定されているカメラが移されてしまいます。。
そこで、レベルが開始した時に配置したカメラで表示するようにしてみます。
* ツールバーの[Levelブループリント -> レベルブループリントを開く]からレベルブループリントを編集します。
* Level開始時に実行するので、Event Graphを右クリック -> Begin Playを選択。
* BeginPlayのノードを伸ばして[Set View Target with Blend] を選択。
* Event Graphを右クリック -> [Get Player Controller]を選択しPlayer Index を0番に設定。
* Event Graphを右クリック -> 作成したカメラアクター[DefaultCameraActor]を選択。
* [Set View Target with Blend]のターゲットに[Get Player Controller]、[New View Target]に[DefaultCameraActor]を指定します。
{{:wiki:ue4:paper2d:shot:ue4_level_bp_camera.png?300|}}
\\
\\
\\
===== 結果 =====
{{:wiki:ue4:paper2d:shot:ue4_paper2d_shoot_001_011.png?300|}}
スプライトアニメーションした自機が表示されれば完成です。