【ひらブラ vol.18】アルファムービーってどうやって作ったらいいの？

アルファムービーとは？

今回は、アルファムービーを作る方法についてご紹介します。アルファムービーを使ってみたいけれど、「どうやってデータを作ったらいいか分からない！」「アルファ値付きのムービーを作ったことが無いので不安」、そんな声がけっこうありました。

そんな悩みを少しでも解消することができ、開発者のみなさんがもっとアルファムービーの魅力に気付き、気軽にゲーム開発に活用して頂ければと思います。

最近、SAPさんからのお問い合わせも急増している「アルファムービー」技術。ひらブラでも過去の記事でご紹介しているので、すでにどんなものかご存知の方もいらっしゃるかもしれません。

アルファムービーって何なの？という方は、まずは下記の動画をご覧ください。

ゲーム中、大技を出したときにカットイン（挿入）されるシーンが、アルファムービーです。動画の一部が透明になっているので、ゲーム画面に重ねても違和感がなく、ゲームシーンとの一体感を保ったままで必殺技や召喚などの派手なシーンを表現できます。

「アルファムービー」は、ゲームの演出表現に透明情報を保有した動画データを用いる技法です。メリットとして、(1)プログラム工数やコストの削減、(2)分業やアウトソーシングの促進、(3)演出の自由度の向上、(4)OSごとに作り分ける必要がない、(5)データサイズの削減、が挙げられます。

このように、まさに良いことずくめのアルファムービー。でも、お問い合わせの数は多いものの、まだまだ活用されたゲームは少ないのが現状です。
プログラム側の組み込みはとてもシンプルなので問題はなさそうなのですが…。いろいろとヒアリングしてみると、どうやらアルファムービーそのものを作る方法がイメージできないという方が多いことが分かってきました。

そこで今回は、このアルファムービーをどうやって作るかについて、ご紹介したいと思います。対象はデザイナーの方ですが、デザイナーの方とやりとりをされているプログラマーの方、ディレクターやプランナー、プロデューサーの方にとってもきっと有用な情報になると思いますので、ぜひお付き合いください。

アルファムービーを作るときのポイント

実現したい演出の種類にもよりますが、スマホゲームのムービー制作には、『Photoshop』などの2Dペイントツールと『After Effects』を使うのが一般的です。Photoshopで各種素材を作り、After Effectsで動画を仕上げていきます。3D系のCGであれば、素材作りの前工程として、Mayaなどの３DCGツールを使う場合もあります。

今回の説明では、動画編集に必要な動画素材（レンダリング済みの3DCGムービーを含む）はすべて用意が済んでいる状態からの、After Effect上での作業を対象にしています。

アルファムービーを作る際に大事なポイントは、実は、次のたった２点だけ。

抜けている、とは、「正確に透明部分が設定されていること」を指します。この点については、最後にもう一度だけ触れます。

そして、アルファムービーを作るのに、特殊なスキルや技術が必要かというと、、、そんなことはありません。After Effectsをある程度使える標準的な知識があれば、大丈夫です。いくつか注意すべきポイントはありますが、それさえ押さえれば大丈夫です。

アルファムービー作成手順：事例(1)

最初にご紹介する作成事例は、女の子キャラクターがクルっと回転して、それにアルファ値付きのエフェクトを重ねるムービーです。まずは、動画でご覧ください。

ムービー内の背景、千鳥格子（シマシマ）の部分は、透過する部分＝アルファ設定箇所を示しています。各パーツが千鳥格子の背景に接する「輪郭部分」が、綺麗なアルファムービーを実現するうえで重要になります。

用意する素材は、次の３つ。

A. キャラクター素材

B. エフェクト（星マーク）

C. エフェクト（キラキラ）

各素材は、それぞれ綺麗に「抜けていること」が大切です。これらの素材を使って、以下の手順で作業します。

たった、５ステップなんです！

動画編集後のレンダリングの際、かならず「ストレート（マットなし）」のオプションを選択するのを忘れないで下さいね。「合成チャンネル（マットあり）」だと思い通りのアルファムービーにならなくなる場合があるので、ご注意下さい。

実際のAfter Effects上でのオプション選択画面はこちら。

After Effectsで出力するアウトプットの種類は「AVI」が一般的ですが、静止画連番ファイルのほうが都合が良いケースでは、「TGA」や「BMP」でも構いません。いずれも必ずアルファ値付きで出力することを忘れないで下さい。

もし忘れてしまった場合も、Sofdec2のツールで読みこんだ際にファイルにアルファ値がないと「アルファムービー」のチェックボックスが有効にならないので、この段階で気づくことができます。

このようにして、各素材から成る１つのアルファムービーを簡単に作ることができます。

Sofdec2のエンコードツールについて補足

