如果是想學HTML5遊戲開發，技能樹怎麼點？

01-07

Js -&> canvas/webGL -&> fireball-x, 以下是詳細解釋:

假定題主已經有一定的遊戲開發基礎, 如果沒有的話, 我建議題主做一些遊戲開發的基礎學習. 那麼要最快時間點出 HTML5 遊戲開發的技能樹, 按照上述路線即可.

Javascript: 這個不用說了, 這是 H5 開發的入門語言, 題主完全不用在意目前 H5 領域的其他語言變種, 比如 CoffeeScript, TypeScript. 這些變種只會給你的學習帶來混亂, 我們只需要專註掌握 Javascript 即可.

canvas/webGL: 要做 H5 遊戲自然少不了在上面畫東西, 那麼根據自己的情況選擇一種繪製方案. 如果是初學者, 我推薦 Canvas , H5 的 canvas 2d context 已經包含了比較完備的 2d graphics 繪製 API, 這可以讓我們畫東西更加快捷. 而如果題主勵志要做高效的遊戲, 3D 繪製或者更高階的繪製技巧, 那麼掌握 webGL 是必不可少的. 如果你沒有 openGL 方面的知識, 也不用害怕, 因為 webGL 正好是一次讓你補習的機會, 他的 API 設計和 openGL ES 非常類似, 其內在的知識點也都是相同的, 而且上手更方便簡單, 在這樣的環境下, 比起過去學習 openGL 的開發者來說要迅速很多, 也容易獲得成就感, 所以我是非常推薦在 canvas 學習的基礎上在進一步學習 webGL 的.

fireball-x: http://fireball-x.com 是一個類似 Unity3D 的遊戲引擎, 他的初衷便是讓前端開發人員可以在已有的基礎上, 方便地開發 H5 遊戲. 目前引擎處於非常早期的內測階段, 但是已經是一個功能相對完備的開發工具了. 對於以學習為目的的 H5 遊戲開發人員, 我非常推薦這個引擎工具. 他不僅提供給你從腳本編寫到場景編輯的無縫環境, 而且引入了現在主流遊戲開發中的 Entity-Component 的設計體系, 和同類引擎相比, fireball-x 提供了非常好的腳本編寫和調試環境, 並且省去了初學者上手設置頁面和測試頁面等諸多惱人且費時的事情, 所以是入門學習 H5 遊戲的好幫手!

也歡迎各位加入我們的 fireball-x 開發QQ交流群: 246239860 (搜索不到群可以暫時去官網上面的加群按鈕加入, 正在修復中...), 和我們一起設計定製 Fireball

三個階段後, 我們可以再來看看其他一些技能樹:

css: 對於遊戲開發不是必要的, 如果你不做頁面排版, 單純只是做 h5 遊戲開發, 那麼掌握 css 對你的幫助更多的是思路上的開闊. css 作為一門較為成熟的排版 DSL, 他歸納了許多優秀的思想, 這些設計思想可以幫助你應用在其他領域, 包括你自己設計的遊戲 UI 系統.

Dom Event: 你需要掌握一些簡單的 Dom Event, 用他們來做 Input 響應. 那麼更深入的 Dom Event 學習是否有必要呢? 答案是肯定的, 了解 bubble phase, capture phase 和一些常用消息不會消耗你多少時間, 但是他卻能夠在你整個 h5 開發過程中解釋非常多的疑問, 所以花點時間去學習, 也就一天就搞定的事情.

Web Audio: 簡單的說, 目前的主流瀏覽器對這個東西的支持都是渣, 往遠處看 Web Audio 確實很好的歸納了聲效編程的一些基礎知識點. 所以有多餘時間就好好的學習一下.

題主到了這裡, 技能樹的基礎點大概就點的差不多了, 自己根據需要繼續就是了. html5 遊戲開發很有趣, 主要是快捷, 寫點代碼開個 devtools debug 非常的輕鬆愉快, 題主選了個好方向.

兄弟，其實沒那麼麻煩，我現在和一個同事業餘時間在做h5遊戲，我們用的是cocos2dx-js，很簡單，你只需要js和了解cocos2dx框架就行！

加一個技能樹路線 c++ -＞ emscripten webgl