10-1 確定履歷呈現內容單元 -...

5

10-2

跨平台遊戲設計不設限：從入門到超人氣遊戲的修鍊實戰趣味互動式個人履歷網站HTML

10-1 確定履歷呈現內容單元雖然程式內容是開發遊戲的重點，可是沒有優秀的企劃作為遊戲的開頭與

規劃，也難以設計出一個圖文豐富、劇情流暢的「遊戲式履歷」。在本章的第一

個單元中，依循遊戲開發的流程，先從「遊戲企劃」開始，釐清整個遊戲的故

事設定，包括「角色設定」、「場景設定」、「美術風格」、「故事腳本」和「系統

規劃」等資訊。

角色設定場景設定美術風格故事腳本系統規劃

角色設定

為了讓觀看履歷的人能夠有強力參與感，以及有興趣將履歷看完的動機，

因此想設計一個「闖關」性質的遊戲，並且能夠設計一個角色讓觀看者能夠自

由操控。在這樣的條件前提下，第一個進入腦海的超人氣遊戲就是「瑪莉兄弟」

此類 2D橫向捲軸遊戲，玩家可以控制自己扮演的主角，伴隨著未知的冒險努

力前進，期待迎來最後的勝利。

» 原始人

根據這樣的目標進行發想，由於「投履歷」這個行為有種在未知世界拓荒冒

險的精神，因此本遊戲將主角設定為一個上古時代的原始人，憑著簡單的短

矛在原始世界中闖盪。

» 野豬

以瑪莉兄弟來說，支持玩家繼續往前冒險的動力是為了救到公主，從而展開

一連串關卡的冒險，那我們遊戲的原始人又是為了什麼而跑呢？總要設計一

個目標吧？所以我們加入了一個角色「野豬」，讓原始人為了追逐逃出柵欄

的野豬、為了生存下去的目標而跑。

跨平台遊戲設計不設限：從入門到超人氣遊戲的修鍊實戰趣味互動式個人履歷網站�

10-3

場景設定

決定遊戲主角是「原始人」和「野豬」後，自然就可以決定遊戲畫面中的

場景，將會偏向上古世界中的世界觀，例如高山、原野以及各種動物。在遊戲

式履歷中，我們設計了五個場景用來表達我們所需要呈現的履歷項目，包括「首

頁介紹」、「專業能力」、「設計資歷」、「作品集」及「mail聯繫」。

» 首頁介紹

首頁介紹等同於是個人履歷的封面，因此在這個畫面中首先要呈現「某某某

個人履歷」的標題，並將遊戲主角「原始人」和「野豬」放置到畫面中，準

備展開追逐。另外記得加入文字說明，介紹這個遊戲式履歷的操控方式，是

透過「捲動橫向捲軸」或「鍵盤方向鍵」來控制，引導觀看者開始瀏覽。

» 專業能力

人與豬的追逐開始後，接下來跑到了第二個遊戲場景。這一部份的履歷內容

想要介紹個人專業能力的等級，畫面的構思打算採用「蝙蝠數量」的多寡來

呈現在各個專業技術上的評比等級。

例如「Illustrator」是個人強項，因此給自己「四顆星」的評價，其餘

「PhotoShop」和「HTML」稍遜一些，給自己「三顆星」的評價。希望透過

這種表達方式，可以用「圖像化」的方式呈現自己的主要專業能力強項，清

楚的協助觀看者知道我的職務定位。

5

10-4


» 設計資歷

既然引導觀看者開始思考我的「職務定位」，那接著就來介紹個人過去曾參

與過的工作經驗或專案執行經驗，從資歷中去證明我在別的地方是如何應用

我的能力。

在這幕場景中依照過去的工作經驗，分類成「網頁設計」、「遊戲設計」及

「產品設計」等三個標題，由於在遊戲頁面中要表達過多的文字資訊，將會

讓遊戲場景的觀感和品質下降，所以這個互動式遊戲履歷主要當作其它資訊

的一個跳轉頁面，如果在別的網頁已經建立了資歷的文字清單，就讓觀看者

可以點選這些標題連結過去，維持遊戲場景的整潔。


10-5

» 作品集

說了那麼多的專長和資歷，實在是口說無憑，那就來看看我個人的作品集

吧！這個場景的設計構思與上一幕類似，透過飄浮在天空的氣球表達作品集

內容的分類，包括「遊戲」、「繪畫」和「網頁」，同樣可以讓觀看者點選氣

球中的超連結，連到作品集呈現的網頁。

» mail聯繫

經過一連串的追逐，原始人終於把野豬趕回豬圈中了，這也代表著遊戲履歷

即將進入尾聲。因此在履歷的最後要留下個人的聯絡方式，當然也是投履歷

最重要的目標，希望能夠取得面試官的賞識與聯繫了。

所以在這幕場景中提供了一個 mail的連結，應用先前學過的 mail發送技巧，

讓觀看者可以一鍵啟動 mail系統並自動填入「收件人」、「標題」等訊息，

