読者です 読者をやめる 読者になる 読者になる

妹でもわかるUnrealEngine4

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

OpenGameAssetのドット絵をUE4に読み込む

UE4.13 アセット Paper2D

「今日は昨日紹介したサイトから絵をダウンロードしてきて、それをUE4にインポートするところまでやろうと思う」

opengameart.org

「今回選んだのは、このドット絵アセット。キャラクターと背景がセットになってて、そのキャラクターの方を入れてみる」

f:id:una_unagi:20161223230333p:plain

「どのデータでも、ダウンロード用のリンクが下の方にあるから、そこからダウンロードする。ブラウザがFirefoxなら、右クリックして"名前を付けてダウンロード"だけど、そのへんはブラウザによって操作方法がちがう」

妹「左の方にゴチャゴチャ書いてあるのは……」

「それは似たようなデータを探す時用のリンク。ただあんまりジャンル分けの精度がよくなくて使いづらい感じが。あとライセンスも書いてある。"CC0"って画像がそれ。昨日説明した一番面倒が少ないライセンスのやつ」

f:id:una_unagi:20161223230853p:plain

「ダウンロードするのはただのPNG画像だから、そのままコンテンツブラウザにドラッグすると、テクスチャアセットとして読み込まれる。それをスプライトにするんだけど、分割したスプライトとして読み込む」

妹「あ、これはやったことある」

f:id:una_unagi:20161223231746p:plain

「妹が普段やってるのは、このSpriteExtractModeがAutoにしてたと思う。これはそれぞれの絵を自動認識する設定だけど、今回のようなスプライトシートには使わない方がいい。特にアニメーションさせる場合は位置がずれると面倒だから」

妹「スプライトシート?」

「同じ大きさの画像をピッチリ詰め合わせたような画像のことをそういうんだよ。アニメーションを動画じゃなくスプライトシートとして出力できるソフトも多い。ドット絵のアニメーションはこの形式で配布することが多い。ただの画像だから編集も楽」

妹「わたしが作ってるやつはスプライトシートではないの?」

「あれは1枚の画像にたくさんイラストを描き込んでるけど、グリッドとかで同じ大きさにしてはいないし、アニメーションにもなってないから、ちょっとジャンルが違う」

f:id:una_unagi:20161223232409p:plain

「スプライトシートの場合は。SpriteExtractModeをGridにして、大きさをきっちり数字で指定すると綺麗に分解出来る。今回は32で丁度良かったけど、そのへんは数字を変えて綺麗になるようにする。歴史的な理由で8の倍数になってることが多いけど、説明に書いてあればその数字で」

妹「他のとこの設定は?」

「他はとりあえず初期値の0でいいんだけど、そうすると全体をスプライトに切り分ける形になる。全部じゃなくて一部だけ抜き出したりする場合はNumCellsnのへんにも数字を入れる。MarginとかSpacingは各スプライトに無駄な余白がある場合に除去するけど、これが必要なケースはあんまりない」

f:id:una_unagi:20161223233114p:plain

「とりあえずこの段階で、Paper2Dのスプライトとして使えるようになった。こういう感じのスプライトシートなら他のアセットでも同じ方法が使える」