タスクの説明
iOSでのFlashテクノロジーのサポート（またはその欠如）の現在の状況により、「クリーン」なブラウザーテクノロジーでリッチグラフィックスを使用したゲームを実装する可能性を確認するよう求められました。 正直なところ、Flashは私のお気に入りのプラットフォームからはほど遠い（オープンソースではなく、閉じたAdobe製品であるため）、それなしで良い結果が得られることを示すモチベーションを追加しただけです...
ただし、個人的な好みにもかかわらず、Flashは単一のランタイムを提供するだけでなく、多くのプラットフォームで同様に実装されているだけでなく、今日では完全に置き換えることのできない豊かな開発環境も提供します。
その結果、技術レビューは、大量のプラットフォームで最終製品をサポートする能力とソフトウェア開発の利便性の間の妥協のように見えました。
サポートする必要があるブラウザプラットフォームのリスト：
- Explorer 9+
- Firefox 3.6以降
- オペラ
- クロム
- サファリ
- iOS MobileSafari
- WebKitのAndroidブラウザー
また、デザイナーとの対話の便利なプロセスを作成する必要があります。
今日、私の意見では 、Flashデザイン環境に代わる適切な代替手段はなく 、アニメーションのスクリプトを作成し、オブジェクトモデル（「 シーングラフ 」）を含み、Adobe Illustratorやデザイナー向けのその他の作業ツールと自由に統合できます。
商用ベンダーのよく踏まれた道を離れるとすぐに、グラフィックをデザイナーからフロントエンドプログラマに移行する方法を決定する責任が私たちにあります。
検索が始まります
最初、 SVGは高レベルのグラフィック言語としてテストされました。 次の利点があります。
- 比較的高いレベルの抽象化-独自のオブジェクトモデルがあり、イベントを処理できます。
- パスに沿ったオブジェクトの移動、形状のモーフィング、宣言型アニメーションなどの複雑なアニメーション要素をサポート
- ベクター形式のすべての利点
- フォーマット自体のオブジェクトモデルは、シーンオブジェクトモデルであるシーングラフの必要性をいくらか置き換えます。
- SVGは、さまざまなグラフィックアプリケーションで簡単にエクスポートおよび読み取りできる一般的な形式です。
このような利点のリストがあれば、テクノロジーは完璧だと思うでしょう。 ただし、テスト中に次の欠点が現れました。
- 実装のレベルと複雑な標準のサポートは、ブラウザとプラットフォームで大きく異なります
- 一部のプラットフォームでは、実装が非常に遅くなります。
- SVG（DOM）オブジェクトモデルは非常に複雑であり、オブジェクトを動的に追加および削除する必要があるシーンでの作業が困難です。
その結果、 処理を容易にするためにCanvasをProcessing.JS抽象化ライブラリとともに使用して、より低いレベルでアプローチを試みることが決定されました。 利点：
- Canvasは単純な標準であり、その結果、最新のブラウザーで広くサポートされています。
- 処理は、たとえばSVGをインポートすることを可能にする抽象化の追加レベルを提供します。
- Canvasは、キャンバスをピクセル単位で制御します。
Canvas / Processing の最初のテストシーンの実装では、多くの基本的なSVG機能が欠落しているため、手作業で仕上げる必要がありました。 例：
- オブジェクトの軌跡
- マウスアクションに対するオブジェクトの反応
- アルゴリズム的に実装するのが難しいモーフィングフォームは、スプライトアニメーションに相当するものに移行され、ステップバイステップアニメーション自体がInkscapeエディターに実装されました。
その結果、ブラウザーゲームを作成するための実際のクロスプラットフォームソリューションを取得できる場合、これらすべての欠点に目をつぶることができます。 これを確認するために、実際のゲームに近い新しいデモを作成することにしました。 残念ながら、MobileSafari（iOS）ではCanvasは引っ張らず、非常に低いフレームレートで実行されることがすぐにわかりました。
デモを最適化する試みが行われました（フレームごとの背景の再描画がキャンセルされ、画面上のオブジェクトの数が減り、オブジェクトのテクスチャがキャンセルされました）。 しかし、結果はまだ不十分でした。
解決策
この時点で、非常に明確で明確な目標を達成するためにかなりの時間を費やしましたが、別のアプローチを考えざるを得ませんでした。 結局のところ、このチェーンの弱いリンクはiOSであり、ブラウザーの選択が制限されているすべての低速なモバイルプラットフォームです。
これらのデバイスでは、高速グラフィックスはネイティブグラフィックスアクセラレーションを使用してのみ実現可能です。 MobileSafariでは、これは単なるHTMLオブジェクトモデル（DOM）です。
この考えが、テーブルのブラックジャックデモがやり直されたという事実につながりました。今回はHTMLとCSS3を使用しました。 サウンドも追加され、いくつかの透明効果が追加されました... 移行直後に、MobileSafariのフレームレートが改善されました。
追加の読み取りと特別な最適化を行った後、速度はさらに高くなりました。 iOS 4.xでは、MobileSafariは部分的にしか加速されないため、DOMにアクセスする方法を慎重に選択して、このブラウザーからすべてを絞り出す必要があることがわかります。
個人的には、CSS変換とHTMLだけを使用して、リッチなグラフィックを備えたブラウザーゲームを実装できる可能性に驚きました。 高度な技術の形で「銀の弾丸」の検索に受け入れられて、私は他のすべての可能性をテストして脇に置くまで、ウェブプログラミングの「パンと塩」をほとんど逃しました。
CanvasとSVGにはそれぞれの場所がないということを言いたくありません。 ただし、前述の目標により、SVGは静的な複雑な図には適さなくなり、Canvasはこの世代のAppleデバイスを使用しません。 残るのはCSS3だけです。
共通のプラットフォームの分母によって決定されるこのテクノロジーの選択により、デザイナーのソースコードからグラフィックを処理およびアセンブルするプロセスを単一の形式にデバッグすることができました。 しかし、その別の時間については..
ソースコードリンク
このテキストのすべてのコード例は、ライターのGithubアカウントからダウンロードして表示できます。