diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/games/techniques | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/games/techniques')
16 files changed, 2698 insertions, 0 deletions
diff --git a/files/ja/games/techniques/2d_collision_detection/index.html b/files/ja/games/techniques/2d_collision_detection/index.html new file mode 100644 index 0000000000..9f966e453d --- /dev/null +++ b/files/ja/games/techniques/2d_collision_detection/index.html @@ -0,0 +1,87 @@ +--- +title: 2D 衝突検出 +slug: Games/Techniques/2D_collision_detection +tags: + - 2D + - Games + - JavaScript + - collision detection +translation_of: Games/Techniques/2D_collision_detection +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div> + +<div class="summary"> +<p>2D ゲームの衝突検出アルゴリズムは、衝突するものの形 (例 矩形と矩形、矩形と円、円と円) に依存します。一般的には、"ヒットボックス"として知られる、実体を囲むシンプルな汎用形状を持って、衝突がピクセルの完璧なものでなくても、十分良いものに見えるし、複数の実体でもパフォーマンスが保てるでしょう。この記事では、2Dゲームの衝突検出に使われる頻出テクニックをレビューします。</p> +</div> + +<h2 id="座標軸に沿ったバウンディングボックス">座標軸に沿ったバウンディングボックス</h2> + +<p>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.</p> + +<pre class="brush: js">var rect1 = {x: 5, y: 5, width: 50, height: 50} +var rect2 = {x: 20, y: 10, width: 10, height: 10} + +if (rect1.x < rect2.x + rect2.width && + rect1.x + rect1.width > rect2.x && + rect1.y < rect2.y + rect2.height && + rect1.height + rect1.y > rect2.y) { + // collision detected! +} + +// filling in the values => + +if (5 < 30 && + 55 > 20 && + 5 < 20 && + 55 > 10) { + // collision detected! +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see a <a href="http://jsfiddle.net/knam8/">live example of Axis-Aligned Bounding Box collision detection</a> on jsFiddle, to illustrate how this code would work in practice.</p> +</div> + +<h2 id="円形衝突">円形衝突</h2> + +<p>Another simple shape for collision detection is between two circles. This algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two radii added together.</p> + +<pre class="brush: js">var circle1 = {radius: 20, x: 5, y: 5}; +var circle2 = {radius: 12, x: 10, y: 5}; + +var dx = circle1.x - circle2.x; +var dy = circle1.y - circle2.y; +var distance = Math.sqrt(dx * dx + dy * dy); + +if (distance < circle1.radius + circle2.radius) { + // collision detected! +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see a <a href="http://jsfiddle.net/gQ3hD/2/">live example of Circle collision detection</a> on jsFiddle, to illustrate how this code would work in practice.</p> +</div> + +<h2 id="Separating_Axis_Theorem">Separating Axis Theorem</h2> + +<p>This is a collision algorithm that can detect a collision between any two *convex* polygons. It's more complicated to implement than the above methods but is more powerful. The complexity of an algorithm like this means we will need to consider performance optimization, covered in the next section.</p> + +<p>Implementing SAT is out of scope for this page so see the recommended tutorials below:</p> + +<ol> + <li><a href="http://www.sevenson.com.au/actionscript/sat/">Separating Axis Theorem (SAT) explanation</a></li> + <li><a href="http://www.metanetsoftware.com/technique/tutorialA.html">Collision detection and response</a></li> + <li><a href="http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169">Collision detection Using the Separating Axis Theorem</a></li> + <li><a href="http://www.codezealot.org/archives/55">SAT (Separating Axis Theorem)</a></li> + <li><a href="http://rocketmandevelopment.com/blog/separation-of-axis-theorem-for-collision-detection/">Separation of Axis Theorem (SAT) for Collision Detection</a></li> +</ol> + +<h2 id="衝突のパフォーマンス">衝突のパフォーマンス</h2> + +<p>While some of these algorithms for collision detection are simple enough to calculate, it can be a waste of cycles to test *every* entity with every other entity. Usually games will split collision into two phases, broad and narrow.</p> + +<h3 id="Broad_Phase">Broad Phase</h3> + +<p>Broad phase should give you a list of entities that *could* be colliding. This can be implemented with a spacial data structure that will give you a rough idea of where the entity exists and what exist around it. Some examples of spacial data structures are Quad Trees, R-Trees or a Spacial Hashmap.</p> + +<h3 id="Narrow_Phase">Narrow Phase</h3> + +<p>When you have a small list of entities to check you will want to use a narrow phase algorithm (like the ones listed above) to provide a certain answer as to whether there is a collision or not.</p> diff --git a/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.html b/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.html new file mode 100644 index 0000000000..3a6bea3106 --- /dev/null +++ b/files/ja/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.html @@ -0,0 +1,176 @@ +--- +title: THREE.js によるバウンディングボリューム衝突検出 +slug: >- + Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js +tags: + - 3D + - Games + - JavaScript + - WebGL + - bounding boxes + - collision detection + - three.js +translation_of: >- + Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">この記事では、<strong>Three.js ライブラリーを使用してバウンディングボックスとバウンディングスフィアの間の衝突検出</strong>を実装する方法を示します。 これを読む前に、まず <a href="/ja/docs/Games/Techniques/3D_collision_detection">3D 衝突検出</a>の紹介記事を読み、かつ Three.js に関する基本的な知識があることを前提としています。</p> + +<h2 id="Using_Box3_and_Sphere" name="Using_Box3_and_Sphere"><code>Box3</code> と <code>Sphere</code> の使用</h2> + +<p>Three.js には、<strong>数学的なボリューム</strong>（mathematical volumes）と形状を表すオブジェクトがあります。 3D の AABB とバウンディングスフィアには、<strong><code><a href="https://threejs.org/docs/#api/math/Box3">Box3</a></code></strong> オブジェクトと <strong><code><a href="https://threejs.org/docs/#api/math/Sphere">Sphere</a></code></strong> オブジェクトを使用できます。 インスタンス化されると、他のボリュームに対して交差テストを実行するために使用できるメソッドがあります。</p> + +<h3 id="Instantiating_boxes" name="Instantiating_boxes">ボックスのインスタンス化</h3> + +<p><strong><code>Box3</code> インスタンス</strong>を作成するには、ボックスの<strong>下と上の境界</strong>（対角線の2つの座標）を指定する必要があります。 通常、この AABB を 3D ワールドのオブジェクト（文字など）に「リンク」する必要があります。 Three.js では、<code>Geometry</code> インスタンスにオブジェクトの <code>min</code> と <code>max</code> の境界を持つ <code>boundingBox</code> プロパティがあります。 このプロパティを定義するには、事前に <code>Geometry.computeBoundingBox</code> を手動で呼び出す必要があることに注意してください。</p> + +<pre class="brush: js notranslate">var knot = new THREE.Mesh( + new THREE.TorusKnotGeometry(0.5, 0.1), + new MeshNormalMaterial({})); + +knot.geometry.computeBoundingBox(); +var knotBBox = new Box3( + knot.geometry.boundingBox.min, + knot.geometry.boundingBox.max); +</pre> + +<div class="note"> +<p><strong>注</strong>: <code>boundingBox</code> プロパティは、<code>Mesh</code> ではなく、<code>Geometry</code> 自体を参照として使用します。 したがって、<code>Mesh</code> に適用された拡大縮小、位置などの変換は、計算するボックスの計算では無視されます。</p> +</div> + +<p>前の問題を修正するより簡単な代替方法は、後で <code>Box3.setFromObject</code> を使用してこれらの境界を設定することです。 これにより、3D エンティティの<strong>変換<em>と</em>子メッシュ</strong>も考慮して寸法が計算されます。</p> + +<pre class="brush: js notranslate">var knot = new THREE.Mesh( + new THREE.TorusKnotGeometry(0.5, 0.1), + new MeshNormalMaterial({})); + +var knotBBox = new Box3(new THREE.Vector3(), new THREE.Vector3()); +knotBBox.setFromObject(knot);</pre> + +<h3 id="Instantiating_spheres" name="Instantiating_spheres">球のインスタンス化</h3> + +<p><strong><code>Sphere</code> オブジェクト</strong>のインスタンス化も同様です。 球の中心と半径を指定する必要があります。 これらは、<code>Geometry</code> で使用可能な <code>boundingSphere</code> プロパティで追加できます。</p> + +<pre class="brush: js notranslate">var knot = new THREE.Mesh( + new THREE.TorusKnotGeometry(0.5, 0.1), + new MeshNormalMaterial({})); + +var knotBSphere = new Sphere( + knot.position, + knot.geometry.boundingSphere.radius); +</pre> + +<p>残念ながら、<code>Sphere</code> インスタンスに <code>Box3.setFromObject</code> に相当するものはありません。 したがって、変換を適用したり、<code>Mesh</code> の位置を変更したりする場合は、バウンディングスフィアを手動で更新する必要があります。 例えば次のようにです。</p> + +<pre class="notranslate">knot.scale.set(2, 2, 2); +knotBSphere.radius = knot.geometry.radius * 2; +</pre> + +<h3 id="Intersection_tests" name="Intersection_tests">交差テスト</h3> + +<h4 id="Point_vs._Box3_Sphere" name="Point_vs._Box3_Sphere">点 対 <code>Box3</code> / <code>Sphere</code></h4> + +<p><code>Box3</code> と <code>Sphere</code> の両方に、このテストを実行するための <strong><code>containsPoint</code></strong> メソッドがあります。</p> + +<pre class="brush: js notranslate">var point = new THREE.Vector3(2, 4, 7); +knotBBox.containsPoint(point);</pre> + +<h4 id="Box3_vs._Box3" name="Box3_vs._Box3"><code>Box3</code> 対 <code>Box3</code></h4> + +<p><strong><code>Box3.intersectsBox</code></strong> メソッドは、このテストを実行するために使用できます。</p> + +<pre class="brush: js notranslate">knotBbox.intersectsBox(otherBox);</pre> + +<div class="note"> +<p><strong>注</strong>: これは、<code>Box3</code> が別のものを<em>完全に</em>包んでいるかどうかをチェックする <code>Box3.containsBox</code> メソッドとは異なります。</p> +</div> + +<h4 id="Sphere_vs._Sphere" name="Sphere_vs._Sphere"><code>Sphere</code> 対 <code>Sphere</code></h4> + +<p>前のものと同様の方法で、このテストを実行するための <strong><code>Sphere.intersectsSphere</code></strong> メソッドがあります。</p> + +<pre class="brush: js notranslate">knotBSphere.intersectsSphere(otherSphere);</pre> + +<h4 id="Sphere_vs._Box3" name="Sphere_vs._Box3"><code>Sphere</code> 対 <code>Box3</code></h4> + +<p>残念ながら、このテストは Three.js には実装されていませんが、<code>Sphere</code> にパッチを適用して<a href="/ja/docs/Games/Techniques/3D_collision_detection">球対 AABB の交差</a>アルゴリズムを実装できます。</p> + +<pre class="brush: js notranslate">// THREE.js の Sphere を展開して、対 Box3 衝突テストをサポートします。 +// チェックのたびに Vector3 の新しいインスタンスが生成されないように、 +// メソッドスコープ外でベクターを作成しています。 + +THREE.Sphere.__closest = new THREE.Vector3(); +THREE.Sphere.prototype.intersectsBox = function (box) { + // get box closest point to sphere center by clamping + THREE.Sphere.__closest.set(this.center.x, this.center.y, this.center.z); + THREE.Sphere.__closest.clamp(box.min, box.max); + + var distance = this.center.distanceToSquared(THREE.Sphere.__closest); + return distance < (this.radius * this.radius); +};</pre> + +<h3 id="Demos" name="Demos">デモ</h3> + +<p>これらの手法を示すために、いくつかの<a href="http://mozdevs.github.io/gamedev-js-3d-aabb/">ライブデモ</a>と、調べるための<a href="https://github.com/mozdevs/gamedev-js-3d-aabb">ソースコード</a>を用意しました。</p> + +<ul> + <li><a href="http://mozdevs.github.io/gamedev-js-3d-aabb/raw_point.html">点 対 ボックスと球</a></li> + <li><a href="http://mozdevs.github.io/gamedev-js-3d-aabb/raw_box.html">ボックス 対 ボックスと球</a></li> + <li><a href="http://mozdevs.github.io/gamedev-js-3d-aabb/raw_sphere.html">球 対 ボックスと球</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11825/Screen%20Shot%202015-10-20%20at%2015.19.16.png" style="display: block; height: 256px; margin: 0px auto; width: 256px;"></p> + +<h2 id="Using_BoxHelper" name="Using_BoxHelper"><code>BoxHelper</code> の使用</h2> + +<p>生の <code>Box3</code> オブジェクトと <code>Sphere</code> オブジェクトを使用する代わりに、Three.js には、<strong>バウンディングボックスの処理を容易にする</strong>便利なオブジェクト <strong><code><a href="https://threejs.org/docs/#api/helpers/BoxHelper">BoxHelper</a></code></strong> があります（以前の <code>BoundingBoxHelper</code> は非推奨となりました）。 このヘルパーは <code>Mesh</code> を取り、そのバウンディングボックスのボリューム（子メッシュを含む）を計算します。 これにより、バウンディングボックスを表す新しいボックスの <code>Mesh</code> が作成されます。 これは、バウンディングボックスの形状を示し、<code>Mesh</code> と一致するバウンディングボックスを作成するために、前に見た <code>setFromObject</code> メソッドに渡すことができます。</p> + +<div> +<p><code>BoxHelper</code> は、Three.js のバウンディングボリュームとの 3D 衝突を処理するための<strong>推奨される</strong>方法です。 球のテストをもらすことになりますが、このトレードオフにはそれだけの価値があります。</p> +</div> + +<p>このヘルパーを使用する利点は次のとおりです。</p> + +<ul> + <li>リンクした <code>Mesh</code> が回転したり、その寸法を変更した場合に、バウンディングボックスの <code>Mesh</code> の<strong>サイズを変更</strong>し、その<strong>位置</strong>を更新する <code>update()</code> メソッドがあります。</li> + <li>バウンディングボックスのサイズを計算するときに<strong>子メッシュが考慮される</strong>ため、元のメッシュとそのすべての子が包まれます。</li> + <li><code>BoxHelper</code> が作成する <code>Mesh</code> を<strong>レンダリングする</strong>ことで、衝突を簡単にデバッグできます。 デフォルトでは、<code>LineBasicMaterial</code> マテリアル（ワイヤーフレームスタイルのジオメトリーを描画するための three.js マテリアル）を使用して作成されます。</li> +</ul> + +<p>主な欠点は、<strong>ボックスのバウンディングボリュームのみを作成する</strong>ことです。 したがって、球対 AABB のテストが必要な場合は、独自の <code>Sphere</code> オブジェクトを作成する必要があります。</p> + +<p>これを使用するには、新しい <code>BoxHelper</code> インスタンスを作成し、ジオメトリーと、オプションで、ワイヤーフレームマテリアルに使用する色を指定する必要があります。 また、新しく作成したオブジェクトをレンダリングするには、three.js のシーンに追加する必要があります。 シーン変数は単に <code>scene</code> と呼ばれると仮定します。</p> + +<pre class="brush: js notranslate">var knot = new THREE.Mesh( + new THREE.TorusKnotGeometry(0.5, 0.1), + new THREE.MeshNormalMaterial({}) +); +var knotBoxHelper = new THREE.BoxHelper(knot, 0x00ff00); +scene.add(knotBoxHelper);</pre> + +<p>実際の <code>Box3</code> バウンディングボックスも作成するために、新しい <code>Box3</code> オブジェクトを作成し、<code>BoxHelper</code> の形状と位置を想定します。</p> + +<pre class="syntaxbox notranslate">var box3 = new THREE.Box3(); +box3.setFromObject(knotBoxHelper);</pre> + +<p><code>Mesh</code> の位置、回転、拡大縮小などを変更する場合は、<code>update()</code> メソッドを呼び出して、<code>BoxHelper</code> インスタンスがリンクした <code>Mesh</code> と一致するようにする必要があります。 <code>Box3</code> を <code>Mesh</code> に従わせるには、<code>setFromObject</code> を再度呼び出す必要もあります。</p> + +<pre class="syntaxbox notranslate">knot.position.set(-3, 2, 1); +knot.rotation.x = -Math.PI / 4; +// update the bounding box so it stills wraps the knot +knotBoxHelper.update(); +box3.setFromObject(knotBoxHelper);</pre> + +<p><strong>衝突テスト</strong>の実行は、上記のセクションで説明したのと同じ方法で実行します。 つまり、<code>Box3</code> オブジェクトを上記と同じ方法で使用します。</p> + +<pre class="brush: js notranslate">// box vs box +box3.intersectsBox(otherBox3); +// box vs point +box3.containsPoint(point.position);</pre> + +<h3 id="Demos_2" name="Demos_2">デモ</h3> + +<p><a href="http://mozdevs.github.io/gamedev-js-3d-aabb/">ライブデモのページ</a>で確認できる<strong>2つのデモ</strong>があります。 <a href="http://mozdevs.github.io/gamedev-js-3d-aabb/api_point.html">1つ目</a>は、<code>BoxHelper</code> を使用した点対ボックスの衝突を示しています。 <a href="http://mozdevs.github.io/gamedev-js-3d-aabb/api_box.html">2つ目</a>は、ボックス対ボックスのテストを実行します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11821/Screen%20Shot%202015-10-19%20at%2012.10.06.png" style="display: block; height: 256px; margin: 0px auto; width: 256px;"></p> diff --git a/files/ja/games/techniques/3d_collision_detection/index.html b/files/ja/games/techniques/3d_collision_detection/index.html new file mode 100644 index 0000000000..d17e0d1acc --- /dev/null +++ b/files/ja/games/techniques/3d_collision_detection/index.html @@ -0,0 +1,155 @@ +--- +title: 3D 衝突検出 +slug: Games/Techniques/3D_collision_detection +tags: + - 3D + - Games + - JavaScript + - bounding boxes + - collision detection +translation_of: Games/Techniques/3D_collision_detection +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">この記事では、3D 環境で衝突検出を実装するために使用されるさまざまなバウンディングボリューム手法の概要を説明します。 追求記事では、特定の 3D ライブラリでの実装について説明します。</p> + +<h2 id="Axis-aligned_bounding_boxes" name="Axis-aligned_bounding_boxes">座標軸に沿ったバウンディングボックス</h2> + +<p>2D 衝突検出と同様に、<strong>座標軸に沿ったバウンディングボックス</strong>（axis-aligned bounding boxes、AABB）は、2つのゲームエンティティがオーバーラップしているかどうかを判断するための最も速いアルゴリズムです。 これは、ゲームエンティティを回転しない（つまり座標軸に沿った）ボックスで包み、3D 座標空間でこれらのボックスの位置をチェックして、それらが重なっているかどうかを確認することで構成されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11797/Screen%20Shot%202015-10-16%20at%2015.11.21.png" style="display: block; height: 275px; margin: 0px auto; width: 432px;"></p> + +<p>パフォーマンス上の理由から、<strong>座標軸に沿った拘束</strong>（axis-aligned constraint）があります。 回転しない2つのボックス間の重複領域は、論理比較のみで確認できますが、回転するボックスには追加の三角関数操作が必要であり、計算に時間がかかります。 回転するエンティティがある場合は、バウンディングボックスの寸法を変更してオブジェクトを包むか、球（回転に対して不変）などの別のバウンディングジオメトリータイプを使用することを選択できます。 以下のアニメーション GIF は、回転するエンティティに合うようにサイズを調整する AABB の図形例を示しています。 ボックスは常に寸法を変更して、内部に含まれるエンティティにぴったりとフィットします。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11799/rotating_knot.gif" style="display: block; height: 192px; margin: 0px auto; width: 207px;"></p> + +<div class="note"> +<p><strong>注</strong>: この手法の実際の実装については、<a href="/ja/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">Three.js を使用したバウンディングボリューム</a>の記事を確認してください。</p> +</div> + +<h3 id="Point_vs._AABB" name="Point_vs._AABB">点 対 AABB</h3> + +<p>点が AABB 内にあるかどうかを確認するのは非常に簡単です。 点の座標が、AABB 内にあるかどうかを確認する必要があります。 各座標軸を個別に検討します。 <em>P<sub>x</sub></em>、<em>P<sub>y</sub></em>、<em>P<sub>z</sub></em> を点の座標、<em>B<sub>minX</sub></em>–<em>B<sub>maxX</sub></em>、<em>B<sub>minY</sub></em>–<em>B<sub>maxY</sub></em>、<em>B<sub>minZ</sub></em>–<em>B<sub>maxZ</sub></em> を AABB の各座標軸の範囲とすると、次の式を使用して、2つの間で衝突が発生したかどうかを計算できます。</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>P</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>x</mi></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>X</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>x</mi></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>X</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>y</mi></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>Y</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>y</mi></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>Y</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>z</mi></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>Z</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>z</mi></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>Z</mi></mrow></msub><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">f(P,B)= (P_x >= B_{minX} \wedge P_x <= B_{maxX}) \wedge (P_y >= B_{minY} \wedge P_y <= B_{maxY}) \wedge (P_z >= B_{minZ} \wedge P_z <= B_{maxZ})</annotation></semantics></math></p> + +<p>あるいは、JavaScript では、次のようになります。</p> + +<pre class="brush: js notranslate">function isPointInsideAABB(point, box) { + return (point.x >= box.minX && point.x <= box.maxX) && + (point.y >= box.minY && point.y <= box.maxY) && + (point.z >= box.minZ && point.z <= box.maxZ); +}</pre> + +<h3 id="AABB_vs._AABB" name="AABB_vs._AABB">AABB 対 AABB</h3> + +<p>AABB が別の AABB と交差するかどうかのチェックは、点のテストと同様です。 ボックスの境界を使用して、座標軸ごとに1つのテストを実行する必要があります。 次の図は、X 軸上で実行するテストを示しています。 基本的には、<em>A<sub>minX</sub></em>–<em>A<sub>maxX</sub></em> と <em>B<sub>minX</sub></em>–<em>B<sub>maxX</sub></em> の範囲は重複しているかです。</p> + +<p><img alt="updated version" src="https://mdn.mozillademos.org/files/11813/aabb_test.png" style="display: block; height: 346px; margin: 0px auto; width: 461px;"></p> + +<p>数学的には、これは次のようになります。</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>A</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>X</mi></mrow></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>X</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>X</mi></mrow></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>X</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>Y</mi></mrow></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>Y</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>Y</mi></mrow></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>Y</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>Z</mi></mrow></msub><mo><=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>Z</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>m</mi><mi>a</mi><mi>x</mi><mi>Z</mi></mrow></msub><mo>>=</mo><msub><mi>B</mi><mrow><mi>m</mi><mi>i</mi><mi>n</mi><mi>Z</mi></mrow></msub><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">f(A,B) =</annotation></semantics></math></p> + +<p>そして、JavaScript では、これを使用します。</p> + +<pre class="brush: js notranslate">function intersect(a, b) { + return (a.minX <= b.maxX && a.maxX >= b.minX) && + (a.minY <= b.maxY && a.maxY >= b.minY) && + (a.minZ <= b.maxZ && a.maxZ >= b.minZ); +} +</pre> + +<h2 id="Bounding_spheres" name="Bounding_spheres">バウンディングスフィア</h2> + +<p>バウンディングスフィア（bounding spheres）を使用して衝突を検出することは、AABB よりも少し複雑ですが、それでもテストはかなり迅速です。 球の主な利点は、回転に対して不変であるため、包まれたエンティティが回転しても、バウンディングスフィアは同じままであるということです。 主な欠点は、包んでいるエンティティが実際に球形でない限り、包むのは通常適切ではないことです（つまり、バウンディングスフィアで人を包むと、多くの誤検知が発生しますので、AABB の方が適しています）。</p> + +<h3 id="Point_vs._sphere" name="Point_vs._sphere">点 対 球</h3> + +<p>球に点が含まれているかどうかを確認するには、点と球の中心との間の距離を計算する必要があります。 この距離が球の半径以下の場合、点は球の内側にあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11803/point_vs_sphere.png" style="display: block; height: 262px; margin: 0px auto; width: 385px;"></p> + +<p>2つの点 <em>A</em> と <em>B</em> の間のユークリッド距離が <math><semantics><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>A</mi><mi>x</mi></msub><mo>-</mo><msub><mi>B</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo stretchy="false">)</mo><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>-</mo><msub><mi>B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><mo>-</mo><msub><mi>B</mi><mi>z</mi></msub><mo stretchy="false">)</mo></mrow></msqrt><annotation encoding="TeX">\sqrt{(A_x - B_x) ^ 2) + (A_y - B_y)^2 + (A_z - B_z)}</annotation></semantics></math> であることを考慮すると、点対球の衝突検出の式は次のようになります。</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>P</mi><mo>,</mo><mi>S</mi><mo stretchy="false">)</mo><mo>=</mo><msub><mi>S</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub><mo>>=</mo><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>P</mi><mi>x</mi></msub><mo>-</mo><msub><mi>S</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>y</mi></msub><mo>-</mo><msub><mi>S</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>z</mi></msub><mo>-</mo><msub><mi>S</mi><mi>z</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></msqrt></mrow><annotation encoding="TeX">f(P,S) = S_{radius} >= \sqrt{(P_x - S_x)^2 + (P_y - S_y)^2 + (P_z - S_z)^2}</annotation></semantics></math></p> + +<p>あるいは、JavaScript では、次のようになります。</p> + +<pre class="brush: js notranslate">function isPointInsideSphere(point, sphere) { + // Math.pow を呼び出すよりも高速であるため、乗算を使用しています + var distance = Math.sqrt((point.x - sphere.x) * (point.x - sphere.x) + + (point.y - sphere.y) * (point.y - sphere.y) + + (point.z - sphere.z) * (point.z - sphere.z)); + return distance < sphere.radius; +} +</pre> + +<div class="note"> +<p>上記のコードは平方根を特徴としており、計算にコストがかかる可能性があります。 これを回避する簡単な最適化は、距離の2乗と半径の2乗を比較することで構成されているため、最適化された方程式には、代わりに <code>distanceSqr < sphere.radius * sphere.radius</code> が含まれます。</p> +</div> + +<h3 id="Sphere_vs._sphere" name="Sphere_vs._sphere">球 対 球</h3> + +<p>球対球のテストは、点対球のテストに似ています。 ここでテストする必要があるのは、球の中心間の距離がそれらの半径の合計以下であることです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11805/sphere_vs_sphere.png" style="display: block; height: 262px; margin: 0px auto; width: 414px;"></p> + +<p>数学的には、これは次のようになります。</p> + +<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>A</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>A</mi><mi>x</mi></msub><mo>-</mo><msub><mi>B</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>-</mo><msub><mi>B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><mo>-</mo><msub><mi>B</mi><mi>z</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></msqrt><mo><=</mo><msub><mi>A</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub><mo>+</mo><msub><mi>B</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub></mrow><annotation encoding="TeX">f(A,B) = \sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2} <= A_{radius} + B_{radius}</annotation></semantics></math></p> + +<p>あるいは、JavaScript では、次のようになります。</p> + +<pre class="brush: js notranslate">function intersect(sphere, other) { + // Math.pow を呼び出すよりも高速であるため、乗算を使用しています + var distance = Math.sqrt((sphere.x - other.x) * (sphere.x - other.x) + + (sphere.y - other.y) * (sphere.y - other.y) + + (sphere.z - other.z) * (sphere.z - other.z)); + return distance < (sphere.radius + other.radius); +}</pre> + +<h3 id="Sphere_vs._AABB" name="Sphere_vs._AABB">球 対 AABB</h3> + +<p>球と AABB が衝突しているかどうかのテストは少し複雑ですが、それでも単純で高速です。 論理的なアプローチは、AABB のすべての頂点をチェックし、それぞれに対して点対球のテストを実行することです。 ただし、これはやり過ぎです。 AABB の<em>最も近い点</em>（必ずしも頂点である必要はありません）と球の中心との間の距離を計算して、球の半径以下であるかどうかを確認するだけで済むため、すべての頂点をテストする必要はありません。 この値は、球の中心を AABB の限界にクランプすることで取得できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11837/sphere_vs_aabb.png" style="display: block; height: 282px; margin: 0px auto; width: 377px;"></p> + +<p>JavaScript では、次のようにこのテストを行います。</p> + +<pre class="syntaxbox notranslate">function intersect(sphere, box) { + // クランプして球の中心からボックスの最も近い点を取得します + var x = Math.max(box.minX, Math.min(sphere.x, box.maxX)); + var y = Math.max(box.minY, Math.min(sphere.y, box.maxY)); + var z = Math.max(box.minZ, Math.min(sphere.z, box.maxZ)); + + // これは isPointInsideSphere と同じです + var distance = Math.sqrt((x - sphere.x) * (x - sphere.x) + + (y - sphere.y) * (y - sphere.y) + + (z - sphere.z) * (z - sphere.z)); + + return distance < sphere.radius; +} +</pre> + +<h2 id="Using_a_physics_engine" name="Using_a_physics_engine">物理エンジンの使用</h2> + +<p><strong>3D 物理エンジン</strong>（3D physics engines）は、衝突検出アルゴリズムを提供していますが、そのほとんどは、バウンディングボリュームにも基づいています。 物理エンジンが機能する方法は、通常はその視覚的表現に付属した<strong>物理的なボディ</strong>（physical body）を作成することです。 このボディには、速度、位置、回転、トルクなどのプロパティと、<strong>物理的な形状</strong>（physical shape）があります。 この形状は、衝突検出の計算で考慮されるものです。</p> + +<p>このような手法が実際に動作していることを確認できる<a href="http://mozdevs.github.io/gamedev-js-3d-aabb/physics.html">ライブ衝突検出デモ</a>（<a href="https://github.com/mozdevs/gamedev-js-3d-aabb">ソースコード</a>付き）を用意しました。 これは、オープンソースの 3D 物理エンジン <a href="https://github.com/schteppe/cannon.js">cannon.js</a> を使用しています。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>MDN の関連記事</p> + +<ul> + <li><a href="/ja/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">Three.js によるバウンディングボリューム衝突検出</a></li> + <li><a href="/ja/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></li> +</ul> + +<p>外部リソース</p> + +<ul> + <li>Gamasutra の<a href="http://www.gamasutra.com/view/feature/3383/simple_intersection_tests_for_games.php">ゲームのための簡単な交点テスト</a>（英語）</li> + <li>ウィキペディアの<a href="https://en.wikipedia.org/wiki/Bounding_volume">バウンディングボリューム</a>（英語）</li> +</ul> diff --git a/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html new file mode 100644 index 0000000000..079a49bed5 --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/basic_theory/index.html @@ -0,0 +1,132 @@ +--- +title: 基本の 3D理論の説明 +slug: Games/Techniques/3D_on_the_web/Basic_theory +tags: + - 3D + - Coordinates + - Textures + - basics + - fragment + - lighting + - primitives + - rendering + - theory + - vertex + - vertices +translation_of: Games/Techniques/3D_on_the_web/Basic_theory +--- +<div>{{GamesSidebar}}</div> + +<p>本記事では 3D を始める人が知るべき基本的な理論について説明します。</p> + +<h2 id="Coordinate_system" name="Coordinate_system">座標系</h2> + +<p>3D とは一般的に 3D空間内で描写されているすべての形であり、それらの位置を計算するために座標系が使われています。</p> + +<p><img alt="Coordinate system" src="https://mdn.mozillademos.org/files/13326/mdn-games-3d-coordinate-system.png" style="height: 338px; width: 600px;"></p> + +<p>WebGL は右手系座標系を利用します - 上記の図のように <code>x</code> 軸は右方向へ、<code>y</code> 軸は上方向へ、<code>z</code> 軸はスクリーンの外の方向へ向かいます。</p> + +<h2 id="Objects" name="Objects">オブジェクト</h2> + +<p>さまざまな種類のオブジェクトは頂点を用いて構築されます。<strong>頂点</strong> は空間上の点であり、座標系における 3D の位置を持ち、たいていはいくつか追加で情報が定義されています。すべての頂点は次の属性を描写します:</p> + +<ul> + <li><strong>位置</strong>: 3D空間の位置を特定します(<code>x</code>, <code>y</code>, <code>z</code>)。</li> + <li><strong>色</strong>: RGBA値を持ちます(R、G、B は赤、緑、青のチャンネルを、alpha は透過度を - すべての値の範囲は <code>0.0</code> から <code>1.0</code> までです)。</li> + <li><strong>法線</strong>: 頂点の表面の方向を示す方法。</li> + <li><strong>テクスチャ</strong>: 単色の代わりに頂点の表面を飾る 2D画像。</li> +</ul> + +<p>この情報を用いて形状を構築することができます - 次は立方体の例です:</p> + +<p><img alt="Cube" src="https://mdn.mozillademos.org/files/13324/mdn-games-3d-cube.png" style="height: 265px; width: 600px;"></p> + +<p>形から定義される表面は頂点同士の表面となります。例えば、立方体は 8 つの異なる頂点(空間上の点)と 6 つの異なる表面を持ち、それぞれの表面が 4 つの頂点から構築されています。法線は表面がどの方向に向いているかを定義します。そしてまた、立方体の端で点が接続されています。形状は頂点と法線から構築され、また材質は色や画像のテクスチャになります。形状が材質と接続されている場合、メッシュを得ることができます。</p> + +<h2 id="Rendering_pipeline" name="Rendering_pipeline">レンダリングパイプライン</h2> + +<p>レンダリングパイプラインはスクリーン上に画像を準備し、スクリーン上に出力するためのプロセスです。画像のレンダリングパイプラインは 3D オブジェクトを <strong>頂点</strong> を用いて作図された <strong>単純なオブジェクト(プリミティブ)</strong> から作り、処理を加え、<strong>断片(フラグメント)</strong> を計算し、そして 2D のスクリーン上に <strong>ピクセル</strong> として出力します。</p> + +<p><img alt="Rendering pipeline" src="https://mdn.mozillademos.org/files/13334/mdn-games-3d-rendering-pipeline.png" style="height: 225px; width: 600px;"></p> + +<p>上記の図で使われる専門用語は以下の通りです:</p> + +<ul> + <li><strong>プリミティブ(Primitive)</strong>: パイプラインの入力 - これは頂点から構築され、三角形や点、ラインとなります。</li> + <li><strong>断片(Fragment)</strong>: ピクセルを 3D に投影したもの、すべての属性はピクセルと同じ属性を持つ。</li> + <li><strong>ピクセル(Pixel)</strong>: スクリーン上の二次元のグリッドに配置された点、それぞれ RGBA の色を持つ。</li> +</ul> + +<p>頂点とフラグメントの処理はプログラミング可能です - あなたは <a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">自分自身でシェーダを書いて</a> 出力を操作することができます。</p> + +<h2 id="Vertex_processing" name="Vertex_processing">頂点の処理</h2> + +<p>頂点の処理は個々の座標の情報をつなげることでプレミティブを作成し、それらの座標を 3D空間のビューアで見られるように設定します。これは風景の写真を撮る準備に似ています - 最初にオブジェクトを配置し、カメラを設定し、そして撮影します。</p> + +<p><img alt="Vertex processing" src="https://mdn.mozillademos.org/files/13336/mdn-games-3d-vertex-processing.png" style="height: 338px; width: 600px;"></p> + +<p>この処理には４つの段階があります: 最初の処理はオブジェクトを配置するのに必要な処理で、これは <strong>model transformation(モデル変換)</strong> と呼ばれています。そして <strong>view transformation(視野変換)</strong> で 3D 空間上のカメラの位置の設定と向きを設定をします - 位置、方角、そして角度 - これは新しいシーンを作成したときに定義しなくてはなりません。</p> + +<p><img alt="Camera" src="https://mdn.mozillademos.org/files/13322/mdn-games-3d-camera.png" style="height: 225px; width: 600px;"></p> + +<p><strong>Projection transformation(投影変換)</strong> (または perspective transformation(透視変換) とも呼ばれます) はカメラの設定を定義します。これはカメラから何が見えるのかを設定します - 設定には <em>field of view(視野)</em>、<em>aspect ratio(アスペクト比)</em> そして任意の <em>近く(near)</em> と <em>遠くの平面(far planes)</em> を含みます。これらを学ぶには Three.js の <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">Camera paragraph</a> の記事を読んでください。</p> + +<p><img alt="Camera settings" src="https://mdn.mozillademos.org/files/13320/mdn-games-3d-camera-settings.png" style="height: 338px; width: 600px;"></p> + +<p>最後の処理は <strong>viewport transformation(ビューポート変換)</strong> で、レンダリングパイプラインの次の処理で出力に使うすべての処理を含みます。</p> + +<h2 id="Rasterization" name="Rasterization">ラスタ化</h2> + +<p>ラスタ化は(頂点で接続された)プリミティブを断片の集まりに変換します。</p> + +<p><img alt="Rasterization" src="https://mdn.mozillademos.org/files/13332/mdn-games-3d-rasterization.png" style="height: 338px; width: 600px;"></p> + +<p>それらの断片 - 3D 投影からなる 2D のピクセル - はピクセルのグリッドに整列されていて、最終的に出力統合の段階の間ピクセルとして 2D のスクリーン上に出力可能になります。</p> + +<h2 id="Fragment_processing" name="Fragment_processing">断片処理</h2> + +<p>断片処理はテクスチャと照明に焦点を当てます - これは与えられたパラメータを元に最終的な色を計算します。</p> + +<p><img alt="Fragment processing" src="https://mdn.mozillademos.org/files/13328/mdn-games-3d-fragment-processing.png" style="height: 338px; width: 600px;"></p> + +<h3 id="Textures" name="Textures">テクスチャ</h3> + +<p>テクスチャは 3D 空間上でより見た目がよく、よりリアルなオブジェクトを作成するために使われる 2D 画像です。テクスチャは texels と呼ばれる単一テクスチャ要素から組み合わされており、texels は写真の要素と同様のピクセルの組み合わせです。レンダリングパイプラインの断片処理の段階でテクスチャをオブジェクトに追加することで必要によってオブジェクトを覆うよう調整したり、フィルターリングをすることができます。</p> + +<p>テクスチャは 3D オブジェクトの間で繰り返し 2D画像を覆うことができます。テクスチャのフィルターリングは元の解像度またはテクスチャの画像が表示される断片と異なる場合に適用されます - これは結果的に縮小または拡大となります。</p> + +<h3 id="Lighting" name="Lighting">照明</h3> + +<p>私たちがスクリーン上で見る色は光とオブジェクトの素材自体の表面の色との相互作用の結果となります。光は吸収されるか、反射されるでしょう。WebGL で実装されている標準的な <strong>Phong Lighting Model</strong> には４つの光のタイプがあります:</p> + +<ul> + <li><strong>Diffuse</strong>: 太陽のような、遠くからの指向性のある光。</li> + <li><strong>Specular</strong>: 部屋の中の電球や閃光のような、光のポイント。</li> + <li><strong>Ambient</strong>: シーンにあるすべてに絶え間なく当てられる光。</li> + <li><strong>Emissive</strong>: オブジェクトから直接発せられる光。</li> +</ul> + +<h2 id="Output_merging" name="Output_merging">出力統合</h2> + +<p>出力処理の段階の間で、スクリーンディスプレイ上に出力するために 3D空間上のすべてのプリミティブの断片を 2D グリッドのピクセルに変換する。</p> + +<p><img alt="Output merging" src="https://mdn.mozillademos.org/files/13330/mdn-games-3d-output-merging.png" style="height: 338px; width: 600px;"></p> + +<p>出力統合の間はいくつかの処理は必要のないものであれば無視されます - 例えばオブジェクトがスクリーンの外や他のオブジェクトの後ろにあったりすることでそれらは不可視であれば計算はされません。</p> + +<ul> +</ul> + +<h2 id="Conclusion" name="Conclusion">終わりに</h2> + +<p>これで 3D の処理の基本的な背景を知ることができました。もし練習に進んだり、動作するデモを見たいのでえあれば、下のチュートリアルを引き続き調べてください:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js でデモを作る</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js </a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas </a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成 </a></li> +</ul> + +<p>さらに進んで、クールな最先端な 3D の試みをあなた自身で作ってください！</p> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html new file mode 100644 index 0000000000..8dac345c69 --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.html @@ -0,0 +1,288 @@ +--- +title: A-Frameを使った基本的なデモの作成 +slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame +translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame +--- +<div>{{GamesSidebar}}</div> + +<p class="summary"><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR</a> APIと <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> API によって、ウェブブラウザ内でバーチャルリアリティ (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリが現れるのを待っています。Mozilla の <a href="https://aframe.io/">A-Frame</a> フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています; これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。</p> + +<h2 id="大まかな概要">大まかな概要</h2> + +<p>A-Frame の現在のバージョンは 0.3.2 で、まだまだ実験的な段階ですが、既に動作しており、すぐにブラウザで試すことができます。デスクトップやモバイル (iOS や Android) の Oculus Rift、GearVR、HTC Vive で動作します。</p> + +<p>A-Frame は <a href="/ja-JP/docs/Web/API/WebGL_API">WebGL</a> 上に構築されていて、アプリケーション内で使える構築済みコンポーネント (モデル、ビデオプレイヤー、スカイボックス、ジオメトリ、コントロール、カーソルなど）を持っています。A-Frame は、ゲーム開発業界でよく知られている<a href="https://en.wikipedia.org/wiki/Entity_component_system">エンティティ-コンポーネント システム (entity component system)</a>に基づいていますが、マークアップ構造に慣れたウェブ開発者を対象としていて、JavaScript による操作が可能です。つまり、デフォルトで VR-enabled な 3D ウェブ体験となります。</p> + +<h2 id="環境設定">環境設定</h2> + +<p>A-Frame で何かを作るために環境設定を始めましょう。デモを構築しながら動かしていきます。次のことから始めてください：</p> + +<ul> + <li>最新の Firefox やChromeのような WebGL を十分サポートしている最新のブラウザ (もし利用可能な VR ハードウェアがある場合は WebVR をサポートしているブラウザ) を使っているか確認してください — <a href="https://nightly.mozilla.org/">Firefox Nightly</a> または Chrome (v54 以降) をダウンロードしましょう。</li> + <li>(必要に応じて) Oculus Rift や Google Cardboard のような VR デバイスをセットアップします。</li> + <li>プロジェクトを保存する新しいディレクトリを作成します。</li> + <li>そのディレクトリに、最新の <a href="https://github.com/aframevr/aframe/tree/master/dist">A-Frame JavaScript library file</a> (GitHub 最新の安定開発版リポジトリを確認してください) のコピーを保存します。</li> + <li>別のタブで <a href="https://aframe.io/docs/">A-Frame documentation</a> を開いておきます — 参照するのに便利なので。</li> +</ul> + +<p><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">HTML 構造</strong></p> + +<p>最初のステップは HTML ドキュメントを作成することです — 先程作成したプロジェクトディレクトリの中に、新しく <code>index.html</code> ファイルを作成して、その中に次の HTML を記述して保存します:</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>MDN Games: A-Frame demo</title> + <script src="aframe.min.js"></script> +</head> +<body> + <!-- HTML goes here --> +</body> +</html> +</pre> + +<p>ドキュメント<code>charset<font face="Open Sans, Arial, sans-serif"> や </font></code><code><title> </code>のような基本的な情報を含んでいます．最初の <code><script></code> 要素は A-Frameフレームワークをページにインクルードします; <code><body></code> 要素の中にサンプルコードを書いていきます．</p> + +<h3 id="シーンの初期化">シーンの初期化</h3> + +<p>シーンは、すべてが起こる場所です。このデモでは新しいオブジェクトを作成したら、それら全てをシーンへ追加していきます。そうすることで、それらのオブジェクトがスクリーン上に表示されるようになります。A-Frameの中では、シーンは <a href="https://aframe.io/docs/core/scene.html">Scene エンティティ</a> で表現されています。</p> + +<div class="note"> +<p><strong>注記</strong>: エンティティは任意の要素です — box や cylinder や cone のようなオブジェクトだけでなく、camera、light、sound sourceもエンティティです。</p> +</div> + +<p><code><body></code> 要素の内側に <code><a-scene></code> 要素を追加してシーンを作成してみましょう:</p> + +<pre class="brush: html"><a-scene> +</a-scene> +</pre> + +<h3 id="立方体の追加">立方体の追加</h3> + +<p>シーンに立方体を追加するには、単に <code><a-scene></code> 要素の内側に <code><a href="https://aframe.io/docs/primitives/a-cube.html"><a-cube></a></code> 要素を追加するだけです。次のコードを追加します:</p> + +<pre class="brush: html"><a-cube + color="#0095DD" + position="0 1 0" + rotation="20 40 0"> +</a-cube> +</pre> + +<p>いくつかの定義済みパラメータが含まれています: <code>color</code>、<code>position</code>、<code>rotation</code> — かなり分かりやすいと思いますが、立方体の色や 3D シーン内の位置、そして立方体の回転状態を定義しています。</p> + +<div class="note"> +<p><strong>注記</strong>: 距離の値 (例えば、立方体のy方向の位置) は単位がなく、シーンに適切と思える好きな単位 — ミリメートル、メートル、フィート、マイル — と考えてください。あなた次第です。</p> +</div> + +<h3 id="背景の追加_スカイボックス">背景の追加: スカイボックス</h3> + +<p>スカイボックス(sky box) は 3D 空間における背景で、<code><a href="https://aframe.io/docs/primitives/a-sky.html"><a-sky></a></code> 要素で表現します。このデモでは、単純な背景色を使いますが、画像などを使うこともできます。周りを見回したときに晴れた空なのか、木造の納屋なのか、どんな場所にいるか好きな印象を与えることができます! <code><a-cube></code> 要素の直前に次の HTML を追加します:</p> + +<pre class="brush: html"><a-sky color="#DDDDDD"></a-sky> +</pre> + +<p>ここで、コードを保存してブラウザを更新すると、設定した背景のスクリーン上に立方体が見えるはずです:</p> + +<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/cube.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>ここまでで作ってきたコードは次の通りです:</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/m85148b4/","","350")}}</p> + +<p><a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/cube.html">Github 上で確認</a>することもできます。</p> + +<p>A-Frame は必要となるものをすべてセットアップしてくれます:</p> + +<ul> + <li>デフォルトの光源やカメラが含まれているので、立方体が見えています。</li> + <li>コントロールも既に動作しています: マウスを使って周りを見回したり、キーボードで移動することができます ( <kbd>W</kbd>、<kbd>A</kbd>、<kbd>S</kbd>、<kbd>D</kbd> キーを試してください)。</li> + <li>VRモードに入る("Enter VR mode") ボタンもスクリーン右下にあり、VR ハードウェアがセットアップされて使える状態になっていれば、ステレオ画面分割されたフルスクリーンモードへ移行できます</li> +</ul> + +<h3 id="カメラの指定">カメラの指定</h3> + +<p>camera エンティティは、 <code><a href="https://aframe.io/docs/primitives/a-camera.html"><a-camera></a></code> 要素をシーンへ追加することで作成することもできます。カメラの位置を明示的に指定することができ、形状が見えるようにシーンの中心から少しだけ後ろに移動させています。<code></a-scene></code> 要素を閉じる前にこれを追加します:</p> + +<pre class="brush: html"><a-camera + position="0 1 4" + cursor-visible="true" + cursor-scale="2" + cursor-color="#0095DD" + cursor-opacity="0.5"> +</a-camera> +</pre> + +<p><code>cursor-*</code> 属性を使って、カメラにカーソルを設定することもできます (デフォルトは非表示) — 見やすくするためにカーソルのスケールを設定するだけでなく、背後にあるオブジェクトを隠してしまうのを防ぐために色や透明度を設定することもできます。</p> + +<h3 id="ライトの追加">ライトの追加</h3> + +<p>A-Frame の基本的な光源タイプは directional と ambient です。最初のタイプはシーン内のどこかに配置された平行光源で、2つ目のタイプは最初のタイプから反射しますのでより自然に見えます; このライトはグローバルにセットできます。新しいコードを既存コードの下に追加します — ここでは標準的な <code><a-light></code> 要素を使います:</p> + +<pre class="brush: html"><a-light + type="directional" + color="#FFF" + intensity="0.5" + position="-1 1 2"> +</a-light> +<a-light + type="ambient" + color="#FFF"> +</a-light> +</pre> + +<p>directional ライトは白色で、強度を <code>0.5</code> にセットし、位置 <code>-1 1 2</code> に配置しています。ambient ライトは色のみ指定することができ、これも白にしています。</p> + +<h3 id="もう少し高度なジオメトリの追加">もう少し高度なジオメトリの追加</h3> + +<p>ここまでにシーンに立方体を追加できました; それでは、もう少し形状を追加してみましょう。<code><a-cube></code> のようなデフォルトエンティティに制限されているわけではありません — <code><a-entity></code> を用いて、独自の複雑な形状を作成することができます。トーラスを追加してみましょう — 次の要素を既存コードの下に追加します:</p> + +<pre class="brush: html"><a-entity + geometry=" + primitive: torus; + radius: 1; + radiusTubular: 0.1; + segmentsTubular: 12;" + rotation="10 0 0" + position="-3 1 0"> +</a-entity> +</pre> + +<p>ここで追加したエンティティは <a href="https://aframe.io/docs/components/geometry.html#Torus">トーラス プリミティブ</a>で、トーラス形状を表します。形状に幾つかの初期値を与えています: トーラスの外側エッジの半径、チューブの半径、チューブの円周方向の分割数をそれぞれ指定します。回転と位置は、今までに見てきたものと同様にセットしました。</p> + +<h3 id="マテリアルの定義">マテリアルの定義</h3> + +<p>シーンにトーラスが表示されましたが、色があまり良くありません — エンティティの見た目を定義するには<a href="https://aframe.io/docs/components/material.html">マテリアル(材質)</a> を作成する必要があります。 <code><a-entity></code> を次のように編集して、トーラスの見た目を定義します:</p> + +<pre class="brush: html"><a-entity + geometry=" + primitive: torus; + radius: 1; + radiusTubular: 0.1; + segmentsTubular: 12;" + material=" + color: #EAEFF2; + roughness: 0.1; + metalness: 0.5;" + rotation="10 0 0" + position="-3 1 0"> +</a-entity> +</pre> + +<p>新しく追加した <code>material</code> 属性では、マテリアルの <code>color</code> と、 <code>roughness</code> (表面の粗いマテリアルは、滑らかなマテリアルよりも反射光の方向が散らばります)、<code>metalness</code> (マテリアルがどの程度金属っぽいか) をセットしています。</p> + +<h2 id="mixのための_JavaScript_の追加">mixのための JavaScript の追加</h2> + +<p>JavaScript で作成したエンティティをシーンへ追加することもできますので、その機能を使って3つ目の形状として円柱を追加してみましょう。<code><body></code> 要素の最後、つまり <code><a-scene></code> の直後に、新たに {{htmlelement("script")}} 要素を追加し、その内側に次の JaveScript コードを記述します:</p> + +<pre class="brush: js">var scene = document.querySelector('a-scene'); +var cylinder = document.createElement('a-cylinder'); +cylinder.setAttribute('color', '#FF9500'); +cylinder.setAttribute('height', '2'); +cylinder.setAttribute('radius', '0.75'); +cylinder.setAttribute('position', '3 1 0'); +scene.appendChild(cylinder); +</pre> + +<p>最初にシーンハンドラへの参照を取得して、A-Frame エンティティの1つである cylinder 要素を作成します。あとはすべて適切な属性の設定です: 色 <code>color</code>、高さ <code>height</code>、半径 <code>radius</code>、位置 <code>position</code>。最後の行では、新しく作成した円柱をシーンへ追加しています。それだけで — 3つの異なる形状を A-Frame で作成できました! 次のように見えているはずです:</p> + +<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>数行の HTML と JavaScript でこのようなシーンが作成できてしまうなんて素晴らしいですね。</p> + +<h2 id="アニメーション">アニメーション</h2> + +<p><code>rotation</code> や <code>position</code> を使ってシーン上の形状を動かしてきましたが、拡大縮小をすることもできます。<a href="https://aframe.io/docs/core/animation.html">アニメーション</a>するイリュージョンを作成するためにこれらの属性を操作できます。</p> + +<h3 id="回転">回転</h3> + +<p>要素をアニメーションさせるのに便利な、特別な <code><a href="https://aframe.io/docs/core/animation.html"><a-animation></a></code> エンティティがあります。<code><a-animation></code> 要素を <code><a-cube></code> 要素の子として、次のように追加します:</p> + +<pre class="brush: html"><a-cube + color="#0095DD" + rotation="20 40 0" + position="0 1 0"> + <a-animation + attribute="rotation" + from="20 0 0" + to="20 360 0" + direction="alternate" + dur="4000" + repeat="indefinite" + easing="ease"> + </a-animation> +</a-cube> +</pre> + +<p>他のエンティティでも同様に、アニメーション用のキープロパティを定義できます。ここでは <code>rotation</code> 属性を <code>20 0 0</code> から <code>20 360 0</code> へとアニメーションさせているので、1周回転することになります。アニメーションの方向(direction)は、alternate に設定されているため、順方向(forward)にアニメーションが再生されます。継続時間(duration)を 4 秒に、そして繰り返し(repeat)がずっと続く(indefinite)ように設定してします。アニメーションの easing は <code>ease</code> を使っています。これは内部的に実装されている <a href="https://github.com/tweenjs/tween.js/">tween.js</a> によって実行されます。</p> + +<h3 id="拡大縮小">拡大縮小</h3> + +<p>エンティティのアニメーションは、このデモで使ったトーラスのようなカスタムジオメトリにも同じように追加することができます。次に示す <code><a-animation></code> 要素をトーラスへ追加します:</p> + +<pre class="brush: html"><a-entity + geometry=" + primitive: torus; + radius: 1; + radiusTubular: 0.1; + segmentsTubular: 12;" + material=" + color: #EAEFF2; + roughness: 0.1; + metalness: 0.5;" + rotation="10 0 0" + position="-3 1 0"> + <a-animation + attribute="scale" + to="1 0.5 1" + direction="alternate" + dur="2000" + repeat="indefinite" + easing="linear"> + </a-animation> +</a-entity> +</pre> + +<p>このトーラスをアニメーションさせる対象の属性は <code>scale</code> です。初期のデフォルトスケールは <code>1 1 1</code> で、それを <code>1 0.5 1</code> にアニメーションさせていますので、 <code>y</code> 軸が <code>1</code> から <code>0.5</code> へスケールが変化します。easing には <code>linear</code> を使っています。direction を <code>alternate</code> にセットすることで、2秒かけてスケールが <code>0.5</code> へ変化したあと <code>1</code> へと戻ります。再度、repeat は indefinite を指定して無限に繰り返す設定にしています。</p> + +<h3 id="移動">移動</h3> + +<p><code>render()</code> 関数を使って，シリンダの位置を毎フレーム更新します - Y軸の値を変更でき，移動にどんな効果がでるか見てみましょう．</p> + +<p>3つ目の形状の位置(position)をアニメーションさせるのに <code><a-animation></code> を使うこともできますが、ここではその代わりに JavaScript を使ってみましょう。このコードを <code><script></code> タグの末尾に追加します:</p> + +<pre class="brush: js">var t = 0; +function render() { + t += 0.01; + requestAnimationFrame(render); + cylinder.setAttribute('position', '3 '+(Math.sin(t*2)+1)+' 0'); +} +render(); +</pre> + +<p>円柱の位置を毎フレーム更新するために <code>render()</code> 関数を使っています。<code>y</code> 軸に与える値を変更して、それが移動にどんな影響をあたえるか試してみてください。</p> + +<h2 id="最後に">最後に</h2> + +<p>すべて適切にレンダリングされてアニメーションしていますね — おめでとう、あなたの最初の A-Frame シーンが構築できました! 最終版がどのように見えて、どのように動くかは、ここで確認できます:</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/sq94qd6e/","","350")}}</p> + +<p>利用可能な VR デバイスを持っていれば、それを使ってあなたのシーンを試す良いタイミングです。</p> + +<div class="note"> +<p><strong>注記</strong>: <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/A-Frame/shapes.html">Github で確認</a>することもできます。</p> +</div> + +<p>思っていたよりも簡単だったでしょう? A-Frame はウェブ開発者を対象に、ウェブマークアップの容易さや、JavaScript 操作のような利点を取り込んでいます。簡単に始められて、その上、先進的なコンセプトの強力なAPIも提供しています。 as well as dealing with cross browser differences and suchlike. コミュニティも、ちょうどサポートする VR デバイスの数のように広がっています — このフレームワークで実験を始めるにはちょうどよい機会です。</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="http://aframe.io/">A-Frame website</a></li> + <li><a href="http://mozvr.com/">MozVR website</a></li> + <li><a href="https://aframe.io/blog/2015/12/16/introducing-aframe/">Introducing A-Frame 0.1.0 article</a></li> + <li><a href="https://aframevr.tumblr.com/">Made with A-Frame Tumblr</a></li> + <li><a href="https://github.com/ngokevin/aframe-physics-components">A-Frame physics plugin</a></li> + <li><a href="https://github.com/donmccurdy/aframe-gamepad-controls">A-Frame gamepad controls plugin</a></li> +</ul> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.html new file mode 100644 index 0000000000..a46b7a37ef --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.html @@ -0,0 +1,282 @@ +--- +title: Building up a basic demo with Babylon.js +slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js +translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">Babylon.jsは開発者に使われている最も有名な3Dゲームエンジンです。他のどんな3Dと同様に、より迅速に共通の3D機能を実装するのを助けるプラグイン機能を提供します。この記事ではBabylon.jsを使った基礎を通じて開発環境の構築、必要なHTML構造、JavaScriptの書き方を提供します。</p> + +<p>はじめに、簡単なデモを作ることに挑戦します。 — 立方体をレンダリングさせます。もしThree.js、PlayCanvas、A-Frame（もしくは同様の他の3Dライブラリー）と一緒に基本的なデモシリーズをすでに動かしていたら、camera、light、といったオブジェクト達と同様のコンセプトが動くことをBabylon.jsで気づくかも知れません。</p> + +<h2 id="環境構築">環境構築</h2> + +<p>Babylon.jsの開発を始めるにあたって、そんなに多くのものを必要としません。以下によってすぐに始めるべきです。:</p> + +<ul> + <li>最新のFirefoxやChromeと言った十分なWebGLのサポートのあるモダンブラウザを使っていることを確かめて下さい。</li> + <li>作業用のディレクトリを作成して下さい。</li> + <li>ディレクトリに最新のBabylon.jsエンジンをコピーして保存して下さい。</li> + <li>Babylon.jsドキュメントを別のタブに開いて下さい。 — 参照するのに役に立ちます。</li> +</ul> + +<h2 id="HTML構造">HTML構造</h2> + +<p>ここに使うHTMLの構造を示します: </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>MDN Games: Babylon.js demo</title> + <style> + html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } + </style> +</head> +<body> +<script src="babylon.js"></script> +<canvas id="render-canvas"></canvas> +<script> + var canvas = document.getElementById("render-canvas"); + /* all our JavaScript code goes here */ +</script> +</body> +</html> +</pre> + +<p>ここには文書の {{htmlelement("title")}} (タイトル) や、Babylon.js がその内容を描画するための{{htmlelement("canvas")}} 要素の幅や高さが利用可能なビューポート領域全体を占めるようにする CSS など、文書の基本的な情報が含まれています。 初めの{{htmlelement("script")}}要素はBabylon.jsに含みます。; サンプルコードを次に書いていきます。 これらはすでに含まれていて可変な一つの助けになります。そしてそれは、<code><canvas>要素の参照を保存していくものになります。</code>.</p> + +<p>読み続ける前に<code>index.html</code>.として、作業ディレクトリに新しいテキストファイルとしてこのコードをコピーして下さい。</p> + +<h2 id="Babylon.jsエンジンの初期化">Babylon.jsエンジンの初期化</h2> + +<p>はじめに、ゲームの開発を始める前にBabylon.jsエンジンのインスタンスを作らなければなりません。(レンダーするための<code><canvas>要素を省きます</code> ) 次の<code><script>要素のボタンのコードを次に付け加えます</code>:</p> + +<pre class="brush: js">var engine = new BABYLON.Engine(canvas); +</pre> + +<p>BABYLONグローバルオブジェクトはエンジンにおいてすべてのBabylon.js機能を可能にするものを含みます。</p> + +<h2 id="sceneの作成">sceneの作成</h2> + +<p>sceneはゲームのコンテンツを表示する場所です。デモの新しいオブジェクトを作成する一方でscreenでそれらが見えるようにするためにそこにすべてをsceneに付け加えます。ちょうど以下のようなコードに従って次の行を加えることでsceneを作ってみましょう。:</p> + +<pre class="brush: js">var scene = new BABYLON.Scene(engine); +scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8); +</pre> + +<p> </p> + +<p>このようにsceneは作られて、2番目の行を書いてバックグラウンドカラーをグレーにします。</p> + +<h2 id="レンダリングのループを作る">レンダリングのループを作る</h2> + +<p>sceneが見えるようにするためにレンダーをしなければなりません。<code><script>要素で終わるこれらの要素を加えてちょうど</script>の前で閉じます。</code></p> + +<pre class="brush: js">var renderLoop = function () { + scene.render(); +}; +engine.runRenderLoop(renderLoop); + +</pre> + +<p>エンジンの<code>runRenderLoop()メソッドが使われるとrenderLoop()関数がフレームの中で繰り返し実行されます。ループは止めろという命令があるまで永久に繰り返しレンダーが行われます。</code></p> + +<h2 id="cameraの作成">cameraの作成</h2> + +<p>セットアップコードは標準的なsceneの構成要素であるcameraやlightやオブジェクトを実行するためのものが必要な場所です。cameraをはじめましょう。— 以下の行をあなたのコードに加えましょうこの行はsceneを作成したり、<code>clearColor</code>.を定義するための行です。</p> + +<pre class="brush: js">var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene); +</pre> + +<p> </p> + +<p>Babylon.jsにはたくさんのcameraを可能にするものがあります。<code>FreeCameraは最も基本的で普遍的なものの1つです。初期化するために3つのパラメータを通す必要があります。</code>:<code>どんな名前で使いたいか、3Dで示したい座標、加えたいシーン。</code></p> + +<div class="note"> +<p><strong>Note</strong>: あなたはここで使う <code>BABYLON.Vector3()メソッドに注意を払うだろう</code> — この定義はsceneでの3Dの位置を決めるものである。 Babylon.js は完全な数学のライブラリーをバンドルしていて、それはベクトル、色、行列などを操作するものなのである。</p> +</div> + +<h2 id="lightをここに置きます">lightをここに置きます</h2> + +<p>Babylon.jsには様々なlightソースがあります。最も基本的なものの1つに<code>PointLightがあり、それはフラッシュライトのような働きをします。</code> — 与えられた方向からスポットライトを照らします。カメラの定義の下に次の行を加えましょう。</p> + +<pre class="brush: js">var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10, 10, 0), scene); + +</pre> + +<p>パラメーターはカメラの定義に非常によく似ています。:lightの名前、3D空間の位置、ライトを与えたいscene。</p> + +<h2 id="幾何構造">幾何構造</h2> + +<p>今、sceneが適当で3Dを形作ることができるようになって、レンダリングします。Babylon.jsのさらなる開発のスピードアップのために単一文のコードで即座に形作ることのできる前定義の原始的なまとまりを提供する必要があります。これらは立方体で球体で円柱でもっと複雑な形状を形作ることも可能です。それでは、箱形の幾何構造の設定を始めてみましょう。---次のように新しいコードを加えてみましょう。</p> + +<pre class="brush: js">var box = BABYLON.Mesh.CreateBox("box", 2, scene); +</pre> + +<p> </p> + +<p>メッシュは幾何学的形状を作り出すエンジンの方法です。ですのでmaterialはあとからこれらを適応することを簡単にすることができます。この場合ではサイズが2であることやsceneに加えたい宣言やを含んだMesh.CreateBoxメソッドを用いることで箱形を創りあげることができます。</p> + +<p> </p> + +<div class="note"> +<p><strong>Note</strong>: サイズや位置の値は（例えば箱形のサイズ）は単位がなく、基本的にあなたのsceneに適していると考えられるすべてのものにできます。---ミリメーター、メーター、フィート、あるいはマイル ---あなたができるもののうち</p> +</div> + +<p>もし、ファイルを保存して、ブラウザをリフレッシュを今できれば、正方形を見ることができるでしょう。なぜならcameraに焦点が当たっているからです。オブジェクトにとって良いことはscene上にそれらを動かすことができることです。しかしながら望めば例えば回転や拡大・縮小を行うことができます。それでは箱形を少し回転させてみましょう。それからさらにもう一つの面をみることができます。 --- 以下のようなこれらの行を付け加えて下さい。</p> + +<p> </p> + +<pre class="brush: js">box.rotation.x = -0.2; +box.rotation.y = -0.4; +</pre> + +<p> </p> + +<p>同時にこれらの箱は黒く見えます。なぜなら面にmaterialを定義していないからです。それでは次で扱いましょう。</p> + +<h2 id="Material">Material</h2> + +<p>Materialはオブジェクトを覆うものです。---カラーや表面のテクスチャといったものです。この場合では単純な青を箱形に塗ります。これらには使うことのできるたくさんのタイプのmaterialがありますが今は標準的なものをすれば十分です。以下のようなこれらの行を加えて下さい。</p> + +<pre class="brush: js">var boxMaterial = new BABYLON.StandardMaterial("material", scene); +boxMaterial.emissiveColor = new BABYLON.Color3(0, 0.58, 0.86); +box.material = boxMaterial; +</pre> + +<p> </p> + +<p>StandardMaterialは2つのパラメータを持ちます。:名前、付け加えたいsceneの名前。二つ目の行はemissiveColorを定義するものです。 --- 我々に見えるようにするものの一つ。機能を定義するためにColor3のビルトインを使うことができます。三番目の行は箱形のmaterialを新しく作り出す割り当てをします。</p> + +<p>おめでとう。Babylon.jsの環境を使った3Dのオブジェクトを初めて創り出しました。あなたが考えているよりも簡単にできたのではないでしょうか？ここにどのように見えるべきか示します。</p> + +<p><img alt="Blue Babylon.js 3D box on the gray background." src="https://end3r.github.io/MDN-Games-3D/Babylon.js/img/cube.png" style="display: block; height: 490px; margin: 0px auto; width: 600px;"></p> + +<p>そして今まで作ったコードはここです。</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/9zoeo5sy/","","350")}}</p> + +<p><a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Babylon.js/cube.html">ここでGithubでもみることができます。</a></p> + +<h2 id="もっと形に変化を加える">もっと形に変化を加える</h2> + +<p>もうすでにscene上に箱形があります。;さらに形に変化を加えていきましょう。</p> + +<h3 id="トーラス">トーラス</h3> + +<p>さらにトーラスを加えていきましょう。次の以下のような行を加えて下さい。</p> + +<pre class="brush: js">var torus = BABYLON.Mesh.CreateTorus("torus", 2, 0.5, 15, scene); +torus.position.x = -5; +torus.rotation.x = 1.5; +</pre> + +<p> </p> + +<p>これはトーラスを創り出し、sceneを付け加えます。パラメーターはname（名前）、diameter（直径）、 thickness（厚さ）、 tessellation（セグメントの数）そして付け加えるscene。左に少し位置を置いたり、もっとよく見えるようにx軸を回転します。さあ、materialを追加しましょう。</p> + +<p> </p> + +<pre class="brush: js">var torusMaterial = new BABYLON.StandardMaterial("material", scene); +torusMaterial.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4); +torus.material = torusMaterial; +</pre> + +<p> </p> + +<p>それは箱の要素のように見えます。 — 標準的なmaterialを作っています。灰色にしたり、トーラスの配分をしていっています。</p> + +<p> </p> + +<h3 id="円柱">円柱</h3> + +<p>円柱をもう作っていて、トーラスを作ったのと同じ方法でもうすでに正確にmaterialがなされています。スクリプトの一番下にもう一度次のコードを加えましょう。</p> + +<pre class="brush: js">var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 2, 2, 2, 12, 1, scene); +cylinder.position.x = 5; +cylinder.rotation.x = -0.2; +var cylinderMaterial = new BABYLON.StandardMaterial("material", scene); +cylinderMaterial.emissiveColor = new BABYLON.Color3(1, 0.58, 0); +cylinder.material = cylinderMaterial; +</pre> + +<p> </p> + +<p>円柱のパラメーターはname（名前）、height（高さ）、 diameter（頂点の倍率）、diameter（底の倍率）, tessellation（テッセレーション）, height subdivisions（高さの分割）、そして加えたいscene。それから立方体をちょっと右に位置したり、ちょっと回転させたり、3Dの形に見えるようにしたり、黄色のmaterialを与えたりします。</p> + +<p>今ここでsceneが右に見えるようになるべきです。</p> + +<p><img alt="Light gray torus, blue box and yellow cylinder created with Babylon.js on the gray background." src="https://end3r.github.io/MDN-Games-3D/Babylon.js/img/shapes.png" style="display: block; height: 210px; margin: 0px auto; width: 600px;"></p> + +<p>これは動きますが、少し退屈です。ゲームの中ではいつも何か起こります。 — アニメーションを見ることができます。— それではそれらのアニメーションによって、それらの形に命を生まれさせましょう。</p> + +<h2 id="アニメーション">アニメーション</h2> + +<p>私たちはすでに形作る位置に適当なpositionやrotationといったものを使うことができます。私たちはそれらをスケールすることもできました。正確なアニメーションを示すために、コードの終わりのレンダリングのループの内側にこれらの値の変化を作る必要があります。なのでそれらはすべてのフレームで更新されます。ちょうどrenderLoopの前にアニメーションを使うだろうための助けになる可変的な---t---を定義して下さい。そしてこのようにループの内側にすべてのフレームにおいてそれを減じて下さい。</p> + +<p> </p> + +<pre class="brush: js">var t = 0; +var renderLoop = function () { + scene.render(); + t -= 0.01; + // animation code goes here +}; +engine.runRenderLoop(renderLoop); +</pre> + +<p> </p> + +<p>可変的なtはすべてのレンダーされたフレーム上で値が増えていくでしょう。</p> + +<p> </p> + +<h3 id="回転">回転</h3> + +<p>回転を適応していくには、renderLoopファンクションの終わりにこの行を追加していくのと同じくらい簡単です。:</p> + +<pre class="brush: js">box.rotation.y = t*2; +</pre> + +<p> </p> + +<p>y軸に沿って箱が回転していくでしょう。</p> + +<h3 id="スケーリング">スケーリング</h3> + +<p>以前にトーラスをスケールした一つの下にこの行を加えましょう。</p> + +<p> </p> + +<pre class="brush: js">torus.scaling.z = Math.abs(Math.sin(t*2))+0.5; +</pre> + +<p> </p> + +<p>これらはアニメーションの見た目や感覚を良くするためのちょっとした調整です。値によってどのようにアニメーションが魅力的に見えるか経験することができます。</p> + +<h3 id="Moving">Moving</h3> + +<p>円柱の位置を直接動かすことによってシーン上で私たちは円柱を動かすことができます。過去の一つの下にこの行を加えましょう。</p> + +<pre class="brush: js">cylinder.position.y = Math.sin(t*3); +</pre> + +<p> </p> + +<p>Math.sin()ファンクションのおかげで円柱がy軸に沿って沈んだり浮かんだりするでしょう。</p> + +<h2 id="結論">結論</h2> + +<p>見ることのできるライブの例に沿って、ここに最終的なコードを載せます。</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/8r66fdvp/","","350")}}</p> + +<p>もし、自分でローカル環境で自分自身で行いたい場合は、<a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Babylon.js/shapes.html"> GitHub</a> をみたり、<a href="https://github.com/end3r/MDN-Games-3D/">repository</a> をフォークするこができます。今やあなたはBabylon.jsエンジンの基礎を知り、幸せな演習をしました。</p> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="http://learningbabylonjs.com/">Learning Babylon.js book</a></li> +</ul> diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html new file mode 100644 index 0000000000..91d1b9ee9f --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -0,0 +1,274 @@ +--- +title: Three.jsでデモを作る +slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js +tags: + - 3D + - Canvas + - WebGL + - three.js + - アニメーション + - カメラ + - ゲーム + - チュートリアル + - ライト + - レンダリング + - 初心者 +translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">典型的な3Dゲームのシーン――どんなにシンプルなものでも――には、標準的な項目、すなわち座標に配置された物体、それを見るカメラ、より良い見た目を作る照明と質感の設定、生き生きとしたアニメーションなどが含まれているでしょう。<strong>Three.js</strong> は他の3Dライブラリと同じように、一般的な機能を迅速に実装するための組み込み関数を提供します。この記事では、開発環境の設定や必要なHTML構造、3つの基本的なオブジェクトの構築や初歩的なデモの制作方法など、Three を使用する上での基本的なことがらを解説します。</p> + +<div class="note"> +<p><strong>Note</strong>: 私たちは Three を有名な <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>ライブラリの1つであり、簡単に使い始められるという理由で選びました。Three が他のWebGLライブラリと比べて優秀だというつもりはありません。<a href="http://www.ambiera.com/copperlicht/index.html">CopperLicht</a>, <a href="http://www.glge.org/">GLGE</a>, <a href="http://osgjs.org/">OSG.js</a>, <a href="https://code.google.com/p/o3d/">O3D</a>,その他のあなたが使いやすい物を試すと良いでしょう。</p> +</div> + +<h2 id="Environment_setup" name="Environment_setup">環境構築</h2> + +<p>あなたがThree.jsで開発を始める上で、必要なものはあまりありません。少なくとも、</p> + +<ul> + <li>最新版の Firefox や Chrome など、良く WebGL をサポートしているモダンブラウザを使用してください。</li> + <li>デモを保存するディレクトリを用意してください。</li> + <li><a href="http://threejs.org/build/three.min.js">最新で最小版のThree.js</a> をそのディレクトリに保存してください。</li> + <li>ブラウザの別のタブで <a href="http://threejs.org/docs/">Three.js documentation</a> を開いてください — 参照するのに便利です。</li> +</ul> + +<h2 id="HTML_structure" name="HTML_structure">HTMLの構造</h2> + +<p>これが今回使用するHTMLのコードです。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>MDN Games: Three.js demo</title> + <style> + body { margin: 0; padding: 0; } + canvas { width: 100%; height: 100%; } + </style> +</head> +<body> +<script src="three.min.js"></script> +<script> + var WIDTH = window.innerWidth; + var HEIGHT = window.innerHeight; + /* 私たちの JavaScript コードはここに来ます */ +</script> +</body> +</html> +</pre> + +<p>このコード内には<code>title</code>のような基本的な情報と<code>canvas</code>要素の幅(<code>width)</code>と高さ(<code>height</code>)を定義する CSS があり、Three.js が全体を使えるようにするために<code>canvas</code>要素が表示領域全体を埋める必要があります。初めの<code>script</code>要素でThree.js ライブラリを埋め込み、2つ目の<code>script</code>要素にサンプルコードを記述していきます。すでに組み込み変数にウィンドウの幅、高さが代入されています。</p> + +<p>先に進む前に、このコードを新しいテキストファイルにコピーしデモ用ディレクトリに<code>index.html</code>として保存しましょう。</p> + +<h2 id="Renderer" name="Renderer">レンダラ</h2> + +<p>レンダラは、ブラウザにおいてシーンを表示する役割を持ちます。デフォルトは WebGL ですが、他にもCanvas や SVG,CSS,DOM といったレンダラがあります。これらは、それぞれシーンがどのようにレンダリングされるかが全く異なり、そのため WebGL と CSS では実装方法が異なります。しかし、レンダリングには様々な方法があるにも関わらず、利用者は全く同じように感じます。この仕組みのおかげで、使いたい技術をブラウザがサポートしていない場合に、サポートされる別のレンダラを使うこともできます。</p> + +<pre class="brush: js">var renderer = new THREE.WebGLRenderer({antialias:true}); +renderer.setSize(WIDTH, HEIGHT); +renderer.setClearColor(0xDDDDDD, 1); +document.body.appendChild(renderer.domElement); +</pre> + +<p>新しく WebGL レンダラを作成し、前項で指定した画面いっぱいと同じサイズに設定し、DOM に要素を追加します。あなたは初めの行の <code>antialias</code> というパラメータに気づいたかもしれません。これにより、オブジェクトの境界がよりスムーズにレンダリングされます。また、<code>setClearColor()</code>関数を使って背景色をデフォルトの黒から明るい灰色に変更することができます。</p> + +<p>このコードを、<code>index.html</code> の 2番目の {{htmlelement("script")}} 要素として、JavaScript コメント直下に追加しましょう。</p> + +<h2 id="Scene" name="Scene">シーン</h2> + +<p>シーンは全てが起こる場所です。新たにオブジェクトを作るときは、シーン内にそれを追加することで画面に表示されるようになります。Three.jsではシーンは <code>Scene</code> オブジェクトで表します。前項のコードの下にこれを追加し、シーンを作成しましょう。</p> + +<pre class="brush: js">var scene = new THREE.Scene(); +</pre> + +<p>追加されると、<code>.add()</code>関数を使いオブジェクトをそのシーンに追加できるようになります。</p> + +<h2 id="Camera" name="Camera">カメラ</h2> + +<p>私たちは既にレンダリングされたシーンは持っていますが、作業の成果を見るにはカメラが必要になります――カメラのない撮影セットを想像すればいいでしょう――。次のコードでは、カメラを3次元座標の指定位置に配置し、オブジェクトの方に向かせることで、何でも見ることができるようになります。</p> + +<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); +camera.position.z = 50; +scene.add(camera); +</pre> + +<p>前項のコードの下にこのコードを追加しましょう。</p> + +<p>カメラは他のタイプ(Cube,Orthographic)も利用できますが、最も簡単なのは Perspective です。これを初期化するには、視野角とアスペクト比を設定する必要があります。前者は見る世界の広さを決め、後者はレンダリングするときにオブジェクトが正しい縦横比で表示されるようにします。上のコードについての解説は以下の通りです。</p> + +<ul> + <li>視野角に70を指定しましたが、様々な値を試すのも良いでしょう。値が高いほど一度に表示される世界が広くなります。魚眼レンズの写真と普通のカメラの写真のような違いです。デフォルトでは50にセットされています。</li> + <li>アスペクト比はウィンドウの今の縦横比に合わせ、動的に変化します。勿論比率を固定することもできます。例えば、ワイドスクリーンの16:9などです。デフォルト値は1(1:1)です。</li> + <li>50にセットされた<code>z</code>座標は、カメラとシーンのz軸上の距離を指定します。ここにカメラを置いているので、シーンにあるオブジェクトを眺めることができます。50に指定すれば近すぎたり遠すぎたりせず、オブジェクトのサイズによりますが視野に映ることができるでしょう。<code>x</code>や<code>y</code>(もちろん<code>z</code>も)座標を指定しない場合、デフォルトで0がセットされます。</li> +</ul> + +<p>これらのパラメータを調整し、シーンがカメラにどのように映るかを確認する必要があるでしょう。</p> + +<div class="note"> +<p><strong>Note</strong>: これらの座標（カメラの z 座標など）のパラメータに決まった単位は存在しないため、シーンに適している単位(ミリメートル、メートル、フィートやマイルでも)で構いません。あなたの決めるところです。</p> +</div> + +<h2 id="Rendering_the_scene" name="Rendering_the_scene">シーンのレンダリング</h2> + +<p>全ての準備が終わりましたが、まだ私たちは何も目にしていません。レンダラを作ったなら、全てをレンダリングしましょう。<code>render()</code>は、そのレンダリングを<code>requestAnimationFrame()</code>の助けを借り行います。このコードは、全フレームで常にシーンがレンダリングされるようになります。</p> + +<pre class="brush: js">function render() { + requestAnimationFrame(render); + renderer.render(scene, camera); +} +render(); +</pre> + +<p>こうすることで常にフレームからレンダリング処理が呼び出され、レンダラがカメラに映るシーンをレンダリングします。<code>render()</code>を宣言することでこのループが開始され、永遠に続きます。</p> + +<p>また、このコードを前項までのコードの下に追加しましょう。ファイルを上書きし、ブラウザで開きます。グレー一色の画面が表示されるでしょう。おめでとうございます！</p> + +<h2 id="Geometry" name="Geometry">ジオメトリ</h2> + +<p>シーンが正しくレンダリングできることが確認できました。次は、3Dシェイプを追加してみましょう。開発を助けるために、Three.jsにはいくつかのプリミティブなシェイプが既に定義されています。このプリミティブを使うと、1行のコードでシェイプを追加することができます。キューブやボール、円柱、さらに複雑な形状もあります。与えられた図形に必要な頂点、面を描画するような処理はThreeが行うため、開発者はより高度なコーディングに意識を向けることができます。</p> + +<p>初めに、キューブのシェイプのジオメトリを定義し、前項の<code>render()</code>の上にこのコードを書きましょう。</p> + +<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10); +</pre> + +<p>このコードでは、10x10x10の簡単な立方体が生成されます。ジオメトリだけでは不十分で、シェイプにはマテリアルが必要です。</p> + +<h2 id="Material" name="Material">マテリアル</h2> + +<p>マテリアルとは、色やテクスチャとして物体の表面を覆うものです。今回は、前項のキューブに色を付けるためシンプルな青を使います。マテリアルには、Basic,Phong,Lambertといった事前に定義されたものがあります。後で後ろ2つを使ってみましょうか。今はBasicで十分です。</p> + +<pre class="brush: js">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); +</pre> + +<p>前項で追加した定義の下にこれを追加しましょう。</p> + +<p>遂にマテリアルも使えるようになりました。さて、次は何をしますか？</p> + +<h2 id="Mesh" name="Mesh">メッシュ</h2> + +<p>マテリアルをシェイプのジオメトリに適用させるには、メッシュを使用します。メッシュは、マテリアルをシェイプの表面に適用してくれます。</p> + +<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial); +</pre> + +<p>もう一回前項で追加したコードの下にこれを追加しましょう。</p> + +<h2 id="Adding_the_cube_to_the_scene" name="Adding_the_cube_to_the_scene">キューブをシーンに追加する</h2> + +<p>これまでに、ジオメトリやマテリアルを定義してキューブを作り出しました。最後に私たちが行うべきことはシーンに追加することです。さきほどのコードの下にこれを追加してください。</p> + +<pre class="brush: js">scene.add(cube); +</pre> + +<p>コードを保存してページをリフレッシュすると、オブジェクトがカメラの方向を向いているのでオブジェクトは正方形に見えます。オブジェクトの良いところは、シーン内で移動できるということです。例えば、私たちの思うままに回転や拡大縮小を行ったり。キューブを少し回転させ、複数の面を見てみましょう。また、コードの下にこれを追加します。</p> + +<pre class="brush: js">cube.rotation.set(0.4, 0.2, 0); +</pre> + +<p>おめでとうございます、あなたは3Dの世界にオブジェクトを生み出しました！これで、あなたが思うよりも簡単であることは証明できたでしょうか？ きっとこんな画面があることでしょう。</p> + +<p><img alt="Blue cube on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11849/cube.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p> + +<p>ここまでのサンプルコードは、ここで配布しています。</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}}</p> + +<p><a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">GitHubでチェックアウト</a>することもできます。</p> + +<h2 id="More_shapes_and_materials" name="More_shapes_and_materials">シェイプやマテリアルの追加</h2> + +<p>今度は、シーンにシェイプをさらに追加し、色々なシェイプやマテリアル、ライト等々を探検してみましょう。今のキューブを左に動かし、新たな友人のためのスペースを作ってあげます。また、コードにこれを書き足してください。</p> + +<pre class="brush: js">cube.position.x = -25; +</pre> + +<p>さて、さらにシェイプとマテリアルを追加しましょう。あなたは Phong マテリアルに覆われたリングに何を加えたいですか？ キューブを定義するコードの下に、次のコードを書き足してみましょう。 </p> + +<pre class="brush: js">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); +var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500}); +var torus = new THREE.Mesh(torusGeometry, phongMaterial); +scene.add(torus); +</pre> + +<p>これらのコードは、リング状のジオメトリを追加します。<code>TorusGeometry()</code>関数では、半径、管の径、半径の分割数、管の分割数を定義できます。PhongマテリアルはBasicマテリアルより光沢がありますが、今はリングは黒く見えています。</p> + +<p>私たちは、事前に定義されたもっと楽しいシェイプを選択できます。もっと遊ぼう。リングを定義するコードの下にこれを書き足しましょう。</p> + +<pre class="brush: js">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); +var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2}); +var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial); +dodecahedron.position.x = 25; +scene.add(dodecahedron); +</pre> + +<p>このコードで私たちは、12の面を持つ多面体を追加しました。<code>DodecahedronGeometry()</code>関数では、オブジェクトのサイズを定義することができます。このオブジェクトには Lambert マテリアルを使用しています。これは Phong マテリアルと似ていますが、比べると光沢がありません。しかし、やはりこれも黒に見えます。オブジェクトの座標を右にずらしているので、キューブやリングと違う場所に表示されるでしょう。</p> + +<p>先程言ったように、新しいオブジェクトは今黒く見えています。Phong、Lambert マテリアルをきれいに表示するには、ライトを導入しましょう。</p> + +<h2 id="Lights" name="Lights">ライト</h2> + +<p>Three.jsには様々な種類の光源があります。最も基本的なものは <code>PointLight</code> で、懐中電灯のように光り、決められた方向をスポットライトのように照らします。シェイプの定義の下に、これを書き足しましょう。</p> + +<pre class="brush: js">var light = new THREE.PointLight(0xFFFFFF); +light.position.set(-10, 15, 50); +scene.add(light); +</pre> + +<p>このコードでは、ライトの照らすべき方向を定義し、その方向をシーンの中心から少しずらすことで全てのオブジェクトの一部を照らすようにし、シーンに追加します。これで3つ全てのオブジェクトがきれいに表示されます。ドキュメントでAmbient,Directional,Hemisphere,spotなど他の光源の種類を調べるのも良いでしょう。是非、シーンに別の種類を配置し、影響を見てみてください。</p> + +<p><img alt="Shapes: blue cube, dark yellow torus and dark gray dodecahedron on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11851/shapes.png" style="height: 400px; width: 600px;"></p> + +<p>しかし、これでは相当退屈です。ゲームの世界は、常に何かが起こっているのです。例えば、アニメーションが表示されたり。だったら、このオブジェクトたちに命を吹き込んで、アニメーションさせてみましょう。</p> + +<h2 id="Animation" name="Animation">アニメーション</h2> + +<p>私たちはすでに回転を使ってキューブの位置を調節しました。シェイプのスケーリング、位置の変更を行うこともできます。アニメーションを表示するには、レンダリングのループの中で該当する値を変更します。それがフレームごとに反映されます。</p> + +<h3 id="Rotation" name="Rotation">回転</h3> + +<p>回転の指定は素直です。各フレームで指定された方向に角度を変化させます。このコードを、<code>render()</code>で使った<code>requestAnimationFrame()</code>のあとに追加しましょう。</p> + +<pre class="brush: js">cube.rotation.y += 0.01; +</pre> + +<p>これで、キューブは毎フレームごとに回転してゆきます。少しずつ。そのため、とても滑らかに見えるでしょう。</p> + +<h3 id="Scaling" name="Scaling">スケーリング</h3> + +<p>私たちはオブジェクトをスケーリングすることもできます。値を指定することで、それを成長させたり、縮小させたりできます。もっと面白くしましょう。まず、経過時間をカウントする変数 t を実装しましょう。<code>render()</code>の前に追加してください。</p> + +<pre class="brush: js">var t = 0; +</pre> + +<p>さて、フレームごとに値が増えるようにしましょう。<code>requestAnimationFrame()</code>のすぐ後にこれを書き足しましょう。</p> + +<pre class="brush: js">t += 0.01; +torus.scale.y = Math.abs(Math.sin(t)); +</pre> + +<p>私たちは <code>Math.sin</code> を使うことで非常に面白い結果を見ることができました。sin()は周期的な値を返すため、リングは大きくなったり小さくなったりを繰り返します。返り値を <code>Math.abs</code> でラップするため、必ず0以上の値を得ることができます。スケールに負の値が指定されたとき、スケーリングは全く予期できません。もしそうであった場合、半分の時間はリングは真っ黒になったでしょう。</p> + +<p>遂に、動かします。</p> + +<h3 id="Moving" name="Moving">動く、動く</h3> + +<p>回転やスケーリングだけでなく、シーンの中でオブジェクトをさらに自由に動かすこともできます。<code>requestAnimationFrame()</code>のすぐ後にこれを書き足しましょう。</p> + +<pre class="brush: js">dodecahedron.position.y = -7*Math.sin(t*2); +</pre> + +<p>このコードでは各フレームの y座標に sin() の値を適用することで十二面体を上下に動かします。また、少し調節して、クールに見えるようにしています。この値を変更して、アニメーションにどのような変化が起きるかを見てみるのもよいでしょう。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>これは最終的なコードです。</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p> + +<p>あなたは今までのコードを<a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">GitHubで見る</a>こともできるし、ローカル環境で遊びたいと思ったら<a href="https://github.com/end3r/MDN-Games-3D/">リポジトリをフォークする</a>こともできます。今あなたは Three.js の基本を理解しているでしょう。このページの親ページである <a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web">Web上の3Dに関するドキュメント</a>に行くこともできます。</p> + +<p>WebGLを実際に触ることで、内部で何が起こっているのかをより理解することもできます。私たちの<a href="/ja/docs/Web/API/WebGL_API">WebGLドキュメンテーション</a>を参考にしてみてください。</p> diff --git a/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.html new file mode 100644 index 0000000000..4e1ee22652 --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/glsl_shaders/index.html @@ -0,0 +1,233 @@ +--- +title: GLSL シェーダー +slug: Games/Techniques/3D_on_the_web/GLSL_Shaders +tags: + - Beginner + - Fragment Shader + - GLSL + - OpenGL + - Shader + - WebGL + - texture shader + - three.js + - vertex shader +translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">シェーダーは、C と同様の構文を持つ特別な OpenGL シェーディング言語である GLSL (OpenGL Shading Language) を使用します。 GLSL はグラフィックスパイプラインによって直接実行されます。 シェーダーには、頂点 (バーテックス) シェーダーとフラグメント (ピクセル) シェーダーの2種類があります。 頂点シェーダーは、形状の位置を 3D 描画座標に変換します。 フラグメントシェーダーは、形状の色やその他の属性のレンダリングを計算します。</p> + +<p>GLSL は JavaScript ほど直感的ではありません。 GLSL は強く型付けされており、ベクトルと行列を含む多くの数学があります。 それは非常に複雑になる可能性があります — 非常に速くも。 この記事では、立方体をレンダリングする簡単なコード例を作成します。 背景となるコードを高速化するために、Three.js API を使用します。</p> + +<p><a href="/ja/docs/Games/Techniques/3D_on_the_web/Basic_theory">基本理論</a>の記事から覚えているかもしれませんが、頂点は 3D 座標系の点です。 頂点は追加のプロパティを持つことがあります。 3D 座標系は空間を定義し、頂点はその空間内の形状を定義するのに役立ちます。</p> + +<h2 id="shader_types" name="shader_types">シェーダーの種類</h2> + +<p>シェーダーは基本的に、画面に何かを描画するために必要な機能です。 シェーダーは、このような操作のために最適化された <a href="https://ja.wikipedia.org/wiki/Graphics_Processing_Unit">GPU</a> (graphics processing unit) で実行されます。 シェーダーの対処に GPU を使用することで、数値計算の一部を CPU から開放します。 これにより、CPU は、コードの実行などの他のタスクに処理能力を集中することができます。</p> + +<h3 id="vertex_shader" name="vertex_shader">頂点シェーダー</h3> + +<p>頂点シェーダーは 3D 空間の座標を操作し、頂点ごとに1回呼び出されます。 頂点シェーダーの目的は、<code>gl_Position</code> 変数を設定することです。 これは、特別なグローバルな組み込み GLSL 変数です。 <code>gl_Position</code> は、現在の頂点の位置を格納するために使用されます。</p> + +<p><code>void main()</code> 関数は、<code>gl_Position</code> 変数を定義する標準的な方法です。 <code>void main()</code> 内のすべては、頂点シェーダーによって実行されます。 頂点シェーダーは、3D 空間での頂点の位置を 2D 画面に投影する方法を含む変数を生成します。</p> + +<h3 id="fragment_shader" name="fragment_shader">フラグメントシェーダー</h3> + +<p>フラグメント（またはテクスチャー）シェーダーは、処理される各ピクセルの RGBA (赤、緑、青、アルファ) 色を定義します。 単一のフラグメントシェーダーは、ピクセルごとに1回呼び出されます。 フラグメントシェーダーの目的は、<code>gl_FragColor</code> 変数を設定することです。 <code>gl_FragColor</code> は、<code>gl_Position</code> のような組み込みの GLSL 変数です。</p> + +<p>計算の結果、RGBA 色に関する情報を含む変数が得られます。</p> + +<h2 id="demo" name="demo">デモ</h2> + +<p>これらのシェーダーの動作を説明する簡単なデモを作成しましょう。 最初に <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js のチュートリアル</a>を読んで、シーンの概念、そのオブジェクト、およびマテリアルを把握してください。</p> + +<div class="note"> +<p><strong>Note</strong>: シェーダーを作成するために Three.js やその他のライブラリを使用する必要はなく、純粋な <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> (Web Graphics Library) で十分です。 ここでは Three.js を使用して、背景となるコードを非常に単純でわかりやすくしているため、シェーダーのコードに集中することができます。 Three.js やその他の 3D ライブラリーは、多くのことを抽象化します。 このような例を生の WebGL で作成する場合は、実際に機能させるために多くの追加コードを作成する必要があります。</p> +</div> + +<h3 id="Environment_setup" name="Environment_setup">環境設定</h3> + +<p>WebGL シェーダーを使うには、それほど多くは必要ありません。 次のことが必要です。</p> + +<ul> + <li>最新の Firefox や Chrome など、<a href="/ja/docs/Web/API/WebGL_API">WebGL</a> を適切にサポートする最新のブラウザーを使用していることを確認してください。</li> + <li>実験を保存するディレクトリを作成します。</li> + <li><a href="https://threejs.org/build/three.min.js">最小化された最新の Three.js ライブラリー</a>のコピーをディレクトリ内に保存します。</li> +</ul> + +<h3 id="HTML_structure" name="HTML_structure">HTML の構造</h3> + +<p>使用する HTML の構造は次のとおりです。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>MDN Games: Shaders demo</title> + <style> + body { margin: 0; padding: 0; font-size: 0; } + canvas { width: 100%; height: 100%; } + </style> + <script src="three.min.js"></script> +</head> +<body> + <script id="vertexShader" type="x-shader/x-vertex"> + // vertex shader's code goes here + </script> + <script id="fragmentShader" type="x-shader/x-fragment"> + // fragment shader's code goes here + </script> + <script> + // scene setup goes here + </script> +</body> +</html> +</pre> + +<p>ドキュメントの {{htmlelement("title")}} のような基本情報と、Three.js がページに挿入する {{htmlelement("canvas")}} 要素の <code>width</code> と <code>height</code> をビューポートのフルサイズに設定するための CSS が含まれています。 {{htmlelement("head")}} の {{htmlelement("script")}} 要素には、ページの Three.js ライブラリーが含まれています。 {{htmlelement("body")}} タグの3つのスクリプトタグにコードを記述します。</p> + +<ol> + <li>最初のものには、頂点シェーダーを含みます。</li> + <li>2つ目は、フラグメントシェーダーを含みます。</li> + <li>3つ目は、シーンを生成する実際の JavaScript コードを含みます。</li> +</ol> + +<p>先に進む前に、このコードを新しいテキストファイルにコピーして、作業ディレクトリに <code>index.html</code> として保存してください。 このファイルでは、シェーダーがどのように機能するかを説明するために、単純な立方体を特徴とするシーンを作成します。</p> + +<h3 id="The_cubes_source_code" name="The_cubes_source_code">立方体のソースコード</h3> + +<p>すべてを最初から作成する代わりに、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js を使った基本的なデモの構築</a>のソースコードの立方体を再利用できます。 レンダラー、カメラ、ライトなどのほとんどのコンポーネントは同じままですが、基本的なマテリアルの代わりに、シェーダーを使用して立方体の色と位置を設定します。</p> + +<p><a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">GitHub の cube.html ファイル</a>に移動し、2番目の {{htmlelement("script")}} 要素内からすべての JavaScript コードをコピーして、現在の例の3番目の <code><script></code> 要素に貼り付けます。 <code>index.html</code> を保存してブラウザーでロードすると、青い立方体が表示されます。</p> + +<h3 id="The_vertex_shader_code" name="The_vertex_shader_code">頂点シェーダーのコード</h3> + +<p>続けて、簡単な頂点シェーダーを作成しましょう。 ボディの最初の <code><script></code> タグ内に以下のコードを追加します。</p> + +<pre class="brush: glsl notranslate">void main() { + gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); +} +</pre> + +<p>結果の <code>gl_Position</code> は、モデルビュー行列と射影行列に各ベクトルを乗算して、いずれの場合も最終的な頂点位置を取得することによって計算されます。</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="/ja/docs/Games/Techniques/3D_on_the_web/Basic_theory#Vertex_processing">頂点処理の段落</a>から、<em>モデル変換</em>、<em>ビュー変換</em>、および<em>投影変換</em>について詳しく知ることができます。 また、この記事の最後にあるリンクからも、詳細を学ぶことができます。</p> +</div> + +<p><code>projectionMatrix</code> と <code>modelViewMatrix</code> はどちらも Three.js によって提供され、ベクトルは新しい 3D 位置を渡します。 これにより、元の立方体がシェーダーを介して平行移動され <code>x</code> 軸に沿って 10 単位、<code>z</code> 軸に沿って 5 単位移動します。 4番目のパラメーターは無視して、デフォルトの <code>1.0</code> 値のままにしておくことができます。 これは、3D 空間の頂点位置のクリッピングを操作するために使用されますが、今回のケースでは必要ありません。</p> + +<h3 id="The_texture_shader_code" name="The_texture_shader_code">テクスチャーシェーダーのコード</h3> + +<p>次に、テクスチャーシェーダーをコードに追加します。 以下のコードをボディの2番目の <code><script></code> タグに追加します。</p> + +<pre class="brush: glsl notranslate">void main() { + gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0); +} +</pre> + +<p>これにより、RGBA 色が設定され、現在の水色が再現されます。 最初の3つの浮動小数点値（<code>0.0</code> から <code>1.0</code> の範囲）は赤、緑、青のチャンネルを表し、4番目の値はアルファ透明度 (<code>0.0</code> の完全に透明から <code>1.0</code> の完全に不透明の範囲) を表します。</p> + +<h3 id="Applying_the_shaders" name="Applying_the_shaders">シェーダーの適用</h3> + +<p>新しく作成したシェーダーを実際に立方体に適用するには、最初に <code>basicMaterial</code> の定義をコメントアウトします。</p> + +<pre class="brush: js notranslate">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); +</pre> + +<p>次に、<a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a> を作成します。</p> + +<pre class="brush: js notranslate">var shaderMaterial = new THREE.ShaderMaterial( { + vertexShader: document.getElementById( 'vertexShader' ).textContent, + fragmentShader: document.getElementById( 'fragmentShader' ).textContent +}); +</pre> + +<p>このシェーダーマテリアルは、スクリプトからコードを取得し、マテリアルが割り当てられているオブジェクトに適用します。</p> + +<p>次に、立方体を定義する行で、<code>basicMaterial</code> を置き換える必要があります。</p> + +<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial); +</pre> + +<p>これを、新しく作成した <code>shaderMaterial</code> にします。</p> + +<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, shaderMaterial); +</pre> + +<p>Three.js は、このマテリアルが与えられたメッシュにアタッチされたシェーダーをコンパイルして実行します。 この場合、立方体には頂点シェーダーとテクスチャシェーダーの両方が適用されます。 これで完了です。 可能な限り単純なシェーダーを作成しました。 おめでとう! 立方体は次のようになります。</p> + +<p><img alt="Three.js の青い立方体のデモ" src="http://end3r.github.io/MDN-Games-3D/Shaders/img/cube.png" style="display: block; margin: 0px auto;"></p> + +<p>見た目は Three.js の立方体のデモとまったく同じですが、シェーダーを使用すると、位置がわずかに異なり、青色が同じになります。</p> + +<h2 id="Final_code" name="Final_code">最終的なコード</h2> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html notranslate"><script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"></script> +<script id="vertexShader" type="x-shader/x-vertex"> + void main() { + gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); + } +</script> +<script id="fragmentShader" type="x-shader/x-fragment"> + void main() { + gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0); + } +</script> +</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate"> var WIDTH = window.innerWidth; + var HEIGHT = window.innerHeight; + + var renderer = new THREE.WebGLRenderer({antialias:true}); + renderer.setSize(WIDTH, HEIGHT); + renderer.setClearColor(0xDDDDDD, 1); + document.body.appendChild(renderer.domElement); + + var scene = new THREE.Scene(); + + var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); + camera.position.z = 50; + scene.add(camera); + + var boxGeometry = new THREE.BoxGeometry(10, 10, 10); + + var shaderMaterial = new THREE.ShaderMaterial( { + vertexShader: document.getElementById( 'vertexShader' ).textContent, + fragmentShader: document.getElementById( 'fragmentShader' ).textContent + }); + + var cube = new THREE.Mesh(boxGeometry, shaderMaterial); + scene.add(cube); + cube.rotation.set(0.4, 0.2, 0); + + function render() { + requestAnimationFrame(render); + renderer.render(scene, camera); + } + render();</pre> + +<h3 id="CSS" name="CSS">CSS</h3> + +<pre class="brush: css notranslate">body { margin: 0; padding: 0; font-size: 0; } +canvas { width: 100%; height: 100%; } +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Final_code', '100%', '400', '', 'Games/Techniques/3D_on_the_web/GLSL_Shaders') }}</p> + +<h2 id="Conclusion" name="Conclusion">結び</h2> + +<p>この記事では、シェーダーの基本について説明しました。 私たちの例ではあまり多くのことをしていませんが、シェーダーでできるクールなことがもっとたくさんあります。 <a href="http://shadertoy.com/">ShaderToy</a> で本当にクールなものをチェックして、インスピレーションを得て、それらのソースから学んでください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://web.archive.org/web/20180624211158/http://learningwebgl.com/blog/?page_id=1217">WebGL の学習</a> — 一般的な WebGL の知識について (アーカイブ、英語、和訳あり)</li> + <li><a href="http://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html">WebGL の基本での WebGL のシェーダーと GLSL</a> — GLSL 固有の情報について (英語、和訳あり)</li> +</ul> diff --git a/files/ja/games/techniques/3d_on_the_web/index.html b/files/ja/games/techniques/3d_on_the_web/index.html new file mode 100644 index 0000000000..6933c39005 --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/index.html @@ -0,0 +1,114 @@ +--- +title: Web上の 3D ゲームの概要 +slug: Games/Techniques/3D_on_the_web +tags: + - Games + - Graphics + - NeedsContent + - NeedsExample + - TopicStub + - WebGL + - WebVR + - three.js +translation_of: Games/Techniques/3D_on_the_web +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">Web でのリッチなゲーム体験の場合、選択する武器は WebGL であり、HTML {{htmlelement("canvas")}} にレンダリングされます。 WebGL は、基本的に Web 用の OpenGL ES 2.0 であり、リッチなインタラクティブアニメーション、そしてもちろんゲームを構築するためのツールを提供する JavaScript API です。 ハードウェアアクセラレーションされた JavaScript を使用して、動的な 3D グラフィックスを生成およびレンダリングできます。</p> + +<h2 id="Documentation_and_browser_support" name="Documentation_and_browser_support">ドキュメントとブラウザーのサポート</h2> + +<p><a href="/ja/docs/Web/API/WebGL_API">WebGL</a> プロジェクトのドキュメントと仕様は、ほとんどの Web API のように W3C ではなく、<a href="https://www.khronos.org/">Khronos Group</a> によって維持されています。 最新のブラウザーでのサポートは、モバイルでも非常に良いので、それほど心配する必要はありません。 主なブラウザーはすべて WebGL をサポートしており、使用するデバイスのパフォーマンスを最適化するだけに集中する必要があります。</p> + +<p>近い将来、WebGL 2.0（OpenGL ES 3.0 に基づく）のリリースに向けた継続的な取り組みがあります。 これにより、多くの改善がもたらされ、開発者は現在の強力なハードウェアを使用して最新の Web 用のゲームを構築できます。</p> + +<h2 id="Explaining_the_basic_3D_theory" name="Explaining_the_basic_3D_theory">基本的な 3D 理論の説明</h2> + +<p>3D 理論の基本は、3D 空間で表される形状を中心としており、座標系を使用してそれらの位置を計算します。 必要なすべての情報については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Basic_theory">基本的な 3D 理論の説明</a>の記事を参照してください。</p> + +<h2 id="Advanced_concepts" name="Advanced_concepts">高度な概念</h2> + +<p>WebGL を使用すると、さらに多くのことができます。 シェーダー、衝突検出、または最新のホットトピックである Web 上の仮想現実など、詳細に掘り下げて学ぶ必要のある高度な概念がいくつかあります。</p> + +<h3 id="Shaders" name="Shaders">シェーダー</h3> + +<p>それ自体は別の話であるシェーダーについて言及する価値があります。 シェーダーは、グラフィックスパイプラインによって直接実行される C と同様の構文を持つ特別な OpenGL シェーディング言語である GLSL を使用します。 これらは、頂点シェーダーとフラグメントシェーダー（またはピクセルシェーダー）に分割できます。 前者は形状の位置を実際の 3D 描画座標に変換し、後者はレンダリングする色やその他の属性を計算します。 それらの詳細については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL シェーダー</a>の記事を必ず確認してください。</p> + +<h3 id="Collision_detection" name="Collision_detection">衝突検出</h3> + +<p>衝突検出のないゲームを想像するのは難しいです — 何かが何かにぶつかっているときには、常にそれを解決する必要があります。 以下に学ぶことができる情報があります。</p> + +<ul> + <li><a href="/ja/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_collision_detection">3D 衝突検出</a></li> +</ul> + +<h3 id="WebVR" name="WebVR">WebVR</h3> + +<p>仮想現実の概念は新しいものではありませんが、<a href="https://www.oculus.com/ja/rift/">Oculus Rift</a> などのハードウェアの進歩と VR ハードウェアから情報をキャプチャーして JavaScript アプリケーションで使用できるようにするための (現在実験的な) <a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> のおかげで、Web に押し寄せています。 詳細については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Webによる仮想現実</a>をご覧ください。</p> + +<p>また、<a href="http://aframe.io/">A-Frame</a> フレームワークを使用して仮想現実の 3D 環境を構築することがいかに簡単であるかを示す、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの構築</a>に関する記事もあります。</p> + +<h2 id="The_rise_of_libraries_and_frameworks" name="The_rise_of_libraries_and_frameworks">ライブラリーとフレームワークの台頭</h2> + +<p>生の WebGL のコーディングはかなり複雑ですが、プロジェクトがより高度になるにつれて、長期的にはそれを理解する必要があります (開始するには、<a href="/ja/docs/Web/API/WebGL_API">WebGL ドキュメント</a>を参照してください)。 実際のプロジェクトでは、開発をスピードアップし、作業中のプロジェクトを管理するのに役立つフレームワークをたぶん使うことになるでしょう。 3D ゲームのフレームワークを使用すると、使用するツールによって多くの処理が行われるため、パフォーマンスを最適化するのにも役立ちます。 これにより、ゲーム自体の構築に集中できます。</p> + +<p>最も人気のある JavaScript 3D ライブラリーは <a href="http://threejs.org/">Three.js</a> で、一般的な 3D 技術をより簡単に実装できる多目的ツールです。 他にもチェックする価値のある人気のあるゲーム開発ライブラリーとフレームワークがあります。 <a href="https://aframe.io">A-Frame</a>、<a href="https://playcanvas.com/">PlayCanvas</a>、<a href="http://www.babylonjs.com/">Babylon.js</a> などは、豊富なドキュメント、オンラインエディター、活発なコミュニティを備えた、最もよく知られたものです。</p> + +<h3 id="Building_up_a_basic_demo_with_A-Frame" name="Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの構築</h3> + +<p>A-Frame は、3D および VR エクスペリエンスを構築するための Web フレームワークです。 内部的には、宣言型のエンティティコンポーネントパターンを備えた Three.js フレームワークなので、HTML だけでシーンを構築できます。 デモを作成するステップバイステップのプロセスについては、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの構築</a>のサブページを参照してください。</p> + +<h3 id="Building_up_a_basic_demo_with_Babylon.js" name="Building_up_a_basic_demo_with_Babylon.js">Babylon.js を使った基本的なデモの構築</h3> + +<p>Babylon.js は、開発者が使用する最も人気のある 3D ゲームエンジンの1つです。 他の 3D ライブラリーと同様に、一般的な 3D 機能をより迅速に実装するのに役立つ組み込み関数を提供します。 開発環境のセットアップ、必要な HTML の構造化、JavaScript コードの記述など、Babylon.jsの 基本的な使い方については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js を使った基本的なデモの構築</a>のサブページを参照してください。</p> + +<h3 id="Building_up_a_basic_demo_with_PlayCanvas" name="Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas を使った基本的なデモの構築</h3> + +<p>PlayCanvas は、GitHub でオープンソース化された人気の 3D WebGL ゲームエンジンであり、オンラインで利用可能なエディターと優れたドキュメントを備えています。 より高度な詳細については、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas を使った基本的なデモの構築</a>のサブページを参照してください。 また、PlayCanvas ライブラリーとオンラインエディターを使ったデモの作成方法については、さらに詳しい記事を参照してください。</p> + +<h3 id="Building_up_a_basic_demo_with_Three.js" name="Building_up_a_basic_demo_with_Three.js">Three.js を使った基本的なデモの構築</h3> + +<p>Three.js は、他のライブラリーと同様に、巨大なアドバンテージを提供します。 何百行もの WebGL コードを記述して興味深いものを構築する代わりに、組み込みのヘルパー関数を使用して、はるかに簡単かつ迅速に構築できます。 デモを作成するステップバイステップのプロセスについては、<a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js を使った基本的なデモの構築</a>のサブページを参照してください。</p> + +<h3 id="Other_tools" name="Other_tools">その他のツール</h3> + +<p><a href="http://unity3d.com/">Unity</a> と <a href="https://www.unrealengine.com/">Unreal</a> はどちらも <a href="/ja/docs/Games/Tools/asm.js">asm.js</a> を使用してゲームを <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> にエクスポートできるため、それらのツールとテクニックを自由に使用して、Web にエクスポートされるゲームを構築できます。</p> + +<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h2 id="Where_to_go_next" name="Where_to_go_next">次はどこへ</h2> + +<p>この記事では、現在利用可能なテクノロジーで可能なことのほんの一部を紹介しました。 WebGL と、その上に構築されたライブラリーやフレームワークを使用して、Web 上で没入型の美しく高速な 3D ゲームを構築できます。</p> + +<h3 id="Source_code" name="Source_code">ソースコード</h3> + +<p>このシリーズのデモのすべてのソースコードは <a href="http://end3r.github.io/MDN-Games-3D/">GitHub</a> にあります。</p> + +<h3 id="APIs" name="APIs">API</h3> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></li> + <li><a href="/ja/docs/Web/API/WebGL_API">WebGL API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a></li> +</ul> + +<h3 id="Frameworks" name="Frameworks">フレームワーク</h3> + +<ul> + <li><a href="http://threejs.org/">Three.js</a></li> + <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (Three.js に基づく)</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a></li> + <li><a href="http://www.babylonjs.com/">Babylon.js</a></li> + <li><a href="http://aframe.io/">A-Frame</a></li> +</ul> + +<h3 id="Tutorials" name="Tutorials">チュートリアル</h3> + +<ul> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js を使った基本的なデモの構築</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Whitestorm.js を使った基本的なデモの構築</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas を使った基本的なデモの構築</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js を使った基本的なデモの構築</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの構築</a></li> +</ul> diff --git a/files/ja/games/techniques/3d_on_the_web/webvr/index.html b/files/ja/games/techniques/3d_on_the_web/webvr/index.html new file mode 100644 index 0000000000..82c41790e6 --- /dev/null +++ b/files/ja/games/techniques/3d_on_the_web/webvr/index.html @@ -0,0 +1,124 @@ +--- +title: WebVR — Webによる仮想現実 +slug: Games/Techniques/3D_on_the_web/WebVR +tags: + - 3D + - Games + - WebGL + - WebVR +translation_of: Games/Techniques/3D_on_the_web/WebVR +--- +<div>{{GamesSidebar}}</div> + +<p class="summary">仮想現実の概念自体は新しいものではありませんが、今ではそれをあるべき姿で機能させるためのテクノロジーと、それを Web アプリケーションで活用するための JavaScript API があります。 この記事では、ゲームでの使用の観点から WebVR を紹介しています。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: WebVR API は <a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> に置き換えられました。 WebVR は標準として承認されることはなく、ごく少数のブラウザーでデフォルトで実装および有効化され、少数のデバイスをサポートしていました。</p> +</div> + +<h2 id="VR_devices" name="VR_devices">VR デバイス</h2> + +<p>Oculus Rift の人気とその他の多くのデバイスが間もなく市場に登場することで、未来は明るいように見えます。 ゲームをプレイするのに "十分な" VR 体験を実現するのに十分なテクノロジーがすでにあります。 Oculus Rift や HTC Vive などのデスクトップ型のものから、Playstation VR (現時点では WebVR をサポートしていないことは確かです) を備えたコンソール、Gear VR や Google Cardboard などのモバイルエクスペリエンスまで、選択できるデバイスはたくさんあります。</p> + +<p><img alt="" src="http://end3r.com/tmp/vr/hmds.jpg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: 詳細については <a href="/ja/docs/Web/API/WebVR_API/WebVR_concepts">WebVR Concepts</a> をご覧ください。</p> +</div> + +<h2 id="The_WebVR_API" name="The_WebVR_API">WebVR API</h2> + +<p><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> は、コンピューターに接続された VR デバイスの情報とヘッドセットの位置/向き/速度/加速度の情報をキャプチャし、それをゲームやその他のアプリケーションで使用できる有用なデータに変換するための中心的な API です。</p> + +<div class="note"> +<p><strong>Note</strong>: もちろん、ゲームの作成に役立つ他の API もあります。 例えば、コントロール入力用の <a href="/ja/docs/Web/API/Gamepad_API">The Gamepad API</a> や、モバイルでのディスプレイの方向を扱うための <a href="/ja/docs/Web/API/Detecting_device_orientation">Device Orientation API</a> などです。</p> +</div> + +<h3 id="Browser_support_and_spec_status" name="Browser_support_and_spec_status">ブラウザーサポートと仕様の状態</h3> + +<p>現在、WebVR API のブラウザーサポートはまだ実験的です — <a href="https://nightly.mozilla.org/">nightly builds of Firefox</a> と <a href="https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ&usp=sharing#list">experimental builds of Chrome</a> で動作しますが（Mozilla と Google が一丸となって実装に取り組みます）、遅かれ早かれ通常のビルドで見ることができるようになるでしょう。</p> + +<p><a href="|http://mozvr.github.io/webvr-spec/webvr.html">WebVR 仕様</a>は、編集者草案の状態にあり、これはまだ変更される可能性があることを意味します。 開発は、Mozilla の <a href="https://twitter.com/vvuk">Vladimir Vukicevic</a> と Google の <a href="https://twitter.com/tojiro">Brandon Jones</a> が主導しています。 詳細については、<a href="http://mozvr.com/">MozVR.com</a> および <a href="http://webvr.info/">WebVR.info</a> の Web サイトにアクセスしてください。</p> + +<h3 id="Using_the_WebVR_API" name="Using_the_WebVR_API">WebVR API の使用</h3> + +<p>WebVR API は、ヘッドセットの両方のレンズに<a href="/ja/docs/Web/API/WebVR_API/WebVR_concepts#Stereoscopic_vision">立体画像</a>を送信することと、センサーから頭の位置データを受信することの2つの概念に基づいており、これら2つは {{domxref("HMDVRDevice")}}（head-mounted display virtual reality device、ヘッドマウントディスプレイ仮想現実デバイス）と {{domxref("PositionSensorVRDevice")}} によって処理されます。</p> + +<h3 id="Get_the_devices" name="Get_the_devices">デバイスの取得</h3> + +<p>コンピューターに接続されているデバイスに関する情報を取得するには、次のように {{domxref("Navigator.getVRDevices")}} メソッドを使用できます。</p> + +<pre class="brush: js notranslate">navigator.getVRDevices().then(function(devices) { + for (var i = 0; i < devices.length; ++i) { + if (devices[i] instanceof HMDVRDevice) { + gHMD = devices[i]; + break; + } + } + if (gHMD) { + for (var i = 0; i < devices.length; ++i) { + if (devices[i] instanceof PositionSensorVRDevice + && devices[i].hardwareUnitId === gHMD.hardwareUnitId) { + gPositionSensor = devices[i]; + break; + } + } + } +});</pre> + +<p>このコードは、使用可能なデバイスをループし、ヘッドセットに適切なセンサーを割り当てます — <code>devices</code> 配列の最初には接続されているデバイスが含まれており、{{domxref("HMDVRDevice")}} を見つけるためのチェックが行われ、それを <code>gHMD</code> 変数に割り当てます — これを使用して、 シーンの設定、目のパラメータの取得、視野の設定などを行うことができます。 例えば次のようにです。</p> + +<pre class="brush: js notranslate">function setCustomFOV(up,right,down,left) { + var testFOV = new VRFieldOfView(up,right,down,left); + + gHMD.setFieldOfView(testFOV,testFOV,0.01,10000.0); +}</pre> + +<p><code>gPositionSensor</code> 変数は {{domxref("PositionSensorVRDevice")}} を保持します — これを使用して、現在の位置や方向の状態を取得したり（例えば、すべてのフレームでシーンビューを更新したり）、センサーをリセットできます。 例えば、次のコードは画面上の位置情報を出力します。</p> + +<pre class="brush: js notranslate">function setView() { + var posState = gPositionSensor.getState(); + + if(posState.hasPosition) { + posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y" + + roundToTwo(posState.position.y) + " z" + + roundToTwo(posState.position.z); + xPos = -posState.position.x * WIDTH * 2; + yPos = posState.position.y * HEIGHT * 2; + if(-posState.position.z > 0.01) { + zPos = -posState.position.z; + } else { + zPos = 0.01; + } + } + + ... + +}</pre> + +<p>これを取得するデモの完全な説明と詳細については、<a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使い方</a>を参照してください。</p> + +<h2 id="Tools_and_techniques" name="Tools_and_techniques">ツールとテクニック</h2> + +<p>最初の WebVR の実験とデモでは、おそらく Web で最も人気のある 3D エンジンである Three.js を使用しました。 Three.js github で利用可能な <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/effects/VREffect.js">VREffect</a> および <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/controls/VRControls.js">VRControls</a> 関数を参照して、Three.js で WebVR を実装および処理するのに役立ててください。</p> + +<p><img alt="" src="http://end3r.com/tmp/vr/sechelt.jpg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Boris Smus は、<a href="http://smus.com/responsive-vr/">レスポンシブ WebVR</a> の概念について書いています。 このコンセプトでは、VR ハードウェアのないラップトップ、Oculus Rift を搭載した PC、Google Cardboard に内蔵したスマートフォンなど、さまざまなデバイスで単一の Web ゲームをプレイしながら、それらすべてにユニークで価値のある体験を提供できます。 レスポンシブデザインに似ていますが、VR の世界に適用されます — 一度書けば VR ヘッドセットで実行できます ... またはそれなしで。 <a href="http://github.com/borismus/webvr-boilerplate">WebVR ボイラープレート</a>のソースを確認できます。 これは、WebVR の学習を開始する良い例であり、Web ベースの VR 体験の出発点です。</p> + +<p>WebVR のシンプルなビルディングブロックを提供する <a href="https://aframe.io/">A-Frame</a> と呼ばれるマークアップフレームワークもあるため、VR Web サイトやゲームをすばやく構築して実験できます。 詳細については、<a href="https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成</a>というチュートリアルを参照してください。</p> + +<p>没入感は、ゲームプレイやグラフィックスよりも重要です — 体験の "内側にいる" と感じる必要があります。 実現するのは簡単ではありませんが、リアルな画像は必要ありません。 それどころか、基本的な形状を高フレームレートで飛び交うだけで、かなりの効果が得られます。 実験が重要なことを覚えておいてください — 特にあなたのゲームに何が有効かを確認してください。</p> + +<h2 id="The_future_of_WebVR" name="The_future_of_WebVR">WebVR の未来</h2> + +<p>それは起こっています — 消費者向けデバイスは現在市場に出回っており、Web 上でそれらをサポートする JavaScript API がすでにあります。 今必要なのは、安定した仕様、優れた UX と UI、より優れたハードウェア、より多くのツールとライブラリーです。 そしてそのすべてが間近に迫っています。 WebVR に飛び込んで実験するのに最適な時期です。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API/WebVR_concepts">WebVR concepts</a></li> + <li><a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使い方</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">A-Frame を使った基本的なデモの作成</a></li> +</ul> diff --git a/files/ja/games/techniques/async_scripts/index.html b/files/ja/games/techniques/async_scripts/index.html new file mode 100644 index 0000000000..0e5279f64d --- /dev/null +++ b/files/ja/games/techniques/async_scripts/index.html @@ -0,0 +1,54 @@ +--- +title: asm.js の非同期スクリプト +slug: Games/Techniques/Async_scripts +tags: + - Games + - JavaScript + - asm.js + - async +translation_of: Games/Techniques/Async_scripts +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div> + +<div class="summary"> +<p><span class="seoSummary">全ての中~大規模ゲームでは、コンパイル処理を最適化してブラウザを最大限柔軟にする、非同期スクリプトとして <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a> コードをコンパイルします。Gecko では、非同期コンパイルによって、ゲームのロード時に JavaScript エンジンがメインスレッド外で asm.js をコンパイルし、生成した機械語コードをキャッシュしてそれ以降のロード時にコンパイル不要となります(Firefox 28から)。違いを見るには、<code>about:config</code> で <code>javascript.options.parallel_parsing</code> を反転させてください。</span></p> +</div> + +<h2 id="非同期を動作させる">非同期を動作させる</h2> + +<p>非同期のコンパイルは簡単です: JavaScript を書く時に、単に<code> async</code> 属性を使います:</p> + +<pre class="brush: js"><script async src="file.js"></script></pre> + +<p>あるいは、スクリプトで同じことを行います:</p> + +<pre class="brush: js">var script = document.createElement('script'); +script.src = "file.js"; +document.body.appendChild(script);</pre> + +<p>(スクリプトによって生成されるスクリプトはデフォルトで非同期です。) デフォルトの HTML シェル Emscripten は、後者を生成します。</p> + +<h2 id="非同期とそうでない時">非同期とそうでない時?</h2> + +<p>スクリプトが非同期で *ない* 、よく似た状況 (<a href="http://www.w3.org/TR/html5/scripting-1.html">仕様に定義されている</a>通り) では次の通りです:</p> + +<pre class="brush: js"><script async>code</script></pre> + +<p>および</p> + +<pre class="brush: js">var script = document.createElement('script'); +script.innerHTML = "code"; +document.body.appendChild(script);</pre> + +<p>両方とも 'インライン' スクリプトと考えられ、コンパイルされて、すぐに実行されます。</p> + +<p>コードが JS 文字列内にあった場合はどうでしょう? <code>eval</code> や <code>innerHTML</code>(両方とも同期コンパイルを起動します)を使う代わりに、 オブジェクトURLと一緒の Blob を使います:</p> + +<pre class="brush: js">var blob = new Blob([codeString]); +var script = document.createElement('script'); +var url = URL.createObjectURL(blob); +script.onload = script.onerror = function() { URL.revokeObjectURL(url); }; +script.src = url; +document.body.appendChild(script);</pre> + +<p><code>innerHTML</code> ではなく <code>src</code> をセットすると、スクリプトが非同期になります。</p> diff --git a/files/ja/games/techniques/audio_for_web_games/index.html b/files/ja/games/techniques/audio_for_web_games/index.html new file mode 100644 index 0000000000..4bb44a5b8f --- /dev/null +++ b/files/ja/games/techniques/audio_for_web_games/index.html @@ -0,0 +1,390 @@ +--- +title: Web ゲーム用のオーディオ +slug: Games/Techniques/Audio_for_Web_Games +tags: + - Audio + - Games + - Web Audio API + - audio sprites +translation_of: Games/Techniques/Audio_for_Web_Games +--- +<div>{{GamesSidebar}}</div> + +<div>{{IncludeSubnav("/ja/docs/Games")}}</div> + +<div class="summary"> +<p>オーディオはゲームの重要部分です。つまりこれはフィードバックと雰囲気を与えます。web ベースのオーディオは早くから成熟していますが、まだ多くのブラウザーに案内すべき違いがあります。ゲームエクスペリエンスにとってどのオーディオパーツが重要で、どれがあっても良いけど不要なものかを決めて、それに従って戦略を決めるのが必要となる事がよくあります。この記事では web ゲーム用のオーディオを実装するための詳細なガイドを提供し、現在なるべく広い範囲のプラットフォームで動作するものを観察します。</p> +</div> + +<h2 id="モバイルオーディオの注意点">モバイルオーディオの注意点</h2> + +<p>これまでウェブオーディオのサポートを提供するのに最も難しいプラットフォームはモバイルプラットフォームでした。不幸にもこれはゲームで遊ぶ人が良くいるプラットフォームです。デスクトップとモバイルのブラウザーにはいくつかの違いがあり、それがブラウザーベンダーに、ゲーム開発者が作業するのが難しくなるウェブオーディオの選択を起こすことがありました。これを見ていきましょう。</p> + +<h3 id="自動再生">自動再生</h3> + +<p>多くのモバイルブラウザーは、ゲームがオーディオ再生するように要求しても単に無視します。つまりオーディオの再生にはユーザーが開始するイベントが必要です。これはオーディオ再生の構成を考慮する必要があるということです。これは通常、事前にオーディオを読み込んでユーザーが開始するイベントに準備しておくことで守られます。</p> + +<p>もっと受け身にオーディオを自動再生するには、例えばゲームがロードするとすぐに始まるバックグラウンドミュージックでは、仕掛けをして *any* ユーザー開始イベントを検知して再生を開始します。その他のゲームで使われる予定のアクティブなサウンドについては、スタートボタンのようなものが押されたらすぐに準備しておくよう考慮します。</p> + +<p>このようにオーディオを準備するため、その一部を再生したくなります。つまりこの理由のため、オーディオサンプルの最後に無音期間を入れておくのが便利です。その無音に移動したり、再生や停止することは、JavaScript を使ってファイルの任意の地点を再生できることを意味します。</p> + +<div class="note"> +<p><strong>注</strong>: もしブラウザーがあなたに音量を変更することを許可するならば、ファイルを音量ゼロで再生することも可能でしょう（後述）。また、オーディオを再生後に即時停止することは、オーディオの小さな断片が再生されないことを保証しない、ということにも注意してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: モバイルのホーム画面にウェブアプリを追加することで特性が変化してしまうかもしれません。今のところ、iOS上の自動再生がこのケースに当てはまるようです。可能であれば、いくつかのデバイスとプラットフォームでコードがどう動くか試すべきです。</p> +</div> + +<h3 id="音量">音量</h3> + +<p>ボリュームコントロールのプログラムはモバイルブラウザーで無効化されていることがあります。この理由はしばしばユーザーが OS レベルでボリュームをコントロールし、上書きが禁止されているためです。</p> + +<h3 id="バッファリングと先読み">バッファリングと先読み</h3> + +<p>急騰するモバイルネットワークのデータ使用を軽減するための試みとして、再生開始前のバッファリングができなくなることが恐らくあります。バッファリングとは、ブラウザが前もってメディアのダウンロードをする処理であり、円滑な再生を確実なものにするために度々必要になります。</p> + +<p>{{domxref("HTMLMediaElement")}} インターフェイスが備える <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#Properties">多くのプロパティ</a> はトラックが再生可能な状態にあるかどうかを決定する助けになります。</p> + +<div class="note"> +<p><strong>注</strong>: 色々な意味でバッファリングの概念は時代遅れです。バイトレンジリクエストが許容される限り（これが既定の振る舞いです）、先行する内容のダウンロードの必要なしにオーディオの任意の点に飛ぶことができるべきです。しかしながら、先読みは依然として便利です。それなしでは、再生が始められるようになる前に、常にいくらかのクライアント・サーバー間通信が必要になるでしょう。</p> +</div> + +<h3 id="並行したオーディオ再生">並行したオーディオ再生</h3> + +<p>多くのゲームでは、複数のオーディオを同時に再生することが求められます。例えば、ゲーム内で様々なことが起こるために、バックグラウンドミュージックと効果音を一緒に再生することがあります。この状況は近々、<a href="/docs/Web/API/Web_Audio_API">Web Audio API</a>の採用でもっと上手くいくようになる予定ですが、現状最も広くサポートされている方法 ― 平凡な{{htmlelement("audio")}}要素を使用すること ― は、モバイルデバイス上では不安定な結果になります。</p> + +<h3 id="テストとサポート">テストとサポート</h3> + +<p>ここでは、どのモバイルプラットフォームが前述した機能をサポートするかを表に示します。</p> + +<table class="standard-table"> + <caption>web audio 機能のモバイルサポート</caption> + <thead> + <tr> + <th scope="row">モバイルブラウザー</th> + <th scope="col">バージョン</th> + <th scope="col">同時再生</th> + <th scope="col">自動再生</th> + <th scope="col">音量調整</th> + <th scope="col">先読み</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Chrome (Android)</th> + <td>32+</td> + <td>Y</td> + <td>N</td> + <td>N</td> + <td>N</td> + </tr> + <tr> + <th scope="row">Firefox (Android)</th> + <td>26+</td> + <td>Y</td> + <td>Y</td> + <td>N</td> + <td>N</td> + </tr> + <tr> + <th scope="row">Firefox OS</th> + <td>1.2+</td> + <td>Y</td> + <td>Y</td> + <td>Y</td> + <td>Y</td> + </tr> + <tr> + <th scope="row">IE Mobile</th> + <td>11+</td> + <td>Y</td> + <td>Y</td> + <td>N</td> + <td>Y</td> + </tr> + <tr> + <th scope="row">Opera Mobile</th> + <td>11+</td> + <td>N</td> + <td>N</td> + <td>N</td> + <td>N</td> + </tr> + <tr> + <th scope="row">Safari (iOS)</th> + <td>7+</td> + <td>Y/N*</td> + <td>N</td> + <td>N</td> + <td>Y</td> + </tr> + <tr> + <th scope="row">Android Browser</th> + <td>2.3+</td> + <td>N</td> + <td>N</td> + <td>N</td> + <td>N</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>* 注</strong>: 同時に全てのオーディオを開始させてみる場合、Safari 7 では再生に問題があります。再生をずらした場合、ある程度は成功するかもしれません。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: オーディオの同時再生は私たちの<a href="http://jsfiddle.net/dmkyaq0r/">同時オーディオテストの例</a>を使ってテストされますが、そこでは標準のオーディオAPIを使って３つのオーディオの同時再生を試しています。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 単純な自動再生機能は私たちの<a href="http://jsfiddle.net/vpdspp2b/">自動再生テストの例</a>でテストされます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 音量の可変性は私たちの<a href="http://jsfiddle.net/7ta12vw4/">音量テストの例</a>でテストされます。</p> +</div> + +<h2 id="モバイルの回避処理">モバイルの回避処理</h2> + +<p>モバイルブラウザーは問題を抱えていますが、上に詳述した問題については回避する方法があります。</p> + +<h3 id="オーディオスプライト">オーディオスプライト</h3> + +<p>オーディオスプライトは<a href="/docs/Web/Guide/CSS/CSS_Image_Sprites">CSSスプライト</a>から名前をとったもので、CSSスプライトとは単一グラフィックリソースを連続したスプライトに分解して使うCSSのための視覚的なテクニックです。同じ原理をオーディオに適用することで、読み込みと再生に時間のかかる小さなオーディオファイルの束ではなく、必要とするオーディオすべてを含む大きなオーディオファイル一つを用いることができます。そのファイルから特定の音を再生するには、各オーディオスプライトの既知の開始・停止時間を指定するだけです。</p> + +<p>利点は、一つのオーディオを前もって提供しておき、スプライトをすぐ使える状態にできることです。こうすることで、大きな一つのオーディオの再生と即時停止をするだけですみます。また、サーバーリクエスト数を減らすことと、帯域幅を節約することもできます。</p> + +<pre class="brush: js notranslate">var myAudio = document.createElement("audio"); +myAudio.src = "mysprite.mp3"; +myAudio.play(); +myAudio.pause();</pre> + +<p>停止すべき時間を知るために、現在時間のサンプリングをする必要があるでしょう。もし個々の音声について500ms以上の間隔をあけるなら、<code>timeUpdate</code>イベント(250ms毎に発動します）を使うことで事足りるはずです。ファイルは厳密に必要であるよりわずかに長くなりますが、無音部分はよく圧縮されます。</p> + +<p>ここにオーディオスプライトプレイヤーの例があります。 ― まずはHTMLでユーザーインターフェイスを構築しましょう:</p> + +<pre class="brush: html notranslate"><audio id="myAudio" src="http://jPlayer.org/tmp/countdown.mp3"></audio> +<button data-start="18" data-stop="19">0</button> +<button data-start="16" data-stop="17">1</button> +<button data-start="14" data-stop="15">2</button> +<button data-start="12" data-stop="13">3</button> +<button data-start="10" data-stop="11">4</button> +<button data-start="8" data-stop="9">5</button> +<button data-start="6" data-stop="7">6</button> +<button data-start="4" data-stop="5">7</button> +<button data-start="2" data-stop="3">8</button> +<button data-start="0" data-stop="1">9</button></pre> + +<p>今、開始・停止時間を秒単位で指定したボタンがあります。"countdonw.mp3" というMP3ファイルは2秒ごとに声に出された数字から成り、ここで意図していることは、対応するボタンが押された時にその数が再生されるということです。</p> + +<p>このように動作するJavaScriptを追加しましょう:</p> + +<pre class="brush: js notranslate">var myAudio = document.getElementById('myAudio'); +var buttons = document.getElementsByTagName('button'); +var stopTime = 0; + +for (var i = 0; i < buttons.length; i++) { + buttons[i].addEventListener('click', function() { + myAudio.currentTime = this.getAttribute("data-start"); + stopTime = this.getAttribute("data-stop"); + myAudio.play(); + }, false); +} + +myAudio.addEventListener('timeupdate', function() { + if (this.currentTime > stopTime) { + this.pause(); + } +}, false);</pre> + +<div class="note"> +<p><strong>注</strong>: JSFiddle上で<a href="http://jsfiddle.net/59vwaame/">私たちのオーディオスプライトプレイヤーライブ</a>を試すことができます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 上に詳述したように、モバイルでは、スタートボタンが押されるといったようなユーザー開始イベントからコードを発動させる必要があるかもしれません。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: ビットレートに気をつけてください。低ビットレートのエンコードではファイルサイズは小さくなりますが、シーク精度も低くなります。</p> +</div> + +<h2 id="バックグラウンドミュージックBGM">バックグラウンドミュージック(BGM)</h2> + +<p>ゲーム内の音楽は感情に訴える強力な効果があります。あなたは様々な楽曲サンプルを組み合わせることができ、さらに、オーディオ要素のボリュームをコントロールすることができることを想定すれば、異なる楽曲をクロスフェードさせることができます。<code><a href="/Apps/Build/Audio_and_video_delivery/HTML5_playbackRate_explained">playbackRate()</a></code>を使うことで、動きにより良く同期させるために、ピッチに影響なく音楽のスピードの調節もできます。</p> + +<p>これは標準の{{HTMLElement("audio")}}要素を使って{{domxref("HTMLMediaElement")}}と連携しさえすれば可能となりますが、より発展した<a href="/docs/Web/API/Web_Audio_API">Web Audio API</a>を使えばもっと簡単で柔軟になります。次にこれについて見ていきましょう。</p> + +<h2 id="ゲーム用の_Web_オーディオ_API">ゲーム用の Web オーディオ API</h2> + +<p>Now that it's supported in all modern browsers except for Opera Mini and Internet Explorer (<a href="https://status.modern.ie/webaudioapi">although Microsoft is now working on it</a>), an acceptable approach for many situations is to use the <a href="/docs/Web/API/Web_Audio_API">Web Audio API</a> (see the <a href="http://caniuse.com/#search=web%20audio%20api">Can I use Web Audio API page</a> for more on browser compatibility). The Web Audio API is an advanced audio JavaScript API that is ideal for game audio. Developers can generate audio and manipulate audio samples as well as positioning sound in 3D game space.</p> + +<p>A feasible cross-browser strategy would be to provide basic audio using the standard {{HTMLElement("audio")}} element and, where supported, enhance the experience using the Web Audio API.</p> + +<div class="note"> +<p><strong>注</strong>: Significantly, iOS Safari now supports the Web Audio API, which means it's now possible to write web-based games with native-quality audio for iOS.</p> +</div> + +<p>As the Web Audio API allows precise timing and control of audio playback, we can use it to play samples at specific moments, which is a crucial immersive aspect of gaming. You want those explosions to be <strong>accompanied</strong> by a thundering boom, not <strong>followed</strong> by one, after all.</p> + +<h3 id="Web_Audio_API_での_BGM">Web Audio API での BGM</h3> + +<p>Although we can use the {{HTMLElement("audio")}} element to deliver linear background music that doesn't change in reaction to the game environment, the Web Audio API is ideal for implementing a more dynamic musical experience. You may want music to change depending on whether you are trying to build suspense or encourage the player in some way. Music is an important part of the gaming experience and depending on the type of game you are making you may wish to invest significant effort into getting it right.</p> + +<p>One way you can make your music soundtrack more dynamic is by splitting it up into component loops or tracks. This is often the way that musicians compose music anyway, and the Web Audio API is extremely good at keeping these parts in sync. Once you have the various tracks that make up your piece you can bring tracks in and out as appropriate.</p> + +<p>You can also apply filters or effects to music. Is your character in a cave? Increase the echo. Maybe you have underwater scenes, so apply a filter that muffles the sound.</p> + +<p>Let's look at some Web Audio API techniques for dynamically adjusting music from its base tracks.</p> + +<h3 id="トラックを読み込む">トラックを読み込む</h3> + +<p>With the Web Audio API you can load separate tracks and loops individually using <a href="/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load.</p> + +<p>Either way you may want to synchronize tracks or loops. The Web Audio API contains the notion of an internal clock that starts ticking the moment you create an audio context. You'll need to take account of the time between creating an audio context and when the first audio track starts playing. Recording this offset and querying the playing track's current time gives you enough information to synchronize separate pieces of audio.</p> + +<p>To see this in action, let's lay out some separate tracks:</p> + +<pre class="brush: html notranslate"><ul> + <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3">Lead Guitar</a></li> + <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-drums.mp3">Drums</a></li> + <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3">Bass Guitar</a></li> + <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-horns.mp3">Horns</a></li> + <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-clav.mp3">Clavi</a></li> +</ul></pre> + +<p>All of these tracks are the same tempo and are designed to be synchronized with each other.</p> + +<pre class="brush: js notranslate">window.AudioContext = window.AudioContext || window.webkitAudioContext; + +var offset = 0; +var context = new AudioContext(); + +function playTrack(url) { + var request = new XMLHttpRequest(); + request.open('GET', url, true); + request.responseType = 'arraybuffer'; + + var audiobuffer; + + // Decode asynchronously + request.onload = function() { + + if (request.status == 200) { + + context.decodeAudioData(request.response, function(buffer) { + var source = context.createBufferSource(); + source.buffer = buffer; + source.connect(context.destination); + console.log('context.currentTime ' + context.currentTime); + + if (offset == 0) { + source.start(); + offset = context.currentTime; + } else { + source.start(0,context.currentTime - offset); + } + + }, function(e) { + console.log('Error decoding audio data:' + e); + }); + } else { + console.log('Audio didn\'t load successfully; error code:' + request.statusText); + } + } + request.send(); +} + +var tracks = document.getElementsByClassName('track'); + +for (var i = 0, len = tracks.length; i < len; i++) { + tracks[i].addEventListener('click', function(e){ + + playTrack(this.href); + e.preventDefault(); + }); +}</pre> + +<div class="note"> +<p><strong>注</strong>: You can try out our <a href="http://jsfiddle.net/c87z11jj/1/">Web Audio API multitrack demo</a> live on JSFiddle.</p> +</div> + +<p>Now let's look over the code. First we set up a new {{domxref("AudioContext")}} and create a function (<code>playTrack()</code>) that loads and starts playing a track.</p> + +<p><code>start()</code> (formerly known as <code>noteOn()</code>) will start playing an audio asset. <code>start(</code><code>)</code> asks three (optional) parameters:</p> + +<ol> + <li>when: The absolute time to commence playback.</li> + <li>where (offset): The part of the audio to start playing from.</li> + <li>how long: The duration to play for.</li> +</ol> + +<p><code>stop()</code> takes one optional parameter — when — which is the delay before stopping.<br> + <br> + If <code>start()</code>'s second parameter — the offset — is zero, we start playing from the start of the given piece of audio, which is what we do in the first instance. We then store the {{domxref("AudioContext.currentTime")}} — the offset of when the first piece began playing, subtract that from any subsequent <code>currentTime</code>s to calculate the actual time, and use that to synchronize our tracks.<br> + <br> + In the context of your game world you may have loops and samples that are played in different circumstances, and it can be useful to be able to synchronize with other tracks for a more seamless experience.</p> + +<div class="note"> +<p><strong>注</strong>: This example does not wait for the beat to end before introducing the next piece; we could do this if we knew the BPM (Beats Per Minute) of the tracks.</p> +</div> + +<p>You may find that the introduction of a new track sounds more natural if it comes in on the beat/bar/phrase or whatever units you want to chunk your background music into.</p> + +<p>To do this before playing the track you want to sync, you should calculate how long it is until the start of the next beat/bar etc.</p> + +<p>Here's a bit of code that given a tempo (the time in seconds of your beat/bar) will calculate how long to wait until you play the next part — you feed the resulting value to the <code>start()</code> function with the first parameter, which takes the absolute time of when that playback should commence. Note the second parameter (where to start playing from in the new track) is relative:</p> + +<pre class="brush: js notranslate">if (offset == 0) { + source.start(); + offset = context.currentTime; +} else { + var relativeTime = context.currentTime - offset; + var beats = relativeTime / tempo; + var remainder = beats - Math.floor(beats); + var delay = tempo - (remainder*tempo); + source.start(context.currentTime+delay, relativeTime+delay); +}</pre> + +<div class="note"> +<p><strong>注</strong>: You can <a href="http://jsfiddle.net/c87z11jj/2/">try our wait calculator code</a> here, on JSFiddle (I've synched to the bar in this case).</p> +</div> + +<div class="note"> +<p><strong>注</strong>: If the first parameter is 0 or less than the context <code>currentTime</code>, playback will commence immediately.</p> +</div> + +<h3 id="場所のオーディオ">場所のオーディオ</h3> + +<p>Positional audio can be an important technique in making audio a key part of an immersive gaming experience. The Web Audio API not only enables us to position a number of audio sources in three-dimensional space but can also allow us to apply filters that make that audio appear more realistic.</p> + +<p>In short, using the positional capabilities of the Web Audio API we can relate further information about the game world to the player.</p> + +<p>We can relate:</p> + +<ul> + <li>The position of objects</li> + <li>The direction of objects (movement of position and recreation of the Doppler effect)</li> + <li>The environment (cavernous, underwater, etc.)</li> +</ul> + +<p>This is especially useful in a three-dimensional environment rendered using <a href="/docs/Web/WebGL">WebGL</a>, where the Web Audio API makes it possible to tie audio to the objects and viewpoints.</p> + +<div class="note"> +<p><strong>注</strong>: See <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> for more details.</p> +</div> + +<h2 id="こちらも確認">こちらも確認</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API on MDN</a></li> + <li><a href="/ja/docs/Web/HTML/Element/audio"><code><audio></code> on MDN</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API (HTML5Rocks)</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL (HTML5Rocks)</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/songs-of-diridum-pushing-the-web-audio-api-to-its-limits/">Songs of Diridum: Pushing the Web Audio API to Its Limits</a></li> + <li><a href="http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/">Making HTML5 Audio Actually Work on Mobile</a></li> + <li><a href="http://remysharp.com/2010/12/23/audio-sprites/">Audio Sprites (and fixes for iOS)</a><br> + </li> +</ul> diff --git a/files/ja/games/techniques/control_mechanisms/index.html b/files/ja/games/techniques/control_mechanisms/index.html new file mode 100644 index 0000000000..5daa21aab9 --- /dev/null +++ b/files/ja/games/techniques/control_mechanisms/index.html @@ -0,0 +1,71 @@ +--- +title: Implementing game control mechanisms +slug: Games/Techniques/Control_mechanisms +translation_of: Games/Techniques/Control_mechanisms +--- +<div>{{GamesSidebar}}</div> + +<p class="summary"> </p> + +<p>ゲーム開発プラットフォームとしてのHTML5の主な利点の1つは、さまざまなプラットフォームおよびデバイス上で実行できることです。デバイス間の違いを合理化することは、特に異なるコンテキストに適切なコントロールを提供するときには、複数の課題を生み出します。このシリーズの記事では、タッチスクリーンのスマートフォン、マウス、キーボード、そしてゲームパッドなどのあまり一般的ではないメカニズムを使用してプレイできるゲームの構築方法について説明します。</p> + +<p class="summary"> </p> + +<h2 id="事例研究">事例研究</h2> + +<p>ここでは <a href="http://rogers2.enclavegames.com/demo/">Captain Rogers: Battle at Andromeda demo</a> を例にします。</p> + +<p><img alt="Captain Rogers: Battle at Andromeda - cover of the game containing Enclave Games and Blackmoon Design logos, Roger's space ship and title of the game." src="https://mdn.mozillademos.org/files/13849/captainrogers2-cover.png" style="display: block; height: 325px; margin: 0px auto; width: 575px;"></p> + +<p>キャプテンロジャーは現在JavaScriptによる2Dゲームをシンプルに開発できるもっとも一般的なツールある、Phaser フレームワークを用いて作成されており、PureJavaScriptやほかのフレームワークでゲームを構築するとき、これらの記事に含まれるナレッジの再利用がとても容易です。Phaser のよい入門書をお探しであれば、<a>2D breakout game using Phaser</a>tutorialをチェックしてみてください。</p> + +<p>In the following articles we will show how to implement various different control mechanisms for Captain Rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like TV remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.</p> + +<h2 id="Setting_up_the_environment">Setting up the environment</h2> + +<p>Let's start with a quick overview of the game's folder structure, JavaScript files and in-game states, so we know what's happening where. The game's folders look like this:</p> + +<p><img alt="Captain Rogers: Battle at Andromeda - folder structure of the games' project containing JavaScript sources, images and fonts." src="https://mdn.mozillademos.org/files/13851/captainrogers2-folderstructure.png" style="border-style: solid; border-width: 1px; display: block; height: 479px; margin: 0px auto; width: 575px;"></p> + +<p>As you can see there are folders for images, JavaScript files, fonts and sound effects. The <code>src</code> folder contains the JavaScript files split as a separate states — <code>Boot.js</code>, <code>Preloader.js</code>, <code>MainMenu.js</code> and <code>Game.js</code> — these are loaded into the index file in this exact order. The first one initializes Phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay.</p> + +<p>Every state has its own default methods: <code>preload()</code>, <code>create()</code>, and <code>update()</code>. The first one is needed for preloading required assets, <code>create()</code> is executed once the state had started, and <code>update()</code> is executed on every frame.</p> + +<p>For example, you can define a button in the <code>create()</code> function:</p> + +<pre class="brush: js">create: function() { + // ... + var buttonEnclave = this.add.button(10, 10, 'logo-enclave', this.clickEnclave, this); + // ... +} +</pre> + +<p>It will be created once at the start of the game, and will execute <code>this.clickEnclave()</code> action assigned to it when clicked, but you can also use the mouse's pointer value in the <code>update()</code> function to make an action:</p> + +<pre class="brush: js">update: function() { + // ... + if(this.game.input.mousePointer.isDown) { + // do something + } + // ... +} +</pre> + +<p>This will be executed whenever the mouse button is pressed, and it will be checked against the input's <code>isDown</code> boolean variable on every frame of the game.</p> + +<p>That should give you some understanding of the project structure. We'll be playing mostly with the <code>MainMenu.js</code> and <code>Game.js</code> files, and we'll explain the code inside the <code>create()</code> and <code>update()</code> methods in much more detail in later articles.</p> + +<h2 id="Pure_JavaScript_demo">Pure JavaScript demo</h2> + +<p>There's also a <a href="https://end3r.github.io/JavaScript-Game-Controls/">small online demo</a> with full source code <a href="https://github.com/end3r/JavaScript-Game-Controls/">available on GitHub</a> where the basic support for the control mechanisms described in the articles is implemented in pure JavaScript. It will be explained in the given articles themselves below, but you can play with it already, and use the code however you want for learning purposes.</p> + +<h2 id="The_articles">The articles</h2> + +<p>JavaScript is the perfect choice for mobile gaming because of HTML5 being truly multiplatform; all of the following articles focus on the APIs provided for interfacing with different control mechanisms:</p> + +<ol> + <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch">Mobile touch controls</a> — The first article will kick off with touch, as the mobile first approach is very popular.</li> + <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Desktop mouse and keyboard controls</a> — When playing on a desktop/laptop computer, providing keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game.</li> + <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad">Desktop gamepad controls</a> — The Gamepad API rather usefully allows gamepads to be used for controlling web apps on desktop/laptop, for that console feel.</li> + <li><a href="/en-US/docs/Games/Techniques/Control_mechanisms/Other">Unconventional controls</a> — The final article showcases some unconventional control mechanisms, from the experimental to the slightly crazy, which you might not believe could be used to play the game.</li> +</ol> diff --git a/files/ja/games/techniques/controls_gamepad_api/index.html b/files/ja/games/techniques/controls_gamepad_api/index.html new file mode 100644 index 0000000000..1eb8e559d3 --- /dev/null +++ b/files/ja/games/techniques/controls_gamepad_api/index.html @@ -0,0 +1,238 @@ +--- +title: Gamepad APIを使用したコントロールの実装 +slug: Games/Techniques/Controls_Gamepad_API +translation_of: Games/Techniques/Controls_Gamepad_API +--- +<div>{{GamesSidebar}}</div><p class="summary"><span id="result_box" lang="ja"><span>この記事では、Gamepad API を使用して Web ゲーム用の効果的なクロスブラウザー制御システムを実装し、コンソールゲームコントローラーを使用してWebゲームを制御できるようにします。</span></span><a href="http://enclavegames.com/">Enclave Games</a><span lang="ja"><span> によって作成されたケーススタディゲーム Hungry Fridge を掲載しています。</span></span></p> + +<h2 id="Web_ゲームのコントロール">Web ゲームのコントロール</h2> + +<p><span id="result_box" lang="ja"><span>歴史的には、テレビに接続されたコンソールでゲームをすること、PC 上でのゲームとはまったく異なる体験でした。</span></span><span id="result_box" lang="ja"><span>最終的にはドライバとプラグインにより、コンソールゲームパッドをデスクトップゲームーネイティブかブラウザで実行されるゲームー</span></span><span lang="ja"><span>で使用できるようになりました。</span> <span>HTML5 の時代になり、</span></span><a href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">Gamepad API</a><span lang="ja"><span> が完成し、プラグインなしでゲームパッドコントローラを使用してブラウザベースのゲームをプレイできるようになりました。</span> <span>Gamepad API は、入力を処理するために JavaScript コード内で使用できるボタンの押下と軸の変更を公開するインターフェイスを提供することで、これを実現します。</span> <span>これらは、ブラウザゲームにとって良いことです。</span></span></p> + +<p><img alt="gamepad-controls" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img01.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p> + +<h2 id="API_ステータスとブラウザサポート">API ステータスとブラウザサポート</h2> + +<p><a href="http://www.w3.org/TR/gamepad/">Gamepad API</a> は W3C のプロセスではまだドラフトの状態であり、まだ実装が変わることがありますが、<a href="http://caniuse.com/gamepad">ブラウザサポート</a>はかなり良い状態です。Firefox 29 以降はそのまま使用できます。Opera はバージョン 22 以降で API をサポートしています（<span id="result_box" lang="ja"><span>ChromeのBlinkエンジンを使用していることを考えると驚くことではありません</span></span>）。Microsoft はEdge にて API をサポートしており、Gamepad API は4つの中心的なブラウザーにを現在サポートされています。</p> + +<h2 id="どのゲームパッドが良いか？">どのゲームパッドが良いか？</h2> + +<p><img alt="gamepad devices" src="http://end3r.com/tmp/gamepad/devices.jpg" style="display: block; height: 450px; margin: 0px auto; width: 600px;"></p> + +<p>現在最も人気のあるゲームパッドは XBox 360、XBox One、PS3 や PS4 であり、これらは かなりテストが行われており、Windows や Mac OS X のブラウザで Gamepad API がうまく動いています。</p> + +<p><span id="result_box" lang="ja"><span>さまざまなボタンレイアウトを備えたデバイスも多数あり、ブラウザの実装によって多かれ少なかれ動作します。</span> <span>この記事で取り上げたコードはいくつかのゲームパッドでテストしましたが、著者の好みはワイヤレス XBox 360 コントローラと Mac OS X 上の Firefox ブラウザの組み合わせです。</span></span></p> + +<h2 id="ケーススタディ_Hungry_Fridge">ケーススタディ: Hungry Fridge</h2> + +<p><a href="https://github.com/blog/1674-github-game-off-ii">GitHub Game Off II</a><span lang="ja"><span> のコンペが2013年11月に実施され、</span></span><a href="http://enclavegames.com/">Enclave Games</a><span lang="ja"><span> が参加することに決めました。</span> <span>競争のテーマは「変化」だったため、彼らは健康食品（リンゴ、ニンジン、レタス）をタップして飢えた冷蔵庫に食べさせ、「悪い」食べ物（ビール、ハンバーガー、ピザ）を避けなければならないゲームを提出しました。</span> <span>カウントダウンは、冷蔵庫が数秒ごとに食べたい食べ物のタイプを変えるので、注意して素早く行動する必要があります。</span> <span>あなたは</span></span><a href="http://enclavegames.com/games/hungry-fridge/"> Hungry Fridge</a><span lang="ja"><span> を</span></span><a href="http://enclavegames.com/games/hungry-fridge/">ここ</a><span lang="ja"><span>で試すことができます。</span></span></p> + +<p><img alt="hungryfridge-mainmenu" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img02.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> + +<p><span id="result_box" lang="ja"><span>2番目の、隠された「変更」の実装は、静的な冷蔵庫を本格的な移動式射撃食堂に変えることです。</span> <span>コントローラーを接続すると、ゲームが大きく変わります（Hungry FridgeがSuper Turbo Hungry Fridgeに変わります）、Gamepad API を使用して装甲冷蔵庫を制御できます。</span> <span>あなたは食べ物を撃たなければなりませんが、もう一度、冷蔵庫が各所で食べたい食べ物の種類を見つけなければなりません。そうしないとエネルギーが失われます。</span></span></p> + +<p><img alt="hungryfridge-howtoplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img03.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> + +<p><span class="short_text" id="result_box" lang="ja"><span>このゲームは、2つの全く異なるタイプの「変化」をカプセル化しています。</span></span></p> + +<p><img alt="hungryfridge-gameplay-gamepad" src="http://end3r.com/tmp/gamepad/gamepadapi-hungryfridge-img04.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> + +<h2 id="デモ">デモ</h2> + +<p><span id="result_box" lang="ja"><span>Hungry Fridge ゲームのフルバージョンが最初に構築され、次に Gamepad API が実際に表示され、JavaScript のソースコードが表示され、</span></span><a href="https://end3r.github.io/Gamepad-API-Content-Kit/demo/demo.html">簡単なデモ</a><span lang="ja"><span>が作成されました。</span> <span>これはGitHubで利用可能な</span></span> <a href="https://end3r.github.io/Gamepad-API-Content-Kit/">Gamepad API Content Kit</a> <span lang="ja"><span>の一部であり、コードを深く掘り下げてどのように動作するかを正確に調べることができます。</span></span></p> + +<p><img alt="Hungry Fridge demo using Gamepad API" src="http://end3r.com/tmp/gamepad/super-turbo.png" style="display: block; height: 333px; margin: 0px auto; width: 500px;"></p> + +<p><span id="result_box" lang="ja"><span>以下に説明するコードは、Hungry Fridge ゲームのフルバージョンからのものですが、デモのものとほぼ同じです。唯一の違いは、フルバージョンでは、スーパーターボモードを使用してゲームを起動するかどうかを決定する</span></span><code>ターボ</code><span lang="ja"><span>変数</span><span>。</span> <span>これは独立して機能するので、ゲームパッドが接続されていなくてもオンにすることができます。</span></span></p> + +<div class="note"> +<p><strong>注記</strong>: <span id="result_box" lang="ja"><span>イースターエッグタイム：ゲームパッドを接続せずにデスクトップにSuper Turbo Hungry Fridgeを起動する隠しオプションがあります。スクリーンの右上にあるゲームパッドアイコンをクリックします。</span> <span>それはスーパーターボモードでゲームを起動し、あなたはキーボードで冷蔵庫を制御することができます：タレットを左右に回すためのAとD、撮影のためのW、動きのための矢印キー。</span></span></p> +</div> + +<h2 id="実装">実装</h2> + +<p><span id="result_box" lang="ja"><span>Gamepad API には</span></span><code> gamepadconnected</code><span lang="ja"><span> と gamepaddisconnected という2つの重要なイベントがあります。</span> <span>最初のゲームはゲームパッドが切断されたとき（ユーザーが物理的に、または非アクティブのため）ゲームパッドが新しいゲームパッドの接続を検出したときに起動されます。デモでは、</span></span><code>gamepadAPI </code><span lang="ja"><span>オブジェクトは</span></span><span class="short_text" id="result_box" lang="ja"><span>、APIに関連するすべてを格納するために使用されます：</span></span></p> + +<pre class="brush: js"><code>var gamepadAPI = { + controller: {}, + turbo: false, + connect: function() {}, + disconnect: function() {}, + update: function() {}, + buttonPressed: function() {}, + buttons: [], + buttonsCache: [], + buttonsStatus: [], + axesStatus: [] +};</code></pre> + +<p><code>buttons</code> の配列は XBox 360 ボタンレイアウトを格納します：</p> + +<pre class="brush: js"><code>buttons: [ + 'DPad-Up','DPad-Down','DPad-Left','DPad-Right', + 'Start','Back','Axis-Left','Axis-Right', + 'LB','RB','Power','A','B','X','Y', +],</code></pre> + +<p><span id="result_box" lang="ja"><span>これは、PS3コントローラ（または名前のない、一般的なもの）のような他のタイプのゲームパッドでは異なる場合があり、期待しているボタンが実際に得るのと同じボタンになるか注意する必要があり、また仮定してはいけません：</span></span></p> + +<pre class="brush: js"><code>window.addEventListener("gamepadconnected", gamepadAPI.connect); +window.addEventListener("gamepaddisconnected", gamepadAPI.disconnect);</code></pre> + +<p><span id="result_box" lang="ja"><span>セキュリティポリシーのため、イベントが発生するとページが表示されている間にコントローラーと最初にやりとりする必要があります。</span> <span>APIがユーザーとのやりとりなしで動作した場合、APIを認識することなくフィンガープリントに使用できます。</span></span></p> + +<p><span class="short_text" id="result_box" lang="ja"><span>どちらの関数もかなりシンプルです：</span></span></p> + +<pre class="brush: js"><code>connect: function(evt) { + gamepadAPI.controller = evt.gamepad; + gamepadAPI.turbo = true; + console.log('Gamepad connected.'); +},</code></pre> + +<p><code>connect()</code> <span id="result_box" lang="ja"><span>関数はイベントをパラメータとして受け取り、</span></span><code>gamepad </code><span lang="ja"><span>オブジェクトを </span></span><code>gamepadAPI.controller</code><span lang="ja"><span> 変数に割り当てます。</span></span><span class="short_text" id="result_box" lang="ja"><span>このゲームでは1つのゲームパッドしか使用しないため、ゲームパッドの配列ではなく単一のオブジェクトです。</span></span><span id="result_box" lang="ja"><span>次に、</span></span><code>turbo </code><span lang="ja"><span>プロパティを </span></span><code>true </code><span lang="ja"><span>に設定します。</span><span>（この目的のために </span></span><code>gamepad.connected </code><span lang="ja"><span>というブール値を使用することができましたが、上で説明した理由から、ゲームパッドを接続しなくてもターボモードを有効にするための別の変数が必要でした）。</span></span></p> + +<pre class="brush: js"><code>disconnect: function(evt) { + gamepadAPI.turbo = false; + delete gamepadAPI.controller; + console.log('Gamepad disconnected.'); +},</code></pre> + +<p><code>disconnect</code> 関数は <code>gamepad.turbo プロパティを</code> <code>false</code> に設定し、gamepad オブジェクトを含む変数を削除します。</p> + +<h3 id="Gamepad_オブジェクト">Gamepad オブジェクト</h3> + +<p><code>gamepad </code><span class="short_text" lang="ja"><span>オブジェクトには、ボタンや軸の状態が最も重要な情報がたくさんあります</span></span>：</p> + +<ul> + <li><code>id</code>: コントローラーに関する情報を含む文字列。</li> + <li><code>index</code>: 接続したデバイスを定義するユニークな識別子。</li> + <li><code>connected</code>: 接続時に <code>true</code> になる真偽値の変数。</li> + <li><code>mapping</code>: <span class="short_text" id="result_box" lang="ja"><span>ボタンのレイアウトタイプ。</span> <span>標準は現在利用可能な唯一のオプション。</span></span></li> + <li><code>axes</code>: <span class="short_text" id="result_box" lang="ja"><span>各軸の状態。浮動小数点値の配列で表される。</span></span></li> + <li><code>buttons</code> : <code>pressed </code><span lang="ja"><span>プロパティと </span></span><code>value</code><span lang="ja"><span> のプロパティを含む </span></span><code>GamepadButton</code><span lang="ja"><span> オブジェクトの配列で表される各ボタンの状態。</span></span></li> +</ul> + +<p><code>index </code><span lang="ja"><span>変数は、2つ以上のコントローラを接続しており、2つのデバイスが接続されている2人のゲームがある場合など、それらを識別する必要がある場合に便利です。</span></span></p> + +<h3 id="gamepad_オブジェクトのクエリ">gamepad オブジェクトのクエリ</h3> + +<p><code>connect() </code><span lang="ja"><span>と </span></span><code>disconnect()</code><span lang="ja"><span> のほかに、</span></span><code>gamepadAPI </code><span lang="ja"><span>オブジェクトには</span></span><code> update() </code><span lang="ja"><span>と </span></span><code>buttonPressed()</code><span lang="ja"><span> の2つのメソッドがあります。</span> </span><code>update() </code><span lang="ja"><span>は、ゲームループ内のすべてのフレームで実行され、ゲームパッドオブジェクトの実際のステータスを定期的に更新します：</span></span></p> + +<pre class="brush: js"><code>update: function() { + // clear the buttons cache + gamepadAPI.buttonsCache = []; + // move the buttons status from the previous frame to the cache + for(var k=0; k<gamepadAPI.buttonsStatus.length; k++) { + gamepadAPI.buttonsCache[k] = gamepadAPI.buttonsStatus[k]; + } + // clear the buttons status + gamepadAPI.buttonsStatus = []; + // get the gamepad object + var c = gamepadAPI.controller || {}; + + // loop through buttons and push the pressed ones to the array + var pressed = []; + if(c.buttons) { + for(var b=0,t=c.buttons.length; b<t; b++) { + if(c.buttons[b].pressed) { + pressed.push(gamepadAPI.buttons[b]); + } + } + } + // loop through axes and push their values to the array + var axes = []; + if(c.axes) { + for(var a=0,x=c.axes.length; a<x; a++) { + axes.push(c.axes[a].toFixed(2)); + } + } + // assign received values + gamepadAPI.axesStatus = axes; + gamepadAPI.buttonsStatus = pressed; + // return buttons for debugging purposes + return pressed; +},</code></pre> + +<p><span id="result_box" lang="ja"><span>すべてのフレームで、</span></span><code>update() </code><span lang="ja"><span>は前のフレームで押されたボタンを </span></span><code>buttonsCache</code><span lang="ja"><span> 配列に保存し、新しいものを </span></span><code>gamepadAPI.controller</code><span lang="ja"><span> オブジェクトから取得します。</span> <span>次に、実際の状態と値を取得するためにボタンと軸をループします。</span></span></p> + +<h3 id="ボタンプレスの検出"><span class="short_text" id="result_box" lang="ja"><span>ボタンプレスの検出</span></span></h3> + +<p><code>buttonPressed()</code> <span lang="ja"><span>メソッドはメインのゲームループに配置され、ボタンの押下を待機します。</span> <span>2つのパラメータ、つまり聴きたいボタンと、ボタンを押したままにすることをゲームに伝える（オプション）方法があります。</span> <span>それがなければ、ボタンを放してもう一度押して、希望する効果を持たなければなりません。</span></span></p> + +<pre class="brush: js"><code>buttonPressed: function(button, hold) { + var newPress = false; + // loop through pressed buttons + for(var i=0,s=gamepadAPI.buttonsStatus.length; i<s; i++) { + // if we found the button we're looking for... + if(gamepadAPI.buttonsStatus[i] == button) { + // set the boolean variable to true + newPress = true; + // if we want to check the single press + if(!hold) { + // loop through the cached states from the previous frame + for(var j=0,p=gamepadAPI.buttonsCache.length; j<p; j++) { + // if the button was already pressed, ignore new press + if(gamepadAPI.buttonsCache[j] == button) { + newPress = false; + } + } + } + } + } + return newPress; +},</code></pre> + +<p><span id="result_box" lang="ja"><span>ボタンには、1回の押下と1回の押下の2種類のアクションがあります。</span> </span><code>newPress </code><span lang="ja"><span>ブール変数は、ボタンの新規押下があるかどうかを示します。</span> <span>次に、押されたボタンの配列をループします。指定されたボタンが探しているボタンと同じ場合、</span></span><code>newPress </code><span lang="ja"><span>変数は </span></span><code>true</code><span lang="ja"><span> に設定されます。</span> <span>プレスが新しいものかどうかを確認するために、プレイヤーがキーを保持していないので、ゲームループの前のフレームからのボタンのキャッシュ状態をループします。</span> <span>ボタンが見つかった場合、ボタンが押されていることを意味するので、新しいプレスはありません。</span> <span>最後に、</span></span><code>newPress </code><span lang="ja"><span>変数が返されます。</span> </span><code>buttonPressed</code><span lang="ja"> <span>関数は、このようなゲームの更新ループで使用されます：</span></span></p> + +<pre class="brush: js"><code>if(gamepadAPI.turbo) { + if(gamepadAPI.buttonPressed('A','hold')) { + this.turbo_fire(); + } + if(gamepadAPI.buttonPressed('B')) { + this.managePause(); + } +}</code></pre> + +<p><code>gamepadAPI.turbo </code><span lang="ja"><span>が </span></span><code>true </code><span lang="ja"><span>で、指定されたボタンが押された (または保持されている) 場合、それらに割り当てられた適切な関数を実行します。</span> <span>この場合、</span></span><code>A </code><span lang="ja"><span>を押すと、弾丸が発射され、</span></span><code>B </code><span lang="ja"><span>を押すとゲームが一時停止します。</span></span></p> + +<h3 id="軸のしきい値"><span class="short_text" id="result_box" lang="ja"><span>軸のしきい値</span></span></h3> + +<p><span id="result_box" lang="ja"><span>ボタンには </span></span><code>0 </code><span lang="ja"><span>または </span></span><code>1 </code><span lang="ja"><span>の二つの状態しかありませんが、アナログスティックは </span></span><code>X </code><span lang="ja"><span>軸と </span></span><code>Y </code><span lang="ja"><span>軸の両方に沿って </span></span><code>-1 </code><span lang="ja"><span>と </span></span><code>1 </code><span lang="ja"><span>の間の浮動小数点範囲を持っています。</span></span></p> + +<p><img alt="axis threshold" src="http://end3r.com/tmp/gamepad/axis-threshold.png" style="display: block; height: 300px; margin: 0px auto; width: 400px;"></p> + +<p><span id="result_box" lang="ja"><span>ゲームパッドは、ほこりのない場所からのゴミを得ることができます。つまり、正確な </span></span>-1 <span lang="ja"><span>または </span></span>1 <span lang="ja"><span>の値をチェックすることが問題になります。</span> <span>このため、軸の値のしきい値を設定すると効果的です。</span> 例えば<span>、</span></span><code>X </code><span lang="ja"><span>値が </span></span><code>0.5</code><span lang="ja"><span> より大きい場合にのみ、冷蔵庫のタンクが右に回転します：</span></span></p> + +<pre><code>if(gamepadAPI.axesStatus[0].x > 0.5) { + this.player.angle += 3; + this.turret.angle += 3; +}</code></pre> + +<p><span id="result_box" lang="ja"><span>たとえ誤って少し動かしても、スティックが元の位置に戻らない場合でも、タンクが予期せず回転することはありません。</span></span></p> + +<h2 id="仕様の更新"><span class="short_text" id="result_box" lang="ja"><span>仕様の更新</span></span></h2> + +<p><span id="result_box" lang="ja"><span>1年以上の安定性の後、2015年4月に W3C Gamepad API 仕様が更新されました</span></span> (<a href="https://w3c.github.io/gamepad/">最新の仕様を参照</a>) <span lang="ja"><span>。それはあまり変わっていませんが、何が起こっているのかを知ることは良いことです。</span></span></p> + +<h3 id="gamepads_の入手">gamepads の入手</h3> + +<p>{{domxref("Naviagator.getGamepads()")}} <span id="result_box" lang="ja"><span>メソッドは、</span></span><a href="https://w3c.github.io/gamepad/#navigator-interface-extension">より長い解説とコード例</a><span lang="ja"><span>で更新されました。</span> <span>ここで、ゲームパッドの配列の長さは </span></span><code>n + 1</code><span lang="ja"><span> でなければなりません。ここで、</span></span><code>n </code><span lang="ja"><span>は接続されたデバイスの数です </span></span>—<span lang="ja"><span> 接続されたデバイスが1つでインデックスが1の場合、配列の長さは2で、</span> <span>[</span></span><code>null, </code><code>[object Gamepad]</code><code>] </code><span lang="ja"><span>をクリックします。</span> <span>デバイスが接続されていないか使用できない場合、デバイスの値は </span></span><code>null </code><span lang="ja"><span>に設定されます。</span></span></p> + +<h3 id="マッピング標準"><span class="short_text" id="result_box" lang="ja"><span>マッピング標準</span></span></h3> + +<p><span class="short_text" id="result_box" lang="ja"><span>マッピングタイプは、文字列ではなく列挙可能なオブジェクトになりました：</span></span></p> + +<pre>enum GamepadMappingType { + "", + "standard" +};</pre> + +<p><span id="result_box" lang="ja"><span>この列挙型は、ゲームパッドの既知のマッピングのセットを定義します。</span> <span>今のところ</span></span><code>標準</code><span lang="ja"><span>のレイアウトしかありませんが、将来は新しいレイアウトが登場する可能性があります。</span> <span>レイアウトが不明な場合は、空の文字列に設定されます。</span></span></p> + +<h3 id="イベント">イベント</h3> + +<p><span id="result_box" lang="ja"><span>スペックには、</span></span><code>gamepaddisconnected </code><span lang="ja"><span>と </span></span><code>gamepaddisconnected</code><span lang="ja"><span> よりも多くのイベントがありましたが、あまり役に立たないと思われていた仕様から削除されました。</span> <span>議論は、それを取り戻すべきかどうか、そしてどのような形で進行しているかについてはまだ進行中です。</span></span></p> + +<h2 id="概要"><span class="short_text" id="result_box" lang="ja"><span>概要</span></span></h2> + +<p><span id="result_box" lang="ja"><span>Gamepad APIは非常に開発が簡単です。</span> <span>プラグインを必要とせずに、コンソールに似たエクスペリエンスをブラウザに提供することがこれまで以上に簡単になりました。</span> </span><a href="http://enclavegames.com/games/hungry-fridge/">Hungry Fridge </a><span lang="ja"><span>ゲームのフルバージョンをブラウザで直接再生したり、</span></span><a href="https://marketplace.firefox.com/app/hungry-fridge">Firefox Marketplace</a> <span lang="ja"><span>からインストールしたり、</span></span><a href="https://github.com/EnclaveGames/Hungry-Fridge">Gamepad API Content Kit </a><span lang="ja"><span>のその他のリソースと一緒にデモのソースコードを確認したりすることができます。</span></span></p> diff --git a/files/ja/games/techniques/index.html b/files/ja/games/techniques/index.html new file mode 100644 index 0000000000..f3dee722b0 --- /dev/null +++ b/files/ja/games/techniques/index.html @@ -0,0 +1,33 @@ +--- +title: ゲーム開発テクニック +slug: Games/Techniques +tags: + - Games + - Guide + - TopicStub +translation_of: Games/Techniques +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div> + +<div class="summary"> +<p><span class="seoSummary">このページはopen webテクノロジを使ってゲーム開発をしたい方にとって本質的にコアなテクニック一覧を表示します。</span></p> + +<p>これらがゲーム開発用のアイデアとテクニックです。</p> +</div> + +<dl> + <dt><a href="/docs/Games/Techniques/Async_scripts">asm.js用の非同期スクリプトを使用する</a></dt> + <dd>中~大規模ゲームの作成に必要となる、非同期スクリプトは活用すべき重要テクニックであり、その結果あなたのゲームのJavaScriptはメインスレッド外でコンパイルされて、将来のゲーム実行のためにキャッシュされ、その結果ユーザにとっては目覚ましいパフォーマンス改良となります。この記事では方法を説明します。</dd> + <dt><a href="/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">起動パフォーマンスを最適化する</a></dt> + <dd>作成したゲームが素早く、スムーズに、ユーザのブラウザや端末が固まったように見えなくする方法。</dd> + <dt><a href="/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">WebRTC のp2pデータチャネルを使う</a></dt> + <dd>オーディオとビデオ通信のサポートに加えて、WebRTCはプレイヤー同士のテキスト・バイナリデータ交換を可能にする、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれでできる事を説明し、簡単に実現するライブラリの使用方法を示します。</dd> + <dt><a href="/docs/Games/Techniques/Efficient_animation_for_web_games">webゲーム用の効率的アニメーション</a></dt> + <dd>この記事ではwebゲーム用の効果的なアニメーション作成のテクニックとアドバイスをモバイルフォンといった下位側の端末サポートに偏って網羅します。CSS トランジションや CSS アニメーション、{{ domxref("window.requestAnimationFrame") }} を含むJavaScriptループについて触れます。</dd> + <dt><a href="/docs/Games/Techniques/Audio_for_Web_Games">Webゲーム用のオーディオ</a></dt> + <dd>ゲームにとってオーディオは重要部分です — フィードバックと雰囲気を付け加えます。Webベースのオーディオは早くから成熟していましたが、まだ多くのブラウザに案内するべき違いがあります。この記事ではwebゲーム用のオーディオを実装するための詳細なガイドを提供し、現在なるべく広い範囲のプラットフォームで動作するものを観察します。</dd> + <dt><a href="/docs/Games/Techniques/2D_collision_detection">2D 衝突検出</a></dt> + <dd>2D ゲームの衝突検出についての正確な紹介</dd> + <dt><a href="/docs/Games/Techniques/Tilemaps">タイルマップ</a></dt> + <dd>タイルは2Dゲームの世界を作るのに、とてもよくあるテクニックです。この記事ではタイルマップと、Canvas API でそれを実装する方法を紹介します。</dd> +</dl> diff --git a/files/ja/games/techniques/webrtc_data_channels/index.html b/files/ja/games/techniques/webrtc_data_channels/index.html new file mode 100644 index 0000000000..69a4dac3ba --- /dev/null +++ b/files/ja/games/techniques/webrtc_data_channels/index.html @@ -0,0 +1,47 @@ +--- +title: WebRTC データチャネル +slug: Games/Techniques/WebRTC_data_channels +tags: + - API + - Games + - NeedsContent + - Network + - P2P + - WebRTC + - data channels +translation_of: Games/Techniques/WebRTC_data_channels +--- +<div>{{GamesSidebar}}</div> + +<div>{{IncludeSubnav("/ja/docs/Games")}}</div> + +<p><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (Web Real-Time Communications; Webリアルタイム通信の略語) API は、第一にオーディオとビデオ通信のサポートによって知られています。しかしながら、ピア・ツー・ピアのデータチャネルもあります。この記事ではこれの詳細を説明し、ゲーム内にデータチャネルを実装するライブラリの使用方法を示します。</p> + +<h2 id="データチャネルとは">データチャネルとは?</h2> + +<p>A WebRTC data channel lets you send text or binary data over an active connection to a peer. In the context of a game, this lets players send data to each other, whether text chat or game status information. Data channels come in two flavors.</p> + +<p><strong>Reliable channels</strong> guarantee that messages you send arrive at the other peer and in the same order in which they're sent. This is analogous to a TCP socket.</p> + +<p><strong>Unreliable channels</strong> make no such guarantees; messages aren't guaranteed to arrive in any particular order and, in fact, aren't guaranteed to arrive at all. This is analogous to a UDP socket.</p> + +<p>We have <a href="/ja/docs/Web/Guide/API/WebRTC" title="/en-US/docs/WebRTC">documentation for using WebRTC</a>. This article, however, will take advantage of some libraries that can help trivialize the work, and will demonstrate ways to use abstraction to work around implementation differences between browsers. Hopefully, of course, those differences will fade away in time.</p> + +<h2 id="p2p_ライブラリを使用する">p2p ライブラリを使用する</h2> + +<p>One library you can use is the <a href="https://github.com/js-platform/p2p" title="https://github.com/js-platform/p2p">p2p</a> library. This library provides a simple API for creating peer connections and setting up streams and data channels. There's also a broker server component and a hosted broker you can use instead of having to set one up for yourself.</p> + +<div class="note"> +<p><strong>Note:</strong> We will continue to add content here soon; there are some organizational issues to sort out.</p> +</div> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">オリジナルの文書について</h2> + +<ul> + <li>著者: Alan Kligman</li> + <li>元の記事: <a href="https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/" title="https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/">WebRTC Data Channels for Great Multiplayer</a></li> + <li>その他の貢献者: Robert Nyman</li> + <li>著作権: Alan Kligman, 2013</li> +</ul> +</div> |