画像をアニメーション化するスプライト(Sprite)について簡単に解説【Unityゲーム制作】

今回はUnityのスプライト機能について簡単に解説していきます。結構細かい事もあるので全部説明すると長くて訳が分からなくなるので(自分も完璧にはわかっていないですw)さくっと触り程度に・・・

画像を分割して動かす

まずは画像を分割して動かすところからです。例えば、キャラが動く時、魔法を使った時とかアニメーションというか、自然な動きをしますよね。あれは、複数の画像を連続して動かして、いわゆるパラパラ漫画風に動かしてたりするのです。

画像を分割

まずは画像を用意。更新はストップしていているようですが、エフェクトフリー素材から画像をお借り。

しかしまあ、googleで画像検索してもリンク集ばっかり出てきて中々探せないですね。(しかもリンク切ればかり)googleはアルゴリズムを変更してるらしいですが、相変わらずまとめサイトやリンク集ばかり上位表示されてる気が。おっと、余談でしたね。

ダウンロードした中にはエフェクトがたくさん詰まってますね。今回はその中のsmoke画像を使います。somokeの画像をプロジェクトの「Assetsフォルダ」の下に作成した「spriteフォルダ」の中に入れます。

入れただけだとこんな感じですね、当然ですが。このsmoke画像を分割していきます。

smokeを選択して、「インスペクターウィンドウ」内にある「スプライトモード」を複数にして「Sprite Editor」を選択。

スプライトエディターが開くので「スライス」からタイプを「Grid By Cell Size」を選んでピクセルサイズを指定。「スライス」を押して適用で完成。

下記は拡大図。

自動でスライスする機能とかもあるけど、たぶんこの「Grid By Cell Size」っていうピクセル単位で分割するのが一番使うかなーと。んで、スライスすると、さっきの画像がこんな感じに。

いい感じに分割されてますね。

画像を動かす

んでもって、「smoke」をシーンにドラッグアンドドロップ。

これでとりあえずは動くようになります。

細かい設定はアニメーターとかで調整できたりするけど、それはまたおいおい。

タイトルとURLをコピーしました