Paper 2D 入門 (4) フリップブックを作る

ビデオの内容紹介 
キャラクターのアニメーションは、フリップブックを使います。つまりパラパラ漫画です。今回はこのフリップブックを作りますが、少しばかり作業が入ります。一見複雑に見えますが本質的には簡単な作業です。

原題 Introduction to Paper2D: Creating Flipbooks

[1] スプライトをテクスチャから抽出する

フリップブックを作るためには、まず、その元となるスプライトをテクスチャから作ります。

まず待機状態のスプライトを作ります。

Idle (待機) 状態でも、キャラクターはほんの少しリズミカルに動いていることにして、そのためのスプライトを作りましょう。

まず、コンテンツ ブラウザの Texture フォルダを開き、
4001
2DCharacter_IdleAnimAtral をダブルクリックしてテクスチャ エディタで開いてみます。
4002
左上 View から、試しに Alpha だけを表示してみます。
4003
4004
エンジンは、この Alpha の情報を使って、自動的にスプライトに分割してくれます。

コンテンツ ブラウザに戻って、2DCharacter_IdleAnimAtlas を選択して、右クリックして、Extract Sprites (スプライトを抽出) をクリックします。
4005
すると、次のように 8 個のコマが出来ます。
4006
これをすべて選択状態にしてから、Sprites フォルダにドラッグアンドドロップします。
4007
すると、小さなドロップダウンメニューが表示されるので、Move Here (ここに移動) をクリックします。
4008
Sprites フォルダを開いて 8 個のスプライトがあることを確認します。
4009

ここで、1 つ問題があります。それは、8 個のスプライトに付けられたファイル名 (番号) がある意味誤っていることです。現在は 0 から始まる番号が付くようになっていますが、このチュートリアル当時は、そのような一種のバグがありました。ただし、それを逆用してエディタの使い方を学ぶことができるので、悪いことばかりではありません。それではまずどのような問題なのか見てみましょう。

その内 1 枚をダブルクリックしてみると、エディタが開きます。
4010
さらに、右下の View Options のスライダーを使って、
4011
Sprite List を大きく見やすくします。
4012
そして右上の Edit Source Region (ソースの範囲を編集) をクリックします。
4013
それによって、あるスプライトがソース (テクスチャ) のどの部分を切り抜いたものかを示すことができます。下の画像では、黄色にハイライト表示されている 2DCharacter_IdleAnimAtlas_Sprite がソースの左上隅を切り抜いて作られていることが分かります。
4014
そのとなりにある 2DCharacter_IdleAnimAtlas_Sprite2 は、ソースでもとなりになります。

そして問題は、次のように 2DCharacter_IdleAnimAtlas_Sprite5 をダブルクリックすると、ビューポート内では右下隅がくり抜かれていることが分かります。順番的には (キャラクターの動く順番的には) 左下隅であってもらいたいのですが、そうはなっていないのです (それでも対処はできるのですが)。
4015
そして、 2DCharacter_IdleAnimAtlas_Sprite6 はその左隣になっています。これもフリップブックとしての順番としては不適です。
4016

そこでファイル名を変更することにします。まず、作業をやりやすいように、View Options で Columns (列表示) にします。
4017
すると、タイル表示ではなく列表示されます。まず、最初のスプライトを Idle_1 という名前に変更します。
4018
次に、2DCharacter_IdleAnimAtlas_Sprite2 から 2DCharacter_IdleAnimAtlas_Sprite4 を、Idle_2、Idle_3、Idle_4 に変更します。さらに、2DCharacter_IdleAnimAtlas_Sprite5 は Idle_8 にします (ビューポート内の右下隅が一連の動作の最後のものとなります)。
4019
さらに、
2DCharacter_IdleAnimAtlas_Sprite6 → Idle_7
2DCharacter_IdleAnimAtlas_Sprite7 → Idle_6
2DCharacter_IdleAnimAtlas_Sprite8 → Idle_5
のように変更します。これでお終いです。最終的には次のようになります。
4020
コンテンツ ブラウザでも次のようにちゃんとスプライトができています。
4021

