Flashの大部分がHTML5要素(ビデオ、オーディオ、キャンバスなど)に置き換えられていますが、完全にオープンな標準(Javascript、HTML、CSS)に基づいて構築されたWebベースのゲームの良い例はありますか?かつてFlashにしかなかったもの(http://www.html5rocks.com/など)の純粋なHTML5実装の例はたくさんありますが、多くのゲームはまだありません。私は何が可能か、そして何が制限なのか興味があります。
Flashの大部分がHTML5要素(ビデオ、オーディオ、キャンバスなど)に置き換えられていますが、完全にオープンな標準(Javascript、HTML、CSS)に基づいて構築されたWebベースのゲームの良い例はありますか?かつてFlashにしかなかったもの(http://www.html5rocks.com/など)の純粋なHTML5実装の例はたくさんありますが、多くのゲームはまだありません。私は何が可能か、そして何が制限なのか興味があります。
回答:
HTML5には多くの誇大宣伝がありますが、Flashが大部分はそれに置き換えられていると言っても過言ではありません。ビデオとオーディオのタグは注目を集める可能性がありますが、ゲームは優れたツールとパフォーマンスだけでなく、Swfファイルの配布を中心に構築されたビジネスインフラストラクチャがあるため、長い間待ち望んでいる1つの領域になります。 HTMLとjsに適応します。canvasを使用して見たhtml5ゲームは、おおよそFlashが7年前の場所であり、ie9が十分に広く配布されてcanvasが実行可能なオプションになるまでに、Flashは既に3dおよびハードウェアアクセラレーション機能を計画しています。
最新のブラウザをどこまで利用できるかを探求するために、私と同僚たちはQuake IIのオープンソースJavaポートをSafari / Chromeにクロスコンパイルしました(ある時点でFirefoxでも動作するはずです、最初はそうではありませんでしたが、主にパフォーマンス上の理由から)。プロジェクトはこちら:http : //code.google.com/p/quake2-gwt-port/
起動して実行するには多少の注意とフィードが必要です(たとえば、WebGLはどの出荷ブラウザでもデフォルトで有効になっていません)が、ここにビデオをアップロードしました:http : //www.youtube.com/watch?v = XhMN0wlITLk(非常に暗いのでごめんなさい-ガンマの問題が残っています)、Google I / Oのトークはこちらでご覧いただけます:http : //code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html
これらのすべての新しいブラウザー機能(WebGL、WebSocket、オーディオ/ビデオ、ローカルストレージなど)に現実的に依存することができるようになるまでの期間はわかりませんが、それらがすべて揃った場合、大きな違いが生じる可能性がありますゲームをウェブ上で直接出荷する能力。しかし、まだ多くのハードルが残っています(たとえば、MicrosoftがIE10でWebGLを実装するために息を止めないでください)。
EAのLord of Ultimaは、おそらく私が見た中で最も視覚的に印象的なJavascript / HTMLベースのゲームです。
注:戦略ゲームであり、アクションタイトルではないため、スムーズなスクロールマップが用意されていますが、直接的な対話性が得られる限り、ボタンをクリックする以外に何もありません。
「何が可能か、そして何が制限なのか興味があります。」
制限はブラウザベースです。Webkitナイトリーのようなホットなものを使用している場合、ブラウザがネイティブに実行できないことは基本的にFlashで実行できません。
私の知る限り、Google Chromeでも同様のことが可能です(そうでない場合は、まもなく可能になります)。私には完全なゲーム環境のように聞こえます:)
(私は最初のドラフトにこれらすべてのものへのリンクを含めましたが、StackExchangeは私が新しいのでそれらを投稿させません;ごめんなさい!)
jquery uiの男がjavascript / htmlを使用してAvesと呼ばれるゲームエンジンを構築しています。このビデオでは、開発中に彼が遭遇したいくつかの課題について説明しています。彼は、キャンバスがどれほど遅いか、そして現在は高速化されていないことについてたくさん話しました。
また、Effect Gamesエンジンを使用して開発された多数のゲームを見つけることもできます。エンジンはサイトにかなりサンドボックス化されているように見えますが、すべてのツールとアセットがそこに存在しています。
IMO js / htmlゲーム開発の最大の制限はサウンドです。タグは、safari / firefox / chrome全体でイベントごとに異なる方法で実行されます。これらはすべて最新バージョンでなければなりません。最後に、サファリがMP3でのみ動作し、firefoxがOGGでのみ動作することを確認しました。サーバーサイドロジックのコンボでこれを克服することは完全に実行可能ですが。
私は現在、Flashゲームを書くことに趣味があり、ポータルが受け入れを開始するか、Webアプリストアがオンラインになるまで、そのドメインがHTML5(js / css / html)によって克服されるのを見ることができません。
あなたは本当にCAATライブラリをチェックアウトする必要があります-それは素晴らしいです!これは、キャンバス用のシーングラフ(例:thing.addchild / thing2.removechild)ライブラリです。
それのこのデモは、そのページに含まれているゲームとともに私を吹き飛ばしました:http : //labs.hyperandroid.com/animation
あまりにも多くのことで、私は自分のゲームを使ってそれを使用するように移行しました。
ドロップイン、マルチプレイヤー雪合戦 http://holiday2010.ogilvy.com
あまりにも多くのことで、私はリラリを改善し、それに追加することを試みました:http ://github.com/onedayitwillmake/CAAT-Hello
githubで入手可能:http : //github.com/onedayitwillmake/CAAT-Hello/tree/circlepack
コントロールが台無しになっている/作業が必要であるにもかかわらず、私は秋葉原が好きです-http ://www.kesiev.com/akihabara/
Google Pacmanは、私が見た中で最も印象的なJS / HTMLゲームの1つである必要があります(確かに、私が見た唯一のゲームですが、それでも本当に印象的です:)
ダリウス・カゼミとダレン・トーピーによってまとめられた秋葉原図書館の優れたチュートリアルがあります: 秋葉原チュートリアル
Biolab Disasterは、html5とjsで何ができるかを示す非常に優れた横スクロールプラットフォーマーです。http://playbiolab.com/
Space StrategyゲームのSilverlight / C#から純粋なHTML5 / Javascript / Canvasへの移植を終えました。
これは2Dゲームであり、グラフィカルに非常にシンプルであるため、多くのペイントが行われないため、キャンバスの使用に適しています。そうは言っても、他のより多くのアニメ化されたゲームが同じテクノロジーを使って行っていることに感銘を受けています。ChromeウェブストアのAngry Birds:Angry Birdsのように、他の例については、Chrome Webストアの他のゲームをチェックすることもできます。
ゲームを移植した理由の1つは、JavaまたはObjective Cですべてをコーディングし直さずにタブレット/モバイルデバイスで実行できるようにしたかったことです。iOSとAndroidの両方には、これを簡単にする「WebView」コントロールがありますが、私はそれを使って少しいじくり回すのに苦労しました(私が見た限りでは、iOSはすべてのアセットが1つのフォルダーにある必要があります)。
このタイプのクロスプラットフォーム要件は、一部の人々がFlashからHTML5に移行する正当な理由ですが、欠点は、N個の異なるブラウザーとバージョンでテストする必要があり、一般的なWeb開発に関連するすべての頭痛の種があることです。これらの問題は、jQueryのようなライブラリや、ここで説明した他のHTML5ゲームライブラリ/プラットフォームによって緩和されます(ImpactJSは私が見たことがありますが、試していません)。また、これらの問題は、FireFox 7がリリースされ、IE 9+がより普及した場合にはそれほど問題になりません。
SilverlightからHTML5 Canvasへの移植に直面した問題に興味がある場合は、ブログ投稿をご覧ください:HTML5 Canvasタグを使用したSilverlightアプリのjavascriptへの移植
ImpactJSエンジンを使用した3つの優れたゲームを次に示します。
Impactは、デスクトップおよびモバイルブラウザー用の見事なHTML5ゲームを開発できるJavaScriptゲームエンジンです。
現在、HTML5で何ができるかわからない場合は、これらが現在の最良の例だと思います。ただし、これは非常にホットなトピックであるため、フィールドは急速に変化しています。
入力して撮影するスペースシューティング
このJump'n'Runで、感染したBiolabで戦いましょう。プラズマガンを使用して、動くすべてのものを撃ちましょう!探検する3つのレベルと戦う6種類の敵があります。
若いトレジャーハンターが中世の城から膨大な量の宝物を盗むのを手伝うアクションパズルゲーム。
偶然にも、今日のhtml5 / javascriptゲームに関するSlashdotに関する質問がありました。
http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming
具体的には、横スクロールのスペースシューティングゲームであるGalactic Plunderについて言及しています。
私が最近偶然見つけた本当に興味深いHTML5開発フレームワークはSenchaです。主にハンドヘルド/タッチデバイス向けですが、数年後にタッチベースにならないものは何ですか?カードゲームを含むいくつかの興味深いデモを次に示します。
エフェクトゲームの HTML5ゲームをいくつか紹介します。参加できるプロジェクトもあります。主にCrystal Galaxyデモを使用してコンパイル間の時間を短縮
サイトから:「CycleblobはWebGLおよびHTML 5キャンバス要素を使用して実装され、完全にJavaScriptで記述されています。」