This page was translated from English by the community. Learn more and join the MDN Web Docs community.

ゲーム開発関連ドキュメントの索引

37 ページあります:

# ページ タグと要約
1 ゲーム開発 Apps, Game Development, Gamedev, Games, HTML5 Games, JavaScript Games, Web

コンピューターアクティビティの中でゲームはもっともポピュラーなものです。新技術が頻繁に登場し、標準的なウェブブラウザー上で動作するゲーム開発をより良くパワフルにしています。
2 ビデオゲームの解剖学 Games, JavaScript, Main Loop, requestAnimationFrame

この記事では平均的なビデオゲームの中身とワークフローを技術的な観点、メインループがどう動くべきかに関して見ていきます。初心者が現代的なゲーム開発の海で、ゲーム制作に何が必要なのか、JavaScript のようなウェブ標準がツールとして寄与しているかを理解するのに役立ちます。ベテランのゲームプログラマーでウェブ開発を始めたばかりの方にも役立ちます。
3 サンプル例 Demos, Examples, Games, Web
このページは数々の印象的な web テクノロジーのデモを一覧し、これからインスピレーションを得たり、一般に楽しめるでしょう。その証は、JavaScript や WebGL や関連テクノロジーで実行されます。最初の 2節はプレイできるゲームで、2 つ目はインタラクティブ/ゲームに必要とも限らない、がらくた入れのスペースです。
4 HTML5 ゲーム開発入門 (要約) Firefox OS, Games, HTML5, Mobile
HTML5 で作られたゲームはスマートフォン、タブレット、PC、スマート TV で動く。
5 Web用のゲーム開発入門 Firefox OS, Games, Guide, Mobile
モダンウェブは、魅力的でクオリティの高いゲーム作りだけでなく、より重要な、そうしたゲームを配信するための、価値あるプラットフォームに急変身しました。
6 ゲーム開発テクニック Games, Guide, TopicStub

このページはopen webテクノロジを使ってゲーム開発をしたい方にとって本質的にコアなテクニック一覧を表示します。

これらがゲーム開発用のアイデアとテクニックです。
7 2D 衝突検出 2D, Games, JavaScript, collision detection

2D ゲームの衝突検出アルゴリズムは、衝突するものの形 (例 矩形と矩形、矩形と円、円と円) に依存します。一般的には、"ヒットボックス"として知られる、実体を囲むシンプルな汎用形状を持って、衝突がピクセルの完璧なものでなくても、十分良いものに見えるし、複数の実体でもパフォーマンスが保てるでしょう。この記事では、2Dゲームの衝突検出に使われる頻出テクニックをレビューします。
8 3D 衝突検出 3D, Games, JavaScript, bounding boxes, collision detection
この記事では、3D 環境で衝突検出を実装するために使用されるさまざまなバウンディングボリューム手法の概要を説明します。 追求記事では、特定の 3D ライブラリでの実装について説明します。
9 THREE.js によるバウンディングボリューム衝突検出 3D, Games, JavaScript, WebGL, bounding boxes, collision detection, three.js
この記事では、Three.js ライブラリーを使用してバウンディングボックスとバウンディングスフィアの間の衝突検出を実装する方法を示します。 これを読む前に、まず 3D 衝突検出の紹介記事を読み、かつ Three.js に関する基本的な知識があることを前提としています。
10 Web上の 3D ゲームの概要 Games, Graphics, NeedsContent, NeedsExample, TopicStub, WebGL, WebVR, three.js
Web でのリッチなゲーム体験の場合、選択する武器は WebGL であり、HTML canvas にレンダリングされます。 WebGL は、基本的に Web 用の OpenGL ES 2.0 であり、リッチなインタラクティブアニメーション、そしてもちろんゲームを構築するためのツールを提供する JavaScript API です。 ハードウェアアクセラレーションされた JavaScript を使用して、動的な 3D グラフィックスを生成およびレンダリングできます。
11 基本の 3D理論の説明 3D, Coordinates, Textures, basics, fragment, lighting, primitives, rendering, theory, vertex, vertices
本記事では 3D を始める人が知るべき基本的な理論について説明します。
12 A-Frameを使った基本的なデモの作成
WebVR APIと WebGL API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の A-Frame フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。
13 Building up a basic demo with Babylon.js
Babylon.jsは開発者に使われている最も有名な3Dゲームエンジンです。他のどんな3Dと同様に、より迅速に共通の3D機能を実装するのを助けるプラグイン機能を提供します。この記事ではBabylon.jsを使った基礎を通じて開発環境の構築、必要なHTML構造、JavaScriptの書き方を提供します。
14 Three.jsでデモを作る 3D, Canvas, WebGL, three.js, アニメーション, カメラ, ゲーム, チュートリアル, ライト, レンダリング, 初心者
典型的な3Dゲームのシーン――どんなにシンプルなものでも――には、標準的な項目、すなわち座標に配置された物体、それを見るカメラ、より良い見た目を作る照明と質感の設定、生き生きとしたアニメーションなどが含まれているでしょう。Three.js は他の3Dライブラリと同じように、一般的な機能を迅速に実装するための組み込み関数を提供します。この記事では、開発環境の設定や必要なHTML構造、3つの基本的なオブジェクトの構築や初歩的なデモの制作方法など、Three を使用する上での基本的なことがらを解説します。
15 GLSL シェーダー Beginner, Fragment Shader, GLSL, OpenGL, Shader, WebGL, texture shader, three.js, vertex shader
シェーダーは、C と同様の構文を持つ特別な OpenGL シェーディング言語である GLSL (OpenGL Shading Language) を使用します。 GLSL はグラフィックスパイプラインによって直接実行されます。 シェーダーには、頂点 (バーテックス) シェーダーとフラグメント (ピクセル) シェーダーの2種類があります。 頂点シェーダーは、形状の位置を 3D 描画座標に変換します。 フラグメントシェーダーは、形状の色やその他の属性のレンダリングを計算します。
16 WebVR — Webによる仮想現実 3D, Games, WebGL, WebVR
仮想現実の概念自体は新しいものではありませんが、今ではそれをあるべき姿で機能させるためのテクノロジーと、それを Web アプリケーションで活用するための JavaScript API があります。 この記事では、ゲームでの使用の観点から WebVR を紹介しています。
17 asm.js の非同期スクリプト Games, JavaScript, asm.js, async