次に、キャラクターが走るスプライトを作ります。とりあえず、Idle の時と同じ要領でやってみます。次のように Textures フォルダで 2DCharacter_RunAnimAtlas を選択状態にして、
4022
そして右クリック メニューから Extract Sprites (スプライトを抽出) をクリックします。
4005
しかし、Idle の時のようには上手く行きません。次のように 1 枚のスプライトしかできませんでした。
4023
これは、アルファの情報が次のように複雑すぎるためなのでしょう。
4024

そこで、これから手動でスプライトを作って行くことにします。16 個のキャラクターの絵が 1 枚のスプライトに入っているので、16 個分スプライトをコピーして、それぞれのスプライトで選択するキャラクターの絵の場所を変えて行きます。これは実際に作業した方が分かりやすいので以下をご覧ください。

まず、作業をしやすくするために、スプライトのファイル名を次のように Run_X に変更します。
4025
これを Sprites フォルダに移動させ (Sprites フォルダにドラッグアンドドロップして、Move Here を選択)、Sprites フォルダを開きます。さらにこの Run_X をコピーするため、Run_X を選択状態にして右クリック メニューから Duplicate (複製を作る) をクリックします (もっと古いバージョンのエンジンでは Create Copy です)。
4026
すると自動的にファイル名に「2」がついてコピーができます。
4027
そしてこれらを両方選択して (Ctrl キーを押しながら選択します)、同じようにコピーします。2 個が 4 個になります。さらに同様に 4 個を 8 個に、8 個を 16 個にします。次のようになります。
4028
コンテンツ ブラウザの右下の View Options から Colums を選択します。
4029
そして、Filters 欄に run とタイプしてフィルタリングします。
4030
扱いやすくするため、次のようにファイル名を変更します (どのファイルにどのような名前を付けるのかは問いません)。
4031

ここで Run_1 のスプライトをダブルクリックして、スプライト エディタで開いてみます。
4032
すると、右側の Details タブの Source Dimension (ソースの大きさ) の X が 1024 (ピクセル)、Y も 1024 (ピクセル) になっているのが分かります。つまり、このソース テクスチャは 1024× 1024 のサイズであることが分かります。

また、その上の Source UV は X が 0、Y も 0 となっています (UV とはテクスチャの座標のことです)。これは、スプライトに使用する時にテクスチャの座標のどこから取るかを表しています。左上隅が (0, 0) です。その対極の右下隅はこの場合 (1024, 1024) となります。

つまり、Run_1 というスプライトは、(0, 0) を起点として、1024 × 1024 のサイズで切り取っていることになります。すなわち、テクスチャ全部を使っているわけです。(この時点では Run_2 であろうと Run_16 であろうと、すべてこのようになっています。)

そこで、キャラクター 1 個ずつを 1 枚のスプライトにして行きます (パラパラ漫画の 1 コマとなるものを取り出してみます)。そのためには、まずエディタの右上で Edit Source Region (ソースの範囲を変更) をクリックします。
4033

Run_1 というファイルは、左上隅のマスにあるキャラクターだけを使うものとします。この場合、起点は (0, 0) で、サイズは 256 × 256 にしてやれば良いことになります。縦横 1024 あって 1 行 (列) につきキャラクターが 4 個 ずつ入っているので、キャラクター 1 個につきサイズは
1024 ÷ 4 = 256
となるからです (縦についても横についても)。

同様に Run_2 は、1 番上の行の左から 2 番目だけを使うことにします。サイズは同じ 256 × 256 にして、UV は (256, 0) とすれば良いことになります。なぜなら、UV の X 座標は左右、Y 座標は上下を表し、Run_2 は右に 256 分ずれたところに位置しているキャラクターを切り取るからです。

