【ひらブラ vol.3】ドラクエの起動画面のひみつ（続・Cocos2d-xとCRIWAREの話）

『ドラゴンクエストモンスターズ　スーパーライト（iOS／Android）』がリリースされました。みなさんは、もう遊びましたか？

このブログ「ひらブラ」読者の方からも、「ドラクエをダウンロードしたら起動画面でCRIWAREロゴを見ました！」というお便りをたくさん頂きました。

とてもステキなゲームですし、たくさんお便りも頂いたので、、、実は今回は別の原稿を用意していたのですが、それをボツにして（笑）、急きょ、ドラクエのお話をお届けします。

ボクとドラクエの出会いの話といえば、もちろん、ファミコン版の元祖「ドラゴンクエスト」からのお付き合い。…なんて書くと、すっかりオッサンであることがバレてしまうのですが（笑）、27年の月日を経ても、同じゲームシリーズの話題で老若男女を問わず盛り上がることができるのは、とてもステキなことです。

当時小学生だったボクは、夏休みの帰省中、大の仲良しだったゲーム好きの従兄弟と、文字通り「朝から晩まで」ドラクエに夢中でした。もちろんマルチプレイなんて無いですから交代でコントローラを交換しながら「共同作業」で進めていくわけですが、他人がプレイしている画面を見ているだけでも楽しかったな〜。

モンスターとのエンカウント音が鳴るたびに、期待と不安で胸が躍ったことを昨日のことのように覚えています。必ず「一緒に」電源ボタンを入れて「一緒に」プレイするという約束を一度だけ破って、夜中にレベル上げをしたのが従兄弟にバレたときは、取っ組み合いのケンカをしました。それも、今となってはいい思い出…。

そんな従兄弟も、今ではゲームをはじめさまざまな領域で大活躍する音楽プロデューサーになり、ボクも一応、ミドルウェアという縁の下の力持ち的な存在としてゲーム業界と密接に関係するお仕事を続けられています。

ふと思うんですよね、「もしドラクエがなかったら？」と…。ぜんぜん別の仕事をしている自分がいたかもしれません。たぶんですが、この業界で働いている人には同じような想いを持つ方が少なくないと思います。

さて、想い出バナシはこれくらいにして…

さっそくですが「起動画面のヒミツ」について。

アプリを初めて起動したとき、お客様から会社に電話が掛かってきてしまいました。スタート画面のままiPhoneを机の上に放置していたのですが、仕事の電話がようやく終わり、ふとiPhoneの画面を見て、あることに気付きました。

「ループしてる！！」

家庭用ゲーム機や携帯ゲーム機、ゲームセンターやショッピングモールにある業務用ゲーム機には、通称「アドバタイズ・ループ」や「デモ・ループ」と呼ばれる仕組みが搭載されています。

カンタンに言うと、ゲームを起動してスタートボタンを押さずに放置している状態（家庭用ゲーム機）やコインを入れずにお客さんが遊んでくれるのを待っている状態（業務用ゲーム機）に、ゲームのオープニングシーンやチュートリアル、CPUによる自動デモプレイなどを、無限にループして実行する機能のことです。

こうしたループ機能は、本来、ブラウン管モニタに同じ画像が表示され続けることで画面表示の機能が損なわれてしまう「焼き付き」と呼ばれる現象を防ぐために搭載されています。パソコンにあるスクリーンセーバーと同じ目的ですね。

業務用ゲーム機なら、思わず100円玉を入れたくなるような魅力的なシーンを”誘蛾灯”のように演出するのは収益に直結するとても大事なポイントです。家庭用ゲーム機の場合でも、ゲームショップや家電量販店の”試遊台”で使われるゲームソフトは製品版と同等のものが多いので、プレイヤーがつかなくてもゲームの魅力が理解できて思わず買いたくなるようにループが組み入れられています。だからこそ、アドバタイズ（＝広告のための）ループと呼ばれているわけです。

スマホの場合、画面の焼き付きの問題はまず考えられないし（そもそも本体のスリープ機能が働くので画面が消灯してしまう）、アプリというのは起動されてすぐ遊ばれることがほとんどですから、この「ループ機能」を搭載したゲームアプリというのは、実はけっこう珍しかったりします。

