Flash苦手な私でもAdobe Animate CC とCSS3 を使って、スプライトアニメーションが作れた【後編】

無断転載禁止 Flash苦手な私でもAdobe Animate CC とCSS3 を使って、スプライトアニメーションが作れた【後編】

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

 

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

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

PNGシーケンスの書き出し

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

animate-008

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

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

animate-010

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

animate-011

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

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

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

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

animate-012

②ドキュメントに 書き出されたpngの横幅の間隔(今回は334px)でガイドを引きます。これは『Griddify 』というプラグインを使うと下図のようにpxを指定して[Griddify] をクリックしたら一発でボンです。

animate-013

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

animate-013-2

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

animate-014

[ファイル] ⇒ [書き出し] ⇒ [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
サブプロパティではこんなことを指定しています。

walking animation-name
@keyframes の名前を指定。
.1s animation-duration
1 回のアニメーションサイクルに要する時間の長さ。
steps(11) steps(number_of_steps, direction)
指定した回数に等分したアニメーションを実行。
infinite animation-iteration-count
アニメーションの繰り返し

 

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

 

DEMO

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

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

 

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

 

とても参考にしたサイト

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

Pocket
LINEで送る