「ねこ缶クライシス！」の制作メモ 絵素材・その他編

●はじめに

「ねこ缶クライシス！」での、スプライトやマップの絵素材作成とUE4での作業のメモです。
企画とBP関連の内容は、こちらになります。

mi-zmix.hatenablog.com

●ドット絵の作成

Asepriteで作成していきました。
仮パターンの立ち絵を基準に、アイドル用のパターンにしてみて動きの雰囲気をみます。最初のアイドルの動きでしっくりこなかったら、その後のパターン作成も進められない（後になるほど手戻りが多い）ので、ここは時間をかけました。
32*32は絶対死守で、グレイちゃんの場合髪の毛の動きもあるので、1~2ピクセル分くらい背を低くしました。
グレイマンを32*32にみっちり詰め込むつもりだったので、その差を出すためでもあります。改めて並べてみると、立ち状態では差はほとんどないですが。

基準がきまったらパターンの量産をしていきました。
まず、紙の上で必要な動きを落書きしていきます。イメージをつかむための物です。
とはいえ、なんだかわかりませんねコレは……。

いきなりドットを打ってもツールの上でマウスカーソルが右往左往するだけなので形を把握しておくためにやりました。
それなりにイメージがつかめたので、各パターンをドットにしていきました。
基本はコピペして修正です。
頭と胴体をコピペしてずらしつつ位置を決めて、手の先端の位置、足の先端の位置をおおざっぱに当たりをつけてから、あとは基本のポーズの印象とかわらないように間を埋めていく感じです。全体の色数が少ない仮の状態の画像でやってしまいます。ベタ塗りに近い方がコピペも修正もしやすいです。

グレイちゃんは髪の毛もあるので、前後のパターンと動きを確認しつつ中割しました。
ドット絵キャラで一番重要なのは頭なので、大きさ（の印象）が変わらないように注意します。コピペして調整することで極端に変わることは避けられます。次が手足で、ポーズによって長さと太さが変わらないように（変わったと感じないように）します。
Asepriteはアニメーションの確認も簡単なので、どんどん動かして確認しました。

●ドット絵のエキスポート

Asepriteには全パターンを１枚にまとめる機能があるので、それをつかってエキスポートします。
ファイルは.pngにしました。
Frames:の設定で、必要なタグの部分だけ書き出せます。全体を一度に出さずポーズ毎に細かくファイルを分けるやりかたもありかもしれません。

32*32なら、画像サイズを256*256にすれば、64パターン収まります。
JSONDataにチェックを入れると図のような.jsonのファイルが書き出せますが、UE4では使用しません。

●ドット絵テクスチャのインポート

エキスポートした画像ファイルをテクスチャとしてUE4にインポートします。
すぐにテクスチャの画像を、ドット絵に適した設定にします。
これは右クリックのメニューから一発で設定できるようになっているので便利です。
SpriteActions > Apply Paper2D Texture Settingsです。

ただし、設定されていない項目もあります。たまたまかもしれませんが、気になったのでテクスチャエディタの詳細で個別に設定しました。

・LevelOfDetail のMipGenSettings からNoMipmapsにする。ミップマップが消えます。

・TextureのFilterで、ニアレストにする。

ミップマップがあると、スプライトが表示された瞬間、モザイクのような表示から徐々に解像度が上がるという見え方をしたので、必要ないと思い削除しました。

●テクスチャをスプライトにわける。

まとめたテクスチャの画像から、スプライトにする画像を１枚ずつ分離します。

自動でサイズを設定してくれて１枚ずつのスプライトに分けてくれる機能もありますが、自動はつかわずにグリッドの設定で分けました。
自動で設定は楽そうですが、各絵ごとに１ピクセル以上のアルファチャンネルの切れ目がないと、つながっている画像というあつかいをされて分離してくれないことがあるようです。また、画像のバウンディングボックスにぴったりサイズで切り取ってしまうので、スプライト毎にサイズがバラバラになります。
32*32と決めていたので、その範囲で分けるのが確実です。

テクスチャを右クリックして、SpriteActionから、Extract Spriitesを選びます。
開いたエディタで、ModeをGridにして、Gridの項目から幅と高さを設定します。Namingの項目で分けたスプライトの名前の付け方を決められます。元のテクスチャ名の後ろに設定したテキストが追加されます。{0}の部分は連番になります。
デフォルトの設定のままだと、hogehoge_Sprite_0 というようにSpriteという文字が入るので、連番だけにしたい場合は{0}だけにします。

