淺談javafx 遊戲程式
DESCRIPTION
JavaFX之所以特殊，除了提供豐富的GUI物件與CSS樣式之外，最重要的是JavaFX提供物件的特殊效果（Effect），透過特殊效果更能突顯物件的立體感與層次感，特殊效果分為陰影、漸層、模糊、反射、高光與深褐色調等。此外，JavaFX並提供處理動畫（Animation）的類別，讓物件產生如同動畫般的移動效果，動畫效果分為時間軸（Timeline）與轉換（Transition）兩類。本議題介紹以JavaFX開發遊戲程式之基礎，依序說明JavaFX程式架構、事件、繪圖、特殊效果與動畫等主題，並介紹相關遊戲。TRANSCRIPT
淺談JavaFX遊戲程式
臺北商業大學 企業管理學系
黃嘉輝 副教授
講師簡介現職：
臺北商業大學企業管理學系專任副教授。
學歷：
交通大學資訊管理研究所博士。
東海大學工業工程系學士。
講師簡介相關著作：
遊戲程式設計。
深入研究 。
完全探索 遊戲程式設計。
深入研究 。
完全探索網路程式設計 使用 。
範例網址：
特殊效果
特殊效果
之所以特殊，除了提供豐富的 物件、 樣式等之外，最重要的是 提供物件的特殊效果
，更突顯物件的立體感與層次感。
特殊效果分為陰影、漸層、模糊、反射、高光與深褐色調等。
特殊效果
特殊效果特殊效果分別由以下類別處理：
：
：
線性漸層：
放射性漸層：
：
：
：
反射：
高光：
深褐色調：
陰影
陰影
陰影 分為 與 ，分別由 與 類別處理，物件加入陰影效果，更能突顯物件的立體感。
其陰影在物件的外圍，如同光由物件的上方照射所產生的陰影，因此稱為 。
以 參數設定陰影模糊核心半徑的擴散 比例，其效果如下圖所示：
其中建構函式的參數分別為：
：設定陰影模糊核心的半徑。
：設定陰影的顏色。
：設定陰影的水平與垂直偏移位置。
：設定陰影模糊核心半徑的擴散比例，介於與 之間。
：設定模糊陰影的類型。
設定陰影的顏色
設定陰影的水平偏移位置
設定陰影的垂直偏移位置
設定陰影模糊核心的半徑
設定陰影效果
其陰影在物件的內部，因此稱為 。
與 的最大差別在於， 以參數設定陰影模糊核心半徑的扼制 比例，扼制比例介於 與 之間，若為 ，則陰影將全由模糊邏輯決定；若為 ，則陰影將由物件內部擴散至物件邊緣，導致陰影幾乎佔據整個物件內部。其效果如下圖所示：
其中建構函式的參數分別為：
：設定陰影模糊核心的半徑。
：設定陰影的顏色。
：設定陰影的水平與垂直偏移位置。
：設定陰影模糊核心半徑的扼制比例，介於與 之間。
：設定模糊陰影的類型。
設定陰影的顏色
設定陰影模糊核心半徑的扼制比例
設定陰影的水平偏移位置
設定陰影的垂直偏移位置
設定陰影效果
陰影
模糊
模糊
模糊 效果分為 、 與三種，分別由 、 與
類別處理，皆繼承自 抽象類別。
以 盒狀過濾核心 處理模糊效果，如同盒子一般，以寬度與高度設定 模糊效果，並以模糊迭代數目 設定模糊處理的次數，其中迴圈遞迴一次稱為一次迭代，其效果如下圖所示：
其中建構函式的參數分別為：
：設定模糊的寬度，介於 與 之間。
：設定模糊的高度，介於 與 之間。
：設定模糊迭代數目，介於 與 之間。
設定模糊的寬度
設定模糊的高度
設定模糊迭代數目
設定模糊效果
以 高斯迴旋核心 處理模糊效果，僅以高斯模糊半徑設定模糊，其效果如下圖所示：
其中建構函式的參數為：
：設定高斯模糊半徑，介於 與 之間。
設定高斯模糊半徑
設定模糊效果
與 一樣，同樣以高斯迴旋核心 處理模糊效果，但除
了以高斯模糊半徑設定模糊之外，並加入模糊角度，使產生如同物件行進中的移動感覺，其效果如
下圖所示：
其中建構函式的參數分別為：
：設定模糊的角度。
：設定高斯模糊半徑，介於 與 之間。
設定模糊的角度
設定高斯模糊半徑
設定模糊效果
模糊
動畫
動畫
除了特殊效果之外， 並提供處理動畫效果的類別，讓物件產生如同動畫般的移動效果。
動畫由許多靜止的圖畫所組成，以一定的速度連續播放，由於眼睛因視覺暫留的關係產生錯覺，誤以為畫面為動態。
動畫效果分為時間軸 與轉換 ，皆繼承自 抽象類別。
時間軸
時間軸
在動畫處理中，以時間軸 設定每秒所顯示的圖畫數目，稱為畫格 ，通常每秒約 至張畫格。
時間軸由 類別處理，並以類別設定動畫畫格。
時間軸
其中 類別的參數分別為：
：設定畫格播放的間隔時間。
：設定於指定動畫區間插入的鍵值 。
：設定畫格的名稱。
：設定當畫格結束時的 。
時間軸
為處理動畫效果，首先以 類別設定畫格播放的間隔時間，以 毫秒為例：
設定模糊效果
時間軸
接著以 介面設定當畫格結束時的，完成設定之後，則以 類別設定畫格：
設定當畫格結束時的
…
設定畫格
時間軸
最後以 類別設定時間軸，並以 方法設定播放次數為無限次與 方法播放畫格：
設定 時間軸
設定播放次數
播放畫格
時間軸
轉換
轉換
除了時間軸之外，另一種動畫效果為轉換 ，轉換是指由一種狀態轉變成另一種狀態的過程。
轉換分為淡入淡出 、填滿 、並行 、路徑 、暫停 、旋轉 、比例 、循序
、筆觸 、轉移 等。
轉換
轉換轉換分別由以下類別處理：
淡入淡出：
填滿：
並行：
路徑：
暫停：
旋轉：
比例：
循序：
筆觸：
轉移：
並行
並行
並行 是將多種轉換效果整合在一起執行的過程，凡繼承自 抽象類別的動畫效果，均可做為並行過程的一部份，因此並行較其他轉換效果更為豐富多樣。
並行
其中建構函式的參數分別為：
：設定執行並行效果的物件。
：設定轉換效果。
並行淡入淡出效果
…旋轉效果
…並行效果
執行並行效果
並行
路徑
路徑
路徑 是將物件依指定路徑軌跡移動的過程，其中路徑軌跡由 類別設定。
路徑
其中建構函式的參數分別為：
：設定路徑效果的間隔時間，可由 類別定義。
：設定路徑軌跡。
：設定執行路徑效果的物件。
路徑設定路徑
設定路徑效果
執行路徑效果
路徑
新增 抽象類別，繼承自 抽象類
別的 物件包括 等。
抽象類別
抽象類別定義以下屬性：
：多邊體 由數個面 所組成，每一個面由數個頂點 所設定，在描繪 物件時，面對鏡頭的一面稱為 ，背對鏡頭的一面稱為
，由於描繪 物件需要複雜的計算，因此為增加執行效率，通常會省略描繪背對鏡頭的一面，此功能稱為
。 以 屬性設定是否省略描繪或 ，分別為 、
或 ，代表省略描繪 、 或不省略。
抽象類別
：定義 物件的繪製方式，分別為或 ，代表填滿 物件表面或以
方式呈現。
：定義 物件表面的材質。
抽象類別
抽象類別提供以下方法：：取得省略描繪的一面，回傳 、
或 ，代表省略描繪 、 或不省略。
：設定省略描繪的一面。
：取得 物件的繪製方式，回傳 或，代表填滿 物件表面或以 方式呈現。
：設定 物件的繪製方式。
：取得 物件表面的材質。
：設定 物件表面的材質。
類別以頂點座標 、貼圖座標與三角形所形成的面 三者組成
物體。
以立方體 為例，共有八個頂點與六個面，但就而言，各個面是由兩個三角形所組成，因
此共需設定八個頂點與十二個三角形，此外以「右手定則」定義各面的上下方向。
下圖為立方體以 方式呈現的結果，可藉此瞭解如何以三角形組成面：
以大二十面體 為例，其頂點座標分別如下：
…
貼圖座標 分別如下：1
3
0 2
4 5
6 7 8
面 之組合分別如下：
…
