ゲーム開発に適したJSライブラリとは何ですか？[閉まっている]

56

テキストとグラフィカル（2d）の両方の単純なゲームを作成する場合、どのライブラリを使用しますか？（HTML5互換ブラウザを使用していると仮定します）

私が考えることができる主なもの

  • 画面上のテキストのレンダリング
  • スプライトのアニメーション化（images / cssを使用）
  • 入力（矢印キーをキャプチャし、マウスの相対位置を取得）
  • おそらく、リソースを事前に読み込んでいるか、リソースを動的に読み込んで順序を選択している
  • サウンド（ただし、これが最初にどれほど重要かはわかりません）。おそらく、サウンドのミキシングとチェーン化、または停止するまで永遠にループすることです。
  • ユーザーを別のユーザーに接続したり、複数のリクエストなしでデータを継続的に取得したりするネットワーク（低優先度）（これは存在しますが、セットアップや使用がどれほど簡単かはわかりません。質問）。
html5  javascript 
— user1047
ソース
3
html5ゲームライブラリのかなり完全なリストgithub.com/bebraw/jswiki/wiki/Game-Engines
— oberhamsi
何？純粋なJavaScriptだけですべてを実行できます。ただし、ネットワーク用のSocket.io。
— jcora
Stage.jsが面白いと思うかもしれません（私はその著者です）。
— アリシャキバ

回答:

25

jQueryと MooToolsは素晴らしいJavaScriptライブラリです。私はjQueryを好みます。DOMを使用する場合、どちらもJSゲーム開発を支援します。Canvasレンダリングを使用する場合、これらのライブラリのいずれかを使用する必要があると思いますが、Canvas関数を学習する必要があります。Breakoutクローンを作成してキャンバスを紹介するチュートリアルを次に示します。これはまさにあなたが探しているものです（そしてjQueryを使用しています）。

スプライトをアニメートするには、画像のソースを変更するか、複数の画像を事前に読み込んでスワップアウトするか、キャンバスでアニメーションのフレームを描画するだけです。上記のライブラリは、これらのケースのいずれにも役立ちます。ライブラリは入力にも役立ちます（onkeypressやonmousemoveなどのイベントを調べます）。

リソースをプリロードするために、単一の「スプライトシート」画像を使用するゲームがあるようです（Googleのパックマンゲーム用の画像です）。基本的に、CSS background-imageプロパティをスプライトシートに設定し、background-positionプロパティをスプライトシートのタイルのオフセットに設定して、1つのタイルサイズのDIVを作成すると考えています。これを行うライブラリは見たことがありませんが、DIVを動的に作成し、CSSを操作する限り、jQueryまたはMooToolsが役立ちます。それ以外の場合、画像のプリロードは、プリロードする画像のタグを作成し、ページに追加しない（または目に見えないように追加する）問題です。こちらがブログ投稿です<img> jQueryを使用して画像をプリロードする関数のコードが含まれています。

SoundManager 2は、使用するJSサウンドライブラリのようです。Vanthiaがそれを使用していることを知っています。Googleの Pacmanは似たようなもの（または少なくとも同じテクニックを使用し、ページ上の非表示のFlashファイルを使用してサウンドを再生します）。

ネットワーキングの場合、jQueryはAJAXを処理できます。または、よりリアルタイムのネットワーキングが必要な場合（およびサーバーにそのようにする場合）、JavaScriptソケットを調べます。安定したライブラリがそこにあるかどうかはわかりませんが、これやこれを調べるかもしれません。基本的に、ページ上で非表示のJavaまたはFlashファイルを使用するため、JavaScriptとの真のソケット通信を行うことができます。これは、AJAXポーリングよりもはるかに速く、「AJAX Push」よりもわずかに効率的です。ただし、ほとんどの場合、AJAXプッシュが望みのものであり、APE（Ajaxプッシュエンジン）がおそらく使用するライブラリです。

また、「Web用のJavaScriptベースのゲームエンジンの構築」に関するGoogleの技術講演もあります。きれいに見えます。