スプライトのサイズを32ピクセルのグリッドでわけていても、表示領域やコリジョンは、スプライトエディタで個別に設定できます。
スプライトを分けると、必ず各スプライトにコリジョンが付いた状態になるので、コリジョンが必要がない場合は削除します。

サイズが揃っていればまとめて設定するときも便利です。
地面に足をつかないとならないので、必要なスプライトをまとめて選択して右クリックメニューからBulk Edit via Property Matrix を選んでプロパティマトリクスエディタを開き、ピボットをボトムセンターに設定します。

●スプライトからフリップブックを作る。

分けたスプライトからフリップブックを作成していきました。
テクスチャ画像にするとき、ある程度順番に並べていたので、連続したパターンを選択すればほぼだいじょうぶでした。
必要なスプライトをコンテンツブラウザで選択して、右クリックからクリエイトフリップブックを選択で、フリップブックエディタが開きます。

フリップブックのそれぞれのフレームを調整します。
詳細にある再生スピードは15FPSにしたままフレームの長さを変えて調整したほうがいいらしいですが、それは編集が微妙に面倒なので大半をFPSの値でスピード調整しました。とはいえ、15FPSにしておくほうが細かく設定できるので良いと思います。
後から付け足す場合は、KeyFrames配列にプラスしてスプライトを読みこんだり、
キーフレーム部分を右クリックして出てくるメニューから色々編集ができます。

最初から必要なパターンを全部選択して、フリップブックにするのが一番楽だと思いました。

●タイルマップ用のテクスチャ作成

UE4のタイルマップエディタは使ったことがなかったので、使ってみることにしました。
やってみたら、めちゃ簡単でした。そして使いやすい。しかも楽しい。
使い方がだいたいわかったので、タイルマップ用のドット絵テクスチャを作成しました。

まずは方眼紙の上でだいたいのイメージを出していきます。主に、全体のサイズと足場のサイズの大まかな方針を決めます。わからんシリーズ第二弾。

イメージができたら、ドット絵にしていきます。１タイルは16*16ピクセルの想定で進めました。
自分の場合は、全体の画像を作ってから分解していくという方法は取らず、最初から各部品を部品のまま、テクスチャアトラスに直接描くような感じで作成しました。
256*256で収まるだろうということで、必要そうなパーツから描いていきます。あとで並べてみて足りなかったら付け足すというやりかたで進めました。
テクスチャ画像ができたら、タイルセットに変えます。インポートした画像を右クリックして、SpriteActions のCreateTileSetを選択します。
タイルセットエディタで、１タイル分のサイズを設定し、コリジョン等設定していきます。

コリジョン用は別ファイルにして、128*128のサイズで作りました。スーパー内と倉庫用でそれぞれ、背景とコリジョン用を用意したので合計で４枚のテクスチャを使ってます。
コリジョン用はタイルの範囲ごとに、コリジョンを設定していきます。16*16と決めたらその単位ごとにしか設定できず、床の長さ（たとえば32*64分）をまとめて設定できないので少し不便でした。

壁や床は、9スライスの方式＋逆カド（正式名称不明）を作っておけば足りるので、まずはそこから着手しました。図は仮で作った画像ですが。A,B,C,Dの部分が逆カドと想定するパターンです。

これらのタイルがあれば、けっこう自在にマップをデザインできます。

基本の壁と床ができたら、あとは飾り付け的なパーツを作っていきました。あとからどんどん追加していったのはこの飾り付けの部分です。買い物カゴや値札とか、説得力を増すために付け足します。こういうのがないと間がもちません。

背景のテクスチャの色は彩度が高く目立ちすぎたので、フォトショップを使ってディテールを失わない程度に暗めに色を落としました。
Asepritで色調整はできなくもないのですが、フォトショップのほうが速いし細かく調整できます。昔のように使える色数と色深度が制限されているわけでもないので、ざっくりやってしまいます。（色数と色深度を限定したほうが、よりドット絵らしさは際立つかもしれませんが）
コリジョン用のテクスチャは、一番手前にきてキャラが乗れるので部分なので、色は落とさずそのままにしました。あと、乗れる部分を区別できるようにするために黒フチをつけました。

●タイルマップエディタでマップ構築

