はじめまして。「不良魂～全国制覇～」というソーシャルゲームでデザイナーをしております、岡田(@akoookday)と申します。今回はデザイナーがアニメーションを作成する、メリット・デメリットについてご紹介したいと思います。
「不良魂～全国制覇～」（ ※以下、「ギャングソウル」と表記 ）では、アニメーションの開発にFlash CS6とToolkit For CreateJS（※以下、「TFC」と表記）使用しています。TFCはFlashで作成したアニメーションをJSに書き出してくれる便利な拡張機能です。
（TFC制作の流れについて佐藤圭明さんの記事に詳しく記載されていますので、そちらもご覧ください。）
この機能によりＪSの知識が浅くとも、実務でのアニメーションの大部分をデザイナーが作成できるようになりました。ギャングソウルが他の内製のタイトルと大きく異なる点もこの部分です。
ギャングソウルは不良をテーマにしたゲームで、登場するアイテムや背景も実際に街にあるようなリアルな物が多いのが特徴です。
その世界観を表現するアニメーションにもリアリティが求められます。
まずは動きのリアリティについて、シンプルな物が落ちるアニメーションで説明します。
動かす物体の重さや質感などをイメージしながら進めました。
物の重さ・質感を表すには、反動が重要です。周りに与える影響、受ける影響を意識すると上手く表現できると思います。
実際に素材を割り当てると↓のような表現になります。
必要な場合は物に合わせて影も追加するとよりリアルになります。ギャングソウルでは右3つのような表現をよく使用します。
2. アニメーションのリッチな表現
次は素材を組み合わせる事でよりリアルでリッチなアニメーションになる例をご紹介します。ギャングソウルで多用する【銃を撃った後】のようなアニメーションを素材ごとに分解してみました。
１．背景がある場合は打ち込まれた瞬間にガタガタと動かすと、銃の反動を表現できます。
２．フラッシュの表現はよく映画などで見られるものです。穴を目立たせるために銃痕よりも後ろに配置しました。
４．立ち上る煙はただ拡大するだけでなく、左右の比率を変えることで伸びていくような表現になります。
真ん中の穴に破片が通るようにして動きを目立たせます。
また銃痕が白いので、それに破片がかぶり過ぎないように調節します。
このようにほぼ１色しか使用していませんが、ちょっとした細部の素材が加わるだけでリアリティが増します。
それぞれのパーツの動きはYoutube等で動画を検索して、実際の動きを参考にしています。
アニメーションで使用した素材は以下です↓
使用する素材はスプライトシートにまとめてFlashに読み込みます。
スプライトシートとは複数の画像をまとめて１枚にまとめた物です。読み込む画像の枚数が減る事でアニメーションのデータ容量を抑える事ができます。
素材それぞれにマスクを追加しパーツを作成します。
3. デザイン、アニメーション間の融通
デザイナーがアニメーションを作成する最大のメリットは、デザイン・素材作成と、アニメーション作成を同時進行できることだと思います。
作業を進めていくと要素を足したい場合や、修正したいと思う場合が多く発生します。
その際デザイナーの場合、自分で作成した素材なので修正や追加を容易に行う事ができます。
実際にスプライトシートを修正する時に気を付けなければいけない点があります。以下は銃痕のアニメーションのスプライトを修正する例です。
Flashでは画像の基点は左上になります。パーツのマスクがずれないように、右下に向かってキャンバスを広げ、素材を追加していきます。アニメーションを作成する時はFlashとPhotoshopを同時に開き、画像の修正を重ねながら動きをつけていきます。
アニメーションの中でシステムとの連携が必要な部分はディベロッパーに対応して貰います。
ディベロッパーはフラッシュのデータと、TFCが書き出したJSのみでアニメーションの構造を把握しなければいけません。書き出されたＪＳは癖があり、読み解くのはとても時間がかかり困難です。
これを解決するために、アニメーションの構造をエクセルでまとめた仕様書を作成する事をおススメします。
この仕様書に、ラベル名、オブジェクト名、画像名、テキストの指定、タップでスキップの設定、差し替え画像、分岐など、実装に必要な情報をなるべく分かりやすいようにまとめます。
↓下記はガチャアニメのあとに加わるスロットの演出の仕様書です。
仕様書があっても分岐が多く複雑なアニメーションの場合は連携が非常に難しくなります。
構造を説明しつつ、アニメーションのデータも修正を重ね、その度に仕様書を更新して対応していきます。
よりスムーズに連携していくには、デザイナーであっても書き出されたJSを読み解く努力が必要になってきます。
2.作成段階で実機でデータを確かめることができない
デザイナーであれば、バナーやイラストなど作成したデータは実機のスマートフォンで確かめたいと思うのが普通です。しかしアニメーションのデータをサーバーにコミット・リリースするのはディベロッパーなので、作成段階では気軽にアニメーションを実機で確認する事ができません。
テストのサーバーに自分でコミット・リリースできる環境があれば確かめる事が可能です。ただ分岐のある複雑なアニメーションを、きちんとを確かめたい場合は自分でJSを書いて確かめるしかありません。（ラベル名を指定するだけのシンプルなコードなのでそこまで難しくないと思います。）
3.素材の追加の容易さから、ついデータが重くなる
アニメーションにこだわりすぎると、必要な素材がどんどん増えていき、容量が重くなってしまいがちです。
これを解決するには、同じアニメーションの演出をどれだけ小さく、単純な画像でできるかを常に意識することが大切です。
スプライトシート(PNG)は減色ソフトで減色し容量を減らす事ができます。しかし限度があります。大きな画像で色数が多く、グラデーションを多用していると、劣化が激しくかつ容量が大きくなってしまいます。
以下のことに気をつけてると容量を減らせると思うので、試してみて下さい。
・デザインの段階で色数を抑える（同じような色味であれば統一する）
・グラデーションはなるべく使わない（特ににアルファのグラデーション）
・左右対称の画像であれば、半分だけ作成し、Flash内で反転して使用する
・劣化しても見栄えが悪くないような素材を意識する（元からかすれた表現など）
・シンプルなグラデーションはFlash内で作成し画像は使わない
・ユーザーにとって本当に必要かどうかを考る。
職種に限らずアニメーションを作成する人が増えて欲しいという希望で書かせて頂きました。これからも課題は数多くありますが、表現にこだわっていきたいです。
最後にいくつか実際にゲームで使用したアニメーションを紹介させて頂きたいと思います。少しでも参考になれば幸いです！
「不良魂～全国制覇～」（ ※以下、「ギャングソウル」と表記 ）では、アニメーションの開発にFlash CS6とToolkit For CreateJS（※以下、「TFC」と表記）使用しています。TFCはFlashで作成したアニメーションをJSに書き出してくれる便利な拡張機能です。
（TFC制作の流れについて佐藤圭明さんの記事に詳しく記載されていますので、そちらもご覧ください。）
この機能によりＪSの知識が浅くとも、実務でのアニメーションの大部分をデザイナーが作成できるようになりました。ギャングソウルが他の内製のタイトルと大きく異なる点もこの部分です。
デザイナーがアニメーションを作成するメリット
1. 素材に合わせた動きの追求ギャングソウルは不良をテーマにしたゲームで、登場するアイテムや背景も実際に街にあるようなリアルな物が多いのが特徴です。
その世界観を表現するアニメーションにもリアリティが求められます。
まずは動きのリアリティについて、シンプルな物が落ちるアニメーションで説明します。
動かす物体の重さや質感などをイメージしながら進めました。
物の重さ・質感を表すには、反動が重要です。周りに与える影響、受ける影響を意識すると上手く表現できると思います。
実際に素材を割り当てると↓のような表現になります。
必要な場合は物に合わせて影も追加するとよりリアルになります。ギャングソウルでは右3つのような表現をよく使用します。
2. アニメーションのリッチな表現
次は素材を組み合わせる事でよりリアルでリッチなアニメーションになる例をご紹介します。ギャングソウルで多用する【銃を撃った後】のようなアニメーションを素材ごとに分解してみました。
１．背景がある場合は打ち込まれた瞬間にガタガタと動かすと、銃の反動を表現できます。
２．フラッシュの表現はよく映画などで見られるものです。穴を目立たせるために銃痕よりも後ろに配置しました。
４．立ち上る煙はただ拡大するだけでなく、左右の比率を変えることで伸びていくような表現になります。
真ん中の穴に破片が通るようにして動きを目立たせます。
また銃痕が白いので、それに破片がかぶり過ぎないように調節します。
このようにほぼ１色しか使用していませんが、ちょっとした細部の素材が加わるだけでリアリティが増します。
それぞれのパーツの動きはYoutube等で動画を検索して、実際の動きを参考にしています。
アニメーションで使用した素材は以下です↓
使用する素材はスプライトシートにまとめてFlashに読み込みます。
スプライトシートとは複数の画像をまとめて１枚にまとめた物です。読み込む画像の枚数が減る事でアニメーションのデータ容量を抑える事ができます。
素材それぞれにマスクを追加しパーツを作成します。
3. デザイン、アニメーション間の融通
デザイナーがアニメーションを作成する最大のメリットは、デザイン・素材作成と、アニメーション作成を同時進行できることだと思います。
作業を進めていくと要素を足したい場合や、修正したいと思う場合が多く発生します。
その際デザイナーの場合、自分で作成した素材なので修正や追加を容易に行う事ができます。
実際にスプライトシートを修正する時に気を付けなければいけない点があります。以下は銃痕のアニメーションのスプライトを修正する例です。
Flashでは画像の基点は左上になります。パーツのマスクがずれないように、右下に向かってキャンバスを広げ、素材を追加していきます。アニメーションを作成する時はFlashとPhotoshopを同時に開き、画像の修正を重ねながら動きをつけていきます。
デザイナーがアニメーションを作成するデメリット
1.複雑なデータはディベロッパーとの連携が困難アニメーションの中でシステムとの連携が必要な部分はディベロッパーに対応して貰います。
ディベロッパーはフラッシュのデータと、TFCが書き出したJSのみでアニメーションの構造を把握しなければいけません。書き出されたＪＳは癖があり、読み解くのはとても時間がかかり困難です。
これを解決するために、アニメーションの構造をエクセルでまとめた仕様書を作成する事をおススメします。
この仕様書に、ラベル名、オブジェクト名、画像名、テキストの指定、タップでスキップの設定、差し替え画像、分岐など、実装に必要な情報をなるべく分かりやすいようにまとめます。
↓下記はガチャアニメのあとに加わるスロットの演出の仕様書です。
仕様書があっても分岐が多く複雑なアニメーションの場合は連携が非常に難しくなります。
構造を説明しつつ、アニメーションのデータも修正を重ね、その度に仕様書を更新して対応していきます。
よりスムーズに連携していくには、デザイナーであっても書き出されたJSを読み解く努力が必要になってきます。
2.作成段階で実機でデータを確かめることができない
デザイナーであれば、バナーやイラストなど作成したデータは実機のスマートフォンで確かめたいと思うのが普通です。しかしアニメーションのデータをサーバーにコミット・リリースするのはディベロッパーなので、作成段階では気軽にアニメーションを実機で確認する事ができません。
テストのサーバーに自分でコミット・リリースできる環境があれば確かめる事が可能です。ただ分岐のある複雑なアニメーションを、きちんとを確かめたい場合は自分でJSを書いて確かめるしかありません。（ラベル名を指定するだけのシンプルなコードなのでそこまで難しくないと思います。）
3.素材の追加の容易さから、ついデータが重くなる
アニメーションにこだわりすぎると、必要な素材がどんどん増えていき、容量が重くなってしまいがちです。
これを解決するには、同じアニメーションの演出をどれだけ小さく、単純な画像でできるかを常に意識することが大切です。
スプライトシート(PNG)は減色ソフトで減色し容量を減らす事ができます。しかし限度があります。大きな画像で色数が多く、グラデーションを多用していると、劣化が激しくかつ容量が大きくなってしまいます。
以下のことに気をつけてると容量を減らせると思うので、試してみて下さい。
・デザインの段階で色数を抑える（同じような色味であれば統一する）
・グラデーションはなるべく使わない（特ににアルファのグラデーション）
・左右対称の画像であれば、半分だけ作成し、Flash内で反転して使用する
・劣化しても見栄えが悪くないような素材を意識する（元からかすれた表現など）
・シンプルなグラデーションはFlash内で作成し画像は使わない
・ユーザーにとって本当に必要かどうかを考る。
おわりに
最後までお付き合い頂きありがとうございます。職種に限らずアニメーションを作成する人が増えて欲しいという希望で書かせて頂きました。これからも課題は数多くありますが、表現にこだわっていきたいです。
最後にいくつか実際にゲームで使用したアニメーションを紹介させて頂きたいと思います。少しでも参考になれば幸いです！