diff --git a/files/zh-tw/games/introduction/index.md b/files/zh-tw/games/introduction/index.md index 3fe610046fd592..3314f9a1c4d054 100644 --- a/files/zh-tw/games/introduction/index.md +++ b/files/zh-tw/games/introduction/index.md @@ -1,70 +1,114 @@ --- title: Web 遊戲開發介紹 slug: Games/Introduction +l10n: + sourceCommit: e72890bafe775a38620def9a74beda8cf9c47411 --- -{{GamesSidebar}}現有 Web 環境已成為多元的平台，不只可建構令人驚艷的高品質遊戲，也是發佈這些遊戲的重要媒介。可供撰寫的遊種類...... +{{GamesSidebar}} -現有的 Web 技術再搭配最新版瀏覽器，就能打造出絕佳的 Web 遊戲，而且我們講的可不是用 Flash® 寫的簡單卡牌遊戲，或是多人的社交遊戲而已。卻是可打趴一堆平面遊戲的 3D 動作射擊或角色扮演遊戲。多虧 [JavaScript](/zh-TW/docs/Web/JavaScript) 的即時 (Just-in-time，JIT) 技術與新 API 雙雙大幅提升其效能，你所撰寫的遊戲已可於瀏覽器 (或支援 [HTML5](/zh-TW/docs/Glossary/HTML5) 的裝置) 中執行，卻又不致犧牲任何效能。 +現代 Web 已迅速成為不僅能創造令人驚嘆的高品質遊戲，也是發佈這些遊戲的重要媒介。 -## HTML5 遊戲平台 +透過現代 Web 技術和最新的瀏覽器，創造媲美桌機和原生作業系統的遊戲已成為可能。這不僅僅是簡單的卡片遊戲或社交多玩家遊戲，而是 3D 動作射擊遊戲、角色扮演遊戲（RPG）等更多類型。隨著 [JavaScript](/zh-TW/docs/Web/JavaScript) 即時編譯技術和新 API 的性能大幅提升，你可以在瀏覽器或 [HTML5](/zh-TW/docs/Glossary/HTML5) 支援的設備上打造無需妥協的遊戲體驗。 -如同 Mozilla 常說的「Web 即是平台」，你可將 Web 想像為較佳的遊戲平台。接著就來看看 Web 平台的核心： +## HTML 遊戲平台 -| 功能 | 技術 | -| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **音效** | [Web Audio API](/zh-TW/docs/Web/API/Web_Audio_API) | -| **圖形** | [WebGL](/zh-TW/docs/Web/API/WebGL_API) ([OpenGL ES](https://www.khronos.org/opengles/) 2.0) | -| **輸入** | [觸控事件](/zh-TW/docs/Web/API/Touch_events)、[Gamepad API](/zh-TW/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)、裝置感測器、[WebRTC](/zh-TW/docs/Web/API/WebRTC_API)、[Full Screen API](/zh-TW/docs/Web/API/Fullscreen_API)、[Pointer Lock API](/zh-TW/docs/Web/API/Pointer_Lock_API) | -| **程式語言** | [JavaScript](/zh-TW/docs/Web/JavaScript)（或 C/C++ 可透過[Emscripten](https://github.com/kripken/emscripten/wiki) 編譯為 JavaScript） | -| **網路連線** | [WebRTC](/zh-TW/docs/Web/API/WebRTC_API) 及/或 [WebSockets](/zh-TW/docs/Web/API/WebSockets_API) | -| **儲存功能** | [IndexedDB](/zh-TW/docs/Web/API/IndexedDB_API) 或雲端 | -| **Web** | [HTML](/zh-TW/docs/Web/HTML)、[CSS](/zh-TW/docs/Web/CSS)、[SVG](/zh-TW/docs/Web/SVG)（還有更多！） | +你可以真正將 Web 視為遊戲的理想目標平台。正如我們所說的：「Web 就是平台。」以下是 Web 平台的核心技術： -## 商業案例 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能技術
音效Web 音頻 API
圖形 + WebGL（OpenGL ES 2.0） +
輸入 + 觸控事件、Gamepad API、裝置感測器、WebRTC、全螢幕 API、指標鎖定 API +
語言 + JavaScript 或使用 Emscripten 將 C/C++ 編譯為 JavaScript +
網路 + WebRTC 和／或 WebSocket +
儲存 + IndexedDB 或「雲端」 +
Web + HTML、CSS、SVG（以及更多！） +
-不論你是獨立或大型遊戲工作室的開發者，你都應該將 Web 作為自己下一個遊戲專案的系統。先來看看 Web 能對你提供多少優勢： +## 商業理由 -1. Web 無遠弗屆，而用 HTML5 撰寫的遊戲可自由在桌機、平板電腦、智慧電視、智慧型手機上執行。 -2. 可獲得更好的行銷與露出機會。你不再限制於某個 App 商店才能推廣自己的 App；反而能透過 Web 上的所有媒體推銷遊戲，並利用 Web 的串連與分享效率接觸到新客戶。 -3. 你能控制「付款」這個重要的作業。之前只要你的遊戲放在某個生態系統中，就必須支付超過 30% 的收益給該系統。但現在你可選擇自己喜歡的 App 訂價與付款服務。 -4. 同樣的，你也能自行控制 App 的更新頻率，而不再需要枯等別人審核你的重要修正檔，還不知道今天還明天才能上架。 -5. 控制你的分析方式！你能蒐集自己所需的資料，或可選擇你所愛用的第三方，進而獲得你的銷售資訊以及所觸及的消費族群；不需再讓別人幫你決定分析方法。 -6. 你能進一步管理自己與消費者之間的關係，不再受限於 App 商城的機制而取得篩選過的反饋意見。也不需再經過中間人，就能以自己的方式和消費者直接交流。 -7. 玩家隨時隨地都能暢玩你的遊戲。因為 Web 無所不在，消費者能在自己的手機、平板電腦、家裡桌機、辦公室電腦，或任何地方觀看遊戲進度。 +作為遊戲開發者，不論是個人還是大型遊戲工作室，你可能想知道為何應該將 Web 作為下一個遊戲項目的目標平台。以下是 Web 能為你帶來的優勢： -## 遊戲開發者所應知道的 Web 技術 +1. Web 的覆蓋範圍極大，幾乎無處不在。使用 HTML 製作的遊戲可在智慧型手機、平板電腦、PC 和智慧電視上運行。 +2. 行銷和曝光度提升。你不再需要將應用程式局限於某個應用程式商店，而是可以利用 Web 的固有連結性和可分享性，在網路和其他媒體上推廣你的遊戲。 +3. 在付款方面，你擁有更多控制權。你不需要因為遊戲在他人的生態系統中而放棄 30% 的收入，而是可以自由定價並選擇任何支付處理服務。 +4. 隨時更新遊戲，而不必等待其他公司內部人員批准你的更新是否能及時發佈。 +5. 管理自己的分析數據，而非依賴於第三方。你可以選擇最適合的工具來收集銷售數據和遊戲覆蓋範圍。 +6. 直接與用戶建立更緊密的關係，不需透過應用商店的有限機制。以你喜歡的方式與用戶互動，無需中間人。 +7. 玩家可以隨時隨地玩遊戲。由於 Web 的普遍性，你的用戶可以在手機、平板電腦、筆記型電腦或桌機上進行遊戲。 -我們要為開發者提供 API 的相關資訊，了解 Web 帶來的絕妙開發功能。 -以下只列舉出其中數項： +## 遊戲開發者應該知道的 Web 技術 -- [Full Screen API](/zh-TW/docs/Web/API/Fullscreen_API) - - : 此簡易 API 可讓遊戲全螢幕運作，提供玩家絕佳的動作體驗。 +給技術愛好者，讓我們深入了解 Web 提供的 API，這些 API 專為遊戲開發者設計。以下是詳細的清單，展示 Web 技術可以做到什麼： + +- [Fetch API](/zh-TW/docs/Web/API/Fetch_API) + - : 用來從 Web 伺服器發送和接收各種數據，例如下載新遊戲關卡和美術素材，或傳輸非即時的遊戲狀態資訊。 +- [全螢幕 API](/zh-TW/docs/Web/API/Fullscreen_API) + - : 這個簡單的 API 讓你的遊戲可以全螢幕顯示，從而讓玩家更加沉浸於遊戲體驗中。 - [Gamepad API](/zh-TW/docs/Web/API/Gamepad_API/Using_the_Gamepad_API) - - : 如果要讓遊戲搭配搖桿或其他類型的控制器，就用這個 API。 -- [HTML](/zh-TW/docs/Web/HTML) 與 [CSS](/zh-TW/docs/Web/CSS) - - : 這兩種技術可用以建立遊戲的使用者介面，並設定其風格與配置方式。部分的 HTML 即為 {{HTMLElement("canvas")}} 元素，可直接建構 2D 圖形。 + - : 如果你希望玩家能使用遊戲把手或其他遊戲設備進行遊戲，這是必要的 API。 +- [HTML](/zh-TW/docs/Web/HTML) 和 [CSS](/zh-TW/docs/Web/CSS) + - : 這兩項技術可以幫助你構建、設計和佈局遊戲的用戶界面。其中 HTML 的 {{HTMLElement("canvas")}} 元素是進行 2D 圖形處理的一種方法。 - [HTML audio](/zh-TW/docs/Web/HTML/Element/audio) - - : {{HTMLElement("audio")}} 元素可輕鬆播放簡易音效與音樂。如果需要進一步效果，可參閱 [Web Audio API](/zh-TW/docs/Web/API/Web_Audio_API) 達到真正的音訊處理效能！ + - : {{HTMLElement("audio")}} 元素可讓你輕鬆播放簡單的音效和音樂。如果有更高的需求，請參考 [Web 音頻 API](/zh-TW/docs/Web/API/Web_Audio_API) 以獲取更強大的音頻處理能力！ - [IndexedDB](/zh-TW/docs/Web/API/IndexedDB_API) - - : 此強大的資料儲存 API，可將使用者的資料保存於電腦或其他裝置之上，亦可於本端儲存遊戲資料與其他資訊；如此可避免每次都需再下載資料一次。即使目前處於無網路連線的狀態 (例如飛機上長達數個小時的旅程...)，也同樣可以玩遊戲 。 + - : 一個強大的數據存儲 API，可以在用戶的設備上存儲遊戲數據（例如遊戲狀態等）從而避免每次都需要下載資料。這也能幫助你的遊戲在用戶無法連接網路時（例如長時間飛行時）仍能正常運行。 - [JavaScript](/zh-TW/docs/Web/JavaScript) - - : JavaScript 就是 Web 上使用的程式語言，可於現有瀏覽器上達到絕佳速度，且目前還在不斷的提升。你可寫出遊戲的程式碼，或可透過如 [Emscripten](https://github.com/kripken/emscripten/wiki) 或 [Asm.js](http://asmjs.org/spec/latest/) 的技術，輕鬆移植現有的遊戲。 + - : JavaScript 是 Web 上的程式語言，現代瀏覽器中其速度非常快，並且還在不斷提升。你可以利用其強大功能來編寫遊戲代碼，或者使用 [Emscripten](https://github.com/emscripten-core/emscripten/wiki) 或 [Asm.js](http://asmjs.org/spec/latest/) 技術輕鬆移植現有遊戲。 - [Pointer Lock API](/zh-TW/docs/Web/API/Pointer_Lock_API) - - : Pointer Lock API 可鎖定遊戲介面中的滑鼠或其他指向裝置。取代之前的絕對游標定位，現可接收座標差而得到更精確的使用者動作，並避免使用者突然在他處輸入，卻遺漏了重要動作。 -- [SVG](/zh-TW/docs/Web/SVG) (Scalable Vector Graphics，[可縮放向量圖形](/zh-TW/docs/Web/SVG)) - - : 可建構向量圖形，根據裝置畫面的解析度而順暢調整。 -- [Typed Array（具型別陣列）](/zh-TW/docs/Web/JavaScript/Guide/Typed_arrays) - - : JavaScript 的具型別陣列，可讓你在 JavaScript 中存取原始的二進位資料。如此可讓你設定 GL 紋理 (Texture)、遊戲資料，或其他物件。甚至非原生 JavaScript 格式的亦可處理。 -- [Web Audio API](/zh-TW/docs/Web/API/Web_Audio_API) - - : 此 API 可透過 JavaScript 程式碼控制音訊的回播、合成、操作等作業，讓你建構絕妙音效並即時播放音樂。 + - : 該 API 讓你可以鎖定鼠標或其他指標設備，使其在遊戲界面內運作，從而提供精確的操作，並防止用戶意外將輸入導向其他地方。 +- [SVG](/zh-TW/docs/Web/SVG)（可縮放向量圖形） + - : 讓你構建的向量圖形可以根據顯示器的大小或解析度平滑縮放。 +- [型別陣列](/zh-TW/docs/Web/JavaScript/Guide/Typed_arrays) + - : JavaScript 型別陣列讓你能在 JavaScript 中直接處理二進制數據，這適用於操作 GL 紋理、遊戲數據或其他非原生 JavaScript 格式的數據。 +- [Web 音頻 API](/zh-TW/docs/Web/API/Web_Audio_API) + - : 該 API 讓你可以通過 JavaScript 控制音頻播放、合成及處理，實現即時音效及音樂的播放與操作。 - [WebGL](/zh-TW/docs/Web/API/WebGL_API) - - : 可於 Web 內容中建立高效能、硬體加速的 3D (與 2D) 圖像。此為 Web 所支援的 [OpenGL ES](https://www.khronos.org/opengles/) 2.0 實作。 + - : 讓你可以從 Web 內容創建高效能、硬體加速的 3D（及 2D）圖形，這是一種 [OpenGL ES](https://www.khronos.org/opengles/) 2.0 的 Web 支持實現。 - [WebRTC](/zh-TW/docs/Web/API/WebRTC_API) - - : WebRTC (Real-Time Communications) API 可控制音訊與視訊資料 (包含視訊會議)，並能在兩名使用者之間來回傳輸其他應用程式的資料。想讓玩家能一邊爆怪物的頭還一邊交談？就用這個 API 吧。 -- [WebSockets](/zh-TW/docs/Web/API/WebSockets_API) - - : WebSocket API 可讓你的 App 或網站連上伺服器，進而即時來回傳輸資料。適用於多人遊戲、聊天服務等。 -- [Web Workers](/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers) - - : Workers 可讓你分配背景執行緒，執行本身所屬的 JavaScript 程式碼，藉以利用新的多核心處理器。 -- [XMLHttpRequest](/zh-TW/docs/Web/API/XMLHttpRequest) and [File API](/zh-TW/docs/Web/API/File_and_Directory_Entries_API) - - : 整合的 XMLHttpRequest 與 File API，可你從 Web 伺服器接收或傳送所需的任何資料 (別因為「XML」搞混了)。如此能順利下載新的遊戲關卡與圖片，藉以來回傳輸非即時的遊戲狀態資訊。 + - : WebRTC（即時通訊）API 可控制音頻與影片數據，包括視訊會議及應用數據在兩用戶之間的傳輸。如果你希望玩家在摧毀怪物的同時能彼此交談，這就是需要的 API。 +- [WebSocket](/zh-TW/docs/Web/API/WebSockets_API) + - : WebSocket API 讓你的應用或網站可以與伺服器建立實時數據傳輸連接，非常適合多人遊戲、聊天服務等。 +- [Web Worker](/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers) + - : Workers 讓你能夠啟動執行自己 JavaScript 程式碼的背景執行緒，以充分利用現代多核心處理器的性能。