「Pex」のご紹介と歩き方

 

みなさま 初めまして、@sou と申します。

 

普段はフロントエンド全般の助っ人としていろいろなタイトルを飛び回っています。

最近は Pex を使った案件をさくさくとこなしておりました。

 

今日はその Pex についての、簡単な紹介や歩き方などをざっくりとご案内したいと思います。

 

 

Pex とは JavaScript で記述された HTML5 の為の SWF 再生エンジンであり、Pex を使うことで Flash でオーサリングした SWF コンテンツをそのまま HTML5 の一部品として扱うことができます。

元々 ExGame という JavaScript で書かれた Flash Player が存在し、いままでも Mobage の数多くのタイトルにおいて使われてきましたが、Pex はExGame の後継ライブラリとなります。

 

そして何と!

 

この春 4/16 よりオープンソースとして提供が開始され、目的・場所を選ばず様々な用途に使って頂ける更に便利なプロダクトとなりました。

 

Pex 誕生の経緯

後継と書きましたが開発目的に少し違いがあります。

ExGame がいわば「手間なく楽に Flash を再生できるプレーヤ」であったのに対し、Pex は「Flash をそのまま HTML5 コンテンツの一部として再生、制御するライブラリ」を目的として開発されました。

勿論 Pex も ExGame のように一行さっくりポンで Flash コンテンツを再生できますが、フロントエンドエンジニアが様々な JavaScript ライブラリや HTML5 の機能群と組み合わせて使いこなしてこそ本当の力を発揮するツールです。

Pex を経由して SWF にアクセスすることで

例えば内部変数を書き換えてステータス値や台詞を変更する、ActionScript ロジックを操作するといったことは勿論、再生・停止から FPS の変更、gotoAndPlay を発行してアニメーションを制御したりと JavaScript から Flash コンテンツをフルコントロールすることが出来るようになります。

勿論、アニメーションとサウンドを組み合わせる、ユーザの操作に合わせ通信を行うといったこともさっくりと実現できます。

クリエータから幅広い支持を得ている最高のオーサリングツールのひとつである Flash と、HTML5、いまどきのブラウザが備える高度な機能性を融合させ、高品質かつ機能性に富んだコンテンツを開発可能にする、、これが Pex の意図する所です。

 

Pex の歩き方

Pex 本体はGithub にて提供されています。

また API ドキュメントとチュートリアル&ノウハウ集である Pex Textbookが別途提供されています。

また Mobage にゲームを提供して頂いているパートナーデベロッパーさまであれば Mobage Developers Japan(デベロッパーサイト)を通じて上記をひとつにまとめ、またフルスクリーン化などの機能を与える補助ツール Pex Player も同梱したパッケージを提供させて頂いております。

※デベロッパーサイトについての詳細は Mobage Deveolpers Japan(デベロッパーサイト)をご覧頂くか(パートナー登録が必要です)、当社窓口までお問い合わせください。

 

Pex を初めて使われる場合は何はともあれ Pex Textbook のチュートリアル部分を読んで頂くのがお勧めです。

一通り読んで頂くことで Pex の概要や機能のおおまかな部分に触れられます。

また補助ツールである Pex Player はフルスクリーン表示、解像度の自律調整、タッチ座標検出、MovieClip の操作を簡易化した API 提供等々、Pex を用いる上で利用度の高い様々な機能をサポートしています。

特に gotoAndPlay(Pex API では gotoFrame)に対するコールバックの管理を行う機能は必須といえるほど需要度が高く、当社で ゲーム開発を行う際も頻繁にセットで使われています。

Pex Player 個々のより詳細な機能については、同梱の README.md に記載があります。

また Pex は、ExGame もそうですが、100% JavaScript で記述されたランタイムであり、HTML 単体で完結して動作します。

ときどき間違われるのですが、サーバを介したデータ変換のような作業・手間は不要であり、HTML、JavaScript、SWF のみを必要とし、ブラウザ上でそのまま動作が可能です。

この特徴も大変美味しく、

