作業五 3D動畫程式 - Happy Bird

主題介紹 
Happy Bird
我們做的是一個跟手機遊戲 Angry bird 類似的遊戲，不過我們把遊戲的主角變得不再angry，所以我們取名為 Happy bird。

組員名單
981508 邱真智
981515 徐靖
981519 吳宗倫
981537 馮鳳儀

設計概念
這次的作業需要結合整個學期學到的技術，包括Lighting、Texture mapping、Object loading、
Transformation和Viewing，為了同時達到以上說的功能，我們這組想了很久，最後以手機遊戲angry bird這種拖曳式的射擊遊戲來做呈現。
Lighting : 整個場景中一定會有lighting的設定，所以不多做說明
Texture  : 我們想把texture的部份設計在整個場景的背景，並且可以切換，達到效果
Obj        : 整個遊戲的主角，happy bird、豬及彈弓(尚未完成) ，都是先用3dx max建出來的模型
               之後再匯出obj檔，並讀進來使用
Transformation : 整個遊戲中，happy bird的拖曳，射擊，都是運用到 transformation
Viewing : 在射擊中，我們想出可以設定讓viewer不動，或是跟著happy bird一起動的模式

操作說明
1. 一開始進入畫面是我們的介紹畫面，滑鼠點擊視窗任意位置，即可進入下一畫面
   而如果點擊畫面的模型展示，或是按鍵盤 F1鍵，將可以看到我們所做的全部模型
   進入模型展示的畫面，可以選擇上下左右鍵觀看不同模型，若要回到最初畫面按F5即可

2. 點選進入遊戲畫面後，接著是選擇遊戲背景的畫面，總共有三個背景，用鍵盤左右鍵選
    擇，選取完畢也是滑鼠點擊畫面進入遊戲

3. 拖曳happy bird的方式是，滑鼠點擊不放，並且往後拖曳，直到瞄準好再放開，即可射擊，
    而我們設計成有反彈功能，所以如果往鏡頭射擊也可反彈回去

4. 遊戲中，可按滑鼠右鍵，選擇模式
    打擊模式可分兩種
    (1) 瞄準模式，happy bird會消失，改成線條的方式，以方便瞄準
    (2) Happy bird模式，就是預設的模式

    視角模式可分兩種
    (1) 視角移動模式，射擊出happy bird後，視角會變成happy bird的視角，跟著打擊出去的方
          向移動
    (2) 視角不變模式，就是預設的看happy bird打擊的模式

5. 每射擊出happy bird，會自動產生下一隻happy bird讓使用者射擊，當三隻happy bird都射擊
    完畢，會出現最後的得分畫面

6. 得分畫面，可點擊下方兩處的選項
    再玩一次，則遊戲將重頭開始
    結束離開，則會將整個程式關閉

7. 備註，整個程式進行中，可以直接點擊鍵盤 F5 ，將可以立刻重頭開始

執行結果呈現
影片，主要展示遊戲流程，和操作方法

開始畫面

選擇背景 - 1

選擇背景 -2

選擇背景 -3

遊戲畫面 - 第一隻happy bird

遊戲畫面 - 第二隻happy bird

遊戲畫面 - 第三隻happy bird

瞄準模式，圖中的線可以用來描準你要打的方向

視角移動模式，可以跟著Happy bird作移動

擊中豬的話，會顯示BINGO跟爆炸畫面

結束得分顯示畫面

寫作方法
1. Texture mapping
    主要是參考老師的範例程式和Nehe網站的教學來讀 BMP檔的圖片，而主要注意的地方是圖
    片解析度必須為2的次方，所以我們都把所有會用到的圖片都設成 512 x 512。另外一點，因
    為整個程式會讀到的texture不只一張，一開始我都是設定在display的時候才讀texture，這樣
    會造成每畫一個畫面就要重新讀一次檔案，整個程式就會一下子就記憶體不足，直到後來
    我改成在其他call back function 和 init function讀好才到display的時候畫出來，這樣這個問題
    就解決了

2. Happy bird的移動
    主要是透過 tranlsate 再idle function，每次改變 happy bird的x軸和z軸，這樣就有移動的效果

3. Viewing的移動
    這邊只是把 happy bird x軸和z軸的移動量，改成 lookat中 x軸和z軸的移動量，這樣就可以做
    到跟著happy bird移動的效果

4. 其他lighting，load obj方法都跟前幾次作業差不多，沒什麼改到

心得與討論
這次的作業因為卡到期末考，所以其實準備的時間不多，好險有分組所以可以把整個作業的想法讓大家一起分工來完成。而這次作業主要很感謝畫模型的同學，真的畫的超像的，我之前有嘗試要畫畫看，不過一直畫不好，而因為基本的transform viewing texture等方法大家都會寫，所以我覺得我們這個作業主要跟別人不一樣的特色就是畫出來的模型。