「アプリに組み込んでみたけれどデータサイズが厳しい…」

そんなときは、Sofdec2のエンコードツールで「解像度」を小さくしてみましょう。端末の画面と同寸のムービーである必要は必ずしもありません（表現したい演出の内容に依存します）。その際、解像度は8の倍数を選ぶと扱いやすいです。

さらに、ビットレートを変えてみる方法もあります。ただし、解像度にたいしてビットレートの指定が小さすぎると想定よりも大きなサイズのムービーになってしまうのでご注意ください。

複数または大量の動画素材を「一括して」エンコードしたい、という方のために、コマンドライン版のエンコーダも用意していますので、必要に応じて活用してみてください。

エンコードパラメータをバッチファイルとして出力する機能もあるので、その動画コンテンツに最適なパラメータを追い込んでいく際に役立ちます。つまり、ある動画のエンコードを細かくパラメータ設定を変えながら一気にさまざまなバリエーションのエンコードを行うことができます。

「作成したアルファムービーを再生確認したい」

そんなときは、Sofdec2に付いてくるプレビュー用のビューアを使います。正しく「抜け」が再現されているかを確認しやすいように、ビューアには背景設定ができるオプションが用意されています。

当社のオススメは「市松模様（暗）」です。透明or不透明だけでなく「半透明」も確認しやすいので便利です。

アルファムービー作成手順：事例(2)

最初の事例は、キャラとエフェクトだけの比較的シンプルなアルファムービーでしたが、今度は、もう少し複雑なものにも挑戦してみましょう。

当社技術デモのなかでも、反響が大きい「ドラゴン召喚演出」のアルファムービーです。

複雑なもの、とは言っても、基本的な手順は「事例①」と変わりません。こちらも、まずは動画でご覧ください。

用意する素材は、次の４つ。

A. キャラクター素材

B. 背景素材

C. 魔法陣イメージ素材

D. カミナリエフェクト素材

事例(1)との違いは、全画面を覆うサイズの背景があることと、キャラクタと背景の間のレイヤにオブジェクト（＝魔法陣）があることです。

そして、今回の作業手順も、さっきとまったく一緒です。

ムービーのはじめとおわりにアルファ値を変化させてフェードイン＆フェードアウトを行うことで、ゲームシーンからの自然な遷移を実現しています。また、魔法陣があることで、ドラゴンがプレイヤー側に迫って飛び出てくるような奥行き感を強調し、迫力が倍増しています。

ちなみに、事例(1)(2)ともに、キャラクターの輪郭に光彩のエフェクトを追加することによりキャラクターを際立たせています。After Effectsの「レイヤー効果（光彩/外側）」機能を使って手軽に実現しています。

アルファムービーの注意点

アルファムービーを作るのが、いかにカンタンであるかをご理解頂けましたでしょうか？特別なフォーマットのムービーというわけではなく、とにかく綺麗に「抜けた」素材を作ることが大事です。

ここまでお読み頂いて、「よし！さっそくアルファムービーに挑戦してみよう！」という方がひとりでも増えたら、嬉しいです（＾＾）。すでにSofdec2のSDKをお持ちの方は、さっそく試してみてください。まだお持ちでない方は、今すぐにお問い合わせフォームからご連絡ください（ひらブラ見た！とお書き添え頂けるとスムーズです＾＾）。無償SDKの入手手順をお返事致します！

さて、実際にアルファムービーを試してみると、ひょっとしたら、いくつかのトラブルに遭遇するかもしれません。そんなときは、迷わずCRIにご相談頂ければと思いますが、よくあるトラブル事例に触れておきます。

なお、今回ご紹介した事例のようなキャラクターが派手に動く演出だけでなく、例えば「LEVEL UP」といった文字表示の演出やボタンが押されたときエフェクトなど、ゲームのさまざまな部分にアルファムービーは使うことができます。

…といっても、どれだけ文章で理解しても、実際に試してみないとピンとこないものです。

そこで、実際に、After Effects や Photoshop を使って、アルファムービーを作る過程を学んでみませんか？というわけで、ワークショップ開催のご案内です！

現職デザイナーが教える「アルファムービー作成講座」

百聞は一見にしかず、ということで、SAPさんからの注目度も上がっているこの「アルファムービー」を、実際にツールを使いながらご説明するワークショップの開催を検討しています。

ワークショップでは、CRIのグラフィックデザイナーが、実際にみなさんの前でアルファムービーをどうやって作るかをお見せします。陥りがちなトラブル事例や各種TIPSも共有できればと思っております。もちろん、みなさんからのご質問やご要望にもお応えします。

【再告知】「タブレット向けゲーム」に関するアンケート