ぜひ『ドラゴンクエストモンスターズ　スーパーライト』をお手元のスマホで起動して（iPhoneでもAndroidでもどっちでもOK！）、画面をタップせずに、そのまま放置してみてください。ドラクエのタイトルロゴで、お馴染みの曲が終わるとともに……あとはご自分の目で確認してみてください！（※本体のスリープ設定が短いとループする前に画面が消えちゃうので注意ｗ）

スマホ向けにとっても遊びやすくアレンジされている同作ですが、しっかり家庭用ゲーム機のDNAを継承しているゲームなんだなぁ…そんな風にしみじみと感じました。

なお「ひらブラ公式facebookページ（ http://bit.ly/open-blackbox ）」のはみだしコラムでは、ドラクエの洞窟BGMのひみつについて触れる予定です。お楽しみに！

前回の記事で、ゲームエンジン「Cocos2d-x」についてご紹介したのを覚えていますか？きっとご興味を持たれた方はすでにCocos2d-xの公式サイトをご覧頂いているかもしれませんが、チェック済みの方も「まだ！」という方もぜひ、こちらのニュースページ（” Dragon Quest Monsters Super Light is On! “）をのぞいてみてください。

というわけで「次のトピック」にうつるのに、最高の流れになってきました。

では、前回の予告どおり「CRIWARE with Cocos2d-x」のお話の続きをお届けします！

Cocos2d-xとCRIWAREとの出会い

前回は「Cocos2d-x」そのものの魅力についてご紹介しました。今回は、CRIWAREとCocos2d-xを一緒に使うことで、どんなことが実現できるかをデモ動画とともに詳しくご紹介していきます。

【demo1】Cocos2d-xのスプライトに動画ファイルを指定して再生

[解説]

CRIWAREを使うことで、Cocos2d-x上で「動画」をスプライトとして扱えるようになります。

ゲーム起動時のオープニングムービーや幕間ムービーのような「全画面ムービー再生」はもちろんのこと、ゲーム画面の「特定の場所に」「好きなサイズ・解像度で」動画を再生することができるようになります。

アルファ値（透明度のこと）を持つ動画ファイルにも対応しているので、ゲーム画面の上にレイヤーで重ねて、ゲームシーンの演出目的として使うこともできます。輝度の高い「フラッシュ」や「光」のエフェクト表現は合成することで色が沈んでしまいがちですが、「アルファプラス」という加算合成の手法により、鮮やかな演出が可能になります。

【demo2】Cocos2d-xのアクション機能を動画アニメに適用

[解説]

スプライトとして再生している「動画ファイル」に、Cocos2d-xに用意されているさまざまな機能を適用することができます。

たとえば「フェードイン・フェードアウト」機能を使えば、動画を自然にゲーム中で明滅させることが可能です。「TINT」機能を使えば、動画の色あいをリアルタイムに変化させることもできます。さらに「SKEW」という機能を使えば、動画を任意の形に変形することもカンタンにできます。

【demo3】 単一の動画アニメから複数のオブジェクトを生成

[解説]

CRIWAREでは１つの動画ファイルを複数のスプライトで同時に表示することができます。このとき、動画のデコード負荷はもちろん１つ分のみでOK。

さらに、個々の動画に、Cocos2d-xのセットカラー機能等を使って、バリエーションを持たせることもできます。

CPUやメモリ負荷を抑えながら大量のアニメーションキャラクターを同時に表示したり、インパクトのある演出を行う際に役立ちます。

【demo4】 連番PNGアニメとSofdec動画アニメの再生比較

[解説]

通常、Cocos2d-x上でアニメーションを表現する場合は、連番のPNGアニメを用いた紙芝居形式を用います。この場合、ファイルサイズが大きくなりがちなうえに、すべてのアニメ画像ファイルをオンメモリに読みこんでおく必要が有るため問題になる場合があります。

CRIWAREの動画技術「CRI Sofdec2」が提供する仕組みを用いることで、連番PNGアニメと比べて遜色のないアニメーションを、圧縮率の高い動画ファイルで実現できます。オンメモリにすべてのデータを読みこんでおく必要が無いため、メモリ使用量とファイルサイズの削減に大きく役立ちます。

今回のデモ上では、256 x 256 pixel サイズ、2秒間のアニメーションですが、