全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして asm.js コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、about:config で javascript.options.parallel_parsing を反転させてください。
18 Web ゲーム用のオーディオ Audio, Games, Web Audio API, audio sprites

オーディオはゲームの重要部分です。つまりこれはフィードバックと雰囲気を与えます。web ベースのオーディオは早くから成熟していますが、まだ多くのブラウザーに案内すべき違いがあります。ゲームエクスペリエンスにとってどのオーディオパーツが重要で、どれがあっても良いけど不要なものかを決めて、それに従って戦略を決めるのが必要となる事がよくあります。この記事では web ゲーム用のオーディオを実装するための詳細なガイドを提供し、現在なるべく広い範囲のプラットフォームで動作するものを観察します。
19 Implementing game control mechanisms
 
20 Gamepad APIを使用したコントロールの実装
この記事では、Gamepad API を使用して Web ゲーム用の効果的なクロスブラウザー制御システムを実装し、コンソールゲームコントローラーを使用してWebゲームを制御できるようにします。Enclave Games によって作成されたケーススタディゲーム Hungry Fridge を掲載しています。
21 WebRTC データチャネル API, Games, NeedsContent, Network, P2P, WebRTC, data channels
WebRTC (en-US) (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。
22 ゲーム開発のためのツール Games, Gecko, Guide, JavaScript, NeedsTranslation, TopicStub

このページにはゲーム開発ツールに関する記事へのリンクがまとまっています。ゆくゆくはフレームワークやコンパイラ、デバッグ用ツールもカバーすることを目指しています。
23 asm.js JavaScript, asm.js

asm.js は 高度に最適化可能な JavaScript のサブセットを規定する仕様です。この文書では、asm.js で可能なこと、利点、利用方法、そして関連する情報と使用例を解説します。
24 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.
25 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.
26 物理演算

全 16回のゲーム開発チュートリアル の 5 回目です。 今回終了後のソースコードは Gamedev-Phaser-Content-Kit/demos/lesson05.html でご覧になれます。
27 そのままのJavaScriptを使ったブロックくずしゲーム
このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 canvasで表示できる簡単なMDN ブロックくずしゲームを作ります。
28 ボールを壁で弾ませる

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち3番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson3.htmlで入手できます。
29 ブロックのかたまりを作る

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち6番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson6.htmlで入手できます。
30 衝突検出

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち7番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson7.htmlで入手できます。
31 Canvasを作ってその上に描画する

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち1番最初のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson1.htmlで入手できます。
32 仕上げ

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち10番目、最後のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson10.htmlで入手できます。
33 ゲームオーバー
これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち5番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson5.htmlで入手できます。
34 マウス操作

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち9番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson9.htmlで入手できます。
35 ボールを動かす

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち2番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson2.htmlで入手できます。
36 パドルとキーボード操作

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち4番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson4.htmlで入手できます。
37 スコアと勝ち負けを記録する

これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち8番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson8.htmlで入手できます。