貼心的設計減少面試官自己輸入資訊的麻煩。

5

10-6


美術風格

既然是以 HTML技術為基底所設計的遊戲網頁，自然不能僅僅用單調的平

面圖畫來顯示，因此必須為遊戲場景中出現的角色加入動畫技巧，也就是先前

學過的「角色表（sprite）」，透過動作的連續播放讓角色能夠在畫面中活過來，

充滿真實感。

以下將需要用到 sprite的角色以及它們的動作分解圖呈現如下，其它場景

的設計圖檔可以進入 ch10範例中的「image」資料夾內瀏覽。為了應用的方便，

也一並將設計原稿分享給讀者，若您有具備設計背景，懂得使用 Adobe系列的

「Photoshop」和「Illustrator」，可以從設計原稿中的「圖層概念」來理解如何製

作動作分解圖。

原始人與野豬的移動

蝙蝠的飛翔

小鳥的飛翔

故事腳本

決定好場景規劃和美術設計後，接下來該撰寫一個故事腳本，故事腳本就

像是電影中的劇本一樣，必須明確規劃每個場景的佈局、角色動作和觸發劇


10-7

情⋯⋯等資訊。在後續程式開發時就能夠依照這個腳本進行設計，在明確的目

標下撰寫程式，可以有效加速開發流程。

» 場景一：首頁介紹

› 故事劇情

由於野豬逃出了豬圈，因此原始人展開了一場追趕野豬的冒險旅程。在

故事的開端必須告訴觀看者這個遊戲的主題是「xxx個人履歷」，並解釋

操作方式，讓玩家能夠順利的開始遊戲。

› 美術元素

元素名稱元素內容

標題雲以文字顯示目前頁面的主題為「xxx個人履歷」。

背景以遠山與彩虹構成的背景圖。

南瓜路邊的植物。

原始人手持長矛的主角，從圖層可以看出主角在豬圈內。

野豬逃出豬圈的野豬，從圖層可以看出野豬在豬圈外。

柵欄以柵欄表示豬圈，以圖層安排豬圈內外的關係。

說明文字以動畫顯示操作說明，吸引注意力。

» 場景二：專業能力

› 故事劇情

第二個場景的主題是「專業能力」，以蝙蝠數量作為「圖示化」表達各個

專業能力的評比。為了讓畫面出現轉場動畫的感覺，安排蝙蝠群從山的

那一頭飛出來，然後漸漸排列在專業能力之後，而不是一開始就死板板

的出現在畫面中。

› 美術元素


標題雲以文字顯示目前頁面的主題為「專業能力」。


原始人手持長矛的主角。

野豬逃出豬圈的野豬。

專業能力文字顯示 Illustrator、PhotoShop、HTML三項技術。

蝙蝠代表專業能力的評比，以動畫進入畫面。

5

10-8


» 場景三：設計資歷

› 故事劇情

第三個場景的主題是「設計資歷」，以「雲上的豬」代表各個設計資歷的

連結按鈕，為了讓按鈕可以更加明顯，加入「閃爍」和「飄浮」動畫讓

雲上的豬動來動去，吸引注意力；另外還加入了一座山，用來代表場景

的更換。

› 美術元素


標題雲以文字顯示目前頁面的主題為「設計資歷」。




雲上的豬顯示網頁設計、遊戲設計與產品設計的連結按鈕。

山加入新元素「山」，代表場景更換。

» 場景四：作品集

› 故事劇情

第四個場景的主題是「作品集」，以「氣球」代表各個作品項目的連結按

鈕，並加入「飄浮」動畫強化氣球在空中飛的真實感；第二加入了一直

會來回飛翔的鳥在氣球附近盤旋，也是強化玩家注意力的一種方式；另

外這邊還加入了一個觸發動畫，當野豬經過恐龍身邊的時候嚇了一大跳，

所以會跳起來一下在繼續奔跑。

› 美術元素


標題雲以文字顯示目前頁面的主題為「作品集」。

背景以遠山與草地背景圖。


野豬逃出豬圈的野豬，經過恐龍會跳起來一下。

恐龍在原野上覓食的恐龍。

氣球作品集的連結按鈕。

小鳥來回盤旋飛舞的小鳥。


10-9

» 場景五：mail聯繫

› 故事劇情

來到最後一個場景，主題是「有興趣請聯繫我」，這邊以長頸鹿的動畫對

話視窗來呈現「mail」的連結。畫面中也再度出現柵欄，代表又追回豬圈

了，那到底有沒有追到野豬呢？讓這故事繼續下去吧⋯⋯！

› 美術元素


標題雲以文字顯示目前頁面的主題為「有興趣請聯繫我」。

背景以遠山與草地背景圖。



長頸鹿長頸鹿會出現對話視窗，提供 mail連結。

柵欄以柵欄表示豬圈。

系統規劃

完整整個故事腳本的規劃，就可以預期在程式部份必須安排哪些技巧。同

