Let's Enjoy Unreal Engine

Unreal Engineを使って遊んでみましょう

UE4 Paper2Dを使って2Dゲームを作る!

Unreal Engine 4.3が公開されて、2Dゲーム作成プラグインであるPaper2Dが正式にデフォルトの状態でONになったので4.3からはいきなり2Dゲームが作れるようになりました。

もちろん現状のPaper2Dは試験的な機能もあり、すぐになんでも作れるというわけではありませんが、基本的な機能はありますので簡単な2Dゲームであれば作れそうです。

今回は簡単な2Dゲームを作るチュートリアルとしていこうと思います。今回もお馴染みのユニティちゃんの2D素材を使わせていただきます。ダウンロードからunitypackageの展開の仕方はユニティちゃん3Dの記事を参考にしてください。

UE4でゼロからユニティちゃんを表示させるまで - Let's Enjoy Unreal Engine

 ユニティちゃんライセンス

このアセットは、『ユニティちゃんライセンス』で提供されています。このアセットをご利用される場合は、『キャラクター利用のガイドライン』も併せてご確認ください。

テクスチャーからスプライトにするまで

まずは新規プロジェクトを作りましょう。Blank(空の)プロジェクトで作成しstarter contentも特に必要ありません。立ち上がったらシーンアウトライナー上にあるアクターもPlayer Start以外は削除してもOKです。

f:id:alwei:20140719174026j:plain

ユニティちゃん2Dの素材をunitypackageから展開してコピーしてください。主に必要なのは"png"素材のみでOKです。"UnityChan.png"というテクスチャー素材があると思うのでUE4上にインポートしてください。

この時、テクスチャー素材が2のべき乗サイズになっていないので、警告がでます。このような素材は本来好ましくないので自分で素材を作成する際には2のべき乗サイズでテクスチャーを作成するようにしてください。

警告を無視しつつもインポートされたテクスチャーをダブルクリックで開きます。アルファの表示がおかしいので、左上の"View"ボタンからAlphaにチェックを入れます。

f:id:alwei:20140719174907j:plain

これでテクスチャーがただしく表示されるようになりましたが、この素材はドット絵です。UE4のテクスチャーはデフォルトだとフィルターがかかっており、微妙に滑らかになっています。ウィンドウ右側の"Texture"の項目にあるFilterのパラメーターを"Nearest"に変更してください。

f:id:alwei:20140719175240j:plain

これでフィルターがなくなり、綺麗なドット絵になりました。

では次にこれをスプライト化します。UnityChanテクスチャーのアセットを右クリックして"Extract Sprites"を選択してください。

f:id:alwei:20140719175439j:plain

単純に"Create Sprite"の場合だと一枚のスプライトになりますが、"Extract Sprites"の場合は自動的にテクスチャーのアルファのついていない部分の色情報からスプライトを生成してくれます。いわゆるスプライトシートから自動的にスプライト分割を行なってくれます。これは本当に便利です。

素材の作り方によっては無駄なスプライトも出来あがりますが、不要なものは削除すればいいだけです。試しに一枚スプライトを開きます。

f:id:alwei:20140719175954j:plain

これがスプライトエディターです。

右側のウィンドウには様々なパラメーターがあります。"View"は実際のスプライト表示、"Edit Source Region"はテクスチャーの中からどのUV値の画像をスプライトとして使っているかの確認、"Edit Collision"は2D上での衝突コリジョンの表示とそれの編集、"Edit RenderGeom"は表示用のジオメトリー、頂点の編集をすることができます。

ひとまず基本的な確認が終わったところで一旦のこのウィンドウを閉じるとしましょう。

スプライトアニメーションの作成

それでは作ったスプライトからアニメーションを作成しましょう。新規アセットの作成で、"Animation"→"Sprite Flipbook"を選択します。

f:id:alwei:20140719180651j:plain

作成できたら適当な名前をつけておいて、ダブルクリックでそれを開きましょう。

この時スプライトはまだ何もないので、ウィンドウの下の方に"Right-click here or drop in sprites to add key frames"というところで右クリック→"Add Key Frame"、もしくはスプライトのアセットを直接そこへドラッグ&ドロップします。

試しに待機アニメーションのスプライトが3つほどありますので、探してみて追加してみましょう。デフォルトのままだとスピードがとても速いので、調整が必要です。右側のDetailsから"Frames Per Second"の値を"3.0"くらいにしてみましょう。

