Paper 2D 入門 (3) アルファ ベースのスプライトを作成する

ビデオの内容紹介 
キャラクターが足場にする小さな台 (プラットフォーム) のスプライトを作ります。マテリアルとテクスチャは用意されているので、それを利用してスプライトを作ります。スプライトのコリジョン範囲の設定ではアルファ チャンネルを利用した設定方法を利用します。少し長いですが、内容はとても簡単です。

原題 Introduction to Paper2D: Creating an Alpha-Based Sprite

[1] VertexColor ノードと色の変更

前回設置したマテリアルには VertexColor ノードがあるため、
3000
メインエディタ内でスプライトの色を手軽に変更できます。
そのやり方は簡単で、まず色を変更したいスプライトを選択状態にして、
3001
Details パネルの Sprite の Sprite Color の右横をダブルクリックすると、
3002
のようにカラーピッカーが表示されるので、好みの色に中心にあるポイントを移動するだけです。
3003
3006
実験
なお、次のように
3004
VertexColor が設置されていない場合や、接続が外れていて無効な場合は、カラーピッカーで色を変更させても、スプライトには反映されません。
3005

[2] アルファ チャンネルをともなったスプライトの作成

まず、メインエディタのコンテンツ ブラウザで Sprites フォルダを選択します。
3007
スペースで右クリックして Miscellaneous (その他) → Sprite を選択します。
3008
3009
新たにできるフォルダに Platform (台) と名付けます。
3010
このフォルダをダブルクリックすると、次のようにスプライト エディタが開きます。
3011
これを本体にドッキングさせて (タブをつかんでメインエディタにドラッグアンドドロップします)、
3012
右側の Details パネルの Source Texture (ソース テクスチャ) 右横のドロップダウンメニューから 2DBackgroundBlockAtlas を選択します。(この 2DBackgroundBlockAtlas は前回のチュートリアルであらかじめインポートしておいたものです。)
3013
3014

ここでこのテクスチャのアルファ チャンネルを視覚化してみます。
メインエディタに戻り、Textures フォルダを選択して、中の 2DBackgroundBlockAtlas をダブルクリックすると、
3016
次のようにテクスチャ エディタが開くので、
3017
そこで、左上の View ドロップダウンメニューを開き、Color Channel を Alpha だけにすると
3018
次のようにアルファ値が 1.0 (白) の部分が表示されます。
3019
これからスプライトを設定していく時に、このアルファの部分を範囲として利用することになります (エディタによって利用されることになります)。

View を元に戻しておき、先ほどの Platform のスプライト エディタに戻ります。

見やすいようにズームさせます (マウスホイールを回転させる)。
3015
まず、テクスチャとして使用する部分を範囲指定します。そのためには、右上の Edit Souce Region (ソースの範囲を編集) モードをクリックします。
3020
例によって、マウスホイールでズームさせたり、右マウスボタンを押下しながらドラッグして表示範囲をずらすことができます。右下の点をクリックすると移動ウィジェットが表示されるので、
3021
これをつかんで、次のようにテクスチャの使用範囲を指定します。
3022
矢印と矢印の間をつかむと斜め方向にも動かせます。また、ビューポート内右上アイコン群左から 7 番目の数字を小さくすると細かい移動が可能になります。

エディタ右上で View モードをクリックすると、
3023
このように、範囲指定したところだけが表示されるようになりました。

次にコリジョンを設定します。まず、エディタ内右上で Edit Collision (コリジョンを編集) モードをクリックします。
3024
右側 Details パネルの Collision セクションの Collision Geometry Type には次のように、ジオメトリのコリジョン範囲を指定するやり方がいくつかあります。
3025
ここでは、あまり複雑にならないように Tight Bounding Box (ピッチリした境界ボックス) を使います。これはアルファ チャンネルに基づいて作成されるもので、これをさらに編集していきます。「ピッチリ」と言っても、「かなりピッチリ」くらいの意味でしょうか。さらにピッチリさせるには、次のように Shrink Wrapped (縮めて包む) を選択します。
3026

ビューポート内左上に操作の仕方が書かれています。それによると、
Shift+クリックすると、頂点が挿入されます。
1 個以上の頂点を選択して Delete キーを押すと、それらの頂点が削除されます。
頂点をダブルクリックすると、ポリゴンが選択されます。
となっています。

まず、境界ボックスに次のような頂点を Shift+クリックで作成します。
3027
頂点をクリックして移動ウィジェットを表示させてから、矢印をつかんでドラッグさせて、次のようなコリジョン範囲を作ります。
3028
動かしにくい時は、ビューポート内右上アイコン群左から 7 番目の数字を 5 くらいに上げてみます。

なお、エディタ内右上の Edit Render Geometry モードをクリックすると、次のようにレンダリングの対象範囲を指定できます。
3029
これは、たとえば次のように不要なものが入っている場合、先の Edit Source Region では除去できないので、この Edit Render Geometry モードを使って範囲を指定することになります。
3030

さて、メインエディタに戻って、コンテンツ ブラウザで Sprites フォルダを選択して、Platform をビューポート内にドラッグアンドドロップしてみます。
3031
よく見ると、この Platform スプライトの左端にうっすらと線が見えます。スプライトを選択状態にすると一層よく分かります。
3032
この線は、先ほど見たアルファの画像と一致するものです。
3019
つまり、この画像の左端の枠線が入ってしまったのです。

そこで、スプライト エディタに戻り、先に紹介した Edit Render Geometry モードを使ってこの枠線をカットします。要領は、コリジョン範囲を設定した時と同じです。たとえば、次のようなレンダリング範囲を作成します。
3034
保存して、メインエディタに戻ると、もう枠線は入らなくなりました。
3033

[3] スプライトの色を変える
先の [1] であったように VertexColor ノードがこの Platform スプライトにもあります。
3035
したがって、メインエディタから色を変更することができます。
3036

[4] スプライトの物理シミュレート
まず、メインエディタで Platform スプライトを選択状態にして、Details パネルの Physics セクションの Simulate Physics (物理をシミュレートする) にチェックを入れます。さらに、ビューポート内右上アイコン群左から 2 番目をクリックして適当にスプライトの回転を変更して (Details パネルの Rotation の数値を適当に変えてもよいです)
3037
Play 内の Simulate をクリックすると、
3038
物理法則に従うようにスプライトが下に落下していきます。
3039

落下するのは良いのですが、下まで落ちてしまうのは問題です。まず、他のスプライト (前回作った枠のスプライト) と同じように Location (位置) の Y 座標を 0 にします。
3040
しかし、これでもまだ下にこぼれ落ちてしまいます。Platform スプライトの Y 座標が落下するうちにブレてしまうためです。
3041
そこで Platform スプライトを選択状態にして Details パネルの Physics の Locked Axis を Y にします。
3042
これによって、Y 軸方向の物理的な動きがロックされます。つまり Y 軸方向のブレがなくなり、Y 座標が常に 0 のスプライトが、Y 座標が同じく 0 の下枠スプライトと必ずぶつかることになります。シミュレートしてみると、次のようになります。
3043
View を Perspective にして Platform スプライトを横から見ると、枠スプライトとしっかりぶつかっていて、そこに留まっています。
3044

今回はこれにてお終いです。長くなりましたが、最後までご覧いただきまして、ありがとうございます。



About なつのや

アンリアル・エンジン 4 を基礎から勉強するためのサイト「UE4 の学び部屋」を開いています。どうぞよろしくお願いいたします。
Paper 2D, UE4チュートリアル

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>