Epic Games Launcherのラーニングタブのサンプルの美味しいつまみかた


みなさん、いつもアンリアルエンジンのご活用ありがとうございます！

この記事は[Unreal Engine 4 (UE4) 其の弐 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/ue4) 4日目の記事です。

今日は「Epic Games Launcher」の「ラーニング」タブの美味しいつまみかたをご紹介させていただきます。クリスマスに向けたアドベントカレンダーらしく？:wine_glass:ワイン（未成年者は:tropical_drink:ジュースを飲むように！）でも片手に様ざなまサンプルを覗いてみていただければと思います。

UE4のサンプル群にはゲーム制作のためのノウハウやエッセンスがとてもたくさん:meat_on_bone:凝縮されていますので、美味しいところをいっぱい:fork_and_knife:いただいちゃいましょう！！

> ※ラーニングにありますサンプルやマーケットプレイスにありますアセット群は、皆様がUE4を利用したプロジェクト上で使っていただく事は全く問題なく、最終的にゲーム等にパッケージングして配布する事は可能ですが、uasetファイル等素のままの状態で公の場に公開いただくことはご遠慮ください。例外的に各種テンプレートに含まれるファイルやスターターコンテンツ、及び「機能別サンプル（英語名Content Examples）」に含まれますアセットはプロジェクトの共有等の際に一緒に公開いただく事が可能です。

小難しいお話はこのくらいにして、さっそく美味しい所を紹介していきます！

まずは、「Epic Games Launcher」を立ち上げると「コミュニティ」タブがアクティブになっていると思いますが「ラーニング」をクリックしてみてください。
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/80018eec-1346-16a3-7587-a9f7ab23a533.png) Epic Games Launcherの「ラーニング」
ちなみに「ラーニング」タブの中のトップには検索窓があり、そこからドキュメント等への検索が可能になっています。
![LauncherFind.gif](https://qiita-image-store.s3.amazonaws.com/0/58485/b8c735b5-08fa-81ef-d49b-f8266115690c.gif)

続いて「ラーニング」タブ上部から紹介していきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/2239f656-029b-5f6b-aefc-19bf2704e7b5.png)
上部にまとまっている「まずはここから」「アーティスト・クイックスタート」「レベルデザイン・クイックスタート」「プログラマー・クイックスタート」はドキュメントへのリンクになっていて「まずはここから」をざっと見てから各分野のクイックスタートを見ていくのがお勧めです。
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/42b5a0ae-3b60-3209-aeff-1a1862f84b48.png)
さらに下に行くと「Unityからの引越しガイド」「エディタの種類」「ブループリント速習」「機能別サンプルガイド」という初めてUE4に触れる皆さんに有用と思われるドキュメント群へのリンクとなっています。

さて、ここから実際のサンプル群のお品書きとなります。

まずは「エンジン機能サンプル」群がありますが、現在16品目がダウンロード可能です。また、各サンプルの下の本のアイコンやビデオのアイコンをクリックすると、それぞれ関連したドキュメントとビデオに飛ぶ事ができます。
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/ee0426ed-30b1-dddb-74ba-f9aa886d2f6e.png)
ここにEpic Games本社クリエイター陣によるスーパーデモ群があります。もちろんどれもダウンロードしてプレイするだけでなく、ステージやブループリントの中身、使われているアセット等全て覗いたり改造したりできちゃいます。

毎年米国で行われているGDC（Game Developers Conference）やOculus Connect等の開発者の為のビッグイベントでEpicから公開されたデモもここからダウンロード可能ですが、めちゃくちゃ沢山の要素が入っていて、個々のデモの説明だけで大きな記事になってしまう規模のものなので、過去に紹介された様々な資料等へのリンクを記載しておきますので、詳しくはそちらもご覧ください。

