HTML5 | 淺談電子書之應用可能

我相信大家對電子書應該都很熟悉吧！像是龍騎士07的寒蟬鳴泣之時、Key社的AIR或Nitro+和5pb.的Steins;Gate等等都是類似電子書，有選項、有對話、有聲有色的電子書，雖然這入門的門檻不高，但是為什麼我們還需要這麼笨重應用程式去跑呢？放在網路上，然後需要的時候再將需要的素材載入就好，這樣不只可以在遊戲發布後隨意地進行劇本的刪改，而且劇本也可以以無限長的方式持續進行，讓玩家持續的Play。

雖然這麼說，但也有其弊，如無法連線的話就無法進行遊戲，這方面就不談了。

狀況開始中的蘿莉學姊

首先，要製作網頁版本的電子書必須先具備相關能力：

• SQL
• CSS
• JavaScript(jQuery)
• AJAX
• JSON/JSONP
• HTML/HTML5
• 文學造詣

這些能力只是我將它大概分類，並不一定是最詳細的(也可能不是最正確的)。
雖然是這樣說，但今天我並不談SQL、JS、AJAX、CSS、JSONP和文學造詣，本次只談HTML方面的Layer。

簡單分層

 一、應用層

應用層顧名思義就是放各種應用功能，內含兩個audio標籤(BGM和效果音)，因為是底層的關係，所以玩家不會看到該層內容。

 二、繪圖層

繪圖層顧名思義就是各種場景的背景、立繪、切換效果。

背景層

接受JS控制CSS的background屬性。

效果層

接受JS控制CSS的background和position屬性達到簡單切換效果。

立繪層

JS控制DOM來在內層建立人物立繪，並且內層的各小層CSS的background和position接受JS控制。

 三、文本層^*註一

對話層內分為三至四小層，分別是人物名稱層(L、R)、對話本文層、控制項。

人物名稱層(L、R)

有時當一位以上的角色交互對話時，就會需要兩個，平常的話只需要一個，而此層主要功能僅只有讓玩家明白當前對話角色是誰。

對話本文層

接受JS的DOM控制，利用JSON接收字串並且顯示於此。

控制項

顧名思義就是控制儲存、載入、靜音等等的控制。

選項層

該層只接受於JS呼叫顯示時才會顯示，作用在於控制劇情的分歧。

 四、控制層

該層只接受JS呼叫顯示時才會顯示，作用在於控制應用層的音量等等雜項之類的(?


*註一：應以"文本"替代"對話"更為恰當之詞