【UE4 Paper2D入門】とりあえずドットの画像を分割してみよう

スポンサーリンク
UnrealEngineを始めよう!
スポンサーリンク

UnrealEngineで2Dゲームを作りたい!というひとは多いはず、

ただこれを記事にしている人は少なかったので今回はこの記事を作成しました。

これを読むことによって2Dキャラの分割の仕方が分かりますので、

是非最後まで読んでください。

準備 プロジェクトの作成と画像の準備

まずは画像の準備とプロジェクトの準備を進めていただきます。

もう完了しているという人は読み飛ばしてください。

プロジェクトの準備

プロジェクトの準備を行います。

今回作成するプロジェクトは4.25での作成になります。

作成をしたらBlankMapを作ってください。

今回はこの上で作業をおこないます。

また作成をしたら名前を付けて保存をするのも忘れないようにしてください。

画像の準備

画像のダウンロード

素材となるプレイヤーの画像を準備しています。

自分でオリジナルキャラクターをもうすでに持っている人は、

もんだいないですが、そうではない人は準備をしてください。

以下のURLで素材サイトがありますのでお好きなものをダウンロードしてください。

【要保存】アプリ開発の初心者必見!アイコンやキャラクターの制作に役立つ、フリー素材サイト20選
アプリ開発を始めたばかりの人にとって、グラッフィク素材の確保は頭を悩ませることのひとつです。そういうときは、ネットに公開されているフリー素材を使ってみましょう。

注意点

画像はpng形式の画像を用意してください。

bmpでの画像がたまに見受けられますが、UE4では背景を透過してくれないみたいなので気を付けましょう。

プロジェクトに画像を入れよう

今回はわかりやすいようにPerpar2Dというフォルダを作成して、

ファルダ内に準備した2Dの画像ファイルを入れました。

これで準備は完了です。

スプライトアクションを使いスプライトを抽出しよう

分割方法

インポートした画像を右クリック→スプライトアクション→スプライトを抽出

まずは以上の順番で操作を進めてください。

スプライトを抽出を押すと上の画像のようなWindowが出てきます。

ただこのが画像では左の人物を囲んでいる黄色い枠がばらばらなので、修正を行います。

 

修正を行うと左の赤枠の中のように均等に左の画像が分けることが出来ます。

分け方としては、

 

設定をグリッドに変更する

グリッドの高さと幅を一パーツのサイズに変更します。

今回の画像の場合は、32×32だったのでセルの幅と高さはそれぞれ32にしています。

 

 

フリップブックを作成しよう

次にフリップブックを作成します。

フリップブックとは一連のキーフレームから構成される機能のことで、

いわばパラパラ漫画の数ページみたいなものです。

作成方法は簡単で、抽出したスプライトに対して右クリックを押し、

一番上にあるフリップブックを作成を押してください。

 

そうすると上の画像のような、ファイルが作成されます。

今回はあくまで練習なのでFB_Testという名前にしました。

 

Paper2D用のキャラクターBPを作成しよう

3D用のキャラクターBPと同じようにペーパー用の2Dキャラクターも作成することが出来ます。

ここではキャラクター2Dの作成方法を解説します。

まずブループリントを作成する画面を開いてください。

そこですべてのクラスにPaperと検索をかけて

下の赤枠のPaperCharecterというBluePrintがPepar2Dを作成するための、

ブループリントクラスになります。

これを選択してください。

すると上記のようなファイルが出てきますのでお好きな名前を付けてください。

本記事では、BP_Paper2Dという名前を付けました。

Pepar2Dにフリップブックを設定しよう

Pepar2Dキャラクターに設定を行います。

作成したPepar2Dキャラクターを開いてください。

コンポーネントパネルにあるSprite(継承)を押して下さい。

Spriteの中にあるスプライトの、SourceFlipbookに作成たフリップブックを選択してください。

 

作成したらビューポートにフリップブックの画像が出てきますので、

矢印に合わせるような向きにしてください。

私の場合はZ軸を-90度回転させたらArrowComponentの向きと一緒になりました。

 

 

最後に当たり判定を画像に合わせます。

CapsuleComponentを押しシェイプの

CapsuleHalfHeightとCapsuleRadiusの値を調整して当たり判定の調節を行ってください。

 

これでワールドに出すまでの準備は終わりました。

 

それでは、作成したPaper2Dキャラクターをマップに移動してください。

3D空間に2D画像が出てれば完了です。

まとめ

ペーパー2Dはいかがでしたでしょうか?

ほかにもUnrealEngineでできる表現を本ブログではまとめているので、

よろしければいろいろみていってください、

それと動かし方については、反応が多ければ作成していきたいと思いますので、

必要であればお声がけください。

それではまた次の記事でお会いしましょう。

 

 

コメント

タイトルとURLをコピーしました