f:id:alwei:20140719181515j:plain

これでスプライトアニメーションが出来ました!!

背景を置いてみる

素材の中に"BG_01.png"と"BG_02.png"という背景素材があったので配置してみましょう。これらもテクスチャーをインポート後に今度は"Create Sprite"でスプライト化します。デフォルトのままだとコリジョンがついたままで、不要なものと調整が必要なものがあります。

BG_01のスプライトにはコリジョンがいりません。スプライトアセットを開いて、Detailsの中に"Collision"→"Collision Thickness"というものがあり、これは2Dコリジョンの厚さを調整するパラメーターです。今回は必要ないので0にしましょう。

次にBG_02のスプライトはコリジョンが必要ですが、このままだと地面に衝突できないので、コリジョンを調整します。スプライトを開いて"Edit Collision"を選択してください。画像のようにスプライトの頂点を動かしてコリジョンの高さを調整します。

f:id:alwei:20140719183606j:plain

出来あがったら背景スプライトをコンテンツブラウザーからD&Dして配置してみましょう!座標を0,0,0の位置に調整します。初期のままだとスケールがかなり小さいので、10倍くらいに大きくしておきます。

奥行はYの値を調整します。手前にあるものほどYの値を高くします。今回は手前の背景はYを10にしてみました。

f:id:alwei:20140719184004j:plain

プレイヤーキャラクターを配置する

いよいよプレイヤーキャラクターを配置してみます。新規アセットの作成でブループリントを選択してから"Custom Classes"の中に"PaperCharacter"というクラスがあるので、選択して作成します。

f:id:alwei:20140719184307j:plain

適当な名前をつけて保存しておきます。この時に同時にゲームモードのブループリントを作成しておきます。ウィンドウ上部のブループリントボタンから"GameMode Create"し、名前をつけてゲームモードのブループリントを作成します。これを再度開いてから、Defaultsタブの"Game Mode"の項目から"Default Pawn Class"を選択して、自分が作ったキャラクタークラスを指定して、完了したら保存します。

f:id:alwei:20140719185011j:plain

では作ったプレイヤーのブループリントクラスを開きましょう。

そのままでは何もありませんが、Componentsの中にSpriteがあるのがわかると思います。Spriteの中に"Source Flipbook"という項目があるので、"None"という項目を選択して作ったスプライトアニメーションのフリップブックを割り当てます。

そのままのサイズだと小さいので、このスプライトも"Transform"のScaleからそれぞれ10倍にしてあげましょう。

f:id:alwei:20140719185458j:plain

あとはカメラの設定です。左上の"Components"の下に"Add Component"がありますので、"Camera"を選択してください。カメラが作成できたら位置を適当に離してRotationのZを"-90"くらいにしてあげましょう。

最後にカメラのパラメーターで"Camera Settings"で"Projection Mode"を"Orthographic"、"Ortho Width"を"1000"、"Use Controller ViewRotation"のチェックを外してください。これで2D用のカメラの設定が完了です。

あとは"Player Start"の位置を背景スプライトと同じところにあるように調整しておきます。これで最後に"Play"でゲームをスタートします!

f:id:alwei:20140719190249j:plain

立ちました!ユニティちゃんが立った!!ヤッター!!

ここからやるべきこと

当然ゲームなので動きが必要となります。今回作成した"PaperCharacter"というクラスは既にゲームキャラクターとしての基本機能を持っており、3Dゲームのブルーマン先生と同じように動かすことができます!

動かし方は3Dと同じですが、スプライトアニメーションの設定はアニメーションブループリントではなく、通常のクラスブループリントでやる必要があります。

f:id:alwei:20140719190922j:plain

Spriteコンポーネントから"Set Flipbook"を呼び出して"New Flipbook"に新しいアニメーションを設定してあげるだけで、別アニメーションに切り替えができます。これで動きもつけられるので、いよいよゲームが作れるようになってきました。

 

まだまだPaper2Dは基本的な機能だけですが、隠し機能としてスプライトアトラスグループ、タイルマップ編集、テラインスプラインツールの機能もあります。これらは実験的な機能なのでまだどの程度使えるのかはわかりません。しかし今後より2Dゲーム用の機能が充実することは間違いないですので、次回以降のアップデートにも期待しましょう!