ARでストツー！？制作秘話 - サントリー THE STRONG -
2022年、春のスッキリと晴れたある日、代理店のクリエーティブ・ディレクターから「ストツーって分かります？」 との突然の連絡がきた。
ストツー？スーパーファミコンのストリートファイターIIでしょ？分かるもなにも、格ゲーの中では1番ハマった。 なにかこれは面白い相談な気がするぞ！
と直感的に思い、
「なにか新しくストツーのプロモーションを手掛けるんですか？」と尋ねたところ、予想外の返答が電話口の向こうから返ってきた。
「ストツーをARで作りたいんですよ！」
ARでストツー！めちゃくちゃ面白そう！THE青春の格ゲーをARで蘇らせるなんて！
ただ、キャンペーンで実施ということは、ユーザーにアプリをダウンロードしてもらうなんて手間はかけられない。
となると、Web ARですよね。我々の得意領域です。お任せあ、、、れ、、あれ、？Web ARでストツーってどうやって作るんだろう…。
ARで出現したキャラクターが十字キーで動いて、Pボタンを押せばパンチして、そしてあの体に染み付いているコマンドを入力すれば波動拳が出る、というトコまではすぐにイメージした。
現行のスマホスペックでそんなゲーム性の高いことができるんだろうか？
データ容量は？なにかしらの演出はあるだろうし、その処理にも当然負荷がかかるよね？キャラデータってどんな形式なんだろう？あれ、スーファミって何フレームだっけ？
などなど、少し気がかりな部分はあったものの、一旦は企画概要を共有してもらうことに。
（あ！サントリーTHE STRONGのキャンペーンだから、ストロング・ファイターなのか！）
ふむふむ。。
アプリであれば端末の性能をフルに使えるが、Web ARはブラウザの制限の中でやりくりしなければいけない...。そして、OS自体にあるAR補助機能を使えないため、ARライブラリの計算の隙間に演出を行うことになりフレームレートも一定しない...。
しかし、Web ARはマスト要件っ！
スッキリと晴れた空だったはずなのに突然雷雲で覆い隠され（てないけど、実際には）、強烈な不安が襲いかかってきたのだった。
いやいや、できちゃいました！！！
最初に感じた不安はなんのその。サントリーさま、CAPCOMさま、代理店とアタリ開発チームの強烈なチームプレーを発揮して「ARでストツー」がカタチとなりました！！！
そもそも、Web ARコンテンツとは、例えばこのようなものです。
https://www.youtube.com/watch?v=3QSr6E372tI
今回の要件をざっくり箇条書きすると、
・プロダクトをマーカーとしてARを発動させる
・キャラクター、氷山、そして操作系UIを複数レイヤーに分けてARで出現させる
・位置座標が精緻に設定されたキャラクターをUIで動かす
・氷山への攻撃に対してアタリ判定をつける
・ダメージ数やスコアを緻密に計算したものを演出に反映させる
・決めカットの演出を見せ、スコア結果をシェアできるようにする
といった内容です。
.......複雑がすぎるよ！この要件を仕様書にまとめると100ページは超えるよ！という、Web ARとして結構すごいレベルにチャレンジしたプロジェクトでした。
*本プロモーションはACC TOKYO CREATIVITY AWARDSファイナリストに入賞いたしました。
詳しくは以下よりご覧ください。
以下、開発秘話的な小ネタです。
ーーーーーーーーーーーーーーーーー
「よっしゃー！ストII AR作るぜ！」と息巻いたものの、冷静かつ沈着に通常のブラウザで動作する2Dゲームをまずは制作しました。
この大きな目的は、検証やデバッグを簡単にできるようにするためです。
特筆すべきポイントは「十字キーでの操作」です。
「タッチパネル上の仮想コントローラー操作でキャラが動く」という今回の企画の骨子となる動作を実現するために、まずキーボード操作で遊べる2Dゲームを作り、仮想コントローラーの操作をキーボード操作のイベントに置き換えて通知する仕組みを作りました。
これによってデバッグイテレーションを細かく入れることができる、つまり、技や感触を近づけることが容易になったわけです。
また、前進！パンチ！ジャンプ！キック！などのキー入力は、前回のフレームから最新のフレームまでの間に入力されたキーを、順に格納した履歴と照合すると該当するアニメーションが実行されます。
例えば皆さんご存知の波動拳のコマンドは「↓↘→P」となります。
つまり、1つ1つのキー入力を処理するだけではリュウの手から波動拳は出てきません。
今回の「必殺技のキー入力」のカラクリは、以下のように実装していることです。
各種必殺技のコマンドはリスト化したデータとして保持しており、
前のフレームまでのコマンド入力履歴と結合して、リストにあるコマンドと一致したコマンドの並びが見つかった場合には、
既に格納された入力コマンド履歴を消去して、
割り込み可能なアニメーションであった場合のみ、別のアニメーションへと切り替える
そうすることでフレームレートが安定しない環境においても「単純な1つ1つのキー入力に合わせた動き」ではなく「キー入力をプログラム上で複合させたストツーの動き」を可能としています。
その他にも、ARの表示に対してだけでも端末がまあまあなリソースを確保して動かしているため、上記のようなプログラム的な処理との局地的なせめぎ合いを調整したり、オーディオ周りに関してブラウザ依存の独特な挙動を検証し続けたりと…
細かい裏側の調整も山程ありました。
ーーーーーーーーーーーーーーーーー
前からはベガがサイコクラッシャーで迫ってきており、後ろからは鉤爪を光らせたバルログが飛んできているようなスリリングな状況ではありましたが、
我々もリュウと同じ心持ちで己を信じて進んだ結果、無事に最高のコンテンツを制作することができました！
「これをやってみたい！」ということを”実現するチカラ” の正体は、クライアントさまや代理店や制作会社の垣根を越えたチーム全体の「めちゃくちゃ面白そう！一緒にチャレンジしましょう！」というピュアな想いなのかもしれない、
と改めて感じられた素晴らしいプロジェクトでした。
そして最後に、
皆さんも是非、サントリーの強炭酸水「THE STRONG」を購入して「ストII AR」を体験してみてください！！
▼ストロングファイタープロジェクト 特設ページ
https://www.suntory.co.jp/water/tennensui/strong/strongfighter2/
▼キャンペーン期間
2022年6月26日〜2022年9月上旬予定
「僕もリュウのように波動拳を出せるようになりたい！」などのご要望は弊社スタッフ総動員で頭を悩ませますが、
アタリでは広告として最適なAR表現などもプランニング & 制作させて頂きます。
「こんなコトやりたいんだよね！一緒にできないかな！？」というご相談ほど楽しいものはありませんので、ぜひお気軽にご相談ください。
【メンバー募集！】先端技術でワクワクする広告をつくりませんか？
株式会社アタリでは現在、一緒に働くメンバーを募集しています。
業界経験がなくても、以下に当てはまる場合はお気軽にご応募ください！
◯ 先端技術や最新トレンドに興味がある方
◯ 面白いことや驚きを届ける仕事をしたい方
◯ これまでにない新しいコトを実現するために努力できる方
一緒に”アタリでしかできないワクワクする仕事”を経験しませんか？
募集中の職種は以下のボタンからご覧ください！
ご応募お待ちしております！
