【文章翻譯】How we built the Super Dash demo in Flutter and Flame in just six weeks!

【文章內容使用 Gemini 1.5 Pro 自動產生】

了解我們如何用兩位開發人員在桌面瀏覽器、Android 和 iOS 上推出了 Super Dash，一款多平台遊戲範例

Super Dash 是一款使用 Endless Runner Flame Template 建立的新 Flutter 範例遊戲，它隨最近更新的 Flutter 休閒遊戲工具包推出。

我們與 Google 的 Flutter 團隊合作，在短短六週內使用 Flutter 和 Flame 從想法到推出開發了一款適用於 Android、iOS 和 Web 的多平台遊戲。這款遊戲的靈感來自超級瑪利歐等懷舊經典，玩家可以在橫向捲軸平台遊戲中扮演 Dash，她會收集橡果和雞蛋以最大限度地提高分數，並逐級闖關。

這款遊戲可以在桌面瀏覽器上玩，並可在 Apple App Store 和 Google Play 上使用行動裝置玩。這款遊戲的程式碼（包括行動平台）是開源的，可在 GitHub 上的 super_dash 儲存庫中取得。

如何遊玩

Dash 會在每一關中收集橡果（10 分）和雞蛋（1000 分）以提高分數。按下空格鍵或點選螢幕即可開始遊戲，並跳躍避開蟲子和掉進坑洞，以完成每一關。抓住金羽毛即可將 Dash 變身為鳳凰，增加她的跳躍高度，並讓她獲得額外一條生命。

使用 Flutter 快速無縫地進行遊戲開發

Flutter 使我們能夠在短短六週內，僅憑我們團隊中的兩位開發人員，將想法變成實際的遊戲。這個框架能夠透過熱重載功能快速迭代變更，加上平台的可組合性、模組化和可用工具，讓團隊能夠快速行動，並與設計團隊的合作成果一起快速測試和開發遊戲。

它還加快了團隊針對行動裝置建立響應式 UI 的速度，同時也鎖定瀏覽器和桌面。這讓我們能夠將更多開發時間投入到遊戲本身，並減少花在確保遊戲在不同設備和螢幕上運作的時間。

此外，Flutter 和 Dart 強大的套件生態系統以及與 Firebase 等 Google 服務的整合，讓我們能夠輕鬆找到工具，例如 Flutter_Bloc，它使我們能夠無縫建立遊戲邏輯和狀態管理。

Flame 動力的 Flutter 冒險

Super Dash 使用 Flame，一個用 Flutter 建立的開源遊戲引擎。雖然許多休閒遊戲可以使用 Flutter 單獨建立，但 Flame 擴展了 Flutter 的遊戲開發功能，適用於需要遊戲迴圈、碰撞和地圖的遊戲。

Super Dash 利用 Leap 專案擴展了在休閒遊戲工具包中可用的 Flame Template 的基本功能，這是一個由 Kurtome（Flame 社群成員）建立的開源專案。在使用 Leap 之前，您應該對 Flame 的 FlameGame、PositionComponent、TiledComponent 和 Camera 組件有基本的了解。

在儲存庫中，您會找到我們為除錯遊戲而建立的自訂工具，包括帶有各種動作和工具的 macOS 版本。我們加入了一個「傳送至終點」按鈕，讓 Dash 無需玩完全程就能直接到達終點畫面，以及另一個讓 Dash 不死的按鈕，讓您可以在不重新啟動的情況下玩完全程。您可以在 super_dash 儲存庫中找到這個工具，並在建立或擴展遊戲時親自嘗試。

所有物理物件都有矩形碰撞盒，由物件的大小和位置定義，它們不必與物件的視覺外觀相同，這大大提高了可玩性。

團隊使用 Firebase 分發輕鬆共享應用程式和遊戲的測試版本，特別是 iOS，因為 iOS 有時會很複雜。

設計一個互動式的 Dash 世界

Super Dash 的設計非常直觀，易於玩。我們使用開源的 Tiled 工具設計關卡，並使用 leap 套件將關卡整合到遊戲中。

Leap 使用 flame_tiled 套件（其中實作了 TiledComponent），並在此基礎上建立，加入了平台物理和有用的類別，例如適用於物件、敵人和玩家的 PhysicalEntity。flame_tiled 套件解析來自 tiled 的檔案以渲染地圖、圖層和物件。

LeapMap

一個透過 LeapGame.leapMap 可以存取的組件，LeapMap 管理 Tiledmap，並自動為地面地形建立具有適當碰撞偵測的方塊。

void main() {
  runApp(GameWidget(game: MyLeapGame()));
}

class MyLeapGame extends LeapGame with HasTappables, HasKeyboardHandlerComponents {
  late final Player player;

  @override
  Future<void> onLoad() async {
    await super.onLoad();

    // "map.tmx" should be a Tiled map the meets the Leap requirements defined below
    await loadWorldAndMap('map.tmx', 16);
    setFixedViewportInTiles(32, 16);

    player = Player();
    add(player);
    camera.followComponent(player);
  }
}

若要加入自訂行為，請透過 LeapGame.leapMap.tiledMap 存取圖層，並為方塊或物件整合您自己的特殊行為

自訂圖層名稱和類別

您可以要求 Leap 使用不同的類別、類型或名稱。若要這樣做，請建立並將自訂 LeapConfiguration 傳遞給遊戲。

以下範例建立了自訂 LeapConfiguration：

class MyLeapGame extends LeapGame {
  MyLeapGame() : super(
    configuration: LeapConfiguration(
      tiled: const TiledOptions(
        groundLayerName: 'Ground',
        metadataLayerName: 'Metadata',
        playerSpawnClass: 'PlayerSpawn',
        hazardClass: 'Hazard',
        damageProperty: 'Damage',
        platformClass: 'Platform',
        slopeType: 'Slope',
        slopeRightTopProperty: 'RightTop',
        slopeLeftTopProperty: 'LeftTop',
      ),
    ),
  );
}

我們與 HOPR Studio 合作設計和製作遊戲的美術作品。為了建立更無縫的工作流程，我們建立了描述項目行為的通用語言。例如，一個「I」代表無限，表示項目會以相同的方式重複執行（從左到右或反之亦然）。這使得每個團隊更容易理解遊戲的目標。地圖準備好後，我們便將其整合到遊戲開發中。

接下來的目標

Super Dash 範例在 2023 年 11 月更新的 Flutter 休閒遊戲工具包之後發佈，並使用了新的遊戲範例，展示了 Flame。透過強調我們在短短六週內就完成了從想法到推出，我們希望展示 Flutter 如何幫助您提高生產力，並在各種平台上接觸更多使用者。查看開源程式碼以了解我們是如何建立的。

現在可以在桌面瀏覽器上玩遊戲，或在 Apple App Store 和 Google Play 上下載行動裝置應用程式！你能打破最高分記錄嗎？

我們如何在短短六週內使用 Flutter 和 Flame 建立 Super Dash 範例！最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。