- **(´∀｀)bオススメ！Showdown VR Demo（Oculus Connect, 2014） :laughing:**
    - 超リアルな町並みへの没入体験
        - ![Showdown Matinee](https://cdn2.unrealengine.com/blog/Aug15/Showdown_R3-2562x1374-1069897965.png)
    - スローモーションな体験
        - ![Showdown](http://giant.gfycat.com/PracticalSlimyCottontail.gif)
    - Oculus Rift製品版へ向けた最適化（高解像度、高フレームレートへの対応）
        - 高速なフェイクシャドウ（車や人の影に使われています）
    - Parallax Mappingにより、板ポリが奥行きのある窓になったり穴が空いたような弾痕や爆発痕になったりしています
        - 板ポリです。
        - ![2015-12-06_1-10-22-Segment 1.gif](https://qiita-image-store.s3.amazonaws.com/0/58485/3439f421-d8ea-4ead-fb73-64e9aff7320e.gif)
    - :computer:スライド [Lessons from Integrating the Oculus Rift into UE4](https://de45xmedrsdbp.cloudfront.net/Resources/files/UE4-Integration-and-Demos_OC-100270768.pptx)
- Infiltrator Demo（GDC 2014）
    - 当時としてはハイエンドGPU向けに作られていて物凄い量のポリゴン数で遠景の山まで3Dモデルだったりするのだが、最近のGPUだとサクサク動くという・・・GPUの進化コワイ
        - Infiltrator
        - ![Infiltrator](https://docs.unrealengine.com/latest/images/Resources/Showcases/Infiltrator/Infiltrator_Page_Header.jpg)
        - Infiltrator Matinee
        - ![Infiltrator Matinee](https://docs.unrealengine.com/latest/images/Resources/Showcases/Infiltrator/Infiltrator_Matinee_Scrub.jpg)
- **(´∀｀)bオススメ！少年とカイト（GDC 2015） ただしハイエンドPCほぼ必須 :triumph:**
    - ![Boy and Kite](http://i.kinja-img.com/gawker-media/image/upload/qbqglrzlhdzihdacngvg.gif)
    - 16km x 16km 四方（山手線や大阪市がすっぽり入る大きさです）という広大かつ自然な環境のオープンフィールドを縦横無尽に歩いたりドローンで飛び回ったりできるデモ
        - プロシージャルな樹木
        - ![Procedural Foliage](https://docs.unrealengine.com/latest/images/Engine/OpenWorldTools/ProceduralFoliage/QuickStart/6/T_On_Your_Own.jpg)
    - Raytraced Distance Field Shadowを活用
        - 動的な日照変化
        - 広い空間内での日照変化に伴った影の変化
    - HLOD（Hierarchical LOD）
        - 複数のメッシュを自動的にまとめてLOD化する機能とその活用
        - HLOD Preview
        - ![HLOD Preview](https://docs.unrealengine.com/latest/images/Support/Builds/ReleaseNotes/2015/4_9/image_12.gif)
        - Circle Blur
        - ![Circle Blur](https://docs.unrealengine.com/latest/images/Support/Builds/ReleaseNotes/2015/4_8/image_6.gif)
        - 動的なナビメッシュ生成
        - ![Dynamic Generated NaviMesh](https://docs.unrealengine.com/latest/images/Support/Builds/ReleaseNotes/2015/4_8/image_8.gif)
    - :computer:スライド [Tech and Art of Epic's Open World Demo](https://s3.amazonaws.com/unrealengine/resources/GDC_2015_OpenWorldTechDemo_Slides_Credited.pptx)
    - :newspaper:ブログ [Imperfection for Perfection](https://www.unrealengine.com/blog/imperfection-for-perfection)
        - Assets
        - ![Assets](https://cdn2.unrealengine.com/blog/Nov2/Photogrammetric/Howtocreatephotogrammetricgame-readyassetinUE4-2-770x433-687994388.png)
        - Grey/Chrome Ball
        - ![Grey/Chrome Ball](https://cdn2.unrealengine.com/blog/Nov2/Photogrammetric/Howtocreatephotogrammetricgame-readyassetinUE4-5-770x576-528325144.png)
    - :newspaper:ブログ [Imperfection for Perfection Part 2: Photo Reconstruction/Delighting](https://www.unrealengine.com/blog/imperfection-for-perfection-part-2)
        - Delighting（アルベドテクスチャ化）
        - ![Delighting](https://cdn2.unrealengine.com/blog/Nov30/PhotogrammetryPart2/wipe2-770x590-1376197635.gif)
- （サンプルデータは未公開：Bullet Train（Oculus Connect 2, 2015））
    - ![Bullet Train](https://docs.unrealengine.com/latest/images/Support/Builds/ReleaseNotes/2015/4_10/image_1.jpg)
    - Oculus Touchを使ってVR空間内の銃や弾丸を掴めます
    - テレポーテーションでVR空間内の酔わない移動を実現
    - :laughing: 公開はあるのか？（でもOculus Touchがないとプレイできないですよね…）

それ以外にも様々なUE4の素晴らしい機能のデモ用サンプルがあります

- **(´∀｀)b最初の取っ掛かりとして超オススメ！機能別サンプル（Content Examples） :yum:**
    - UE4の様々な機能を紹介したレベル（ステージ）群が内包されているので「ファイル」メニューから「レベルを開く」メニューで全部のレベルを覗いてみると使える機能もわかる上に、実際のアセットや設定が見られます。上記の大きなデモ群を見終わった後に初めに見てみるサンプルとして超お勧めです
        - ![機能別サンプル](https://docs.unrealengine.com/latest/images/Resources/ContentExamples/ExampleLevelOverview/ExampleMap.jpg)
        - ![機能別サンプル](https://docs.unrealengine.com/latest/images/Resources/ContentExamples/Reflections/Reflections_Header.png)
    - 同梱されているレベル（ステージ）のリスト 
        - Animation.umap
        - Audio.umap
        - Blueprints_Advanced.umap
        - Blueprints_Overview.umap
        - Blueprint_Communication.umap
        - Blueprint_HUD.umap
        - Blueprint_Input_Examples.umap
        - Blueprint_Mouse_Interaction.umap
        - Blueprint_Splines.umap
        - Cloth.umap
        - Decals.umap
        - Destructibles.umap
        - DynamicSceneShadows.umap
        - Effects.umap
        - ExampleProjectWelcome.umap
        - FBX_Import_Options.umap
        - Geometry_Editing.umap
        - Landscapes.umap
        - Leveldesign_Workflow.umap
        - Level_Scripting.umap
        - Level_Streaming.umap
        - Lighting.umap
        - Material_Advanced.umap
        - Material_Experimental.umap
        - Material_Instances.umap
        - Material_Nodes.umap
        - Material_Properties.umap
        - Math_Hall.umap
        - Matinee.umap
        - Media.umap
        - MorphTargets.umap
        - Navmesh.umap
        - Network_Features.umap
        - Paper2D.umap
        - PhysicalAnimation.umap
        - Physics.umap
        - PivotPainter.umap
        - PostProcessing.umap
        - Reflections.umap
        - SkinRendering.umap
        - StaticMeshes.umap
        - StreamingLevels
        - UMG.umap
        - Volumes.umap
        - VR.umap
    - :book:ドキュメント [機能別サンプル](https://docs.unrealengine.com/latest/JPN/Resources/ContentExamples/index.html)
- オープンワールドデモコレクション
    - 「少年とカイト」で使われている草木や岩のサンプル
- 水の表現
    - とてもリアルな水面表現のサンプル
- **(´∀｀)b最初の取っ掛かりとしてオススメ！GDCデモ2014 :yum:**
    - GDC2014の会場にてUE4の様々な機能を来場者の皆さんに現物を見て頂きながら説明するために使われたデモ群
    - PBR（Physically Based Rendering）の紹介
    - マテリアルインスタンスの紹介
    - 動的に反応するマテリアルインスタンスの紹介
    - ポストプロセスマテリアルの紹介
    - ブループリントによるアニメーションの紹介
    - ブループリントのConstruction Scriptによるステージ制作ヘルプ機能の紹介
    - 複数のブループリントの連携機能の紹介
    - ブループリントによるゲーム内ミニゲーム:space_invader:の紹介
    - 非破壊オブジェクトの紹介
    - Wiki [Unreal Engine 4 Tools Demonstration -- GDC 2014](https://wiki.unrealengine.com/Videos/Player?video=FcxA_xYnHZ8)
- **(´∀｀)bオススメ！マチネ**
    - カットシーンエディタの「マチネ」によるカットシーンデモ
- ランドスケープマウンテン
    - 広大な山々を「ランドスケープ」というハイトマップによるオープンな自然地形を作成するためのツールで制作したデモ
    - 広大な山々の上をハンググライダーで飛び回れるので、そのようなコンテンツを制作する場合の参考にもなる
- パーティクルエフェクト
    - GPUパーティクル等を活用した吹雪や洞窟の中の滝や火の粉のエフェクトデモ
- サンテンプル
    - モバイルでも軽々と動作するリアルなレンダリングのデモ
        - ![Sun Temple](https://docs.unrealengine.com/latest/images/Support/Builds/ReleaseNotes/2015/4_10/image_5.jpg)
- リフレクションデモ
    - 鏡面や水面等へのリアルタイムの映り込みのデモ
- リアルなレンダリング
    - リアルな光源計算を適用した部屋のデモ
    - 部屋の真ん中の絨毯の表現に旧来のFur表現的な手法も使われていたりします
- エレメンタル（GDC 2013）
    - GPUパーティクル等
- **(´∀｀)bブループリントの取っ掛かりとしてオススメ！ブループリンツ :yum:**
    - UE4のブループリントによる様々な機能デモ
    - 看板表示のブループリント
    - 監視カメラ＋サーチライト、サイレン、セキュリティドア等の別々のブループリントが連携して動作する
    - レベル制作を補助するブループリント、Construction Scriptによる草木の配置
- スタイライズレンダリング
    - UE4上のNPR（Non-Photorealistic Rendering）ポストプロセスによる輪郭線の描画や画用紙への水彩画調の表現

続いて「ゲームプレイコンセプト エグザンプル」
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/22d6c0bb-a4df-437b-eaaf-397bb8b744c9.png)

様々なゲームプレイに必要な要素に特化したサンプル群です

- シリージオ
    - 上から見下ろしのツインスティックタイプ（左スティックで移動、右スティックで攻撃）のゲームのサンプル、これを見ればクラッシックスタイルのシューティングゲームが制作できます
- マルチプレイヤー ガンファイト
    - ブループリントだけで2人対戦の通信対戦ロビーと通信対戦機能が実装されているので、ブループリントだけで通信対戦を作ってみたい人必見
    - :book:ドキュメント [マルチプレイヤー シュートアウト](https://docs.unrealengine.com/latest/JPN/Resources/Showcases/BlueprintMultiplayer/index.html?utm_source=launcher&utm_medium=ue&utm_campaign=uelearn)
- スティックフィギア
    - Paper2D（ドット絵のパタパタアニメツール）で2Dスクロールゲームを制作してみたサンプル
- **(´∀｀)bオススメ！ターン制ストラテジーゲーム**
    - ローグライクなターン制ゲーム
    - ランダムダンジョンの生成機能もブループリントで実現されています
- **(´∀｀)bオススメ！BPスプライントラック**
    - ブループリントで制御可能なスプラインに添ったメッシュの作成をするサンプル（もちろんコリジョン付き！）
- **(´∀｀)bオススメ！UMGインベントリーUI**
    - UE4の標準UI機能であるUMGを利用したインベントリー（アイテム所持・利用）のためのUI


続いて「ゲームプロジェクト エグザンプル」
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/892a9e9c-4578-47b1-85ad-d45bc4aa8a3f.png)

- **(´∀｀)bオススメ！プラットフォーマーゲーム**
    - 横スクロールタイプのリッチな表現のゲーム
    - このタイプの実ゲームとしてはEpic Games Launcherから無料でダウンロード可能なShadow Complexもオススメです！
    - 講演とスライド [Designing Shadow Complex](http://www.gdcvault.com/play/1012225/Designing-Shadow) にてShadow Complexのレベル・ゲームデザインについて語られているのでこちらも併せてオススメです。こちらを見た上でShadow Complexをプレイするとナルホドね！という発見もできるかも？
- カウチナイト
    - GDC2014にOculus社のブースでOculus Rift DK2が公開された際にDK2の素晴らしさを体験いただくために制作されたサンプル
- ブラックジャック
    - トランプカードゲームのブラックジャックをUE4上にブループリントで再現
- タッピーチキン
    - UE4でも2Dゲームが作れます！と、某ふらっぴぃな鳥さんのゲームをアーティスト1人でブループリントのみで実現してみたサンプル
    - 実際にApp StoreやGoogle Playからダウンロード可能です
- ストラテジーゲーム
    - いわゆるRTS（Real Time Strategy）ゲームを実現したサンプル
    - C++も使われているので、UE4でC++を使った実装のシンプルなサンプルとしても最適です
    - :newspaper:ブログ [Visual Logger](https://www.unrealengine.com/blog/using-the-ue4-visual-logger)
        - Level Viewport with Visual Logger
        - ![Viewport with Visual Logger](https://cdn2.unrealengine.com/blog/visuallogger/visuallogger_02-665x544-1181287191.png)
        - Visual Logger
        - ![Visual Logger](https://cdn2.unrealengine.com/blog/visuallogger/fixedimages/visuallogger_01-770x465-771610645.png)
        - Visual Logger Shapes
        - ![Visual Logger Shapes](https://cdn2.unrealengine.com/blog/visuallogger/fixedimages/visuallogger_08-770x440-197949694.png)
    - :book:ドキュメント [戦略ゲームのサンプル](https://docs.unrealengine.com/latest/JPN/Resources/SampleGames/StrategyGame/index.html?utm_source=launcher&utm_medium=ue&utm_campaign=uelearn)
- **(´∀｀)bオススメ！シューターゲーム :stuck_out_tongue_winking_eye:**
    - FPS（First Person Shooter）ゲームのサンプルで、C++も活用して複数人＋Botの対戦やAIにも対応したサンプル
    - 複数人対戦のシューターを作るならこのサンプルはとても役に立つハズです！
    - ちなみにBotは強いです！コンソールコマンド「spawnbot 1」として歩きまわってみよう！シューター慣れしていない人は出会ってすぐに瞬殺される予感。腕に覚えのある人は「spawnbot 4」とかしてみよう！全員に勝てるかな？
    - 複数対戦プレイは「プレイ」アイコン右の小さな▼からプレイヤー数の数字を上げてからプレイすると人数分のウインドウが出てきて対戦をテストできます。
    - :book:ドキュメント [シューティングゲーム](https://docs.unrealengine.com/latest/JPN/Resources/SampleGames/ShooterGame/index.html?utm_source=launcher&utm_medium=ue&utm_campaign=uelearn)
- メモリーゲーム
    - 神経衰弱系ゲームをブループリントだけで制作しています
- ヴィークルゲーム
    - 実際に遊べる本格的なラリーゲーム
    - 通信対戦ももちろん可能です！
- **(´∀｀)bオススメ！スウィングニンジャ**
    - 横スクロールタイプですが奥行きのあるモデルが使われているいわゆる2.5Dタイプのゲーム
    - タブレットやスマフォのタッチ操作と、マウスでのタッチシミュレーションに対応しています

最後に「コミュニティコントリビューション」「プラットフォームパートナー」となります。
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/8a612158-b5f0-149a-7c9a-228e15cb3b69.png)

コミュニティーの皆さんから共有いただいたサンプルとパートナー様から共有いただいたサンプルになります。

- ラジアルインパクト
    - ゲームモード、メニュー、AIといった一通りのゲーム要素をシンプルに纏めたサンプル
- サイファイバンク
    - SFチックなステーションのマテリアルやシーンと、マチネによるカットシーンのサンプル
- リープモーション
    - Leap Motionの公式サイトからUE4インテグレーションコードを取得してビルド・実行して、動作させるためのドキュメントとサンプル
    - ![Leap Motion Demo Pack](https://leapdev-production-cdn.leapmotion.com/uploads/library/detail_image/cb62af55-f2f7-41fd-85b7-a628fcbf002c/71861df5-e1fe-4c93-b84a-1445316d987f.gif)

ではでは、:pizza:おつまみでも片手にいろんなサンプルをプレイしてみてください。気になるサンプルはエディタで中身が見れますので、その時はおつまみの手を止めてじっくり:mag:覗いてみてください。また、いつでもダウンロードやプロジェクトの作成し直しできますので、ぜひ:hammer:改造してみて様々なテクニックを皆さんの身に付けていただけると制作した本人達も喜びます！もっと良くできたゾ！という方はぜひフォーラム等に:memo:書き込みを！(*ﾟ∀ﾟ)ノ

**追伸（だけど本日のおつまみという題材にはとても重要）**：アセットやブループリントをパクる方法…コンテンツブラウザで右クリックして「アセットアクション」の中にある「移行…」を選ぶと、移行したいアセットとそのために必要なアセット群が表示されます（この時のリストが極端に多い場合は不要なアセットへのリンクが対象のブループリント等内で指定されている可能性があるので不要なら、いったん「キャンセル」してブループリント等から参照をはずしてから再度「移行…」が望ましいです）ので、問題なければ「OK」を押して、移行したい対象のプロジェクトの「Content」フォルダを選択すると、対象プロジェクトにアセット群を移行（移行とは書いていますが元のアセットは残ります、プロジェクト間コピーのようなイメージをしていただけると良いかと）させる事が可能です。

**レベルデザイナーさんやレベルデザイナー志望の人はマストDL！**Epic Games Launcherの「Unreal Tournament」タブから「クリエイト」を選ぶとUnreal Tournamentのエディタがダウンロードできて制作途中のレベル群を実際にエディタで開いて見る事ができます。
![image](https://qiita-image-store.s3.amazonaws.com/0/58485/2576c3cf-9d49-f7d9-d72b-15e515cfbf4e.png)
「Outpost23_Shell」というレベルと「DM-Outpost23」というレベルを開いて見比べるとUE4のBSPで実際にレベルデザインがなされていることと、BSPのレベルでゲームプレイが満足できたものに対してディテイルをつくりこむという制作フローも実部を見て体験できます。
↓クリックするとBSP版と高品質版の比較動画が再生されます。**超必見！**
[![UE4 Unreal Tournament level "Outpost23"](http://img.youtube.com/vi/x0sfThGkYUQ/0.jpg)](http://www.youtube.com/watch?v=x0sfThGkYUQ)
この手法がどのような場面で役に立つかというと…ディテイルをつくりこんだステージの段階でテストプレイをしたとしましょう。そこでこのステージ構成面白くないね！ステージ構成ガラッと変えよう！となった場合、背景アーティストさんの作業が無駄になるだけでなく、ステージ作り直しの作業が膨大な量発生してしまいます。なので、ステージ構成の面白さはBSPのShellingレベルで行い、ステージ構成の面白さをチームに認められてからディテイルを作りこむのです。こうすることで背景アーティストさんの作業に余計なロスが発生しにくくなります。

明日12/5は、[@HogeTatu](https://twitter.com/HogeTatu)さんの「[UE4 - ポーズ対応まとめ](http://hogetatu.hatenablog.com/entry/2015/12/05/001035)」です。お楽しみに！