前編で爆誕した「テストぼうや」です。
今回で実際にスプライトアニメーションに仕上げていきたいと思います。

スプライトアニメーション作成編

ここからは「テストぼうや」をスプライトアニメーションにしてゆきます。
いろんな方法があるのですが、今回は [PNGシーケンスを書き出し] を使って作成します。

PNGシーケンスの書き出し

①「テストぼうやのシンボル」を右クリック⇒[PNGシーケンスを書き出し] をクリックします。

②任意の場所に保存してください。

③サイズはダイアログのままで大丈夫です。

④指定した場所に、「テストぼうやのシンボル」のシーケンスがPNG形式で書き出されました。すべて334px×276pxで書き出されています。

Photoshopでスプライト画像を作成

①Photoshop を起動し、[ファイル]⇒[新規作成]から下記のサイズでドキュメントを新規作成します。

【ドキュメントの横幅】 = 書き出されたpngの横幅 × 書き出されたpngの枚数

【ドキュメントの高さ】 =  書き出されたpngの高さ

②ドキュメントに 書き出されたpngの横幅の間隔（今回は334px）でガイドを引きます。
[表示] ⇒ [新規ガイドレイアウトを作成] で、列の値をpngの数だけ（今回は11）指定しすれば一発でボンです。

また、『Griddify 』というプラグインで下図のようにpxを指定して[Griddify] をクリックでも一発でボンです。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

③書き出したpngシーケンスたちをガイドに沿って配置します。
[表示] ⇒ [スナップ先] ⇒ [ガイド] にチェックをいれるか、
[表示] ⇒ [表示・非表示] ⇒ [スマートガイド] にしておくとすいすい並べられます。

④[ファイル] ⇒ [書き出し] ⇒ [Web用に保存] で [PNG-24] で書き出します。
けっこう大きなサイズになるので、書き出した後に 『TinyPNG 』などでファイルを圧縮しておくとよいと思います。

スプライトシートは、Animate CC 上でも「スプライトシートを生成 」で機能で作成可能なのですが、横一列に並べようとすると何故かどうしても右端に謎の余白が出てしまうので断念しました。。被ったフレームをカットしてくれたり何かと便利なのでちょっといろいろ調べてみます。。

CSS3 animation で動かしてみる

スプライトシートが出来たので、実際にHTML & CSS で動かします。実際に使ったコードは下記です。

HTML

<div id="bouya" class="walk"></div>

CSS

/* テストぼうや本体のstyle */
#bouya {
  width: 334px;
  height: 276px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background: url('./ugoku-bouya.png') right center;
}

/* animationの設定 */
.walk {
  animation: walking .1s steps(11) infinite;
}
@keyframes walking {
	from { background-position: 0px 0; }
    to { background-position: -3674px; }
}

animation
サブプロパティではこんなことを指定しています。

@keyframes
from から to までのあいだに、3674pxの背景画像の位置を右から左に動かす指定をしています。
「from」 と 「to」 は、 「0%」 と 「100%」 に置き換えられることも可能。%指定だと、間の数値も指定できるのでもっと細かい表現が可能になります。

DEMO

上記のコードだとこんな感じ で動きます。

Animate で動かした時より早っ
…というのも、先ほどのCSSのとおり、アニメーションの速度やら何やらいろいろといじっているからなのです。
PNGシーケンスで書き出しておくと、CSSで微調整ができるので Animate CC の画面に戻って調整。。。とかしなくてもよいので便利だなあと思います。

以上、こんな私でもスプライトアニメ作れたわ〜、というお話でした。

とても参考にしたサイト

PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
animation
@keyframes
steps() クラスのタイミング関数