・連番PNG：2.88 Mbyte（60枚）

・Sofdec版：0.71 Mbyte

とファイルサイズを大幅に削減（約1/4に）できています。

【demo5】 応用編：SofdecVideoとCocos2d-xによる動画スライドパズル

[解説]

最後は、ここまでお見せした技術デモの応用編です。

SofdecビデオとCocos2d-xを使って、動画で遊べるスライドパズルを実現しています。驚くほどシンプルなコードで、このような遊びを実現しています。

Sofdec動画をCocos2d-x上で複数のスプライトに分割して描画しており、動画再生によるデコード負荷は動画１つ分のみです。

前回の記事でもご紹介しましたが、株式会社gumiのCTO 田村祐樹さんのコメントを再度、引用します。

今回、実際のデモ映像で、上記のことがご理解頂けたのではないかと思います。

このブログをお読み頂いている方にはプログラマの方も多いと思いますので、もう少し専門的な話をします。

コードで見るCRIWARE with Cocos2d-x

通常、アプリケーション中に動画を表示するためには「動画ファイルの読み込み→フレームのデコード→デコード結果の描画」という流れをプログラムにより実装しなければなりませんが、CRIWAREを用いてCocos2d-xで動画を扱う場合は、複雑な実装はまったく必要ありません。 

Cocos2d-xの画像スプライトクラスである「CCSprite」を継承したクラスをご用意しているので、通常のCocos2d-xのインタフェースで動画スプライトを画面に表示することができます。

上の２つのコードを比較して頂ければお分かりのとおり、画像スプライトと動画スプライトを作成する場合、コード上では、指定するファイルが画像か動画かの違いしかありません。

あとはアップデート関数等でデコード関数を１つ呼び出すだけで、ゲームシーン上に動画が表示されます。

とてもカンタンに扱えるのがお分かり頂けるかと思います。

CRIのCocos2d-x用SDKは、動画スプライトをはじめ複数のクラスのソースコードをサンプルとして丸ごと提供していますので、用途に合わせて自由にカスタマイズすることができます。

今回デモ用に作成した動画スライドパズルは、SDKに含まれる動画用バッチノードを少しだけカスタマイズしたものです。動画用バッチノードとは、いわば「１つの動画ファイルを複数のスプライトで同時に再生するクラス」です。これをいじって「１つの動画ファイルを複数のスプライトに分割して再生するクラス」を作りました。

たとえば、5×4のピース数の動画パズルを作成する場合、

のように記述しています。

これで動画の一部分を再生するスプライトが5×4の20枚出来上がるので、あとは位置やサイズを指定すれば簡単にパズルを作ることができます。

…ちょっと専門的な話になってしまいました。

「ぜひ、CRIWAREをCocos2d-x上で使ってみたい！」という方は、お問い合わせ下さい。すぐにお試し頂けるよう、サンプルコードとセットで「SDK（Software Development Kit）」をご提供しております（試用は無料ですのでご安心下さい）。

次回はいよいよ、Cocos2d-xの話題の完結編です！

株式会社gumiの田村さんと対談しながら、Cocos2d-xの魅力を分かりやすくお届けできればと思います。お楽しみに。

【ひらブラ公式facebookページが開設！】

最新記事の更新情報や、記事には書けなかったウラ話など、『ひらブラ』に関する情報をもりだくさんでお届けします。ゲームクリエイターとのインタビューやお寄せ頂いたコメントの完全版もお読み頂けます。

http://bit.ly/open-blackbox

【バックナンバー】
※vol.0：創刊準備号ということでジコショーカイ【CRI幅朝徳のひらけ！ブラックボックス】
※vol.1-1：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは【ひらけ！ブラックボックス】
※vol.1-2：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは【ひらけ！ブラックボックス】
※vol.1-3：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは【ひらけ！ブラックボックス】
※vol.1-4：福袋も飛行機もゲームも？ゲーム開発を支える”黒い箱”とは【ひらけ！ブラックボックス】
※【ひらブラ vol.2】 LEDで無重力をつくる話
読者の方からのご意見ご感想やご質問なども大歓迎です。以下のコンタクトフォームからどうぞ。なるべく多くの方のご意見に誠意をもってお返事したいと思っております。

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

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

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