很快一個學期就這樣過去了，當初第一次上課老師秀學長姐的部落格給我們看的時候，還想說屁啦怎麼可能畫出這些動畫，覺得一學期內一定寫不出這些作業，沒想到最後我們真的可以寫出一個真正能動起來的動畫了。

作業四 校園導覽加打光

主題介紹
元智校園導覽打光版
這次作業四是延續作業三的校園導覽概念，再加上打光的效果來呈現，所以直接開門見山取了這個名字當主題，我想是最適合不過了。

設計概念
這次作業跟以往作業最大的不同處，在於這次作業裡面的物件必用要用讀obj檔的方式來呈現，所以我使用了3ds max軟體來畫好每個館、樹木、以及地板，之後再用glm來讀取這些obj檔，再慢慢一個一個作translate到場景中的位置。而至於遊走部分，跳躍功能，我都直接照著作業三繼續使用。

操作方式
使用鍵盤的上下左右進行前後左右的移動，按空白可以進行跳躍。

執行結果呈現
影片，主要展示整個場景，跟碰撞偵測。

全景

一館

二館

三館

五館

六館

七館

全景

讀obj方法
我是參考portal第17個範例 obj demo，來讀obj檔，主要修改的地方是，因為範例只能一次讀一個obj檔，而我整個作業中，每個物件都是不同的obj，所以為了要讀多個obj，我把範例的GLMmodel設成陣列的型態，這樣就可以把所有的obj讀完了。

lighting和material
這個作業其中一個關鍵點在於打光，不像之前的作業可以用glColor慢慢設定顏色，在glEnable(LIGHTING)後，以往的glColor都不能用了，所以做好打光的設定是很重要的。
為了使整個場景都能被我的光所照到，所以我把我的光位置放在場景大概中間的位置，而光的diffuse設成 1.0 1.0 1.0的白光，這樣一來打在我畫好的物件上才不會出現太奇怪的顏色。
至於material部分，當初在做obj檔時，也會輸出一個副檔名為mtl的material檔，因此再讀obj檔時，也會一起把該物件的material讀進來。

心得與討論
這次的作業因為是使用軟體來畫物件，所以整個效率快了很多很多，之前作業三跟這次的作業四的每個館看起來長的很像，但是其實寫的code量差了很多，之前作業三徒手鍊鋼大概花了幾千行才把這些館畫好，而這次用軟體感覺只要抓到畫的訣竅，就很像在畫小畫家一樣，拉一拉大致上看起來就很漂亮了。

而這次比較麻煩的是打光的部分，一開始我不知道要打什麼樣子的光比較好，所以一度以為是不是我的obj檔還是material出了問題，直到最後改成了白光，打出來終於看起來比較正常一點了。後來我想說試試看能不能讓場景看起來有黃昏時候的感覺，所以打了一種偏暗紅色的光，不過效果好像有點恐怖，所以最後還是選擇白光好了。

作業三 校園導覽

主題介紹

元智大學校園導覽
這次是要作整個元智大學的校園導覽，所以直接開門見山取了這個名字當主題，我想是最適合不過了。

設計概念

這次主要畫了六個館，都是以之前作業二的一館當雛型，修改完以後再透過translate移動到場景中不同的位子。而移動部份是參考老師放在portal的範例檔，並修改之後達到效果，最後每次移動的時候，改變idle function讓畫面看起來更有走路的感覺，並且搭配空白鍵，改變照相機y軸的高度，呈現有點像CS裡面跳躍的感覺。

操作方式

使用鍵盤的上下左右進行前後左右的移動，按空白可以進行跳躍。

執行成果呈現

影片，主要展示整個場景，跟碰撞偵測。

全景

全景

一館

二館

三館

五館

六館

七館

壘球場

程式設計

這次基本上只有改變投影的方式和照相機位置，其他跟前兩次使用方法差不多。

選擇投影的方式

這次選擇了perspective的投影方式，讓畫面看起來更有人眼看到的效果。

改變照相機的位置

照相機的y軸基本上沒有跳躍的話，維持不變，而如果選擇前進轉彎，x軸會乘上sin角度，z軸會乘上cos角度，讓看起來的效果很像在游走一樣。

心得與討論

