【Flame 學習筆記】GameWidget 元件介紹

更新於 發佈於 閱讀時間約 5 分鐘
raw-image
【Flame 學習筆記】系列文章目錄:連結
【Flutter 學習筆記】線上課程教學影片:連結
【Flutter 學習筆記】系列文章目錄:連結

在 Flutter 開發中,若你想要將遊戲實例嵌入到 Flutter 的 widget 樹中,GameWidget 是一個不可或缺的工具。這個 widget 不僅功能強大,還能作為你 Flutter 應用程式的根部件,讓我們一起來看看如何使用它。

基本用法

使用 GameWidget 的最簡單方式如下:

void main() {
runApp(
GameWidget(game: MyGame()),
);
}

這段程式碼展示了如何將 MyGame 的實例傳遞給 GameWidget,並將其作為應用程式的根部件。值得注意的是,GameWidget 也可以被嵌入到 widget 樹的任意深度,這意味著在同一個應用程式中可以有多個 GameWidget 實例。

佈局行為

GameWidget 的佈局行為是自動擴展以填滿所有可用空間。因此,當它作為根部件使用時,應用程式將會全螢幕顯示;而在其他佈局 widget 中使用時,它也會盡可能佔用空間。

結構支援功能

除了承載遊戲實例外,GameWidget 還提供了一些結構支援功能,包括:

  • loadingBuilder:在遊戲加載時顯示的 widget。
  • errorBuilder:當遊戲發生錯誤時顯示的 widget。
  • backgroundBuilder:在遊戲後面繪製裝飾的 widget。
  • overlayBuilderMap:在遊戲上方繪製一個或多個 widget。

需要注意的是,GameWidget 不會裁剪其畫布的內容,這意味著遊戲可能會在邊界外繪製(這取決於使用的相機)。如果不希望這樣,可以考慮將 widget 包裝在 Flutter 的 ClipRect 中。

建構子

GameWidget 提供了兩個建構子:

  1. GameWidget:用於渲染提供的遊戲實例。
    GameWidget({required this.game, ...})
  2. GameWidget.controlled:這個建構子會創建並擁有一個遊戲實例,使用提供的 gameFactory
    GameWidget.controlled({required this.gameFactory, ...})

這個建構子特別適合當你想將 GameWidget 放入另一個 widget 中,但又不想自己儲存遊戲實例的情況。例如:

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: GameWidget.controlled(
gameFactory: MyGame.new,
),
);
}
}

屬性介紹

  • game:要渲染的遊戲實例,若使用 controlled 建構子則為 null。
  • gameFactory:創建遊戲的函數。
  • textDirection:遊戲中文字元素的方向。
  • loadingBuilder:加載時顯示的 widget,預設為空的 Container。
  • errorBuilder:加載過程中出現錯誤時顯示的 widget。
  • backgroundBuilder:在遊戲元素和背景顏色之間構建的 widget 樹。
  • overlayBuilderMap:可在遊戲表面上顯示的 widget 集合。
  • initialActiveOverlays:遊戲啟動時顯示的 overlay 列表。
  • focusNode:控制遊戲焦點的 FocusNode。
  • autofocus:遊戲掛載後是否請求焦點,預設為 true。
  • mouseCursor:當鼠標懸停在遊戲畫布上時的鼠標形狀。
  • addRepaintBoundary:遊戲是否應該假設 RepaintBoundary 的行為,預設為 true。
