アドビ システムズが主催する、Adobe Developer Connection(ADC)と連動した開発者向けイベント「ADC MEETUP」。第4回目は、「Social Gaming」をテーマとして2月28日に開催された。

そのセッション3では、フリーで活動している中野亘氏が自ら手がけたiOS/Androidアプリを例に、Flashでスマホアプリ制作するメリットや直面した問題など、貴重な開発秘話を紹介してくれた。

中野氏は、もともとデザイン畑の人である。独学でMacromedia DirectorやFlashを修得し、shockwave.comにオリジナルゲームを発表したり、ナムコの「ことばのパズル もじぴったん Webおためし版」などを手がけた。その後、Flashエンジニアとして制作会社に務め、Flash Lite向けのゲーム開発を行った。そして、昨年フリーとなり、これまでに3本のiOS/Androidアプリをリリースしている。

この3本のアプリは「99%Flashのみで制作した」とのこと。最初に中野氏が取り上げたのは「きょうのしかく」だ。

1 1日5秒ゲーム日めくり「きょうのしかく」

「きょうのしかく」とは、四角形オブジェクトを操作して、今日の日付の数字を表示させるという、365日のゲーム日めくりカレンダーだ。もともとはWebコンテンツで、中野氏がActionScript 3.0の学習を兼ねて制作したものだという。そして、iOSがAIRアプリをサポートしたことをきっかけに、スマホアプリへ移植することになった。(→ビデオ時間 14:10)

Web用では、1日ごとにゲームのswfファイルを分け、つまり365日分のswfファイルを用意し、該当ファイルを読み込むという構造になっている。しかし、iOSではswfファイルを扱えない。

そこで中野氏はどう解決したかというと、プログラム的な手段は知識がないので諦め、ストレートに「1つのflaファイルのタイムラインにまとめる」という手段を取った。

365日分、1つひとつflaファイルを開いてコピペし、実機で確認。その作業は地味で辛かったそうだが、処理速度が遅くなる部分や、タッチ操作だと意図しない反応となるコンテンツなど、改善点を見つけることができたと中野氏は述べる。

この移植作業について、中野氏の感想は「ほぼコピペで済みました。Flashだからこそできたという感じです。拍子抜けするほど簡単でした」。Android版についても同様で、解像度の調整やHOMEボタンへの対応などが必要なものの、基本的にはiOS向けのソースファイルをそのままに、パブリッシュ設定をAndroidに変更するだけで作れたそうだ。

Android版のデバッグは1週間もあればできるようで、iOSとAndroid両方のアプリを作る場合のアドバイスとして、「まずiOS版を作って、その審査待ちの間にAndroid版を作ると効率よくできます」。

2 思考型パズルゲーム「ワクチンケース」

ワクチンケース」とは、タッチ操作でケース内のパーティションを開き、ワクチンを流し込んでウイルスを退治する思考型パズルゲームだ。もともとはshockwave.com用に企画していたアイデアで、当時は制作するまでに至らなかったものの、あらためて操作性や作品規模がスマートフォン向きということに気づき制作することになった。(→ビデオ時間 21:45)

作り始めると、いくつかの問題点に直面した。まず中野氏が挙げたのが、「指の存在」。小さいボタンを押すときに指で隠れていしまい、マウスダウンの効果が見えない。画面端のボタンを押すときに画面が手の甲で隠れてしまう。

アプリを自分で作り始めると、思っていた以上に指や手が邪魔な存在だと気付かされたのだという。そのため、「オブジェクトの配置は、プレーヤーがデバイスをどう持つのか、どう操作するのかを考えた上で設計する必要があります」と中野氏は語る。

※中野氏によるADC記事「モバイルゲーム開発を目指すデザイナーさんへ 基本だけど大切なコト」では、ワクチンケースにおけるオブジェクトの配置について詳しく解説しています。

 

中野氏が次に挙げたのが「タッチの有効範囲」だ。アップルのヒューマンインターフェイスガイドラインでは、タッチ操作の対象となるオブジェクトは44☓44ピクセル以上とすることが推奨されている。また、見た目が小さくなる場合は、透明オブジェクトで補足して44☓44ピクセル以上のタッチエリアを確保することが必要となる。

ワクチンケースの場合、44☓44ピクセルよりも小さい「白いパーティション」をタッチして遊ぶようになっている。さらに、正方形の「面」ではなく「辺」をタッチすることになる。正方形の透明オブジェクトを普通に配置しては、1つの透明オブジェクト内に2つも3つもパーティションが含まれてしまう。ワクチンケースでは、どのようにしてタッチの有効範囲を確保しているのだろうか。

中野氏は「未解決のままだけど」と前置きした上で、その手段を説明した。ワクチンケースでは、正方形の透明オブジェクトを45度傾けた状態で配置し、タッチの有効範囲ができるだけ重ならないようにしている。

ただ一方で、傾斜配置したことにより、座標からタッチポイントを割り出すことが難しくなったという。プログラムでの解決方法を模索したが答えが出ず、パーティションが集中しないようなステージデザインを心がけることで対処したとのこと。

※45度傾けた際の座標取得方法について、野中文雄氏がF-siteで解説されています。あわせてご覧ください。「F-site | [AS3] 45度回転した矩形領域に対するクリック座標の判定

次に挙げたのが「描画速度」だ。ワクチンケースのグラフィックのほとんどは、ベクターで描かれており、フィルタ効果を使っている。描画処理に負荷がかかるので多用は避けるべきだが、ゲームの終盤のステージとなると必然的にウイルスの数が増え、処理が非常に重くなってしまう。ただこの件に関しては、AIR 2.6からAIR 3.0にアップデートしたら、すぐに解決したとのこと。

3 なつかしの電子ゲーム「スリラーマンション」

最後に紹介された「スリラーマンション」は、ゲームウォッチ風のアクションゲームだ。このアプリは趣味で制作し、通常のテクニックを使っているだけということで紹介のみにとどまった。(→ビデオ時間 28:15)

ただ、中野氏はこれを「年末年始の1週間」で作り上げたという。

「思いついたらすぐに、そして気軽に作れるというのがFlashのよさではないでしょうか。みなさんもぜひアプリを作ってみてください」

関連記事

ADC MEETUP ROUND 04「Social Gaming」レポート