例えばサーバの実装を待たずにクライアントから率先して開発を進めたり、また Flash クリエータ向けに確認用の HTML Viewer をさくっと書いて、パブリッシュしたものを即再生出来る環境を整えたり、と、生産性向上に大いに役立ちます。

 

Pex のメリット・デメリット

世の中、Pex 以外にも様々なアニメーションライブラリや JavaScript ゲームエンジンがあります。

この Mobage Developers Blog はユルく書いて良いよ と言われているので、ぶっちゃけどうなのよ的な話もさせて頂きますと、、

いま現在、仕事でゲームコンテンツを作るのであれば、Pex は大変良い&現実的な選択肢だと思います。

「現実的」というのがミソです。

個人的な趣味で言えば凝った CSS アニメーションも勿論、Canvas ベースのゲームエンジンであっても組み入れたいものは色々と存在します。

ですが、自由に作ったコンテンツは往々にして特定の Android 端末で動作せず、また習熟を要するライブラリであると引き継ぎや生産性に問題を抱えたり、モノによっては端末を分けたチューニングコストが必要になるといった、突発的な問題に襲われます。

結果として工数が想定外にハネて開発遅延につながったり、非対応端末が増加したり、、

そんな落とし穴を避ける為に、現場にはある程度の決まったカタが必要になります。

今であれば CreateJS でがっつりとノウハウを積むか、Pex に舵を切るか、はたまたその合わせ技か、、

その辺りが選択肢になると思います。

 

多くの端末で安定して動作する

Pex を使うメリットのひとつはその安定性にあります。

ご存知のように Android(Android Browser)は端末ごとに様々な問題を抱えており、まず書いた JavaScript コードがどの端末でも動作する、といったことが期待出来ません。

またその端末数も多い為、非動作問題や端末のフラグメンテーションに対しては、予め対策を立てて臨む必要が出てきます。

新規タイトルであれば動作端末をあらかじめ絞る手段もありますが、それでもシェアの高い端末で問題が発生した場合にやはり改修を避けて通れない等、何かしらの諦めや対応が必要になります。

また既にリリース済みのタイトルに新機能追加や改修を行う場合は更に問題となり、いままで遊べていたものが「今日から遊べません」というのは許容し難く、新規タイトル以上に動作端末のカバー率が問題となります。

ExGame もそうですが Pex も、この動作端末のカバー率が際立って優れています。

両者には既に様々な Android の問題に対する回避コードが細かく挿入されており、また Pex の関連部署では今まで問題の発生した SWF を溜め込んでおり、新バージョンのリリースに際して、また iOS のアップデートや Android のフラグシップ端末の発売など折々に応じて QA を行い、問題があれば調査・解決して動作安定性を高めるといった対応が行われています。

動作性能も比較的安定してこなれており、例えば Android の少々古い端末であっても、極端に性能劣化や描画遅延が起こる、といった事例は少ないように思えます。

このように既存端末は勿論、新しい端末の動作に関してもある程度の担保が取られているライブラリ、ゲームエンジンは他に無いように思います。

 

既存ノウハウ、経験をそのまま活かせる

また他のメリットとして、既存コンテンツや開発体制との相性の良さが挙げられます。

運営中のタイトルのように フィーチャーフォン(以下 FP)にもゲームを提供している場合、新機能を開発しようと思うと、スマートフォン(以下 SP)向けのものと加えて まるっと2セットの開発が必要になります。

ですが Pex を用いた場合であれば部品単位で互換性がある為、この工数をざっくりと削ることが出来ます。

FP 向けのコンテンツは従来のようにサーバ側で SWF 部品を合成して配信し、

SP 向けのコンテンツはその SWF 部品だけを流用し、SP 向けのフルスペックコンテンツとしてがっちりと作り込む、といった両方を押さえた開発が可能であり、実際に事例もあります。

Pex には変数差し込み、画像置換といった、サーバサイドでの SWF 合成に必要となる機能の大体が備わっており、このような開発がやりやすくなっています。

