UE4で2Dドット絵ゲームを作る際のTipsまとめ。

:::note info
UE5.1以降の設定は、[≫こちらに書きます。](https://ue5study.com/2d/ue5-2d-postprocess-settings/)
:::

# はじめに
UE4で2Dゲーム作る際に、気を付けるべき点を、UE5が来る前に、まとめておきたいと思います。
今回の記事の内容としては、作る際の注意点の羅列になるので、作り方に関しては、[**動画**](https://www.youtube.com/playlist?list=PLmoIIqJZj1GWh3Vz3KYFMSPBzXB-hk7TF "[UE4]2Dアクションゲームを作ろう！プレイリスト")をご確認ください。
また、行数が多くなってしまったので、目次から、興味がある項目に飛んでいただければと思います。
![image25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/56711ef6-707e-60e0-9fd2-25fc04ce164b.png)

## UE4注目のドット絵or2Dゲーム

|[オクトパストラベラー](https://www.jp.square-enix.com/octopathtraveler/)|[幻想郷萃夜祭](https://store.steampowered.com/app/1122050/_/)|[**Spartan**](https://store.steampowered.com/app/685050/Spartan/)|[**Guntastic**](https://store.steampowered.com/app/981630/Guntastic/)|
|:---:|:---:|:---:|:---:|
|[**Wunderling**](https://store.steampowered.com/app/732930/Wunderling/)|[**Dreamviewer**](https://twitter.com/rwiiug/status/1066290508341755904?s=20)|[__クリオネコ__](http://inugelabo.sakura.ne.jp/clioneko/)|[**RamuneさんのSTG**](https://twitter.com/ramunepod/status/1332702023976845312?s=20)|
|[**Backbone**](https://store.steampowered.com/app/865610/Backbone/)|[**The Siege and the Sandfox**](https://siegeandsandfox.com/)|[**SYSTEMCRASH92**](https://twitter.com/SYSTEMCRASH92/status/1333603975556435968?s=20)|[**#UKIYO**](https://seaknot.dev/)|
|[**Too Good For School**](https://store.steampowered.com/app/1394650/Too_Good_For_School/)|[**Rising_Sun**](https://twitter.com/stir67679709/status/1298887587445108741?s=20)|[**2d脱出100**](https://twitter.com/jiji4000/status/1309156496442261504?s=20)|[**インパルスここから**](https://store.steampowered.com/app/1385210/_/)|
|[**ENDER LILIES**](https://store.steampowered.com/app/1369630/ENDER_LILIES_Quietus_of_the_Knights/)|[**オクトパストラベラー<br>大陸の覇者**](https://www.jp.square-enix.com/octopathtraveler_SP/)|[**TRIANGLE STRATEGY**](https://www.jp.square-enix.com/trianglestrategy/)|[**BornOfBread**](https://twitter.com/wildartsdevs/status/1365720144027254788?s=20)|
|[**The Vagrant**](https://store.steampowered.com/app/598700/The_Vagrant/?l=japanese)|[**入替人-ReplaceR-**](https://store.steampowered.com/app/1667160/ReplaceR/)|[**Imp of the Sun**](https://store.steampowered.com/app/1535780/Imp_of_the_Sun/)|[**The Oregon Trail**](https://www.gameloft.com/game/the-oregon-trail)|
|[**PogoStick<br>Miooooooon**](https://store.steampowered.com/app/1942860/PogoStickMiooooooon/)|[**ライブアライブ**](https://www.jp.square-enix.com/lal/)|[**Born of Bread**](https://store.steampowered.com/app/1555140/Born_of_Bread/)|[**orz**](https://store.steampowered.com/app/2501210/orz/)|
|[**METAL SLUG<br>ATTACK RELOADED**](https://www.youtube.com/watch?v=cWqIpZqWcps)|||

コメントで募集中。追加します。

# 目次
[はじめに](#はじめに)
[1. 画像の読み込み](#1-画像の読み込み)
[2. キャラクター画像](#2-キャラクター画像)
[3. 背景画像](#3-背景画像)
[4. テクスチャの色味をそのまま出したい](#4-テクスチャの色味をそのまま出したい)
[5. 2D Pixel Perfect](#5-2d-pixel-perfect)
[6. ジャンル別Tips](#6-ジャンル別tips)
[7. 2Dゲーム参考資料](#7-2dゲーム参考資料)
[おわりに](#おわりに)



# 1. 画像の読み込み
## 1.1. 解像度は [2の乗数か4の倍数]
画像の解像度が4の倍数でないと、画像が圧縮されず、データサイズが大きくなるようです。
>参考
>テクスチャサイズは４の倍数にしようの巻 - kamipallet’s blog 
>http://kamipallet.hatenablog.com/entry/2018/10/16/140557
>そう、UE4ならね。あなたのモバイルゲームをより快適にする沢山の冴えたやり方について Part 2 ＜Texture Streaming, メモリプロファイル, Auto Instancing編＞
>https://www.slideshare.net/EpicGamesJapan/ue4-festeast2019-ue4mobilepart2-179705328

2の乗数（...128,256,512,1024,2048...）のテクスチャにするのが、ベストな状態のようですが、
Mipmapが必要ない場合は、4の倍数の解像度にすることでも必要な効果が得られるようです。

+ 4の倍数であれば、適切な圧縮がかかる。
+ 2のべき乗であれば、更にMipmap（Texture Streaming）が使える。

### TexturePacker
TexturePackerなどを使うと、細かいパーツを適切な解像度で、まとめてUE4に読み込めるようです。
>Paper 2D のインポートオプション | Unreal Engine Documentation
>https://docs.unrealengine.com/ja/Engine/Paper2D/Importing/index.html

この記事をまとめてから知ったので、これから使ってみます。
※使用後の感想としては、あるととても便利。

## 1.2. 画像の色情報は[RGB/8bitカラー]
高度な事をする場合は、その限りではありませんが、
穏便に作業を進めたい場合は、[RGB/8bitカラー]の状態にすることをお勧めします。(参考画像はPhotoShop)
![Image01_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/9ed58961-296e-372d-03a5-46845544ebf8.png)
高画質な写真や、イラスト、3Dのレンダリング画像を何も考えないで読み込むと、
16bitや32bitの画像が混ざって、読み込めなかったり、色がおかしいという事が起こります。

参考画像は、PhotoShopのモード選択ですが、この2点[RGB/8bit]を確認してみてください。
他のソフトでも、似たような項目があると思うので、読み込めなかったり、色がおかしい場合は、
このあたりが原因の場合があります。

## 1.3. テクスチャ読み込み画像形式
正式にサポートしている画像形式 [.bmp .float .pcx .png .psd .tga .jpg .exr .dds .hdr]
>参考
>テクスチャのインポート操作ガイド | Unreal Engine Documentation
>https://docs.unrealengine.com/ja/Engine/Content/Types/Textures/Importing/index.html

好きな形式で良いと思いますが、個人的には、PNGがお勧めです。

## 1.4. 画像のにじみを解消する
フォルダに画像をドラッグして、画像を読み込みます。
読み込んだ画像を、右クリック
![Image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/9a381dc0-b8c0-3343-7328-6a1f4fbc94c5.png)
■スプライトアクション＞■Paper2Dテクスチャ設定を適用
を選択することで、画像のにじみがなくなります。

## 1.5. 不必要な補完画像の生成を止める
ドット絵など、元の解像度が低いものは、
NoMipmapsにしておくことで、不必要な補完画像が作成されなくなり、適切な設定になります。
![Image03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/8042fa5f-aa38-9047-02a0-a3f2b4e9628b.png)
テクスチャをダブルクリック＞
■テクスチャの詳細＞■レベルオブディテール＞■Mip Gen Settings＞■[NoMipmaps]
解像度が高いテクスチャの場合は、NoMipmapsにしない方が良い場合もあります。






# 2. キャラクター画像
ドット絵キャラクターを使用する際は、テクスチャを、
>・スプライト（1枚絵）
>・フリップブック（連番アニメーション）

どちらかの状態にすることで、ゲームで使える素材になります。

## 2.1. ピクセル単位を設定
■設定＞■プロジェクト設定＞■エディタ＞■Paper2D-インポート＞■新規アセットの設定＞■デフォルトのUnreal単位あたりのピクセルの値
![Image07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/183b9854-bdec-77e0-7fe8-282929ada179.png)
>・ファミコンの頃の16ピクセルのブロックサイズの世界観なら、0.16
>・素材のブロックサイズを把握して32ピクセルなら、0.32。48ピクセルなら、0.48。
>・デフォルトの1.0の場合は、100ピクセルで1ブロックという世界観になります。

ここを変更しておくことで、後でキャラクターの画像サイズを調整する必要がなくなります。
よくわからない場合は、1.0のままでも構いません。

## 2.2. スプライト化
キャラクター画像を、右クリックから、
![Image04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/00b7faf5-8414-28dc-d75a-5e2639b08078.png)
■[スプライトアクション]＞■[スプライトを抽出] を選択し、

### スプライト分割 [Auto]抽出
アルファ付きのキャラクターであれば、
![Image05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/3cbd172a-0e6b-8a8a-aaf4-729fad312dd0.png)
■スプライト抽出モード[Auto]で自動で分割されます。

### スプライト分割 [Grid]抽出
等間隔でキャラクターを並べている場合は、
■スプライト抽出モード[Grid]で分割サイズを指定します。
>[UE4]2Dアクションゲームを作ろう #1 ドット絵キャラクター編（5:32～
>https://youtu.be/fo3xTxEyq-w?t=332

こちらで解説しているので、参照してみてください。

### スプライト分割 手動
下記動画で、背景用のスプライト分割をやっていますが、キャラクターの場合も、手動で分割する際は、同じ方法になります。
>Paper 2D 入門 03 （UE4日本語チュートリアル）
>https://www.youtube.com/watch?v=1ri7JJq6n0Q&list=PLr_Cbd4sUDTwRXRqlkp9HgndZ2i8s5m3f&index=3

お勧めの方法ではありませんが、方法論として知っておくのは良いと思います。

## 2.3. フリップブック化
スプライト化した画像から、フリップブック（連番アニメーション素材）を作れます。
![Image06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/c02299e1-868e-3716-96bd-c470b2836530.png)
アニメーションさせたいSpriteを複数選択し、右クリックから＞■フリップブックを作成
作成されたフリップブックをダブルクリックから、
![Image09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/86d4f66c-2e86-0beb-86fd-a2ddfaeed0a1.png)
[Frames Per Second]と[Frame Run]の数値を調整することで、アニメーションの細かい速度調整ができます。
>参考
>[UE4]2Dアクションゲームを作ろう #1 ドット絵キャラクター編（8:02～
>https://youtu.be/fo3xTxEyq-w?t=482

これで、基本的なキャラクターの素材が揃います。

## 2.4. キャラクター画像の差し替え
横スクロールのキャラクターの場合は、
>[UE4]2Dアクションゲームを作ろう #1 ドット絵キャラクター編（10:42～
>https://youtu.be/fo3xTxEyq-w?t=642

こちらを参照してみてください。

## 2.5. キャラクター画像の軸調整
スプライトをダブルクリックから
![Image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/625cb600-c0e3-6a11-6e3b-9440b819e136.png)
■[Pivot Mode]を[Custom]
■[Custom Pivot Point]の数値を調整
ピボットポイントを調整できます。

テクスチャの段階で、均等に配列をして、Grid分割すれば、軸の調整はいらなくなりますが、
その場合は、若干余白が多くなることになると思います。

軸調整の実演は、
>参考
>[UE4]2Dアクションゲームを作ろう #10 BluePrint編 壁ジャンプWallJump（52：10～）
>https://youtu.be/WSaHszmRKhQ?t=3130

こちらをご確認ください。

## 2.6. 2D skeletal animation
この辺のリンクを見ると、動きそう。
### SpriteStudio
* SpriteStudio/SS6PlayerForUnrealEngine4<br>https://github.com/SpriteStudio/SS6PlayerForUnrealEngine4

### Spine
* ドキュメント/spine-ue4 - Spine非公式日本語wiki<br>https://factory-workers.com/wiki/spine2djp/?%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/spine-ue4

### Live2D

- demuyan/L2DCubismUE4: Live2D Cubism Plugin for UnrealEngine4
    - https://github.com/demuyan/L2DCubismUE4
- Arisego/UnrealLive2D<br>
    - https://github.com/Arisego/UnrealLive2D


# 3. 背景画像
## 3.1. 背景画像をスプライト化（1枚絵）
1枚絵の背景を使う場合は、テクスチャを右クリックから、
![Image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/3adb734d-2f23-57d4-d007-1e8525bce069.png)
■[スプライトアクション]＞■[スプライトを作成]
を選択すれば、書き割り背景画像として、使うことができます。

## 3.2. タイルマップ化
### テクスチャをタイルセットに変換
テクスチャを右クリックから、
![Image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/41b8df6c-6331-36d0-0b62-8169244b950f.png)
■[スプライトアクション]＞■[タイルセットを作成]

### タイルセット設定
できたタイルセットをダブルクリック
![image28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/7b2bd107-2a12-f606-d227-616759b27d19.png)
[Tile Size] をタイルサイズによって調整する。
衝突判定が必要なブロックに、画像右上の黄色い[ブロックを追加]
>参考
>[UE4]2Dアクションゲームを作ろう #2 ドット絵背景編（4：15～）
>https://youtu.be/KybHnNbB6xM?t=255

ブロックコリジョンのボックスの追加が分からない場合は、上記の動画を参照。

### タイルマップに変換
タイルセットの設定ができたら、タイルセットを右クリック
![Image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/bdaf301e-e72a-d2e6-ec5e-53b4cdb17809.png)
メニューの一番上の、■[タイルマップを作成]
これで、タイルマップの準備ができました。
タイルマップのタイルの並べ方は、
>参考
>[UE4]2Dアクションゲームを作ろう #2 ドット絵背景編（5：18～）
>https://youtu.be/KybHnNbB6xM?t=318

こちらをご確認ください。

### タイルの境にノイズがちらつく
タイルマップを使う際は、少し気を付けたい点があります。
テクスチャにタイルを隙間なく敷き詰めると、隣のタイルの色の影響で、ノイズがちらつくことがあります。
また隙間を開けると、隙間がちらつくことがあります。
![image24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/3f762c98-753a-7356-c1a4-a166bac4777d.png)
>参考
>[UE4]2Dアクションゲームを作ろう #18 Tilemap Flicker Clear
>https://youtu.be/Ub7yHpIdwNQ

カメラの距離や、位置を調整するとノイズが発生しなくなったりもしますが、
根本解決したい場合は、タイルセットを右クリックから
![image27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/8d7fb045-aa38-3162-9407-a5939d2bbb20.png)
■[タイルシートテクスチャを調整]　を選択すると、
タイルの境を境の色で塗りつぶした上で、2の乗数のテクスチャに変換されます。
タイルセットの設定も変換がかかるので、この1クリックだけで、問題がなくなります。

テクスチャの余白の空白が気になる場合や、UE4に読み込む前に調整をしておきたい場合は、
こちらのツールをおすすめします。
>Simple Tileset Extruder
>https://gamesplusjames.itch.io/simple-tile-extruder
![Image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/b20d7da0-5c16-406e-71c5-96cbfcc8091c.png)

タイルの境を1ピクセルタイルカラーで塗りつぶしてくれたうえで、余白の設定などの調整もできます。
こちらのツールなどで、タイルの隙間がある場合は、タイルセットの隙間の調整をします。
![Image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/bbacae75-9abd-b09f-48d5-d65a1c66e3ba.png)









## 3.3. 背景を動かしたい
2DSideScrollerテンプレートのカメラは、デフォルトだと並行投影なのを、
パースペクティブにすると、奥に置いた背景が、視差の影響を受け、手前の背景と差が生まれます。
![image26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/f5367030-5357-c37d-d938-7b3642bdf6ce.png)
ピクセルパーフェクトなレトロゲームを作る場合は、並行投影のまま、
背景をブループリントで制御する必要があると思います。

関連の動画を作りました。
>2Dの背景を動かしたい。（質問回答）[UE4]2Dアクションゲームを作ろう #51
>https://youtu.be/CPQ42hFrqgU




# 4. テクスチャの色味をそのまま出したい
「[1. 画像の読み込み](#1画像の読み込み)」の設定も重要なんですが、読み込み時の設定だけでは、
UE4のデフォルトの設定だと、テクスチャの色味が少し変わって見える問題があります。

## 4.0. 自動露出への対応(4.25以降のバージョンへの対応)
4.25から自動露出の設定が変わり、デフォルトだと、ちょっと明るくなる点をポストプロセスの設定で修正します。
![post425.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/e3010110-99de-fa13-0cc2-7c7e3e1ba955.jpeg)
公式のテンプレートプロジェクトは、こういう対応になっています。（UE4.27.2時点）

プロジェクト設定のレンダリングの、自動露出のチェックをはずす事でも、無効化できます。
![20220913_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/aa5ca6d2-f09b-28ee-7f99-949840f66c6b.jpeg)

:::note warn
注意したいのが、「ポストプロセスで自動露出関連（Exposure内の値）にチェック」が入っていると、ポストプロセス側の設定が優先される為、プロジェクト設定で自動露出のチェックを外していても、自動露出補正がかかってしまう場合があります。カメラ及び、ポストプロセスボリュームのExposure に数値やチェックが入っていないかを確認してみることをお勧めします。
:::


## 4.1. ゲーム用途でない場合
ゲーム用途でない場合は、[Execute Console Command]に
![image29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/358693ac-0b86-be20-b775-c5f59a1fb9af.png)
[viewmode unlit]　か　[ShowFlag.Tonemapper 0]　を入力することで、ポストプロセスが無効になり、
テクスチャの色味が「そのまま表示」されます。
ゲームとしてのパッケージの際に反映されない設定なので、
ゲーム用途としては、使いづらいコマンドになります。

- [C++でUnlit設定にするとShipping時にも効くようです。](https://twitter.com/Blasthal/status/1487140457029435392?s=20&t=CkeeMk9cE9Yd1tK2agaGzg)


## 4.2. ゲーム用途の場合
ゲーム用途の場合は、[Execute Console Command]に
![image19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/5fc108fc-4be4-7ad6-cdac-3a2288d172e8.png)
[r.tonemapperfilm 0]と打つことで、
完全な色一致ではありませんが、見た目では、ほぼテクスチャそのままの色味になります。

:::note alert
このコンソールコマンド　[r.tonemapperfilm 0]　は、UE5で機能しません。
代わりの機能として、[UE4.26からポストプロセスにパラメーターが追加されました。](#ue426以降)
:::

ポストプロセスの設定をいじると、より色味が近づきます。
![image20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/5bc38add-9f31-7283-03b7-63fe5af565ec.png)
■[ポストプロセスボリューム]＞■[レンズ]＞■[Bloom]＞■[しきい値] の値を　1以上
■[ポストプロセスボリューム]＞■[レンズ]＞■[Image Effects]＞■[ビネット効果強度]の値を　0
にすることで、ポストプロセスの影響を減らせると思います。

>参考
>[UE4]テクスチャの色味をそのまま出す設定方法！　2Dアクションゲームを作ろう #20（4：09～）
>https://youtu.be/xLtCgai1vcU?t=249

また、.INIファイルに書き込むことで、常に適応させることができます。
>.INI ファイルを使ってトーンマッパ フィルムを有効にする
>https://docs.unrealengine.com/ja/Platforms/Mobile/PostProcessEffects/index.html

デバッグモードでのパッケージでも良い場合は、
[ShowFlag.Tonemapper 0]を使うことで、テクスチャそのままの色が出ます。

### UE4.26以降

:::note info
[r.tonemapperfilm 0]の代わりとして
UE4.26以降は、以下の方法が推奨されています。（UE5以降も機能します。）
:::

ポストプロセス　トーンカーブ量を0にすることで、テクスチャの色味問題を解消できます。
![Qiita_0908_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/079a99ce-cb24-b097-a333-cd453b9bf3ef.jpeg)
[参考　Color Pipeline Basics](https://forums.unrealengine.com/docs?topic=264935)

## 4.3. マテリアル設定で追い込む。
2018年にはるべえさんが書いてくれた記事の
下記リンクで書かれている内容がすべてですが、頑張ればいけそう。
>UE4のUnlitでトゥーンレンダリングをキメる！
>https://qiita.com/ruyo/items/28255f26725a6b6bd475

この項目は、VTuber的な用途でも重要な項目なので、
>VRM4U
>https://ruyo.github.io/VRM4U/

トゥーン調のキャラクターを読み込みたい方は、VRM4Uを一度触ってみるといいかもしれません。
マテリアルの中身も見れます。（結構複雑）
この辺、自分で理解出来たら、追記したいと思います。

## 4.4. UE5の事例

- [UE5で削除された r.TonemapperFilm 0 の代替手法（ToneCurveAmount）](https://qiita.com/EGJ-Osamu_Saito/items/1b478c0d91f263452b0f) ★NEW
- [ドット絵を生かしたゲーム向けのグラフィック設定例](https://www.hakobuneworks.com/posts/settingsforpixelart/)




# 5. 2D Pixel Perfect
2D Pixel Perfectがなにかについては、Unityのブログ記事がとても分かりやすく説明してくれているので、そちらを確認してもらいつつ
>2D Pixel Perfect：レトロな 8 ビットゲームの制作に向けた Unity プロジェクトのセットアップ方法
>https://blogs.unity3d.com/jp/2019/03/13/2d-pixel-perfect-how-to-set-up-your-unity-project-for-retro-8-bits-games/

UE4で2D Pixel Perfectを実現するにはどうするのか、という問いを、何度か投げかけられたことがあります。
現状、自分にはこうすればいいよという、簡単な手段を提示できませんが、下記のブログを見ると
>3 TRICKS TO IMPROVE PIXEL ART RENDERING IN UE4
>https://weareludicrous.com/blog/2018/3-tricks-to-improve-pixel-art-rendering-in-ue4/
>PIXEL SHARP GRAPHICS AT MULTIPLE SCREEN RESOLUTIONS
>https://weareludicrous.com/blog/2018/pixel-sharp-graphics-at-multiple-screen-resolutions/

方法論が、見えてくるような気がします。
実制作で理解出来たら、追記したいと思います。

こちらもとても参考になるので、要チェックです！
>ue4-pixelperfect2d-sample
>https://github.com/Nauja/ue4-pixelperfect2d-sample#orthographic-camera

[__≫というあたりを、実際に検証してみた。__](https://twitter.com/O_Y_G/status/1607198566266843141)

## 5.1. ビルボードマテリアル
カメラ方向を常に向くマテリアルを、まとめてみる。

* [UE4]謎のマテリアルノード「Sprite」｜株式会社ヒストリア<br>https://historia.co.jp/archives/5154/
* スタイライズド レンダリング マテリアル<br>https://docs.unrealengine.com/ja/Resources/Showcases/Stylized/Materials/index.html
* How to make text facing a camera in Unreal Engine<br>http://antondoe.blogspot.com/2016/06/unreal-how-to-make-text-facing-camera.html
* Help with camera facing material<br>https://forums.unrealengine.com/development-discussion/rendering/118396-help-with-camera-facing-material



# 6. ジャンル別Tips
## 6.1. 横スクロールアクション
まずCharacterMovementのベーシックな情報は、もんしょさんの
>Characterアクター - もんしょの巣穴ブログ Ver2.0 
>http://monsho.hatenablog.com/entry/2014/10/26/123009

こちらの記事が、6年たった今でも最もわかりやすいと思います。

### プレナームーブメント
横スクロール特有の確認項目としては、
![image21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/6a8924f2-04fe-7678-b9d5-802f33b65759.png)
[Constrain to Plane]にチェックを入れて、[Plane COnstraint Normal]に　X=0 Y=1 X=0　とすると
Y軸に飛ばされるようなことがなくなります。
テンプレートだと、Y=-1になっていますが、-1でも制限がかかるようです。

### Use Flat Base for Floor Checks
横スクロールアクション特有の項目として、歩行の[Use Flat Base for Floor Checks]
![image23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/bf1252ef-d7cf-500f-d383-aa139230ddd8.png)
これにチェックが入っていると、カプセルの底面が、角ばった状態になり、
レトロな横スクロールアクションにしたい場合に重要な項目になります。
>参考
>カプセルコリジョンを使った時に崖からいい感じに落ちるようにする 
>http://imoue.hatenablog.com/entry/2016/03/16/204859

他にも注目項目はあると思いますが、その他に関しては
>[UE4]2Dアクションゲームを作ろう #19 小ジャンプ。ダブルジャンプ。
>https://youtu.be/iM-nCqDdq2o

こちらも確認してみてもらえればと思います。

横スクロールのカメラワークの資料も役に立つかもしれません。

> Scroll Back: The Theory and Practice of Cameras in Side-Scrollers
> https://www.gamedeveloper.com/design/scroll-back-the-theory-and-practice-of-cameras-in-side-scrollers


## 6.2. 弾幕シューティング
自分で作成したことがないので、見聞きしたことしかわかりませんが、
弾幕シューティングを作るうえでは、大量の弾の処理をどうするかが、肝になるようです。
このあたりを確認してみると、良いかもしれません。
>Paper Grouped Spriteを使うと10000個出しても1個と同じCPUコストになるので、弾幕ゲー向け！
>https://twitter.com/aizen76/status/1036907442884366337?s=20

RwiさんがUE4プロジェクトを公開してくれているので、確認してみるといいかもしれません。
>夢喰い弾幕STG『Dreamviewer』(ドリームビューアー)αバージョン
>https://twitter.com/rwiiug/status/1066290508341755904?s=20

Paper Grouped Sprite以外にも、パーティクルシステムのCascadeやNiagaraをつかって、弾幕を作るのもいいかもしれません。
新しい情報があったら追記します。

Niagara弾幕の検証記事を書いてみました。

https://qiita.com/O_Y_G/items/d696d01b17250dccc273


## 6.3. 2D格闘ゲーム
いくつか方法があると思いますが、2015年からずっと開発をしている、
>UNREAL FIGHTER 2D
>https://www.subscribestar.com/leon-unreal-dev

に興味があるのですが、自分で中身を確認していないので、
一応そういうものもあるという紹介です。

## 6.4. オクトパストラベラー
みたいなのはどうやって作るの？
>参考
>Nintendo Switch『OCTOPATH TRAVELER』はこうして作られた
>https://youtu.be/UPzeHX3VaHY
>Octopath Traveler | Project Spotlight | Unreal Engine
>https://youtu.be/pZk-wiwxpU0
>The Fusion of Nostalgia and Novelty in Octopath Traveler | Unreal Fest Europe 2019 | Unreal Engine
>https://youtu.be/K6wW0pO08LE
>OCTOPATH TRAVELER の「HD-2D」アート スタイルとストーリーが JRPG の夢を叶える
>https://www.unrealengine.com/ja/spotlights/octopath-traveler-s-hd-2d-art-style-and-story-make-for-a-jrpg-dream-come-true

## 6.5. ベルトスクロール
>ベルトスクロールゲームの作り方。[UE4]2Dアクションゲームを作ろう #49
>https://youtu.be/EhgDwtb6p6w

一応作り方の動画を作ってみました。

## 6.6. 8方向or4方向ドット絵TPS
試しにサンプル作ってみました。
>Third Person Sprite Project (TPSprite)
>https://github.com/O-Y-G/TPSprite

## 6.7. トップダウン
雑な説明動画を作ってみた。
https://www.youtube.com/playlist?list=PLmoIIqJZj1GVUFoz3Tvjy0eY6IcV7fC72

オブジェクトの前後関係を下記図のように、「Sort Along Axis」にすることで、木や建物の裏に行く際に、高さの調整が不要になります。
![20220208.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/ddd18d30-43d0-a0ed-acb5-9a7538819c46.jpeg)
ソート軸は、ゲームの軸によって変える必要があると思います。

イメージ
![2022000923_Twitter.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906226/6563f0bf-8a47-8832-8487-b7ddfb4c55d7.jpeg)



# 7. 2Dゲーム参考資料
## 7.1. ブログ
>**★2D情報多め**
>●茶ポーン　（幻想郷萃夜祭の軌跡）
>http://toorsoo.hatenablog.com/
>●妹でもわかるUnrealEngine4  （2Dゲームカテゴリー熱い！）
>http://imoue.hatenablog.com/
>●キンアジのブログ  （プロジェクト置き場が宝の山！）
>https://kinnaji.com/
>●ひよっこ創作ブログ@Rwi　（マテリアル情報が熱い！）
>https://rwiiug.hatenablog.com/
>●UE4　変なマテリアルまとめ　（クリオネコの作者様！）
>https://weirdmaterials.hatenablog.com/
>
>**★UE4全般要チェック**
>●ヒストリア/ブログ
>https://historia.co.jp/archives/
>●Let's Enjoy Unreal Engine
>https://unrealengine.hatenablog.com/
>●ぼっちプログラマのメモ
>https://pafuhana1213.hatenablog.com/
>●もんしょの巣穴ブログ Ver2.0
>http://monsho.hatenablog.com/
>●PaperSloth’s diary
>https://papersloth.hatenablog.com/
>●みつまめ杏仁
>https://limesode.hatenablog.com/
>●凛(kagring)のUE4とUnityとQt勉強中ブログ
>http://kagring.blog.fc2.com/
>●kamipallet’s blog
>http://kamipallet.hatenablog.com/
>●seiko_dev_memo
>https://sites.google.com/site/seikodevmemo/
>●ゲーム作りが大好きな人のブログ
>https://toofu0.hatenablog.com/
>●2D／3DCG・VR・ツール・ニュース情報サイト！3D人-3dnchu-
>https://3dnchu.com/



お勧めブログ教えてください！追加します！

## 7.2. マーケットプレイス注目コンテンツ
>**★2Dアクション用プラグイン**
>●Pixel 2D - Complete 2D Engine for Unreal
>https://www.unrealengine.com/marketplace/ja/product/pixel-2d-complete-2d-engine-for-unreal

>**★横スクロールプロジェクト**
>●スティックフィギア
>https://www.unrealengine.com/marketplace/ja/product/unreal-stick-figure-2d
>●Retro Game Starter Kit
>https://www.unrealengine.com/marketplace/ja/product/retro-game-starter-kit
>●Platformer Kit 2D
>https://www.unrealengine.com/marketplace/ja/product/2d-platforming-kit
>●Ultimate 2D Starter Pack
>https://www.unrealengine.com/marketplace/ja/product/ultimate-2d-starter-pack
>●Side Scroller Shooter Kit
>https://www.unrealengine.com/marketplace/ja/product/side-scroller-shooter-kit
>●2.5D Sidescroller Starter Kit
>https://www.unrealengine.com/marketplace/ja/product/2-5d-sidescroller-starter-kit
>●Multiplayer Side Scroll: Shooter
>https://www.unrealengine.com/marketplace/ja/product/multiplayer-side-scroll-shooter
>●Sidescroller UMG map system
>https://www.unrealengine.com/marketplace/ja/product/sidescroller-umg-map-system

>**★スマブラ風**
>●Platform Fighter Starter Kit
>https://www.unrealengine.com/marketplace/ja/product/platform-fighter-starter-kit

>**★ベルトスクロール**
>●Basic Beat'em Up AI Behavior
>https://www.unrealengine.com/marketplace/ja/product/basic-beat-em-up-ai-behavior
>●EnumKit Beat Em Up Template
>https://www.unrealengine.com/marketplace/ja/product/enumkit-template

>**★面白ツール**
>●3D to Pixel：ブループリント
>https://www.unrealengine.com/marketplace/ja/product/3d-to-pixels

お勧めコンテンツ募集中！

## 7.3. Booth
>夢喰い弾幕STG『Dreamviewer』(ドリームビューアー)αバージョン
>https://rwi.booth.pm/items/1102884

お勧めBoothコンテンツ募集中。

## 7.4. YouTube
>●Paper 2D 入門：UE4日本語チュートリアル　
>https://www.youtube.com/playlist?list=PLr_Cbd4sUDTwRXRqlkp9HgndZ2i8s5m3f
>●Introduction to Paper2D | v4.4 | Unreal Engine
>https://www.youtube.com/playlist?list=PLZlv_N0_O1gauJh60307mE_67jqK42twB
>●Blueprint Creating a 2D Side-Scroller in Paper2D | Unreal Engine
>https://www.youtube.com/playlist?list=PLZlv_N0_O1gZ3NIDDA1iZ2Vtwr9WGSrd5
>●Unreal Stick Figure 2D | Live Training | Unreal Engine
>https://youtu.be/qWUEkTd2Xu8
>●[UE4] 2D Platformer Tutorial!
>https://www.youtube.com/playlist?list=PLKMRiZuSgt-7wY7hfUzg8JcuTFXAf85jv
>●Unreal Engine 4 - 2D Side Scroller
>https://www.youtube.com/playlist?list=PL4vARnfO6MOjqrK5YMI1EwYcZSR7ycD9h
>●Creating 2D games with Unreal Engine using Pixel 2D
>https://www.youtube.com/playlist?list=PLSHq8CaNTAqDalhMyicUJPDH4v8RDXz86
>●2D in Unreal - Getting Started With Paper2D
>https://youtu.be/a1hKdNauLLw
>●UE4 Platformer Tutorial
>https://www.youtube.com/playlist?list=PLwmGmCVti_dDV27SVvB56m-tgabXzOvou
>●[UE4]2Dアクションゲームを作ろう！（動いたからヨシ！編）
>https://www.youtube.com/playlist?list=PLmoIIqJZj1GWh3Vz3KYFMSPBzXB-hk7TF

お勧めチャンネル募集中。

## 7.5. ドット絵素材
無料の素材もたくさん公開されていますが、ここに載せるには数が多いので、
[**Google検索：ドット絵 素材 無料**](https://www.google.com/search?q=%E3%83%89%E3%83%83%E3%83%88%E7%B5%B5+%E7%B4%A0%E6%9D%90+%E7%84%A1%E6%96%99) や [**Google検索：Sprite Sheet free**](https://www.google.com/search?ei=EZ3VX6zkMo-7wAPkqZaoBA&q=Sprite+Sheet+free) などを確認してもらいつつ、
この欄には、有料のドット絵がどこにあるか、を載せておこうと思います。
>●ツクールストア　（ツクール専用のものもあるので注意）
>https://store.tkool.jp/products/resource/mz
>●GameMaker: Marketplace
>https://marketplace.yoyogames.com/category/1/sprites?sort=popularity
>●unityAssetStore
>https://assetstore.unity.com/2d?category=2d%2Fcharacters%5C2d%2Fenvironments%5C2d%2Ffonts&orderBy=1
>●Unreal Engine マーケットプレイス
>https://www.unrealengine.com/marketplace/ja/content-cat/assets/2d?count=20&sortBy=currentPrice&sortDir=ASC&start=0
>●ITCHI.IO
>https://itch.io/game-assets/top-sellers/tag-2d
>●DLsite
>https://www.dlsite.com/home/fsr/=/language/jp/keyword/%E3%83%81%E3%83%83%E3%83%97/age_category%5B0%5D/general/work_type%5B0%5D/IMT/work_type_name%5B0%5D/%E7%94%BB%E5%83%8F%E7%B4%A0%E6%9D%90/per_page/30/without_order/1/page/1/order/review_d
>●BOOTH
>https://booth.pm/ja/browse/%E7%B4%A0%E6%9D%90%E3%83%87%E3%83%BC%E3%82%BF?q=%E3%83%81%E3%83%83%E3%83%97
>●GAME ASSETS FOR INDIE GAME DEVELOPERS
>https://www.gamedevmarket.net/category/2d/page/4/?orderby=popularity

お勧めの販売先募集中。




# おわりに
2Dに限らず、日本語の情報がまだ十分ではない気がするので、
この記事を書くことで、少しでも何かの役に立ったら良いなと思います。

UE5が正式リリースするまでは、このページをちょこちょこ直していこうと思うので、
追加した方が良い内容や、間違っている点などがあったら、コメントいただけると助かります。

https://twitter.com/O_Y_G/status/1333897175277813761?s=20

ツイッターのフォローとか、[チャンネル登録](https://www.youtube.com/channel/UCibBdt8ILJCu7WE-TcNdf-w/featured)とかしてもらえると励みになります。