blob: 3247e48f4212adc4b4dc3cad3f2f8ccc48e19129 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: Web用のゲーム開発入門
slug: Games/Introduction
tags:
- Firefox OS
- Games
- Guide
- Mobile
translation_of: Games/Introduction
---
<div>{{GamesSidebar}}</div>
<div>{{IncludeSubnav("/ja/ docs/Games")}}</div>
<p>モダンウェブは、魅力的でクオリティの高いゲーム作りだけでなく、より重要な、そうしたゲームを配信するための、価値あるプラットフォームに急変身しました。</p>
<p>作成できるゲームの範囲は、デスクトップやネイティブ相当と同じレベルです。モダンウェブテクノロジーと最近のブラウザーがあれば、ウェブ用に魅力的で最高級のゲームを作ることも完全に可能です。かつて Flash® を使って作られたシンプルなカードゲームやマルチ・プレイヤーのソーシャルゲームについて述べているのではなく、スゲェ 3D アクションシューティングや、RPG や、その他について述べています。<a href="/ja/docs/JavaScript" title="/ja/docs/JavaScript">JavaScript</a> JIT コンパイラテクノロジーと新API の充実したパフォーマンス改良のおかげて、ブラウザー (や <a href="/ja/docs/Mozilla/Firefox_OS" title="/ja/docs/Mozilla/Firefox_OS">Firefox OS</a> ベースの端末のような <a href="/ja/docs/HTML/HTML5" title="/ja/docs/HTML/HTML5">HTML5</a> で動作する端末上) で動作するゲームを、妥協することなしに製作できます。</p>
<h2 id="The_HTML5_game_platform" name="The_HTML5_game_platform">HTML5 ゲームプラットフォーム</h2>
<p>本当に、ウェブをあなたのゲーム用のより優秀なターゲットプラットフォームだと考えることができます。言うなれば、"ウェブはプラットフォームです"。ウェブ プラットフォームのコアを見ていきましょう:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">機能</th>
<th scope="col">テクノロジー</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>オーディオ</strong></td>
<td><a href="/ja/docs/Web/API/Web_Audio_API" title="/ja/docs/Web_Audio_API">Web Audio API</a></td>
</tr>
<tr>
<td><strong>グラフィック</strong></td>
<td><a href="/ja/docs/WebGL" title="/ja/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
</tr>
<tr>
<td><strong>入力</strong></td>
<td><a href="/ja/docs/DOM/Touch_events" title="/ja/docs/DOM/Touch_events">Touch events</a>、<a href="/ja/docs/Web/Guide/API/Gamepad" title="/ja/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>、端末センサー、<a href="/ja/docs/Web/API/WebRTC_API" title="/ja/docs/WebRTC">WebRTC</a>、<a href="/ja/docs/Web/Guide/DOM/Using_full_screen_mode" title="/ja/docs/DOM/Using_fullscreen_mode">Full Screen API</a>、<a href="/ja/docs/API/Pointer_Lock_API" title="/ja/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
</tr>
<tr>
<td><strong>言語</strong></td>
<td><a href="/ja/docs/JavaScript" title="/ja/docs/JavaScript">JavaScript</a> (あるいは <a href="https://github.com/kripken/emscripten/wiki">Emscripten</a> を使って JavaScript にコンパイルする C/C++ )</td>
</tr>
<tr>
<td><strong>ネットワーク</strong></td>
<td><a href="/ja/docs/Web/API/WebRTC_API" title="/ja/docs/WebRTC">WebRTC</a> と/あるいは <a href="/ja/docs/WebSockets" title="/ja/docs/WebSockets">WebSockets</a></td>
</tr>
<tr>
<td><strong>ストレージ</strong></td>
<td><a href="/ja/docs/IndexedDB" title="/ja/docs/IndexedDB">IndexedDB</a> あるいは "クラウド"</td>
</tr>
<tr>
<td><strong>ウェブ</strong></td>
<td><a href="/ja/docs/HTML" title="/ja/docs/HTML">HTML</a>、<a href="/ja/docs/CSS" title="/ja/docs/CSS">CSS</a>、<a href="/ja/docs/SVG" title="/ja/docs/SVG">SVG</a>、<a href="/ja/docs/Social_API" title="/ja/docs/Social_API">Social API</a> (ともっとたくさん!)</td>
</tr>
</tbody>
</table>
<h2 id="The_business_case" name="The_business_case">ビジネスの場合</h2>
<p>ゲーム開発者としては、個人でも大規模ゲームスタジオであっても、次のゲームプロジェクトでウェブをターゲットにすることの意味あいを知りたいでしょう。ウェブがどう便利になるか見ていきましょう。</p>
<ol>
<li>
<div>ウェブのリーチは巨大です; つまりあらゆる場所です。HTML5 で製作されたゲームは、スマートフォン、タブレット、PC、スマート TV で動作します。</div>
</li>
<li>マーケティングと配信しやすさが改良されます。他の誰かのアプリストアで宣伝することに限定されません。その代わりに、他のメディア同様に ウェブ全体でゲームを広告・宣伝できて、ウェブに備わっているリンクやシェアのしやすさを利用して、新しい顧客にリーチできます。</li>
<li>大事な事も管理できます: 支払いの事です。ゲームが他人のエコシステム内にあるだけで、収益の 30% 以上を渡す必要はありません。その代わりに、希望する金額で、気に入った支払い処理サービスを使用できます。</li>
<li>もっと管理について、希望するいかなる時にでも、ゲームを更新できます。他の会社の誰だかわからない人が、あなたの重大なバグ修正のリリースが今日になるか明日になるか決めるのを、ハラハラしながら承認待ちする必要はありません。</li>
<li>アナリティクスを管理しましょう! あなたがどのアナリティクスを必要とするかについて他人が決めるのに頼るのでなく、自分自身 (や最も気に入ったサードパーティを選んで) で、売上やゲームのリーチを集めることができます。</li>
<li>顧客との関係 (CR) をより密接に、自分の方法で管理するようになります。アプリストアの限定された仕組みでフィルターリングされた顧客フィードバックはもうたくさんです。望む方法で、中間業者なしに、顧客を引きつけてください。</li>
<li>プレイヤーはゲームをいつでも、どこでもプレイできます。ウェブはユビキタスであるため、顧客は電話や、タブレットや、家のノート PC や、職場のデスクトップや、その他何によっても、ゲームの状況をチェック可能です。</li>
</ol>
<h2 id="Web_technologies_for_game_developers" name="Web_technologies_for_game_developers">ゲーム開発者用のウェブテクノロジー</h2>
<p>テクノ民のみなさん、ウェブがゲーム開発者のテーブルに運んでくる API を掘り下げましょう。こちらがウェブが実現できる味付けの全体リストです:</p>
<div class="twocolumns">
<dl>
<dt><a href="/ja/docs/Web/Guide/DOM/Using_full_screen_mode" title="/ja/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
<dd>このシンプルな API では、あなたのゲームが全画面を占めることができます、その結果プレイヤーがアクションに没頭できます。</dd>
<dt><a href="/ja/docs/Web/Guide/API/Gamepad" title="/ja/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
<dd>ユーザーがあなたのゲームで動作するゲームパッドや他のゲームコントローラを使用できるようにしたい場合、この API が必要になるでしょう。</dd>
<dt><a href="/ja/docs/HTML" title="/ja/docs/HTML">HTML</a> と <a href="/ja/docs/CSS" title="/ja/docs/CSS">CSS</a></dt>
<dd>この 2 つのテクノロジーは一緒になって、ゲームの UI を作成、スタイル、レイアウトする事ができます。HTML の一部分は {{HTMLElement("canvas")}} 要素であり、これは 2 次元グラフィックスの 1 つの方法になります。</dd>
<dt><a href="/ja/docs/HTML/Element/audio" title="/ja/docs/HTML/Element/audio">HTML オーディオ</a></dt>
<dd>{{HTMLElement("audio")}} 要素では、シンプルな SE と音楽を簡単に演奏できます。要望がもっと専門的な場合、リアルオーディオ処理のパワーのある <a href="/ja/docs/Web/API/Web_Audio_API" title="/ja/docs/Web_Audio_API">Web Audio API</a> を確認してください!</dd>
<dt><a href="/ja/docs/IndexedDB" title="/ja/docs/IndexedDB">IndexedDB</a></dt>
<dd>ユーザーデータを、ユーザー自身のコンピューターや端末に保持するパワフルなデータストレージ API です。ゲームの状態とその他の情報をローカルに保存する良い方法で、必要な時に毎回ダウンロードする必要がなくなります。またユーザーがウェブに接続していない時 (何時間もずっと飛行機に載っているような時) であっても、ゲームを遊べるようにするのにも役立ちます。</dd>
<dt><a href="/ja/docs/JavaScript" title="/ja/docs/JavaScript">JavaScript</a></dt>
<dd>JavaScript (ウェブで使われるプログラミング言語) は、モダンなブラウザーでは劇的に高速で、ずっと高速化されてきています。あなたのゲームのコードを記述するのにリンク先を使うか、既存のゲームを簡単に移植するには <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> や <a href="http://asmjs.org/spec/latest/">Asm.js</a> などのテクノロジーの使用を見てみます。</dd>
<dt><a href="/ja/docs/API/Pointer_Lock_API" title="/ja/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
<dd>ポインターロック API では、ゲームのインターフェイス内でマウスやその他のポインティングデバイスをロックし、その結果として絶対カーソル位置の代わりに、ユーザーが行っている事についての座標の差分を受け取ることができて、ユーザー入力がたまたま別のどこかに送られてしまい、その結果重要なアクションを見失うのを防ぎます。</dd>
<dt><a href="/ja/docs/SVG" title="/ja/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
<dd>ユーザーのディスプレイサイズを気にすることなく、スムーズに拡大縮小するベクター画像を作ることができます。</dd>
<dt><a href="/ja/docs/JavaScript/Typed_arrays" title="/ja/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
<dd>JavaScript の型付き配列は JavaScript から生のバイナリーデータに対するアクセスを提供します。GL テクスチャ、ゲームデータまたはその他のものを、ネイティブな JavaScript形式でなくても操作することができます。</dd>
<dt><a href="/ja/docs/Web/API/Web_Audio_API" title="/ja/docs/Web_Audio_API">Web Audio API</a></dt>
<dd>JavaScript コードからオーディオの再生、合成、操作の制御するこの API を使うと、素晴らしい音声効果を作成したり、リアルタイムに音楽の再生、操作をすることができます。</dd>
<dt><a href="/ja/docs/WebGL" title="/ja/docs/WebGL">WebGL</a></dt>
<dd>ウェブコンテンツからハイパフォーマンスで、ハードウェア・アクセラレーションを行う 3D（または 2D）グラフィックスを作成することができます。これはウェブでサポートされている <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 の実装です。</dd>
<dt><a href="/ja/docs/Web/API/WebRTC_API" title="/ja/docs/WebRTC">WebRTC</a></dt>
<dd>WebRTC (Real-Time Communications) API を使用すると、音声会議や二者間でほかのアプリケーションデータのやり取りなど、オーディオとビデオを制御することができます。モンスター攻撃中にプレイヤー同士で会話をさせたいですか？これはそんなあなたのための API です。</dd>
<dt><a href="/ja/docs/WebSockets" title="/ja/docs/WebSockets">WebSockets</a></dt>
<dd>WebSocket API を使用すると、あなたのアプリやサイトをサーバーと接続し、リアルタイムにデータのやり取りを行うことができます。マルチプレイヤーゲームアクションやチャットサービスなどに最適です。</dd>
<dt><a href="/ja/docs/DOM/Using_web_workers" title="/ja/docs/DOM/Using_web_workers">Web Workers</a></dt>
<dd>Worker を使用すると、モダンでマルチコアなプロセッサを利用し、独自の JavaScript コードを実行して、バックグラウンドのスレッドを生成することができます。</dd>
<dt><a href="/ja/docs/DOM/XMLHttpRequest" title="/ja/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> と <a href="/ja/docs/Web/API/File" title="/ja/docs/DOM/File_API">File API</a></dt>
<dd>XMLHttpRequest と File API を組み合わせることで、様々な種類のデータを送受信が可能になります ("XML"という言葉にとらわれないでください！)。これは、新しいゲームレベルやアートワークのダウンロードから、非リアルタイムのゲームステータス情報のやり取りに至るまで、あらゆることをするためのすばらしい方法です。</dd>
</dl>
</div>
|