前回もご協力をお願いしましたが、引き続き、読者のみなさんのご回答をお願いしたく、再告知させていただきます。タブレット向けゲームに関するアンケートにぜひご協力下さい。

ご回答者の立場によって、アンケート内容が異なります。どちらかを選んでご回答下さい。（両方にご回答頂くことも可能です。）

※リンク先は外部サイトになり ます。また、本企画はファミ通Appが運営する企画ではありません。

ご回答頂いた方の中から抽選で10名様に、Amazonギフト券をプレゼントいたします。

なお、賞品の当選は発送をもって代えさせて頂きます。賞品はE-mailにてお届けしますので、E-mailは間違いのないよう正しくご記入下さい。

アンケートの回答期限は、現時点で２週間後（5/23まで）とします。皆さんのご協力を宜しくお願い致します。

【ひらブラ公式facebookページ】

最新記事の更新情報や、記事には書けなかったウラ話、はみだしコラムなど、『ひらブラ』に関する情報を随時更新中。ページに「いいね！」をして頂ければつねに最新の情報をアナタのfacebookのタイムラインにお届けします！

http://crimw.me/fb-hirabla

【バックナンバー】
※【ひらブラ vol.17】タブレット向けゲームに関する緊急アンケート（プレゼント付）
※【ひらブラ vol.16】ミドルウェアだけど質問ある？
※【ひらブラ vol.15】未来から来た行商人からモノを買ってみた
※【ひらブラ vol.14】ワンフリ、ガンソ、Republique！人気アプリの「音」のヒミツ
※【ひらブラ vol.13】お台場に1000人のスマゲ開発者が集結!? CRI Uniteレポート(前編)
※【ひらブラ vol.12】行動変容の春だから…「人生をゲーム化してみよう」
※【ひらブラ vol.11】長く遊べるゲームを低コストでつくるには（ナラティブなゲームってなんだろう？）
※【ひらブラ vol.10】ゲームとムービーの歴史を振り返ってみよう！（最新の動画演出とUnity）
※【ひらブラ vol.9】目にみえないデータの恐怖と魅力（Unityオーディオの独自強化）
※【ひらブラ vol.8】CarPlayはOSか？（ゲームのリッチ化とUnityについて）
※【ひらブラ vol.7】スマホで「音ゲー」３つの課題（ハマるな危険！アプリ開発の落とし穴）
※【ひらブラ vol.6】雪を溶かすメカニズム知ってる？（プロデューサー説得トラの巻）
※【ひらブラ vol.5】ギョーカイ用語は「言葉」のブラックボックス
※【ひらブラ vol.4】gumi田村さんに訊く「ズバリ！Cocos2d-xのココが魅力」
※【ひらブラ vol.3】ドラクエの起動画面のひみつ（続・Cocos2d-xとCRIWAREの話）
※【ひらブラ vol.2】 LEDで無重力をつくる話
※vol.1-4：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは
※vol.1-3：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは
※vol.1-2：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは
※vol.1-1：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは
※vol.0：創刊準備号ということでジコショーカイ

読者の方からのご意見ご感想やご質問なども大歓迎です。以下のコンタクトフォームからどうぞ。なるべく多くの方のご意見に誠意をもってお返事したいと思っております。

幅朝徳（はば とものり）　株式会社CRI・ミドルウェア　商品戦略室 室長、CRIWAREエヴァンジェリスト。学習院大学卒業後、CRIの前身である株式会社CSK総合研究所に入社。ゲームプランニングやマーケティング業務を経て、現CRIのミドルウェア事業立ち上げに創業期から参画。セガサターンやドリームキャストをきっかけに産声を上げたミドルウェア技術を、任天堂・ソニー・マイクロソフトが展開するすべての家庭用ゲーム機に展開。その後、モバイル事業の責任者として初代iPhone発売当時からミドルウェアのスマートフォン対応を積極推進。GREE社やnhn社といった企業とのコラボでミドルウェアの特性を活かしたアプリのプロデュースも行う。近年は、ゲームで培った技術やノウハウの異業種展開として、メガファーマと呼ばれる大手製薬会社のMR(医療情報担当者)向けのiPadを使ったSFAシステムを開発、製薬業界シェアNo.1を獲得しゲーミフィケーションやゲームニクスの事業化を手掛ける。現在、さらなる新規の事業開拓や未来のサービス開発を担当する傍ら、ますます本格化するスマホゲームのリッチ化を支援するためにモバイルゲーム開発者におけるミドルウェア技術の認知向上のためエヴァンジェリストとしての活動に注力中。

趣味は、映画鑑賞とドライブ、クロースアップマジック、デジスコによる野鳥撮影、コンパニオンバードの飼育、そしてもちろん、ゲーム。

CRI・ミドルウェア　ウェブサイト
http://www.cri-mw.co.jp/