32 ページあります:
| # | ページ | タグと要約 |
|---|---|---|
| 1 | ゲーム開発 | Apps, Game Development, Gamedev, Games, HTML5 Games, JavaScript Games, Web |
| コンピューターアクティビティの中でゲームはもっともポピュラーなものです。新技術が頻繁に登場し、標準的な Web ブラウザー上で動作するゲーム開発をより良くパワフルにしています。 | ||
| 2 | HTML5 ゲーム開発入門 (要約) | Firefox OS, Games, HTML5, Mobile |
| HTML5 で作られたゲームはスマートフォン、タブレット、PC、スマート TV で動く。好きな時にゲームを更新できる。プレイヤーはいつでもどこでもゲームをプレイできる。 | ||
| 3 | Web用のゲーム開発入門 | Firefox OS, Games, Guide, Mobile |
| モダン Web は、魅力的でクオリティの高いゲーム作りだけでなく、より重要な、そうしたゲームを配信するための、価値あるプラットフォームに急変身しました。 | ||
| 4 | Workflows for different game types | Canvas, Games, JavaScript, NeedsTranslation, TopicStub, Web, Workflows |
| This page contains articles that highlight different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies. | ||
| 5 | 2D breakout game using Phaser | 2D, Beginner, Canvas, Games, JavaScript, NeedsTranslation, Phaser, TopicStub, Tutorial |
| In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework. | ||
| 6 | 物理演算 | |
| モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。 | ||
| 7 | そのままのJavaScriptを使ったブロックくずしゲーム | |
このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 <canvas>で表示できる簡単なMDN ブロックくずしゲームを作ります。 |
||
| 8 | Canvasを作ってその上に描画する | |
ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと<canvas>要素を用います。 |
||
| 9 | ゲームオーバー | |
| ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。 | ||
| 10 | スコアと勝ち負けを記録する | |
| ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。 | ||
| 11 | パドルとキーボード操作 | |
| ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。 | ||
| 12 | ブロックのかたまりを作る | |
| ゲームプレイ制御を修正することにより負けることができるようになります。この大きな変更により、ついにゲームらしさを感じられるようになりました。ですが、壁とパドルでボールが弾むだけではすぐに空きてしまいます。ブロック崩しで本当に必要な要素、それはボールで崩すことができるブロックです。これが今回作り込んでいく部分になります。 | ||
| 13 | ボールを動かす | |
| 前回のレッスンを一通りこなしてみてボールの描き方が分かりました。では今回はそれを動かしましょう。技術的には、ボールを描画し、またそれを消してからほんの少し違う位置に描画し直すという処理を毎フレームずつ行うことで動いているような印象を生み出します。ちょうど映画がどのように動くのかと同じです。 | ||
| 14 | ボールを壁で弾ませる | |
| ボールが動くのを見れたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (後ほど詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。 | ||
| 15 | マウス操作 | |
| ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。 | ||
| 16 | 仕上げ | |
| 書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。 | ||
| 17 | 衝突検出 | |
| ブロックは既に画面上に現れていますが、ボールが素通りしてしまうのでは面白くありません。ボールがブロックで弾み、ブロックが壊れるように衝突検出を追加することを考えなくてはなりません。 | ||
| 18 | ゲーム開発のためのツール | Games, Gecko, Guide, JavaScript, NeedsTranslation, TopicStub |
| このページにはゲーム開発ツールに関する記事へのリンクがまとまっています。ゆくゆくはフレームワークやコンパイラ、デバッグ用ツールもカバーすることを目指しています。 | ||
| 19 | asm.js | JavaScript, asm.js |
| asm.js は 高度に最適化可能な JavaScript のサブセットを規定する仕様です。この文書では、asm.js で可能なこと、利点、利用方法、そして関連する情報と使用例を解説します。 | ||
| 20 | ゲーム開発テクニック | Games, Guide, TopicStub |
| このページはopen webテクノロジを使ってゲーム開発をしたい方にとって本質的にコアなテクニック一覧を表示します。 | ||
| 21 | 2D 衝突検出 | 2D, Games, JavaScript, collision detection |
| One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist. | ||
| 22 | 3D games on the Web | Games, Graphics, NeedsContent, NeedsExample, NeedsTranslation, TopicStub, WebGL, WebVR, three.js |
| For rich gaming experiences on the Web the weapon of choice is WebGL, which by default is rendered on Canvas. The <canvas> element have 2D and 3D contexts, and we'll be working with the latter. WebGL is basically an OpenGL ES 2.0 for the Web - it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that are hardware accelerated.</canvas> | ||
| 23 | A-Frameを使った基本的なデモの作成 | |
| WebVR APIと WebGL API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の A-Frame フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。 | ||
| 24 | Building up a basic demo with Babylon.js | |
| Babylon.jsは開発者に使われている最も有名な3Dゲームエンジンです。他のどんな3Dと同様に、より迅速に共通の3D機能を実装するのを助けるプラグイン機能を提供します。この記事ではBabylon.jsを使った基礎を通じて開発環境の構築、必要なHTML構造、JavaScriptの書き方を提供します。 | ||
| 25 | WebVR — Webによる仮想現実 | |
| 仮想現実のコンセプトはそれほど新しいものではありません。しかし現在、webはWebVRを動作させるのに必要なテクノロジーやwebアプリでWebVRを使用するためのJavaScript APIを持っています。 この記事では、 WebVRをゲームでの使用の観点から紹介します。 | ||
| 26 | Gamepad APIを使用したコントロールの実装 | |
| この記事では、Gamepad API を使用して Web ゲーム用の効果的なクロスブラウザー制御システムを実装し、コンソールゲームコントローラーを使用してWebゲームを制御できるようにします。Enclave Games によって作成されたケーススタディゲーム Hungry Fridge を掲載しています。 | ||
| 27 | Web ゲーム用のオーディオ | Audio, Games, Web Audio API, audio sprites |
| これまでウェブオーディオのサポートを提供するのに最も難しいプラットフォームはモバイルプラットフォームでした。不幸にもこれはゲームで遊ぶ人が良くいるプラットフォームです。デスクトップとモバイルのブラウザーにはいくつかの違いがあり、それがブラウザーベンダーに、ゲーム開発者が作業するのが難しくなるウェブオーディオの選択を起こすことがありました。これを見ていきましょう。 | ||
| 28 | WebRTC データチャネル | API, Games, NeedsContent, Network, P2P, WebRTC, data channels |
| WebRTC (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。 | ||
| 29 | asm.js の非同期スクリプト | Games, JavaScript, asm.js, async |
全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして asm.js コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、about:config で javascript.options.parallel_parsing を反転させてください。 |
||
| 30 | ゲーム開発関連ドキュメントの索引 | Games, Index |
| 19 ページあります: | ||
| 31 | サンプル例 | Demos, Examples, Games, Web |
| このページは数々の印象的な web テクノロジーのデモを一覧し、これからインスピレーションを得たり、一般に楽しめるでしょう。その証は、JavaScript や WebGL や関連テクノロジーで実行されます。最初の 2節はプレイできるゲームで、2 つ目はインタラクティブ/ゲームに必要とも限らない、がらくた入れのスペースです。 | ||
| 32 | ビデオゲームの解剖学 | Games, JavaScript, Main Loop, requestAnimationFrame |
| I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this but I have heard it is an excruciating game of Whack-a-Mole. | ||