WebGL を使用して 2D ゲームを構築しようとしています。WebGL が提供するハードウェア アクセラレーションが必要ですが、キャンバス タグの 2D キャンバス コンテキストから取得できません。
そうは言っても、webGL を使用して 2D スプライトを作成するチュートリアルはありますか? または、さらに良いことに、WebGL 用の 2D スプライト ライブラリはありますか? 理想的には、 WebGL に移植されたcocos2dのようなものを探しています。
当然のことながら、私が見つけた WebGL 用のデモ、チュートリアル、ライブラリはすべて 3D 操作に重点を置いています。2D スプライトをサポートする WebGL ライブラリはありますか?
canvas 2D API は webGLでここにあります。
私は間違っているかもしれませんが、2D キャンバス API は、ブラウザーがハードウェア アクセラレーションを利用できるように設計されていると思っていましたが、まだ選択していません。WebGL の進歩に伴い、canvas 2D の実装が劇的に改善されることを期待しています。
私は最近、素朴な (しかし機能的な) キャンバス フォールバックを備えた webgl で書かれたシンプルな 2D ライブラリを github にプッシュしました。cocos2d と同じシーン グラフを使用しています。http://github.com/funkaster/ChesterGL で確認できます。100 % 機能するわけではありませんが、単純な 2D ゲームを作成するための出発点として使用できます。
3Dでの2Dは非常に簡単です。すべてのオブジェクトを平面に配置し、ビューポートを拡大縮小して、その平面の目的の部分を描画するだけです。
いずれにせよ、ほとんどの人のブラウザでWebGL機能が見つかるまで約10年かかります。キャンバスを使用せずに長い道のりを歩むことができる適切な方法を使用すると、グラフィックの事前レンダリングされた回転を使用するコツは、「スプライト」アニメーションとともに、JavaScriptゲーム開発者に知っておく必要があります。
重要な質問は、あなたはただツールで遊んでいるのか、それとも人々が遊んで楽しむことができるはずのゲームを作っているのかということです。
gl.POINTS 描画モードを使用して、ポイントの代わりに各ポイントでテクスチャ (スプライト) を描画できることに注意してください。サンプラーを使用するだけです。それは本当に強力です。
Pixi.js は、現在最も安定しており、アクティブです。
これは少し即席かもしれませんが、誰かが 2D オブジェクト操作用の優れた WebGL ラッパーを見つけようとしている場合に備えて、努力する価値があると思います。canvas 要素の上にインタラクティブなオブジェクト モデルを提供するfabric.jsを強くお勧めします。また、SVG からキャンバス (およびキャンバスから SVG) へのパーサーもあります。公式 Web サイトのデモセクションは、この JavaScript ライブラリの可能性を明確に示しています。