今回はドット絵で簡単なアニメーションを作成してみます。
厳密にはアニメーションではなく、画像を何枚か作成してパラパラ漫画の様につなげ、動いてる風に見せる感じですね。
はじめに
ドット絵作成ソフトはAsepriteです。特に変わったことはしていないので、ほかのソフトでもOK。作成した画像を使い、Unityのアニメーションでも動かしてみます。
画像のサイズ・設定
16×16で作成。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704001.jpg)
色の配置が分かりやすいように設定でグリッド線を表示。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704002.jpg)
画像作成
簡単なボールを作成。使用した色は黒、白、鼠色と灰色の4色。イメージとしては左上から光が当たっている感じです。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704003.jpg)
エクスポートしてpng画像として出力。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704004.jpg)
この画像を試しにUnityのアニメーションで動かしてみます。画像を下に移動しただけです。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704014.gif)
これを地面についた時につぶれたような感じにしてみます。
Asepriteの下の方にフレームやアニメーションの操作が出来る場所があります。ない場合はマウスでギュっと持ち上げると出てくると思います。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704006-1024x534.jpg)
NewFrame(Alt+N)で元の画像をコピーします。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704007.jpg)
上から少し押したイメージで画像を修正。落下途中の状態ですね。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704008.jpg)
同じように、コピーして3番目のフレームを作成。さらにつぶしたような形にします。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704009.jpg)
「再生ボタン」を押すとパラパラ漫画のように動かすことができます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704013.jpg)
エクスポートで出力します。全てのフレームにすると連番で画像が出力されます。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704010.jpg)
試しにUnityで動かしてみます。落下途中と下についた時の画像を変更しています。
![](https://nosystemnolife.com/wp-content/uploads/2022/07/20220704012.gif)
細かい調整が必要な気もしますが、何となくイメージに近い感じになったのではと思ってます。