因為之前老師上課有課堂練習，所以在游走的部份課堂上就寫好了，所以這次作業主要時間還是花在把六個館建立起來，和把整個場景布置。不過因為一次要畫六個館，所以這次就不像上次畫一館一樣每個細節都很注意，所以只把簡單的代表性特徵畫出來而已。而再碰撞針測的部分，我是記錄每一個館的座標，在移動的時候會在去做檢查，看看是否會超過記錄起來的座標，如果沒超過才走過去。最後這次是在最後一天才大致上完成，所以部落格打的有點簡略，而且本來想要多畫幾棵樹也來不及畫好，另外本來也想要連滑鼠都可以做視角的移動，讓整個操作方式跟CS玩起來的感覺一樣，因為時間的關係，只能等下次作業在完成了。

作業二 元智一館

主題介紹

資工一館 樂高版

這次的作業二跟作業一畫法不太不ㄧ樣，因為要畫出一館的每個面，所以我使用的方法有點像在堆積木、玩樂高的方式，慢慢的堆起來，才會每面都出現，而且有立體3D的感覺，因此我把這次作業定的名字就是，資工一館 樂高版。

設計概念

由於這次作業是要畫出整個一館的3D模型，因此每個面都需要畫出來，所以我跟同學借了相機拍了一館每個面的照片，再一一仔細描繪。

操作說明
可以對著畫面按下滑鼠右鍵，會跑出選擇操作的選單

1.      選擇rotate，可以使用鍵盤上下左右鍵，對模型進行旋轉，按上下鍵是對y軸作旋轉，左右鍵是對x軸作旋轉。

2.      選擇move，可以使用鍵盤上下左右鍵，對模型進行上下左右的移動。

3.      不管選擇哪個模式，按鍵盤的A(a)鍵可以對模型進行放大，按鍵盤的D(d)鍵

可以對模型縮小。

4.      選擇exit，就是直接關閉程式。

執行成果呈現

影片 (因為動太快，錄起來會失焦，所以我很緩慢的做旋轉移動和放大，請見諒)
而最後是想要呈現出，可以透過將模型移動和放大，讓使用者可以看清楚各個想看見的角度

1. 使用平行投影的效果

2. 使用Frustum投影的效果

正面

右面

背面

左面

程式設計

除了作業一寫的三個部分以外，作業二我多了以下幾個方法。

1.      使用 z-buffer algorithm

OpenGL有一個內建的z-buffer演算法，使用之後可以自動測試景深，如果被遮住的地方就完全不會畫出來，如此一來只要把Z軸位置設定好，就可以不用像作業ㄧ每次畫什麼物件還要考慮誰要先畫的問題。

2.      使用Reshape call back function

寫作業一的時候因為還沒學過這個function的用途，所以發現把視窗放大縮小後，整個影像的比例都亂掉了，因此這次寫了reshape call back function，只要視窗一改變，就會自動調整viewport和viewing volume，讓整個影像還是跟著視窗的比例作縮放。

3.      Transformation和Keyboard call back function

為了能讓使用者看到整個3D模型的每個面，我使用剛學到的transformation方法，讓整個物體可以搭配keyboard call back function的輸入，作rotate(旋轉)、translate(移動)和scale(放大縮小)。

4.      Menu function
為了可以調整操作模式，使用 menu function 搭配滑鼠右鍵作呼叫使用。

心得與討論

這次的作業真的比作業一還要麻煩太多了! 光是一根柱子就要畫六個面，當然有些被檔住可以少畫幾個面。為了增加寫作的效率，我幾乎都把所有的座標位置寫在陣列裡面，另外再寫好六個面的Code，之後要畫的時候就複製一下把變數改一下就畫好一根柱子了，而寫在陣列裡面的好處是如果想要修改座標，只要簡單改一下陣列裡面的內容，其他code都不用動到，很好修改。

而描繪的過程，就有點像是小時候玩樂高一樣，先把整個主架構(大矩形)畫出來後，再慢慢的一根柱子，一塊地板的疊上去，必要時後還會再修改原本的架構矩形，有點像是挖洞一樣，挖好之後再繼續把想要的東西疊上去。

至於要選擇哪個投影的方式，是讓我最後最困擾的地方，我一開始都是平行投影的方法來寫，直到這禮拜老師講述 Frustum的方法，呈現出比較像人眼看到的效果，所以我也嘗試了一下發現真的看起來比較像，不過我最後上傳的作業還是以一開始的平行投影為主。

雖然整個寫作業的過程很複雜，花了很多時間，但是其實還蠻好玩的，當一根一根柱子疊出來，整個影像越來越像的時候，超級有成就感的，不過因為這次大部份的時間都花在如何作出逼真立體的模型，所以花在整個顏色調配上的時間就大為減少了，因此就單個面來講，感覺作業ㄧ看起來還是比較真實一點，這是我覺得這次比較可惜的地方。