學可以打開範例 ch10的資料夾內容，將檔案與下面的介紹表格進行比對。

檔案名稱內容

資料夾 img 放置所有遊戲美術素材。

資料夾 js 放置 jQuery函式庫，須使用 jQuery控制觸發動畫。

HTML檔 ch10 安排各元素的放置，並加入 jQuery語法控制觸發動畫。

CSS檔 style 安排各元素的外觀與排版，控制常態動畫。

CSS檔 reset 統一 CSS標籤，可讓程式適應各種瀏覽器版本。

» 觸發動畫

所謂的觸發動畫是指當畫面執行到某一程式時才會執行的動畫，這部份由於

需要加入「觸發點」的判斷，因此使用 jQuery來安排動畫播放。各場景的

觸發動畫整理如下：

場景觸發內容

各場景捲軸移動與佈局，控制背景物件跟著角色移動 (按鍵觸發 )。

各場景控制原始人和豬在移動時的動畫播放 (按鍵觸發 )。

5

10-10


場景觸發內容

場景二畫面進入場景二時，觸發「蝙蝠飛入」動畫 (場景觸發 )。

場景二畫面進入場景二時，觸發「豬跳躍」動畫 (場景觸發 )。

場景四豬經過恐龍時會再跳躍一次 (場景觸發 )。

場景五豬經過長頸鹿時觸發 mail對話框動畫 (場景觸發 )。

» 常態動畫

常態動畫則是原本角色就會執行的動畫內容，請參考各場景會使用到的常態

動畫，這些動畫將在 CSS檔中進行安排：

場景觸發內容

各場景控制原始人和豬的「角色表」播放。

場景一遊戲操作方式的提示文字動畫。

場景二蝙蝠振翅動畫。

場景三「雲上的豬」飄浮與閃爍動畫。

場景四「氣球」飄浮與「小鳥」振翅動畫。

» 統一 CSS標籤

製作網頁最耗時間的部份就是畫面元素的排版，然而很不幸的，目前不同瀏

覽器與版本間的 CSS預設值並非一致，導致開發人員在設計程式時必須考量

到各種版本瀏覽器下的 CSS指令，不僅加深了程式的複雜度，更讓讓排版過

程變的非常痛苦。

為了解決這一窘境，與其在程式中加入適應各瀏覽器的 CSS指令，不如在

一開始就先宣告統一 CSS參數。因此在開始進行 CSS排版前，建議先運行

reset.css檔，此檔案的內容可以讓不同瀏覽器下的 style預設達到統一，如此

一來就能夠以唯一的標準進行版面呈現，這樣在不同瀏覽器呈現的結果就會

一致，使排版效率跟著提高。

開啟 reset.css檔案，可以看到此程式的內容是將各種 CSS標籤挑出來，並在

「margin」、「padding」、「border」⋯⋯等外觀參數上給予統一。這樣一來即

使在不同版本的瀏覽器下，也能夠以一套程式碼就解決跨平台的問題，非常

方便。因此未來在遊戲中也可妥善利用這個檔案來進行 CSS屬性的初始化。


10-11

設定所有 HTML5標籤在框線、文字與對齊方式上的 CSS屬性。

+ 光碟 \範例 \ch10\reset.csshtml,body,div,span,applet,object,iframe,

h1,h2,h3,h4,h5,h6,p,blockquote,pre,

a,abbr,acronym,address,big,cite,code,

del,dfn,em,img,ins,kbd,q,s,samp,

small,strike,strong,sub,sup,tt,var,

b,u,i,center,

dl,dt,dd,ol,ul,li,

fieldset,form,label,legend,

table,caption,tbody,tfoot,thead,tr,th,td,

article,aside,canvas,details,embed,

figure,figcaption,footer,header,hgroup,

menu,nav,output,ruby,section,summary,

time,mark,audio,video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

統一舊版瀏覽器中部份標籤的屬性，使其與 HTML5中的屬性一致。

+ 光碟 \範例 \ch10\reset.css/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display: block;

}

body {

line-height: 1;

}

ol,ul {

list-style: none;

}

5

10-12


blockquote,q {

quotes: none;

}

blockquote:before,blockquote:after,

q:before,q:after{

content: ` ´;

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

10-2 建置視差滾動網站場景完成遊戲企劃後，將依照原先所規劃的故事線來安排場景元素。當執行本

章範例時，可以注意到網頁下面出現了可以橫向移動的捲軸，這代表著原本畫

面的安排是以「超過畫面橫向顯示範圍」的方式進行佈局，也就是說雖然畫面

上還看不到，但其實從第一個場景到最後一個場景在載入遊戲時就都已經佈置

好了，最後只是靠著捲軸移動來達到場景切換的效果。

最直接的證據，可以開啟 img資料夾中的「bg_Rainbow」圖檔。此圖是整

個遊戲場景的背景，圖片尺寸為 3546*769，從寬度可發現遠遠超出了螢幕的最

寬顯示範圍。

10-1 確定履歷呈現內容單元 -...

Documents