方眼紙でイメージしたとおりにタイルを並べていきます。レイヤーは4枚で設定しました。
実際の画面では、以下の図のように並んでます。Y軸にマイナスになる方ほど下のレイヤーです。この辺は設定次第です。

Y軸0になるレイヤーをコリジョン用として、あとは背景用にしました。
背景用に複数設定したのは、ディテールを書き足すためです。上から重ねてしまえば、壁は全部同じベタの絵で良いので、ベタで塗りつぶして、その上のレイヤーにディテール用のパターンを乗せていきます。実際、値札や看板はレイヤー2や3に乗せてます。

左側に作成しておいたタイルセットを読み込んで、中央のタイルにペイントしていきます。ドラッグすれば選択中のタイルが連続してペイントされます。タイルセットの画像の必要な範囲分ドラッグして囲めばその部分をスタンプのように選択できます。決まったサイズの足場を並べまくるときは便利です。
消す場合は、イレーサーに設定してマップ上をドラッグしてなぞっていけば消えます。

ペイント済みの範囲をシフトキーを押しながらドラッグして、その範囲をコピーして他の部分に貼り付けることができます。ただ、広範囲を一気に消すのはできませんでした。

マップを作ってみると、紙の上で考えていたものと、実際の雰囲気が違っていたというか思ったよりも狭く、プレイしてみたら頭ぶつけまくりだったので、最初に想定したサイズよりも全体的に大きくしました。
また、細かい足場を連続して設置してたところはストレスたまったので、直線にして走りぬけられるように調整したりしました。以下の図の部分です。

ジャンプアクションでテクニックが必要な部分と、爽快に走りぬける部分の両方のバランスが大事だと実感しました。

作成したタイルマップはひとかたまりになるので、レベルにドラッグアンドドロップして配置できます。
同じタイルマップをいくつでも置けます。
ある程度まとまった大きさのブロック単位で作成して、モジュールのように並べていく使い方もできそうです。
ただ、作成直後はピボットの位置が微妙な所にあるので、オフセットすると良いでしょう。

タイルマップを配置した後、ディテールの中のActorの項目から、Pivot Offsetを設定します。図では１タイル16ピクセルなので半分ずつずらしてます。

→

→

タイルマップエディタは、4.18.0Preview4の時点でもアーリーアクセスプレビュー状態なので今後の進化に期待します。

●カメラの動きについて

・カメラの解像度の設定
横幅は384にしました。あと、アスペクト比1.6667に設定しました。最初は３DSをイメージして横幅400にしていましたが、もうちょっとドット感がほしくなったので狭めにしました。

全体の画面解像度は、1280*720にしているので、左右にちょっと黒帯ができています。

・X軸とZ軸のリミットを設定
まずはカメラをキャラから削除して、新しくカメラアクターを作り、ブループリントにしました。直接ブループリントにしてしまったのはちょっと失敗だったかもです。
とりあえず、プレイヤーと全く同じ動きをするようにしてから、こちらのろっさむさんのサイト

UE4初心者がUE4で2Dゲームを手探りで作ってみた(6) – ろっさむ.com

を参考にして、まずX軸のリミットをつけました。

Z軸も同じようにやってみました。
リミットの数値をレベルがかわるたびに設定しなおさないとならないので、何か汎用的にする工夫を考えなければと思っています。

・Z軸にラグを設定
ジャンプの動きにすぐについてこないように、Z軸側にLerpをはさみました。
自分の位置（カメラ）と、プレイヤーの位置の間にLerpを挟むという強引な感じの解決をしました。
スプリングアームのラグの設定を試してみましたが、Z軸はよくてもX軸まで遅れてついてきてしまうので、求めていた動きとは違ってしまいました。あと急速な上昇下降にカメラが付いてこないので、見える範囲が狭くなってしまいます。

アルファを0.08くらいにすることで、ちょっとした変化ではカメラが動かないようになりました。
しかし、エレベータで上昇中に上方向がみづらくなり、天井に頭をぶつけることが多くなったのが反省点です。
単純にゆっくりついてくるようにすると、落下中においてかれて地面側がまったく見えなくなるので、ベロシティのZ軸だけとりだして、マイナス方向の値が一定を超えたら、Lerpのアルファの値が大きい値になるように設定しました。

上昇中の天井よりも下降時に地面が見えないほうが致命的なので、こちらを優先して対処しました。
このおかげで、エレベーターのてっぺんから床に落ちる時でも下方向が見えるようになりました。