留言
avatar-img
留言分享你的想法!
avatar-img
HKT實驗室
24會員
261內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
HKT實驗室的其他內容
2024/11/13
本章介紹了 FlameGame 類別,強調其基於元件的架構(Flame Component System,FCS)。FlameGame 允許開發者透過構造函數或方法添加元件,並管理遊戲的更新和渲染。文章涵蓋了遊戲循環、生命週期回調、除錯模式、背景處理及性能追蹤等功能,幫助開發者有效構建遊戲應用。
Thumbnail
2024/11/13
本章介紹了 FlameGame 類別,強調其基於元件的架構(Flame Component System,FCS)。FlameGame 允許開發者透過構造函數或方法添加元件,並管理遊戲的更新和渲染。文章涵蓋了遊戲循環、生命週期回調、除錯模式、背景處理及性能追蹤等功能,幫助開發者有效構建遊戲應用。
Thumbnail
2024/11/13
本文介紹 Flame 遊戲引擎建議的專案結構包含標準的 Flutter 資源目錄,並新增音效(audio)、圖片(images)和磚塊(tiles)子目錄。開發者需在 pubspec.yaml 中註冊資源,並可選擇自訂資源結構,使用 AssetsCache 和 Images 來管理資源位置。
Thumbnail
2024/11/13
本文介紹 Flame 遊戲引擎建議的專案結構包含標準的 Flutter 資源目錄,並新增音效(audio)、圖片(images)和磚塊(tiles)子目錄。開發者需在 pubspec.yaml 中註冊資源,並可選擇自訂資源結構,使用 AssetsCache 和 Images 來管理資源位置。
Thumbnail
2024/11/13
本文介紹 Flame 是一個模組化的 Flutter 遊戲引擎,提供簡單的遊戲循環和多種功能,如輸入處理、圖像管理和碰撞檢測。對於需要網路功能的多人遊戲,推薦使用 Nakama、Firebase 或 Supabase 等服務。
Thumbnail
2024/11/13
本文介紹 Flame 是一個模組化的 Flutter 遊戲引擎,提供簡單的遊戲循環和多種功能,如輸入處理、圖像管理和碰撞檢測。對於需要網路功能的多人遊戲,推薦使用 Nakama、Firebase 或 Supabase 等服務。
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片,以及如何載入網路圖片的完整過程。透過這篇文章,您將學會如何有效地管理圖片資源,並在應用程式中正確顯示圖片,提升您的 Flutter 開發技能。
Thumbnail
本文深入探討 Flutter 中的 Container 元件,這是一個多功能的包裝 Widget,能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距(margin)以及使用 BoxDecoration 來自訂樣式。
Thumbnail
本文深入探討 Flutter 中的 Container 元件,這是一個多功能的包裝 Widget,能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距(margin)以及使用 BoxDecoration 來自訂樣式。
Thumbnail
本章介紹了 FlameGame 類別,強調其基於元件的架構(Flame Component System,FCS)。FlameGame 允許開發者透過構造函數或方法添加元件,並管理遊戲的更新和渲染。文章涵蓋了遊戲循環、生命週期回調、除錯模式、背景處理及性能追蹤等功能,幫助開發者有效構建遊戲應用。
Thumbnail
本章介紹了 FlameGame 類別,強調其基於元件的架構(Flame Component System,FCS)。FlameGame 允許開發者透過構造函數或方法添加元件,並管理遊戲的更新和渲染。文章涵蓋了遊戲循環、生命週期回調、除錯模式、背景處理及性能追蹤等功能,幫助開發者有效構建遊戲應用。
Thumbnail
本篇文章介紹 GameWidget 是 Flutter 中用於嵌入遊戲實例的 widget,能作為應用程式的根部件或嵌入其他 widget 中。它自動擴展以填滿可用空間,並提供多種結構支援功能,如加載、錯誤處理和背景裝飾。
Thumbnail
本篇文章介紹 GameWidget 是 Flutter 中用於嵌入遊戲實例的 widget,能作為應用程式的根部件或嵌入其他 widget 中。它自動擴展以填滿可用空間,並提供多種結構支援功能,如加載、錯誤處理和背景裝飾。
Thumbnail
本文介紹 Flame 遊戲引擎建議的專案結構包含標準的 Flutter 資源目錄,並新增音效(audio)、圖片(images)和磚塊(tiles)子目錄。開發者需在 pubspec.yaml 中註冊資源,並可選擇自訂資源結構,使用 AssetsCache 和 Images 來管理資源位置。
Thumbnail
本文介紹 Flame 遊戲引擎建議的專案結構包含標準的 Flutter 資源目錄,並新增音效(audio)、圖片(images)和磚塊(tiles)子目錄。開發者需在 pubspec.yaml 中註冊資源,並可選擇自訂資源結構,使用 AssetsCache 和 Images 來管理資源位置。
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News