これを 1 つ 1 つについて計算して、設定を変えてやっても良いのですが、もう少し要領の良いやり方があります。そのためにはまずコンテンツ ブラウザで Run_1 から Run_16 までを範囲選択して (Shift キーを押しながら方向キーで)、右クリックし、Property Matrix (プロパティのマトリックス) をクリックします。
4034
すると次のような表が表示されます (この場合の Matrix は単に表のことでしょう)。
4035
さらに次のように右側の Source Dimension をクリックして展開しておき、左側の表で全部を選択します。
4036
そして、次のように Source Dimension で X に 256、Y にも 256 をタイプします。(これによって、すべてのスプライトのサイズが 256 × 256 となります。)
4037
次に Run_5 から Run_8 を範囲選択しておき、右側で Source UV を展開して、Y に 256 とタイプします。X は 0 のままです (X は後で調整します)。これは、4 × 4 のテクスチャの 2 番目の行に該当するスプライトたちです。それらスプライトの UV の Y は、下に 256 ピクセルずらしたところになるべきだから、このようにしています。
4038
同じように、Run_9 から Run_12 を範囲選択しておき、Y に 512 とタイプします。これらのスプライトは 3 段目の行なので、256 × 3 = 512 だからです。
4039
同じように、Run_13 から Run_16 を範囲選択しておき、Y に 768 とタイプします。
4040

今度は X について調整していきます。まず、Run_2、Run_6、Run_10、Run_14 を同時に選択します (Ctrl キーを押しながらクリック)。これらの UV の X を 256 とタイプします。これらのスプライトは左から 2 列目に当たるため、X をその分ずらしています。
4041
同様に、Run_3、Run_7、Run_11、Run_15 については X を 512 に設定します。
4042
最後も同様に、Run_4、Run_8、Run_12、Run_16 について X を 768 とします。
4043

これで、サイズも UV もすべて適切に設定できたはずです。確かめてみましょう。Matrix を閉じてから (保存も忘れずに)、スプライト エディタの Sprite List で順番にスプライトをダブルクリックしていき、左のウィンドウで囲まれている部分と見比べて行きます。
4044
4045

[2]Idle と Run のフリップブックを作る
スプライトを元にして、いよいよフリップブックを作っていきます。

まず、コンテンツ ブラウザの Game フォルダ内に Flipbooks という名前の新たなフォルダを作ります。
4046
次に、その Flipbooks フォルダ内で右クリックして、Animation を選択し、
4047
さらに Sprite Flipbook を選択します。
4048
新たなファイルができるので、IdleFlipbook という名前を付けます。
4049
これをダブルクリックして、エディタを開きます。
4050
これの右側の Details パネルの Sprite の Key Frames の横 elements の + ボタンをコマの数 (この場合 8 個分) 押します。
4051

それぞれの Key Frame の Sprite に、コンテンツ ブラウザの Sprites フォルダからスプライトをドラッグアンドドロップします (その際、idle でフィルタリングするとやりやすいです)。
4052
4053
最終的に次のようにします。
4054
この時点で、キャラクターがユラユラと前後に動くアニメーションが再生されます。

動きが速すぎるので、Frames Per Second (1 秒あたりに再生されるフレーム数) を 10 にします。
4055
試しにコンテンツ ブラウザの Flipbooks を開くと、IdleFlipbook のサムネイルの中でも同じ動きのアニメーションが再生されています。
4056

次に、走るスプライトについて同様のことをします。すなわち、Flipbooks フォルダ内で右クリックして、Animation を選択し、新たなファイルを RunFlipbook とします。
4057
RunFlipbook をダブルクリックして、16 個分のキー フレームを作り、コンテンツ ブラウザの Sprites フォルダから Run_ のスプライトをドラッグアンドドロップします
4058

少し面倒です。実は、その後自動でキー フレームの Sprite に当てはめる機能ができました。次のように Sprites フォルダで該当するスプライトをすべて選択して、
4059
その上で右クリックして、Create Flipbooks (フリップブックを作成) を選択します。
4060
これで自動的にフリップブックが出来上がります。

今回はここまでです。お疲れ様でした。



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>