UE4：オンラインラーニング（Paper 2D プロジェクトを始めよう）
UE4オンラインラーニング
Paper 2D プロジェクトを始めよう
を受講した際のおぼえ書きです。
https://learn.unrealengine.com/course/3770296
なんと、今月配信の新しいコースです！
プロジェクトの作成）
2Dサイドスクロールのテンプレートから作成し、
事前に Paper2dプラグイン を有効にしておく必要があります。
テクスチャのインポート方法）
まず、マップ用、キャラ用のtgaデータをuassetとして
インポートする必要があります。
・tgaをドロップすることでインポートします。
・圧縮＞圧縮設定
をUserInterface2Dに変更
・レベルオブディテール＞ミップマップ全般設定
をミップマップなしに変更
・アジャストメント＞ChromaKeyTexture
を有効に変更
・アジャストメント＞ChromaKeyColor
をクリックし、スポイトを利用しテクスチャ画像の背景部分を選択することで
テクスチャの背景の部分を抜きとして扱うように指定します。
すると、このように
・１つ設定すればあとは
アセットを右クリック＞スプライトアクション＞Paper2Dテクスチャ設定を適用
で一括抜き設定ができるらしい（要確認）
すると、無事ほかのスプライトも抜き設定が完了する
スプライトの作成方法）
１つのテクスチャには複数枚のキャラクターのパラパラ漫画画像が含まれています。
複数枚の画像を一枚ずつ抽出してモノがスプライトです。
・テクスチャを右クリック＞スプライトアクション＞スプライトを抽出
をクリックすることで、スプライトを自動で抽出することができます。
・開いてみるとわかる通り、
これではスプライトごとに異なるサイズと認識されてしまいます。
・設定＞スプライト抽出モード
をグリッドに変更
グリッド＞セルの幅、セルの高さ
を64x64に変更することで無事、用意したときのサイズに認識できました。
・抽出をクリックすることで
ナンバリングされたスプライトの抽出に成功します（０～）
・抽出したスプライトは、ひとつのフォルダにまとめておきます。
フリップブックの作成方法）
フリップブックとは、
抽出したスプライトから生成される、一連のパラパラ漫画アセットです。
・抽出したスプライトをすべて選択、
右クリック＞フリップブックを作成
をクリックすることで。
・フリップブックという動画アセットが作成できます。
（画像は動いています。）
・フリップブックは別フォルダにまとめておきます。
・フリップブックを開くと
以下のようにタイムラインで制御可能なエディタが表示されます。
これは便利そう！
タイルセットの作成方法）
こちらはマップに関するアセットです。
複数の床から構成されたタイル画像から、
マップ作成時に利用するアセットを作成します。
・テクスチャを
右クリック＞スプライトアクション＞タイルセットを作成
を選択するとタイルセットが作成される
・作成したタイルセットは別フォルダにまとめておきます。
・タイルセットを開くと
以下のようなタイルセットエディタが出現する
・タイルセット＞BorderMarginを
4 4 4 4に変更
タイルセット＞Per-Tile Spacingを
8 8 に変更でいい感じのタイル間隔に変更します。
タイルのコリジョン設定）
・タイルの衝突を選択しておきます。
・ボックスの追加
をクリックすることでボックスコリジョンを作成できます。
・さらに、頂点を選択し形を変えることができる。
TIPS：
グリッドを細かく表示して完璧につくるのがオススメ
・ポリゴンを追加
をクリックすることで頂点を指定してポリゴンコリジョンを作成できます。
四角以外の形状はこれで対応します。
（時計回りに選択し→Enter）
・Shiftを押しながらクリックで頂点の追加
Deleteで頂点を削除できます。
同様の手順ですべてのタイルにコリジョンを設定していきます。
タイルマップの作成）
タイルマップとはタイルセットから作られた実際のマップです。
（タイルマップを並べて使うこともできますが、実質タイルマップがマップです）
・タイルセットを右クリック＞タイルマップを作成
をクリックすることでタイルマップを作成します。
・別のフォルダに移動しておきます。
・タイルマップを開くと
タイルマップエディタが表示されます。
（作成元のタイルセットから生成したタイルマップを作成できます。）
・セットアップ＞MapWidth、MapHeight
を24x24に変更することでマップを大きくできます。
TIPS:
グリッドを表示しておくのがオススメ
レイアの作成）
・マップを構成する３つのレイアを作成します。
Backgroundレイアは
LayerCollidesのチェックを外し、単なる背景として作成します。
Middleレイアは
LayerCollidesのチェックはそのまま
Foregroundレイアは
LayerCollidesのチェックを外し、単なる前景として作成します。
並びもForeground、Middle、Backgroundの順
・タイルを選択すると、グリッドの方に絵を描くように配置することができます。
・消しゴムで消すこともできる。
・Shiftを押しながら複数のグリッド選択で複数のタイルを複製し
配置することができます。
・複数のタイルを選択して一度に配置することもできる。
タイルを左右反転、上下反転して配置することもできてしまう！！
・塗りつぶし
フィル＞タイル選択＞塗りたい箇所を選択
で塗りつぶすこともできます。
Foreground、Middle、Background それぞれのマップができました。
レベルの作成）
いよいよ、作成したタイルマップをレベルに配置します。
・タイルマップをレベルに配置
・カメラを右、ライティングをなしに変更するとよい。
TIPS：
エディタの環境設定で
レベルエディタ＞グリッドのスナップ＞２の累乗スナップサイズを使用
にチェックをれることで移動間隔を２の累乗から設定できるようになります。
プレイヤースタートを配置し実行すればこの通り
プレイヤーの作成）
・キャラクターは、
PaperCharacterクラスを親として作成します。
・Spriteコンポーネントの
SourceFlipbookを作成したアイドリングのフリップブックに変更することで
アイドリングの画像を変更できます。
（グレイマン、カワイイですね）
・CapsuleコンポーネントのCapsuleHalfHeight CapsuleRadiusを変更し
コリジョンの大きさを整える
カメラの作成）
・SpringArmコンポーネントを作成し、-90度回転
UsePawnControlRatationのチェックを入れ、InheritYawのチェックを外し、
キャラクタのYaw回転の影響を受けないようにする
・あとは、SpringArmにカメラコンポーネントをつける
選択ノード）
ひし形のピンはワイルドカードです。
右クリック＞ピンの種類を変更
から入力をかえることができます。このように。
キャラの移動）
・SpriteコンポーネントのSetFlipbookノードを利用し、
キャラクターの画像を切り替えることができます。
・実際に出来上がった、歩きBPです。
キャラの走り）
・プロジェクト設定＞インプット＞アクションバインディング
から走りボタンを指定します。
簡単な指定方法は、キーボードボタンをクリックすることで、
直接キーボードから設定することです。
・実際に出来上がった走りＢＰです。
走り中かどうかにより、移動画像を変えています。
キャラのジャンプ）
２Ｄのフリップブックを利用した開発では、
通常のアニメーションＢＰを利用した開発とちがい、
モーションのながれをＢＰで実装しなくてはなりません。
そのため今まで知らずとも製作してこれた、
OnJumpedイベント、OnReachedJumpApex、OnWalkingOffLedgeイベントなど
に関しても理解する必要があります。
・OnJumpedイベント
このイベントはJumpをした直後に実行されるイベントです。
・以下がジャンプのBPです。
あらかじめBeginPlayで
ジャンプ最高点イベント（OnReachedJumpApex）にバインド、
スプライト再生完了イベント（OnFinishedPlaying）にバインドしておきます。
ジャンプ開始イベント（OnJump）
が呼ばれた時に、ジャンプ開始画像に変更
ジャンプ最高点イベント（OnReachedJumpApex）
が呼ばれた時に、ジャンプ開始から落下に変わる画像に変更
スプライト再生完了イベント（OnFinishedPlaying）
が呼ばれたときに、開始から落下に変わる画像かを判別し
ジャンプ落下画像に変更
以上がジャンプの遷移です。
・落下イベント（OnWalkingOffLedge）は
ジャンプしてないが、落下した場合を検知し呼び出されるイベントです。
ここで落下時の画像に変更することができます。
長いですが、以上が、
epic標準のパラパラ漫画タイプの2Dゲームの作成環境です。
動画では、トップビュータイプのゲーム制作に関してもレクチャーしています。
実際に出来上がったもの
youtu.be
こちらのコースを受講することで、
epic標準のパラパラ漫画タイプの、
ゲーム制作環境について理解できました。
SpriteStudio、Spineなどと違い、
スパロボではなく、スーパーマリオ程度か、な～んだ
と侮ってはいけないです。
パラパラ漫画タイプのものを制作するのに便利な機能がついています。
そして、実際にマップを歩かせることになるため、
コリジョン付きタイルを配置するための、
マップ作り機能に関しても理解できます。
ちっちゃいグレイマンの画像が手に入ります。
とても面白かったです。オススメのコースです。
