2012年6月17日 星期日

作業五 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等方法大家都會寫,所以我覺得我們這個作業主要跟別人不一樣的特色就是畫出來的模型。

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

2012年6月11日 星期一

作業四 校園導覽加打光

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

設計概念
這次作業跟以往作業最大的不同處,在於這次作業裡面的物件必用要用讀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出了問題,直到最後改成了白光,打出來終於看起來比較正常一點了。後來我想說試試看能不能讓場景看起來有黃昏時候的感覺,所以打了一種偏暗紅色的光,不過效果好像有點恐怖,所以最後還是選擇白光好了。