またこれら既存ワークフローとの互換性は、クリエイティブ面での生産性や品質の担保にもつながります。

クリエータは今までの Flash Lite コンテンツで培った経験やノウハウ、作り方をそのまま活かして取り組むことができ、

その上で今まで難しかったような新しい挑戦を - 例えば加算合成によるエフェクトを加えたり、あるいは SWF の容量制約を緩和してより演出面、ゲーム性を高めたり、といったような、今までの経験やノウハウをベースに新たな積み上げを図る開発スタイルをとることが可能です。

 

Pex のデメリット

どんなツールにもデメリットはありますが、Pex であればやはり Flash Lite 1.1 のスペックに縛られることです。

最早 Flash CC では書き出し不可能なフォーマットであり、そろそろ脱 Flash Lite したいクリエータの方も多いと思いますが、諸々の都合から Pex で扱えるのはこの Flash Lite のフォーマットに限られています。

もうひとつはオーバーヘッドが存在すること、

先ほど動作性能もこなれていると記載しましたが、やはり JavaScript で記述したランタイムの上でアニメーションや ActionScript VM を回している為、オーバーヘッドは存在します。

特定端末に対する回避コードの存在も、安定性向上との引き替えに、オーバーヘッドの一因となっています。

但し、ちゃんと JavaScript 側にロジックを持たせ、かつ Pex Player が提供するような端末性能に合わせた細かな解像度調整を行うシステムを導入することで、このオーバーヘッドはあまり気にならないレベルに収まっている、と思います。

やはり辛いのは Flash Lite を強いられる点でしょうか。

途中記したようにそれを置いてもやはり高い動作安定性は魅力的です。

実際に端末起因のブラウザクラッシュや描画破綻は発生しますし、発生した場合にタイトルでカバーできる工数に収まらない場合が大体です。

Pex を選択しておけば、こういった問題の影響、発生を最小減に抑えてチームは良いゲームを作ること、本来作りたかった部分に力を集中することが出来ます。

やはりいま現在、何かを選べと言われれば、私であれば Pex を選ぶな…と、そう思いつつ現場で今日も Pex を使った開発を続けています。

 

未来は?

少し話題が逸れますが、モバイル Web の現実を語ると大体上のような「選択肢無いよ」的な微妙なトーンに落ちていくのですが、これら全ては今のモバイル Web の動作環境が未成熟である為だと、個人的に思っています。

作ったものを動かす為にノウハウや特別な何かが必要になる、オーサリングツールのような決定的なパーツが不足しがちである等々、、色々と問題があります。

ところがそのモバイル Web の環境が、ここ半年で急速に発達を遂げてきた手応えを覚えています。

ひとつは低価格帯を中心に端末性能が必要十分以上に向上したこと - 大体の問題やノウハウは性能が上がると消え去りますが、そのポイントをちょうどここ最近発売された端末群が超えつつあります。

もうひとつは Android 周りの変化、KitKat から Android Browser のコードが一掃され、Chrome for Mobile がモバイル Web の中心に移りつつあり、やっとモバイル Web の環境が正常なものに生まれ変わろうとしています。

また着々と Chrome と共に Web 関連技術のアップデートが進められ、再び Web がエキサイティングなものに生まれ変わろうとしています。

国内ではモバイル Web と聞くとどちらかと言えば枯れたマーケットとして認識されていると思いますが、グローバル観点では今まさに発達と普及は始まったばかりで、これからが本番であると見ています。

 

未来を考えるとワクワクしますね。

 

上手いこと未来に投資する為にも、Pex を使い倒せる部分は使い倒して、最高に楽しいゲームを作ることに力を集中する、、その為のノウハウが少しでもシェア出来ればと思っております。

ちなみに冒頭の画像は農園ホッコリーナより借りてきたキュートないたずら動物です。

こんな動物たちを Pex であれやこれや操作してしまう。。! といったような様々なノウハウや使い方の紹介も、また次回改めてお伝えできればと思っております。

 

またお会いできることを楽しみにしております。