「やってみたら動いたからいいか」っていう状態なので、なにか別の方法を模索したほうがいいかと思っています。

●各種演出

・多重スクロールっぽい見せ方
タイトルの背景は、多重スクロールっぽく見えるようにしました。
背景のタイルマップをブループリントにしてタイムラインで動かしました。最初はシーケンサーで動かしていたのですが、微妙に１フレームずれたりして継ぎ目が見え隠れしたのでやめました。やり方が悪かったのかもしれません。
画面幅の倍くらいになるようにタイルマップを複数並べて、それぞれターゲットポイント間を等速で移動するだけです。

Endのターゲットポイントへ移動したら、次のフレームで瞬時にスタートへ戻るので、継ぎ目なく再生されました。タイムラインは、手前の道を10秒、奥のビル群を20秒に設定してループさせています。

・グレイちゃんのセリフ
テキストの配列を作って、一定時間ごとに順番に取り出してループさせています。

・グレイマンはシーケンサーで
タイトルと、ゲーム中にでてくるグレイマンはシーケンサーで動かしました。
タイトル用は位置を変えるだけなので簡単です。
ディレイを挟んで一定時間ごとにループさせました。

ゲーム中のグレイマンは、プレイヤーがトリガーにオーバーラップしたらシーケンサーをプレイするように仕組みました。走り去ってほしかったので、フリップブックを切り替えたかったのですが、シーケンサーのトラックにはフリップブック切り替え用がないので、イベントトラックを使ってイベントでフリップブックの切り替えを呼び出して対応しました。

●レベルデザインについて

最後にレベルを作る時に考えていたことを語らせてください。
・スーパーマーケット
いきなり障害物が置いてあるのはジャンプを促すためです。何かボタンを押せばジャンプするので、それで操作を理解してもらえると考えました。そのすぐ横に爆弾がおいてありますが、普通にジャンプすれば当たりません。好奇心旺盛な人はわざわざ当たってくれるので、当たると寝ることを知るというねらいです。

先に進むとまた爆弾があります。先に学んでいた人はこれを避けてジャンプするので、箱の上におち、箱を潰せることを知ります。「踏む」というアクションがあることも知らせます。
先に爆弾に触ってなかった人は、勢い余って突っ込んで寝ることを知ると思います。
うまく避けたとしても、見える足場においてある缶を餌にして、上へ上がることを促しているので、たいていうまくあがれなくて爆弾に引っかかります。爆弾は恐ろしいものという意識を植え付けられます。

スーパーマーケットの終わりぎわにグレイマンがいますが、その手前に障害物を置きました。この障害物をさけて普通にジャンプすれば、グレイマンの頭上に着地するように仕組んでいます。まず、踏めば倒せるということを知らせます。
上からのルートを通った人も、上から普通に落下すれば頭上に着地します。（たいていはエアダクトへ吸い込まれて行くと思いますが）

・倉庫内
中央にエレベーターを配置して、上下左右に缶を多めに取得出来る場所を設定しました。缶を取れる場所の手前にはグレイマンを配置して、難関と感じさせるようにしています。上方は天井が低く頭ぶつけやすいので、グレイマンと接触することも多めと考え、比較的缶の数を多く配置しています。

中央付近は、エレベータをつかわず足場を使って上がれるように見せていますがこれは時間を浪費させるワナです。
右端の缶ジェネレーターは最も遠い所に置き、そこに入るには上から落ちるしか無いというデザインにしました。比較的タイミングが難しいけどショートカット出来る足場も設定したので、複数ルートで入ることは可能です。エレベータであがることをほぼ必須としたので、残り時間のはかり方が重要になります。早めにジェネレーターの下に入ったとしても、グレイマンを倒せば無限にスポーンし続けるので、缶数を稼ぐことはできます。プレイヤーの「時間があまった感」を減らす効果を期待しました。

といったことを考えながらレベルを作りました。

●おわりに

自分でも驚いたのですが、タイルマップエディタで２Dマップ作ってたときが一番楽しかったです。自分としてはレベルを作るのが楽しいのかもしれません。プレイヤーはここで苦労するかな？　とか、ここ見つけてくれるかな？　とか、そんなことを思いつつ作ってるとけっこう楽しめます。
RPGツクール用に方眼紙とかで無意味にマップ描いて、街置いたり洞窟置いたりして、わくわくしてたのを思い出しました。
なにか広めのマップのゲーム作りたくなりました。