電腦遊戲設計(大學部,三學分),Game Design
本課程主要目的在於使學生從能玩電腦遊戲升級為能設計及程式撰寫電腦遊戲。課程分理論與實務兩部分。理論部分教授電腦遊戲設計相關的知識,包括遊戲規劃,UML模型建立,團對分工的角色及任務,空間轉換理論,以及特效製作之原理等。程式部分則教授微軟的XNA Game Programming Language. 學生最好有C程式語言的概念。
The goal for this course is to convert students from game player to game developer. There are two parts of the course: theory and implementation. The students will learn how to design a game, how to collaborate with game teams which consist of game project manager, producer, visual designer and programmer, and how to implement game projects.
本課程使用許多課本所給的範例,強烈建議學生採購教科書,不要非法影印,以免觸法。
本教材內容涵蓋電腦遊戲設計的基本概念(第一週、第二週)、圖學基本概念(第三週-第五週)、使用者介面設計、簡單的遊戲程式(第六週-第八週)、貼題與繪圖(第十週)、遊戲概念設計與多媒體(第十一週-第十三週)、第一人稱及第三人稱相機操控(第十四週-第十五週)。
課程內容
第一週 (9/16)
Overview of the course (syllabus). (江清水編撰)
Game. (江清水編撰)
HW:讀課本第一章
第二週(9/23)
XNA Game Studio: Introduction (江清水編撰)
XNA遊戲程式的基本架構 (課本出版商提供) 學生列印版
CG Basic. Word PPT (江清水編撰; 包括2D Geometry, 3D Geometry, Window to viewport mapping等)
HW:讀課本第二章
第三週(9/30)
CG Basic. 2D Geometry; (江清水編撰)
Program: "Hello World" program with "form". (江清水網路編選教材)
Program: 執行課本第三章的程式,將螢幕分為四個部分,當滑鼠移動時,在螢幕會有顏色的變化。
本週程式作業請同學將兩個程式合併,使螢幕的顏色經由Form的勾選來決定。
完成同學:黃泰瑚、陳建任、謝睿宥、呂劭涵、方俊欽、張哲瑋
HW:讀課本第三章
第四週(10/7)
繳交分組報告名單
3D Geometry; Window to Viewport Mapping
Program: (1) 產生一個2D image (江清水編撰)
(2) 呈現2D Image Word(江清水編撰); Program (江清水編撰; 修改自課本所提供之程式)
(3) 縮放並呈現部分2D圖形 Word(江清水編撰); Program (江清水編撰; 修改自課本所提供之程式)
本週程式作業請同學完成以下三樣事情:
1. 將產生的2D image放置於視窗的正中央。
2. 將產生的2D image放置於視窗的正中央,當使用滑鼠改變視窗大小,2D image永遠在視窗的中央。
3. 將產生的2D image放置於視窗的正中央,當使用滑鼠改變視窗大小,2D image永遠在視窗的中央,2D image隨著視窗的形狀(細長或矮胖)變形(變高或變胖)。
完成1項的有陳冠廷、張哲瑋、許伶穎、江國堤、林守毅等20人。
完成第3項的有何姿儀和廖俊彥兩人。
HW:讀課本第四章
第五週(10/14)
Clipping Algorithm (Cohen-Sutherland Algorithm); Bresenham Algorithm
Program: (1) 將指往上的細長等腰三角形以逆時鐘旋轉並展現。 Word Program (江清水編撰; 修改自課本所提供之程式)
(2) 移動三角形,使三角形在碰到視窗邊緣時回被彈回。 Word Program (江清水編撰; 修改自課本所提供之程式)
本週程式作業請同學完成:
(1) 先製作一個小的三角形(32x16),然後移動三角形時三角形的頂點會與移動方向相同。
(2) 能產生一個以上的三角形同時在螢幕上移動。
本週有黃廷宇同學提供程式作業之解答。
李承軒(10/21提供)產出的移動三角形在移動時三角形的頂點會隨移動方向改變而改變。
第六週(10/21)
繳交分組報告題目
2D 圖形與字型的呈現 (課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點) 學生列印版
補充教材: RGB (Wikipedia)
Program: 碰撞 Program (取自課本)
無接縫貼圖 Program(取自課本)
捲動的無接縫貼圖 Program (取自課本)
本週程式作業請同學完成:找出一個可以無接縫貼圖的圖案,將所設計的三角形兩個移動,碰撞後反彈,同時背景會捲動。
本週有李俞興、黃泰瑚、張咸瑋、李韵馨、陳冠廷、李承軒等完成作業。
本週有 邱絢紋(10/28日提供)、黃廷宇同學提供程式作業之解答。黃廷宇同學的解答中做到三角形碰撞後反彈。
第七週(10/28)
Line segment drawing, Bresenham Algorithm(江清水編撰)
Video Game. PPT (江清水 編撰)
行走的小王子 Program (取自課本)
本週程式作業請同學完成:設計小王子行走上下左右,當走到螢幕的右方,則將背景捲動向左,上、下及左方以類似方式處理。
第一部份:小王子會往上下左右走動。
第二部分:小王子走道螢幕邊緣的處理。
完成第一部份的同學有陳冠廷、李俞興、邱絢紋、賈涵宇、杜家駿、葉泊佑。
完成第二部份的在11/18日補交的有林韵馨、邱絢紋、李俞興三位。
第八週(11/4)
Video Game
Game與Serious Game(江清水編寫)
第九週(11/11)
期中考試
第十週(11/18)
頂點定義與基本形狀的繪出(課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點)
程式一:頂點繪出 (取自課本)
程式二:軸線繪出 (取自課本)
程式三:立方體繪出 (取自課本)
程式四:貼圖於立方體 (取自課本,然圖形過大,需先縮小貼圖)
Exercise
第一部份:將貼圖程式(程式四)的圖形縮小後貼圖。
第二部分: 設計一個四面體,其四個端點為(0,0,0)、(1,0,0)、(0,2,0)、(0,0,3),將此四面體在一邊選轉的情況下繪出。
第三部分: 將以上四面體的其中一面或兩面貼圖。
結果:本週達到第一部份的有陳世哲、杜佳駿、黃介澤、李承軒、廖俊彥等28為同學完成。第二部分有李俞興、江國瑅、謝睿宥、葉泊佑、潘偉翔、杜佳駿以及陳建任等七人完成。無人完成第三部分。
第三部份在11/25日繳交的有何姿儀。
第十一週(11/25)
遊戲概念成形(江清水編寫)
程式一:2D字型(取自課本)
程式二:旋轉的2D字型(取自課本)
程式三:2D圖形與字型的應用(取自課本)
Exercise:
1. 旋轉的2D字型(I love XNA)在旋轉時會同時平移向左(或向右),到離開Window時會自動由Window右方移入。
2. 假設小王子有300cc的血,設計一血條,按鍵後血條內的血會增加(Keys.Up)與減少(Keys.Down),當寫少於100cc時,血條顏色會由綠色變成紅色。
3. 撰寫一程式是小王子走路。走路越久失血越多,但可以經按鍵(Keys.Up)後增加血液。
結果:本週達到第一部份的有林韵馨、邱絢紋、黃泰瑚、江國堤、張咸瑋、李俞興、陳泓安、林健富、顏寬、陳世哲、 何姿儀共11人完成。第二部份有潘偉翔、黃廷宇、邱絢紋、蔡泊佑等22人完成。第三部份有李俞興、林韵馨、潘偉翔、邱絢紋、黃廷宇共5人完成。 陳泓安同學於12/2日完成第三題。
第十二週(12/2)
3D繪出管道流程、著色器與特效檔 課本第六章範例一至範例三 (課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點)
Angle of Reflection
第十三週(12/9)
遊戲設計(江清水編寫)
程式:格線類別製作(取自課本,第五章範例五)
程式:使用Basic Effect呈現一個3D模型(取自課本 ,第六章範例一)
Exercise:
(1) 合併以上程式,將3D模型(蠍)放在有格線的場所。
(2) 將3D模型縮小為0.01倍,對X軸平移10單位後、對Z軸逆時鐘旋轉45度,然後將Model展現出來。
第一題有李俞興、林韵馨、邱絢紋、謝睿宥、林健富及何姿儀六位同學完成。
第二題無人完成。李俞興於12/16交出第二題。
第十四週(12/16)
Phong Model (江清水編寫)
基本鍵盤輸入與滑鼠游標檢選 (課本出版商提供,江清水修改)
範例一:可以四處移動的圓球(課本出版商提供,課本第八章範例一)
範例二:避免連續的鍵盤輸入(課本出版商提供,課本第八章範例二)
範例三:製作鍵盤輸入的類別(課本出版商提供,課本第八章範例三)
Exercise: 將小王子走迷宮套在網格上,允許小王子沿著X和Z軸走動。(1)經由a(<-), d(->), 代表左右移動,ws代表上下移動,(2) 並經由Shift+和adwx來行走多格。
本週有陳泓安、林韵馨、邱絢紋、江國瑅、謝睿宥、葉家伶、方俊欽等七人完成程式,但是移動的速度稍慢。每一次移動一格線的則有李承軒、潘偉翔和林玉清三位同學。
第十五週(12/23)
相機 課本第九章範例一至六 (課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點)
範例一 簡易的相機操控
範例二 簡易的相機操控(起霧了)
範例三 審視3D物件的相機類別
範例四 第一人稱相機類別
範例五 第三人稱相機類別與PC類別
燈光 課本第十二章範例一 (課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點)
Exercise:
使用第十二章範例一中的打結甜甜圈當一個固定的PC:
(1)光源點固定, 設計相機經由自動或手動繞行此PC一圈,經由不同的角度觀察打結的甜甜圈。
(2) 相機固定,設計一移動的光源(如太陽)經由自動或手動繞行此PC一圈,觀察來自不同方向的光源對PC的景觀產生的變化。
第十六週(12/30)
每組報告12分鐘,三分鐘開放他人問問題。
3:20-3:30 第一組到第六組設備準備
3:30-3:45 第一組:打磚塊 Report Menu GameZipFile
3:45-4:00 第二組:遊戲設計 Report Menu GameZipFile
4:00-4:15 第三組:馬戲團跳火圈 Report Menu GameZipFile
4:15-4:30 第四組:飯糰哥大戰波波龍 Report Menu GameZipFile
4:30-4:45 第五組:咪咪貓護家 Report Menu GameZipFile
4:45-5:00 第六組:打磚塊 Report Menu GameZipFile
5:00-5:10 休息十分鐘
5:10-6:10 上課
Game Design Documents from other students in USA (A course in University of Michigan-Dearborn)
Bart's Adventures (Bonkowski and Perry - .doc)
第十七週(1/6)學生Term Project報告
每組報告12分鐘,三分鐘開放他人問問題。
3:20-3:30 第七組到第十一組設備準備
3:30-3:45 第七組:Tower Defense Report Menu GameZipFile
3:45-4:00 第八組:小精靈 Report Menu GameZipFile
4:00-4:15 第九組:浩劫蟲聲 Report Menu GameZipFile
4:15-4:30 第十組:墓園大冒險 Report Menu GameZipFile
4:30-4:45 第十一組:守塔遊戲 Report Menu GameZipFile
4:45-4:55 休息十分鐘
4:55-6:10 上課:Serious Game Demo.
第十八週(1/13)
期末考
其他補充教材
3D繪出管道流程、著色器與特效檔 課本第六章範例五至範例六 (課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點)
音樂特效 課本第七章範例一至範例二 (課本出版商提供 ,紅色字為綠色字為江清水所加之註解,紅色字為強調之重點)
Introduction to Game Dev: Concept Doc to Design Doc (25:37) from Web.
其他補充程式練習:
製作一個正立方體邊長為2,以原點為此立方體的中心點,眼睛由(0,0,10)往(0,0,0)看,相機上方向量是(0,1,0),然後
(1.1) 對此正立方體作(a)Scale(3,2,1)(b)Translate(5,0,0)(c)Rotate(\Pi/2)。
(1.2) 將眼睛位置改為(5,5,5),往(0,0,0)看,相機上方向量不變,顯示該立方體於螢幕上。
(2) 眼睛位置由(0,0,10)移動至(5,5,5),一直保持看往原點,同時以(0,1,0)為相機上方向量,以動態方式顯示此立方體。