關閉 

內文試閱

HTML5跨平台遊戲設計不設限:從入門到超人氣遊戲的修鍊實戰

    作者:白乃遠吳苑瑜曾奕霖
  • 出版社:碁峰
  • 出版日期:2015/05/04
  • 商品語言:繁體/中文
  • ISBN:9789863475613
  • 定價:450
    優惠價:93折,419

    ※無庫存,調貨約需5-7個工作日

    結帳去

      

    內容簡介  |   作者介紹  |   同類推薦   |  購物說明

    內容簡介

    跨界整合,打造內外兼具的跨平台遊戲新經典!
    零成本,讓自己的遊戲行銷全世界!

    HTML5是包含HTML5、CSS3和JavaScript的網頁技術組合,優秀的多媒體元素、跨平台能力與標準化特性,改變了行動世代的使用者體驗。根據Digital Buzz Blog統計,使用者在iOS和Android上所花的時間中,有32%是拿來玩遊戲。如果使用HTML5進行手機遊戲開發,就能一次創造出跨平台的遊戲,免除學習多語言開發的困擾。例如Google Chrome Web Store可下載到的<<憤怒鳥>>與<<炮塔防禦>>,就是從iOS平台移植到HTML5上的經典案例。

    本書由淺入深,從HTML5、CSS3和JavaScript三大基礎架構進入遊戲開發的世界,除了基本語法介紹,每個學習主題都設計情境與遊戲範例,加速了解開發精髓。在進階章節中,先以遊戲結合個人履歷互動概念作為創新應用的示範,再引入其它開源遊戲引擎,簡化遊戲製作,開發熱門遊戲,最後結合FB API應用,以及發佈技巧分享遊戲。

    綜合本書特點如下:
    ‧從HTML5基礎架構切入,適合初接觸程式的初學者。
    ‧程式語法使用顏色區隔,方便閱讀與學習。
    ‧每個學習主題涵蓋多種情境與範例,實練實戰。
    ‧獨家提供遊戲式互動個人履歷教學製作,發想創意。
    ‧學會應用HTML5遊戲引擎輕鬆開發熱門遊戲,快速上手。
    ‧遊戲免費發佈技巧大公開,學會零成本讓遊戲行銷全世界。

    書附光碟:範例素材/範例完成檔/軟體工具

    目錄:
    01 遊戲設計與HTML5
    HTML5受到世人注視的契機,緣起於已故蘋果公司的CEO賈伯斯所發起的公開聲明,表示不讓蘋果公司所生產的行動設備支援「Flash」技術,並以「HTML5」為主要發展方向。這個被蘋果公司大力支持的HTML5,其實是一組包含HTML5、CSS3 和JavaScript 的網頁技術組合,其優秀的多媒體元素及跨平台能力,改變了行動世代的使用者體驗。
    在本章中將學到的重點包括:
    › HTML5基礎認識
    › HTML5開發環境建立
    › HTML5程式測試與除錯技巧
    範例:HelloWorld

    02 HTML5基礎
    HTML5比起前幾版而言具有大幅度的變化。首先新增多種「結構化元素」,有助於頁面的排版以及搜尋引擎的辨識;其次是豐富的「內容標記方法」,新增畫布與各種文字層級元素,讓圖文編輯更加精緻;第三是強大的「多媒體應用」,讓瀏覽器不必加載外掛就可以處理影音;另外也提供全新的web表單協助處理資訊流的部份。HTML5語言從靜態到動態所需要的元素通通都考慮到了,也難怪其魅力能夠襲捲全球。
    在本章中將學到的重點包括:
    › 認識整齊的結構化元素
    › 活用豐富的內容標記方法
    › 應用方便的影音多媒體標籤
    › 學習Web表單機制

    03 CSS3應用
    CSS是負責網頁外觀的藝術總監,舉凡網頁裡的文字、圖片、表格、表單⋯⋯等元件,通通得聽它的號令進行排版。雖然HTML裡也有關於外觀設計的標籤,但遠遠不及CSS可以做到的精準定位、多層次的顏色、框線變化,甚至還能更改滑鼠游標的形狀,以及做出類似動畫般夢幻的過場效果,帶給我們更繽紛的線上體驗。
    在本章中將學到的重點包括:
    › 認識CSS基礎語法
    › 使用CSS設計文字與圖片
    › 使用CSS美化表格與表單

    04 CSS3網頁小遊戲
    以往的網頁互動遊戲大多使用Flash呈現,瀏覽器必須安裝Flash player才能執行。但HTML5推出後,只要使用CSS3中的動畫屬性,就可以達到控制動畫與玩家互動的效果,讓瀏覽器不再需要安裝額外插件就能開始玩遊戲,這也是HTML5 帶來最重大的變革。
    在本章中將學到的重點包括:
    ›› CSS3的動畫屬性animation
    ›› CSS3的漸變屬性Transition
    ›› 實作「打地鼠」網頁遊戲(包括場景/製作地鼠/得分動畫/關卡與結束)

    05 常用的觸發事件與元件
    在開發遊戲的歷程中,往往有許多需要和玩家互動的元件需要處理,但我們知道HTML是專門用來處理遊戲結構,而CSS則是負責遊戲美術,若想讓遊戲具備與玩家互動的效果,就必須導入HTML5家族的另一個成員-JavaScript語言。在這個章節中會和大家介紹在開發HTML5遊戲中常用的觸發事件和元件,並透過JavaScrip來實作。
    在本章中將學到的重點包括:
    › 滑鼠點擊事件偵聽
    › 鍵盤按鍵事件偵聽
    › 網頁錨點跳轉技巧
    › 瀏覽器資訊偵測
    › DOM控制技巧
    › 螢幕解析度偵測
    › 簡易E-Mail寄送系統
    › 日期物件Date與計時器實作

    06 多媒體播放
    畫面是在HTML5才被定義的新標籤,具備強大的圖形處理能力。標籤在結合JavaScript語法的狀況下,可以進行繪製圖形、合成圖像等等操作,也可以用來實現動畫影片之控制,讓瀏覽器在不需安裝其它插件的情況下處理圖像。標籤之功能完整性,豐富到足以獨立出成一本書,本書僅對比較常用的功能進行介紹。在本章節您將學到的重點包括:
    在本章中將學到的重點包括:
    › Canvas圖形繪製與變形控制
    › Canvas動畫應用
    › Canvas多媒體影音播放
    › Canvas動畫劇場實作
    範例:動畫小劇場

    07 WEB應用
    在連線遊戲中,必須透過伺服器與客戶端不斷地交換遊戲資訊,才能更新與同步每個玩家的遊戲狀態,如此便可以設計出具有連線功能的遊戲內容,例如排行榜、好友資訊⋯等。在HTML5遊戲開發中,我們習慣將遊戲資訊以JSON格式包裝後,透過AJAX技術進行傳輸。
    AJAX是資料傳遞的一種技術,可以僅針對網頁某些部份的資料更新,節省不斷重載整個網頁所需耗費的資源;JSON則是一個純文字格式,用於儲存和傳送簡單結構資料。
    在本章中將學到的重點包括:
    › AJAX傳輸方法的操作步驟
    › 使用AJAX傳輸XML資料
    › JSON格式的資料結構
    › JSON格式的編譯與解譯
    範例:web伺服器實際演練

    08 網頁資料儲存
    在HTTP協定中,由於client端與server端間並沒有互相保存資料的機制,因此需要暫時儲存網頁中的資料時,必須依靠Cookie和Session完成。網頁資料儲存的機制就像是飲料店點餐,當結帳買單後店家和顧客會持有一組號碼,透過這組號碼的連結就可以知道顧客所點的飲料內容,省去重複確認餐點的麻煩。
    在HTML5中提供了新的儲存機制WebStorage,帶來更大的儲存空間、更少的頻寬浪費。在這個章節中將會帶各位釐清這些儲存方式的差異。
    在本章中將學到的重點包括:
    › 認識Cookie機制的運作
    › 認識Session機制的運作
    › 認識HTML5的Web Storage機制
    範例:表單切換

    09 學習使用jQuery
    jQuery是基於JavaScript語法所開發的輕量級物件導向函式庫。jQuery可以凌駕於HTML與CSS之上,以批次方式直接控制HTML、CSS與JavaScript,能有效精簡程式碼的繁雜,並能跨瀏覽器進行DOM操作、事件處理、設計頁面元素動態效果、AJAX互動等。
    在本章中將學到的重點包括:
    › jQuery基礎語法
    › jQuery控制HTML與CSS
    › jQuery Plugin線上資源分享
    › jQuery Plugin引用實戰
    範例:拉霸遊戲

    10 趣味互動式個人履歷網站
    制式的文字履歷、單純的個人履歷網站,要如何在這個多媒體世代讓你的履歷脫穎而出?只要你學過HTML5遊戲開發,善用HTML5的超強互動功能加入一點巧思,就能設計出「趣味互動式個人履歷網站」。本章結合遊戲元素,透過動畫、捲軸控制和按鈕連結,讓面試官能夠「邊玩邊看」你的個人履歷,保證讓人耳目一新、印象深刻。
    在本章中將學到的重點包括:
    › 大型遊戲企劃流程
    › CSS動畫呈現技巧
    › jQuery視差滾動技巧
    › jQuery動畫觸發技巧

    11 認識HTML5遊戲引擎
    充足的遊戲實在不是一件簡單的事。為了縮短遊戲開發的複雜性,世面上推出多個開源且免費的HTML5遊戲引擎,這些遊戲引擎內建多種遊戲經常使用到的函式,例如碰撞、鍵盤控制、物理現象模擬等,大幅縮短了遊戲開發的時程。因此接下來要帶大家快速瀏覽幾個目前火紅的HTML5遊戲引擎,看看遊戲引擎所扮演的角色。
    在本章中將學到的重點包括:
    › GameQuery引用與API函式速覽
    › Quintus引用與範例程式說明
    › melonjs引用與範例程式說明
    › LimeJS安裝與範例程式說明
    › Cocos2D引用與範例程式說明

    12 遊戲製作—2D遊戲地圖
    「 Tiled Map Editor」是一款免費的2D地圖編輯器,透過視覺化介面以「拼塊」的方式組合遊戲地圖環境,設計完的地圖資訊將會被儲存為純文字格式,副檔名為tmx。目前多數遊戲引擎皆有內建tmx的解析函式,例如前一章所介紹的Quintus、melonjs等,可以將地圖資訊引用到JavaScript中建立遊戲場景,非常方便。在本章中將帶領大家熟悉「Tiled Map Editor」這套軟體,未來的遊戲地圖設計都靠它來完成了!
    在本章中將學到的重點包括:
    › 安裝Tiled Map Editor環境
    › 線上免費遊戲地圖資源
    › Tiled Map Editor物件繪製
    › 加入Tiled Map Editor物件屬性
    › 引用tmx地圖資訊
    › 實機測試

    13 遊戲製作—倉庫番推寶箱
    倉庫番是款超人氣的益智遊戲,玩家必須操控遊戲中的主角,在層層障礙中將場景內的寶箱推到指定地點,用以解開下一關卡的鎖定。在上一章的2D地圖編輯器中,我們已經認識倉庫番遊戲地圖的設計方法,在這個章節中,將結合Quintus遊戲引擎,實現倉庫番推寶箱的遊戲機制。
    在本章中將學到的重點包括:
    › 使用Quintus遊戲引擎
    › 2D地圖編輯器實際應用
    › 碰撞偵測技巧
    › 關卡建立技巧
    › Quintus多媒體資源引用技巧
    › 實機測試

    14 遊戲製作—FB連動網路應用
    臉書(Facebook)已經成為現代人生活中不可缺乏的社群網站之一,因此無論是商業行銷、明星名人甚至網頁遊戲都想要透過與FB的連結來增加能見度與知名度。在這個章節就要來教大家如何應用FB所提供的API,將FB的功能結合到自己的程式中。
    在本章中將學到的重點包括:
    › 成為Facebook應用程式開發人員
    › 取得FB API與權限
    › 實作FB會員登入系統
    › 實作FB發文分享系統

    15 HTML5遊戲輸出上架教學
    HTML5是基於Web技術的延伸,不像是APP一樣有獨立的開發系統(例如Android的java或iOS的Xcode),因此無論是在何種設備上,只要有瀏覽器就可以開啟,所以HTML5遊戲又具備「跨平台」的優勢。但也由於HTML5遊戲不是APP,所以不需經歷上架到APP商店的過程,只要將開發好的遊戲架設在雲端伺服器,就能輕鬆分享給全世界的人玩。
    在本章中將學到的重點包括:
    › 學習以Google免費資源架站
    › 使用二維條碼分享遊戲網址

    <TOP>

    作者介紹

    白乃遠、吳苑瑜、曾奕霖

    現職:
    • 聖堂數位有限公司/代表人/顧問
    • 育達科技大學/多媒體與遊戲設計系/專任助理教授

    經歷:
    • 亞太創意學院/數位媒體設計學系/專任講師
    • 翼飛多媒體設計有限公司/業務經理

    著作:
    擁有動畫製作、遊戲設計、電子書、多媒體、國際認證⋯等近20本圖書


    吳苑瑜Wu Yuan-Yu

    現職:
    • 聖堂數位有限公司/資訊開發部/資訊工程師/開發專案管理師
    • 原力工作室/負責人/程式設計師

    參與專案開發:
    • 老人系列工具箱應用開發
    • 奇遇社群應用程式開發
    • 大稻旅圖 Beacon 創新應用開發
    • Crazy Yummy 暴食專家手機遊戲開發
    • 千變萬話手機遊戲開發
    • 手勢操控跨平台辦公室資料中控系統開發
    • 配對式交友手機社群應用程式開發

    參與開發者社團:
    • Unity Taiwan Developers社團
    • UGDC - Unity3D Game Design Community社團
    • XNA Taiwan Developers社團
    • 台灣遊戲獨立(Indie) 開發者Group社團
    • Android台灣開發者社群

    曾奕霖
    現職:
    聖堂數位有限公司/企劃部主任

    <TOP>

    詳細資料

    EAN / 9789863475613
    頁數 / 368
    裝訂 / 平裝
    級別 / 普
    語言 / 繁體/中文

    <TOP>

    如果你喜歡這商品,那你一定不能錯過...

    <TOP>

    購物說明

    退換貨說明

    如遇欲退換貨之情形,請於收貨日當天起算第7日(含)前以收執聯為憑,將商品與完整包裝(商品、附件、內外包裝、隨貨文件、贈品等)以掛號方式寄回灰熊愛讀書客服部,否則恕不接受退貨。有特殊外包裝之商品,一經拆封(除運送包裝外之一切包裝),恕不接受退貨。
    詳細退換貨須知請參考FAQ

    <TOP>