— くる病
ソース
2
この答えは少し保守的です。彼がhtml5ブラウザーのみを使用したい場合は、canvasに移動して、html5ライブラリーのいずれかを使用できます（質問に関する私のコメントを参照）。ゲームにDOMとCSSを使用することは、ハックのように思えます（ただし、場合によっては実行可能なハックです）。
— -oberhamsi
2
何がハックのように見えるのですか？GoogleはPacManロゴのある純粋なDOMとCSSを使用しても問題ありませんでしたし、ホームページのピンポンゲームはとても気に入っています。実際には、canvasはハックのように見え、グラフィックレンダリングの正方形をDOMが支配するページにハッキングします。しかし、残念ながら、それとWebGLへのプッシュにより、ブラウザがまだすべてではないのであれば、重量級の万能アプリになることは明らかです。私は脱線します
— ...-リケット
オーディオ、ネットワーク、テキストレンダリングを使用する場合は、html5対応ブラウザを使用する必要があります。悲しいかなキャンバスが良い選択でしょう。DOM＆CSSに固執する場合、これらの技術が特定の前提（テキストフロー、レイヤー、テキストドキュメントのシーングラフの種類）でプレゼンテーションレイヤーを既に構成している限り、制限されます。一方、キャンバスを使用すると、SDLまたはopenglの上にある「通常」の生のゲームエンジンに近い任意の方法でピクセルを操作できます。
— -oberhamsi
私が提供したオーディオライブラリとネットワークライブラリは、HTML5を必要としません。そして実際には、テキストフロー、レイヤー化、シーングラフの類似性を利点として考えています。ほとんどのゲームは、配置および移動されるスプライト（画像）であり、ピクセルに直接アクセスする必要はありません。あなたが個人的にキャンバスやDOMとより快適にしている場合、それは本当にあなたが古いブラウザをサポートしたい場合は、余分な電力キャンバスが必要な場合、などを提供し、また、あなたがが作りたいゲームに基づいて評価する必要があり、そして
— リケット
1
ええ、それはゲーム次第です。しかし、彼はHTML5を要求し、あなたの答えは主にFlashとDOMレベル1についてです:)彼が最先端のHTML5開発をしたいなら、彼を引き付けないでください。
— -oberhamsi
12

JavaScriptエンジンを少し前に評価したとき、私のお気に入りはCraftyでした。

http://craftyjs.com/

私が検討しなければならなかったオプションがたくさんありましたが、私が気に入った他のいくつかは次のとおりです：

http://easeljs.com/

http://www.limejs.com/

http://code.google.com/p/casualjs/

（ちなみに、最初は非常に滑らかに見える別のオプションはhttp://impactjs.com/ですが、費用がかかり、私が調べた他のオプションはオープンソースエンジンでした。階層。）

更新：その回答を投稿してから2年近くが経ち、状況はわずかに変化しました（これは技術の初期段階です）。考慮AdobeはEaselJSの列車に飛び乗った。）私もそれが持っていることに注意してください（将来のプロジェクトのために、そのツールへのつもりスイッチだ新しいウェブサイトを）

— jhocking
ソース
今日の提案は？4年後
— Pooya Estakhri
1
さて、アップデートは1。5年前のものであり、私はまだそれを提案しています。
— 冗談を言う14
7

エフェクトゲームエンジン（ジャバスクリプト）は、2D、タイル/スプライトベースのゲームのための素晴らしいです。このWebサイトは、何がすばらしいのかを説明するのにあまり役立っていませんが、優れたドキュメントを掘り下げると、どれだけカバーされているかがわかります。

  • 吐き気
  • 衝突検出
  • レベル編集
  • 資産運用管理
  • オーディオ
  • 入力と制御
  • タイルセットの作成と管理
  • 階層化
  • アニメーション
  • パフォーマンス（フレームレートにロック）
  • クロスブラウザのサポートと抽象化
  • ホスティング
  • 埋め込み
  • HUDサポート

完全な機能を備えているため、完全なリストを提供することはできません。欠けているものの1つは、ゲーム内のメニューとUI（たとえば、機器マネージャーなど）を作成する機能ですが、それはおそらくtodoリストにあります。

