blob: c140521931446f68fe23c644cb26cd85937f4847 (
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
116
117
118
119
120
121
122
|
---
title: Web 遊戲開發介紹
slug: Games/Introduction
tags:
- Firefox OS
- Games
- Guide
- Mobile
translation_of: Games/Introduction
---
<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/zh-TW/docs/Games")}}</div>
<div>現有 Web 環境已成為多元的平台，不只可建構令人驚艷的高品質遊戲，也是發佈這些遊戲的重要媒介。</div>
<div> </div>
<div>可供撰寫的遊種類......</div>
<p>現有的 Web 技術再搭配最新版瀏覽器，就能打造出絕佳的 Web 遊戲，而且我們講的可不是用 Flash® 寫的簡單卡牌遊戲，或是多人的社交遊戲而已。卻是可打趴一堆平面遊戲的 3D 動作射擊或角色扮演遊戲。多虧 <a href="/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> 的即時 (Just-in-time，JIT) 技術與新 API 雙雙大幅提升其效能，你所撰寫的遊戲已可於瀏覽器 (或支援 <a href="/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> 的裝置，即如 <a href="/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>) 中執行，卻又不致犧牲任何效能。</p>
<h2 id="HTML5_遊戲平台">HTML5 遊戲平台</h2>
<p>如同 Mozilla 常說的「Web 即是平台」，你可將 Web 想像為較佳的遊戲平台。接著就來看看 Web 平台的核心：</p>
<table style="height: 351px; width: 608px;" class="standard-table">
<thead>
<tr>
<th scope="col">功能</th>
<th scope="col">技術</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>音效</strong></td>
<td><a href="/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
</tr>
<tr>
<td><strong>圖形</strong></td>
<td><a href="/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
</tr>
<tr>
<td><strong>輸入</strong></td>
<td><a href="/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">觸控事件</a>、<a href="/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>、裝置感測器、<a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>、<a href="/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>、<a href="/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
</tr>
<tr>
<td><strong>程式語言</strong></td>
<td><a href="/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>（或 C/C++ 可透過<a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> 編譯為 JavaScript）</td>
</tr>
<tr>
<td><strong>網路連線</strong></td>
<td><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> 及/或 <a href="/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
</tr>
<tr>
<td><strong>儲存功能</strong></td>
<td><a href="/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> 或雲端</td>
</tr>
<tr>
<td><strong>Web</strong></td>
<td><a href="/docs/HTML" title="/en-US/docs/HTML">HTML</a>、<a href="/docs/CSS" title="/en-US/docs/CSS">CSS</a>、<a href="/docs/SVG" title="/en-US/docs/SVG">SVG</a>、<a href="/docs/Social_API" title="/en-US/docs/Social_API">Social API</a>（還有更多！）</td>
</tr>
</tbody>
</table>
<p> </p>
<h2 id="商業案例">商業案例</h2>
<p>不論你是獨立或大型遊戲工作室的開發者，你都應該將 Web 作為自己下一個遊戲專案的系統。先來看看 Web 能對你提供多少優勢：</p>
<ol>
<li>
<div>Web 無遠弗屆，而用 HTML5 撰寫的遊戲可自由在桌機、平板電腦、智慧電視、智慧型手機上執行。</div>
</li>
<li>可獲得更好的行銷與露出機會。你不再限制於某個 App 商店才能推廣自己的 App；反而能透過 Web 上的所有媒體推銷遊戲，並利用 Web 的串連與分享效率接觸到新客戶。</li>
<li>你能控制「付款」這個重要的作業。之前只要你的遊戲放在某個生態系統中，就必須支付超過 30% 的收益給該系統。但現在你可選擇自己喜歡的 App 訂價與付款服務。</li>
<li>同樣的，你也能自行控制 App 的更新頻率，而不再需要枯等別人審核你的重要修正檔，還不知道今天還明天才能上架。</li>
<li>控制你的分析方式！你能蒐集自己所需的資料，或可選擇你所愛用的第三方，進而獲得你的銷售資訊以及所觸及的消費族群；不需再讓別人幫你決定分析方法。</li>
<li>你能進一步管理自己與消費者之間的關係，不再受限於 App 商城的機制而取得篩選過的反饋意見。也不需再經過中間人，就能以自己的方式和消費者直接交流。</li>
<li>玩家隨時隨地都能暢玩你的遊戲。因為 Web 無所不在，消費者能在自己的手機、平板電腦、家裡桌機、辦公室電腦，或任何地方觀看遊戲進度。</li>
</ol>
<h2 id="遊戲開發者所應知道的_Web_技術">遊戲開發者所應知道的 Web 技術</h2>
<p>我們要為開發者提供 API 的相關資訊，了解 Web 帶來的絕妙開發功能。<br>
以下只列舉出其中數項：</p>
<div class="twocolumns">
<dl>
<dt><a href="/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
<dd>此簡易 API 可讓遊戲全螢幕運作，提供玩家絕佳的動作體驗。</dd>
<dt><a href="/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
<dd>如果要讓遊戲搭配搖桿或其他類型的控制器，就用這個 API。</dd>
<dt><a href="/docs/HTML" title="/en-US/docs/HTML">HTML</a> 與 <a href="/docs/CSS" title="/en-US/docs/CSS">CSS</a></dt>
<dd>這兩種技術可用以建立遊戲的使用者介面，並設定其風格與配置方式。部分的 HTML 即為 {{HTMLElement("canvas")}} 元素，可直接建構 2D 圖形。</dd>
<dt><a href="/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
<dd>{{HTMLElement("audio")}} 元素可輕鬆播放簡易音效與音樂。如果需要進一步效果，可參閱 <a href="/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> 達到真正的音訊處理效能！</dd>
<dt><a href="/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
<dd>此強大的資料儲存 API，可將使用者的資料保存於電腦或其他裝置之上，亦可於本端儲存遊戲資料與其他資訊；如此可避免每次都需再下載資料一次。即使目前處於無網路連線的狀態 (例如飛機上長達數個小時的旅程...)，也同樣可以玩遊戲 。</dd>
<dt><a href="/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
<dd>JavaScript 就是 Web 上使用的程式語言，可於現有瀏覽器上達到絕佳速度，且目前還在不斷的提升。你可寫出遊戲的程式碼，或可透過如 <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> 或 <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a> 的技術，輕鬆移植現有的遊戲。</dd>
<dt><a href="/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
<dd>Pointer Lock API 可鎖定遊戲介面中的滑鼠或其他指向裝置。取代之前的絕對游標定位，現可接收座標差而得到更精確的使用者動作，並避免使用者突然在他處輸入，卻遺漏了重要動作。</dd>
<dt><a href="/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics，<a href="/docs/SVG">可縮放向量圖形</a>)</dt>
<dd>可建構向量圖形，根據裝置畫面的解析度而順暢調整。</dd>
<dt><a href="/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Array (具型別陣列)</a></dt>
<dd>JavaScript 的具型別陣列，可讓你在 JavaScript 中存取原始的二進位資料。如此可讓你設定 GL 紋理 (Texture)、遊戲資料，或其他物件。甚至非原生 JavaScript 格式的亦可處理。</dd>
<dt><a href="/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
<dd>此 API 可透過 JavaScript 程式碼控制音訊的回播、合成、操作等作業，讓你建構絕妙音效並即時播放音樂。</dd>
<dt><a href="/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
<dd>可於 Web 內容中建立高效能、硬體加速的 3D (與2D) 圖像。此為 Web 所支援的 <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 實作。</dd>
<dt><a href="/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt>
<dd>WebRTC (Real-Time Communications) API 可控制音訊與視訊資料 (包含視訊會議)，並能在兩名使用者之間來回傳輸其他應用程式的資料。想讓玩家能一邊爆怪物的頭還一邊交談？就用這個 API 吧。</dd>
<dt><a href="/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
<dd>WebSocket API 可讓你的 App 或網站連上伺服器，進而即時來回傳輸資料。適用於多人遊戲、聊天服務等。</dd>
<dt><a href="/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
<dd>Workers 可讓你分配背景執行緒，執行本身所屬的 JavaScript 程式碼，藉以利用新的多核心處理器。</dd>
<dt><a href="/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> and <a href="/docs/Web/API/File_and_Directory_Entries_API" title="/en-US/docs/DOM/File_API">File API</a></dt>
<dd>整合的 XMLHttpRequest 與 File API，可你從 Web 伺服器接收或傳送所需的任何資料 (別因為「XML」搞混了)。如此能順利下載新的遊戲關卡與圖片，藉以來回傳輸非即時的遊戲狀態資訊。</dd>
</dl>
</div>
<p> </p>
|
