Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

淺談JavaFX 遊戲程式

5,704 views

Published on

JavaFX之所以特殊,除了提供豐富的GUI物件與CSS樣式之外,最重要的是JavaFX提供物件的特殊效果(Effect),透過特殊效果更能突顯物件的立體感與層次感,特殊效果分為陰影、漸層、模糊、反射、高光與深褐色調等。此外,JavaFX並提供處理動畫(Animation)的類別,讓物件產生如同動畫般的移動效果,動畫效果分為時間軸(Timeline)與轉換(Transition)兩類。本議題介紹以JavaFX開發遊戲程式之基礎,依序說明JavaFX程式架構、事件、繪圖、特殊效果與動畫等主題,並介紹相關遊戲。

Published in: Technology
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

淺談JavaFX 遊戲程式

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

×