— ラーフル
ソース
4
残念ながら、エフェクトエンジンは完全に放棄されているようです。
— レサリオン
6

JawsJSと呼ばれるキャンバス2Dゲームエンジン-http : //jawsjs.com/

ソース@ https://github.com/ippa/jaws

クリフノート：

  • 読み取り可能な文書化されたコード
  • 12以上のバンドルされたドキュメント例
  • Sprite（）、SpriteSheet（）、Animation（）などの便利なコンストラクター
  • ゲームの状態-ゲームのセクションを分けてコードを整理します
  • アセット-ゲームを開始する前にジョーズがすべてのアセットをプリロードします
  • 他のJavaScriptライブラリに依存しない
  • RubyゲームライブラリChinguの長年の開発から学んだ教訓に基づく
— 一pa
ソース
4

私はこの分野で最近自分自身でいくつかの研究を行ってきたので、$ 0.02でチップにしましょう。

PlayNは、オブジェクト指向のゲームをJavaからjavascript / Flash / AndroidにコンパイルするGoogleのクロスプラットフォームライブラリです。JSON（AJAX）、データモデルを処理し、更新とレンダリングのための健全なセマンティクスを備えています。非常にクールなもの。

Processingは、デザイナーやアーティストを対象としたシンプルなライブラリです。使い方は非常に簡単で、素晴らしい結果が得られます。科学的モデリングにJavaバージョンを使用しましたが、使用するのは楽しいことです。3DシーンにはWebGLが必要ですが、2Dシーンは機能しません。

Three.jsには見栄えの良いデモがいくつかあります。WebGLが必要ですが、結果には価値がありそうです。オンラインで既存のサンプルもいくつかあります。

以下は、WebGLに関連する私の個人リンクダンプのその他のアイテムの一部です。

— ブライス
ソース
1

Pixieプラグイン

コントラサウルスの作成者は、個々のコンポーネントの多くをリリースしました!!!

彼らは、マトリックス変換、キャンバス抽象化、およびより多くの興味深いことを行うためのコードを持っています。

彼らのコードは素晴らしく、彼らのライブラリは本当に便利です。

— DFectuoso
ソース
1

Google Closure Libraryが言及されていないのは奇妙です。巨大なAPIを持ち、よりオブジェクト指向のコーディングスタイルを可能にし、コンパイラを備えています。

私はこれまでコンパイラーのみを使用しましたが、できるだけ早く残りを研究する予定です。

— ペテリ・イエタビルタ
ソース
1

私は通常、jawsjsを使用します。セットアップが簡単で、数分でゲームの開発を開始できるからです。ゲーム開発に本当に役立つ多くの非常に便利なデフォルトクラス（タイルマップ、ビューポート、スプライトなど）があります。

— デビッド・ゴメス
ソース
1

実際にはたくさんありますが、それはまず、どの種類のゲームエンジンを探しているかに依存します。最も注目に値するものについて、いくつかのリファレンスを提供できます。

2Dゲームエンジン

  • Cocos2Dは、現時点では少しファッショナブルになる傾向があります。最近、StackoverflowでCocos2Dの質問があちこちに表示されるのを見ました。
  • Impact、公式Webサイトで実行中のベンチマークを見ることができます。

3Dゲームエンジン

Mozilla Foundationは、Paladinという名前の3Dゲームエンジンに取り組んでいます。本当に痛くないのはMozillaです。

— user14170
ソース
0

jQueryベースのゲームエンジンであるgameQueryもあります。APIについての適切なドキュメントと、サイトでリンクするサウンドラッパーAPIがいくつかあります。

http://gamequery.onaluf.org/

— numo16
ソース
0

ScirraのTom は、HTML5ゲームメーカーであるConstruct 2を作成した2人のチームです。（無料版が利用可能）。

それはあなたのための多くの脚注を行うので、あなたは私たちのようなエンジンを検討したいと思うかもしれません。たとえば、コードで衝突を自分で行うのは非常に難しい場合があります（ポリゴンの衝突を考えてください）。リストのすべては、Construct 2で簡単に実現できます。

— トム・ガレン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.