Halaman ini diterjemahkan oleh Cloud Translation API.

Pengantar Flame dengan Flutter

1. Pengantar

Flame adalah game engine 2D berbasis Flutter. Dalam codelab ini, Anda akan membuat game yang terinspirasi oleh salah satu game klasik tahun 70-an, Breakout karya Steve Wozniak. Anda akan menggunakan Komponen Flame untuk menggambar kelelawar, bola, dan batu bata. Anda akan menggunakan Efek Flame untuk menganimasikan gerakan kelelawar dan melihat cara mengintegrasikan Flame dengan sistem pengelolaan status Flutter.

Setelah selesai, game Anda akan terlihat seperti GIF animasi ini, meskipun sedikit lebih lambat.

Rekaman layar game yang sedang dimainkan. Game telah dipercepat secara signifikan.

Yang akan Anda pelajari

Cara kerja dasar Flame, dimulai dengan GameWidget.
Cara menggunakan game loop.
Cara kerja Component Flame. Widget ini mirip dengan Widget Flutter.
Cara menangani tabrakan.
Cara menggunakan Effect untuk menganimasikan Component.
Cara menempatkan overlay Flutter Widget di atas game Flame.
Cara mengintegrasikan Flame dengan pengelolaan status Flutter.

Yang akan Anda build

Dalam codelab ini, Anda akan membuat game 2D menggunakan Flutter dan Flame. Setelah selesai, game Anda harus memenuhi persyaratan berikut:

Berfungsi di keenam platform yang didukung Flutter: Android, iOS, Linux, macOS, Windows, dan web
Pertahankan minimal 60 fps menggunakan loop game Flame.
Gunakan kemampuan Flutter seperti paket google_fonts dan flutter_animate untuk menciptakan kembali nuansa game arcade tahun 80-an.

2. Menyiapkan lingkungan Flutter Anda

Editor

Untuk menyederhanakan codelab ini, codelab ini mengasumsikan bahwa Visual Studio Code (VS Code) adalah lingkungan pengembangan Anda. VS Code gratis dan dapat digunakan di semua platform utama. Kita menggunakan VS Code untuk codelab ini karena instruksi ini menggunakan default untuk pintasan khusus VS Code. Tugas menjadi lebih mudah: "klik tombol ini" atau "tekan tombol ini untuk melakukan X" daripada "lakukan tindakan yang sesuai pada editor Anda untuk melakukan X".

Anda dapat menggunakan editor apa pun yang Anda suka: Android Studio, IDE IntelliJ lainnya, Emacs, Vim, atau Notepad++. Semua editor tersebut dapat digunakan dengan Flutter.

VS Code dengan beberapa kode Flutter

Memilih target pengembangan

Flutter menghasilkan aplikasi untuk beberapa platform. Aplikasi Anda dapat berjalan pada setiap sistem operasi berikut:

iOS
Android
Windows
macOS
Linux
web

Memilih satu sistem operasi sebagai target pengembangan adalah praktik yang umum. Sistem operasi ini adalah tempat aplikasi Anda berjalan selama pengembangan.

Gambar yang menggambarkan laptop dan ponsel yang terhubung ke laptop dengan kabel. Laptop diberi label sebagai

Misalnya: anggaplah Anda menggunakan laptop Windows untuk mengembangkan aplikasi Flutter. Kemudian, Anda memilih Android sebagai target pengembangan. Untuk melihat pratinjau aplikasi, Anda memasang perangkat Android ke laptop Windows menggunakan kabel USB dan aplikasi yang Anda kembangkan berjalan di perangkat Android yang terpasang, atau di emulator Android. Anda dapat memilih Windows sebagai target pengembangan, yang menjalankan aplikasi yang Anda kembangkan sebagai aplikasi Windows bersama editor Anda.

Tentukan pilihan Anda sebelum melanjutkan. Anda dapat menjalankan aplikasi Anda pada sistem operasi lainnya kapan saja setelahnya. Memilih target pengembangan akan mempermudah langkah berikutnya.

Menginstal Flutter

Petunjuk terbaru tentang cara menginstal Flutter SDK dapat ditemukan di docs.flutter.dev.

Instruksi di situs Flutter membahas penginstalan SDK, alat terkait target pengembangan, dan plugin editor. Untuk codelab ini, instal software berikut:

Flutter SDK
Visual Studio Code dengan plugin Flutter
Software compiler untuk target pengembangan pilihan Anda. (Anda memerlukan Visual Studio untuk menargetkan Windows atau Xcode untuk menargetkan macOS atau iOS)

Di bagian berikutnya, Anda akan membuat proyek Flutter pertama Anda.

Jika Anda perlu memecahkan masalah, Anda mungkin merasa beberapa pertanyaan dan jawaban ini (dari StackOverflow) berguna untuk pemecahan masalah.

Pertanyaan Umum (FAQ)

3. Membuat proyek

Membuat proyek Flutter pertama Anda

Hal ini melibatkan pembukaan VS Code dan pembuatan template aplikasi Flutter di direktori yang Anda pilih.

Luncurkan Visual Studio Code.
Buka palet perintah (F1 atau Ctrl+Shift+P atau Shift+Cmd+P), lalu ketik "flutter new". Saat muncul, pilih perintah Flutter: New Project.

VS Code dengan

Pilih Empty Application. Pilih direktori tempat Anda ingin membuat project. Ini harus berupa direktori yang tidak memerlukan hak istimewa yang ditingkatkan atau memiliki spasi di jalur direktori. Contohnya termasuk direktori utama Anda atau C:\src\.

VS Code dengan Aplikasi Kosong ditampilkan sebagai dipilih sebagai bagian dari alur aplikasi baru

Beri nama project Anda brick_breaker. Sisa codelab ini mengasumsikan Anda menamai aplikasi Anda brick_breaker.

VS Code dengan

Flutter kini membuat folder proyek Anda dan VS Code membuka folder tersebut. Anda sekarang akan menimpa isi dua file dengan scaffold dasar aplikasi.

Menyalin & Menempelkan aplikasi awal

Tindakan ini akan menambahkan kode contoh yang disediakan dalam codelab ini ke aplikasi Anda.

Di panel sebelah kiri VS Code, klik Explorer dan buka file pubspec.yaml.

Screenshot sebagian VS Code dengan panah yang menandai lokasi file pubspec.yaml

Ganti konten file ini dengan kode berikut:

pubspec.yaml

name: brick_breaker
description: "Re-implementing Woz's Breakout"
publish_to: "none"
version: 0.1.0

environment:
  sdk: ^3.8.0

dependencies:
  flutter:
    sdk: flutter
  flame: ^1.28.1
  flutter_animate: ^4.5.2
  google_fonts: ^6.2.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

File pubspec.yaml menentukan informasi dasar tentang aplikasi Anda, seperti versi aplikasi saat ini, dependensi aplikasi, dan aset yang digunakan oleh aplikasi untuk pengiriman.

Buka file main.dart di direktori lib/.

Screenshot sebagian VS Code dengan panah yang menunjukkan lokasi file main.dart

Ganti konten file ini dengan kode berikut:

lib/main.dart

import 'package:flame/game.dart';
import 'package:flutter/material.dart';

void main() {
  final game = FlameGame();
  runApp(GameWidget(game: game));
}

Jalankan kode ini untuk memverifikasi bahwa semuanya berfungsi. Jendela baru dengan latar belakang hitam kosong akan ditampilkan. Game terburuk di dunia kini dirender pada 60 fps.

Screenshot yang menampilkan jendela aplikasi brick_breaker yang benar-benar hitam.

4. Buat game

Menilai permainan

Game yang dimainkan dalam dua dimensi (2D) memerlukan area bermain. Anda akan membuat area dengan dimensi tertentu, lalu menggunakan dimensi ini untuk menentukan ukuran aspek lain dalam game.

Ada berbagai cara untuk mengatur tata letak koordinat di area bermain. Dengan satu konvensi, Anda dapat mengukur arah dari tengah layar dengan asal (0,0) di tengah layar, nilai positif memindahkan item ke kanan di sepanjang sumbu x dan ke atas di sepanjang sumbu y. Standar ini berlaku untuk sebagian besar game saat ini, terutama game yang melibatkan tiga dimensi.

Konvensi saat game Breakout asli dibuat adalah menetapkan asal di sudut kiri atas. Arah x positif tetap sama, tetapi y dibalik. Arah x positif adalah ke kanan dan y adalah ke bawah. Agar tetap sesuai dengan era tersebut, game ini menetapkan asal ke sudut kiri atas.

Catatan: Mungkin tampak membingungkan bahwa cara kerja dimensi di era yang berbeda ini juga berbeda. Ada dua hal yang perlu diperhatikan di sini.

Pertama, setelan default untuk orang yang bekerja di game bergantung pada konteks default mereka. Bagi programmer pada tahun 70-an dan 80-an, lingkungan visual default adalah buffer teks dengan (0,0) di kiri atas. Konvensi ini diteruskan ke default dimensi grafisnya. Pada tahun 90-an, saat game 3D menjadi standar, programmer yang mengerjakan game ini lebih berfokus pada matematika tiga dimensi, sehingga menempatkan (0,0) di tengah layar menjadi lebih masuk akal.

Kedua, Anda dapat mengekspresikan game ini menggunakan salah satu konvensi ini, dan akan berfungsi, asalkan semuanya konsisten. Breakout dapat diekspresikan dengan (0,0) yang ditempatkan di mana saja di layar dan pemain game tidak akan melihat perubahan apa pun. Modelkan dunia dengan cara yang memudahkan Anda mengekspresikan masalah Anda.

Buat file bernama config.dart di direktori baru bernama lib/src. File ini akan mendapatkan lebih banyak konstanta dalam langkah-langkah berikut.

lib/src/config.dart

const gameWidth = 820.0;
const gameHeight = 1600.0;

Game ini akan memiliki lebar 820 piksel dan tinggi 1.600 piksel. Area game diskalakan agar sesuai dengan jendela tempat game ditampilkan, tetapi semua komponen yang ditambahkan ke layar sesuai dengan tinggi dan lebar ini.

Membuat PlayArea

Dalam game Breakout, bola memantul dari dinding area bermain. Untuk mengakomodasi tabrakan, Anda memerlukan komponen PlayArea terlebih dahulu.

Buat file bernama play_area.dart di direktori baru bernama lib/src/components.
Tambahkan kode berikut ke file ini.

lib/src/components/play_area.dart

import 'dart:async';

import 'package:flame/components.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';

class PlayArea extends RectangleComponent with HasGameReference<BrickBreaker> {
  PlayArea() : super(paint: Paint()..color = const Color(0xfff2e8cf));

  @override
  FutureOr<void> onLoad() async {
    super.onLoad();
    size = Vector2(game.width, game.height);
  }
}

Jika Flutter memiliki Widget, Flame memiliki Component. Jika aplikasi Flutter terdiri dari pembuatan hierarki widget, game Flame terdiri dari pemeliharaan hierarki komponen.

Di sinilah letak perbedaan menarik antara Flutter dan Flame. Hierarki widget Flutter adalah deskripsi sementara yang dibuat untuk digunakan dalam memperbarui lapisan RenderObject yang persisten dan dapat diubah. Komponen Flame bersifat persisten dan dapat diubah, dengan harapan developer akan menggunakan komponen ini sebagai bagian dari sistem simulasi.

Komponen Flame dioptimalkan untuk mengekspresikan mekanisme game. Codelab ini akan dimulai dengan loop game, yang ditampilkan di langkah berikutnya.

Untuk mengontrol kekacauan, tambahkan file yang berisi semua komponen dalam project ini. Buat file components.dart di lib/src/components dan tambahkan konten berikut.

lib/src/components/components.dart

export 'play_area.dart';

Direktif export memainkan peran terbalik dari import. File ini menyatakan fungsi apa yang diekspos saat diimpor ke file lain. File ini akan memiliki lebih banyak entri saat Anda menambahkan komponen baru pada langkah-langkah berikutnya.

Membuat game Flame

Untuk menghilangkan garis merah dari langkah sebelumnya, buat subclass baru untuk FlameGame Flame.

Buat file bernama brick_breaker.dart di lib/src, lalu tambahkan kode berikut.

lib/src/brick_breaker.dart

import 'dart:async';

import 'package:flame/components.dart';
import 'package:flame/game.dart';

import 'components/components.dart';
import 'config.dart';

class BrickBreaker extends FlameGame {
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  double get width => size.x;
  double get height => size.y;

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());
  }
}

File ini mengoordinasikan tindakan game. Selama pembuatan instance game, kode ini mengonfigurasi game untuk menggunakan rendering resolusi tetap. Game diubah ukurannya untuk mengisi layar yang memuatnya dan menambahkan letterboxing sesuai kebutuhan.

Anda mengekspos lebar dan tinggi game sehingga komponen turunan, seperti PlayArea, dapat menyesuaikan ukurannya sendiri.

Dalam metode yang diganti onLoad, kode Anda melakukan dua tindakan.

Mengonfigurasi kiri atas sebagai penanda untuk jendela bidik. Secara default, viewfinder menggunakan bagian tengah area sebagai anchor untuk (0,0).
Menambahkan PlayArea ke world. Dunia mewakili dunia game. Tampilan ini memproyeksikan semua turunannya melalui transformasi tampilan CameraComponent.

Menampilkan game di layar

Untuk melihat semua perubahan yang telah Anda buat pada langkah ini, perbarui file lib/main.dart Anda dengan perubahan berikut.

lib/main.dart

import 'package:flame/game.dart';
import 'package:flutter/material.dart';

import 'src/brick_breaker.dart';                                // Add this import

void main() {
  final game = BrickBreaker();                                  // Modify this line
  runApp(GameWidget(game: game));
}

Setelah Anda melakukan perubahan ini, mulai ulang game. Game akan terlihat seperti gambar berikut.

Screenshot yang menampilkan jendela aplikasi brick_breaker dengan persegi panjang berwarna pasir di tengah jendela aplikasi

Pada langkah berikutnya, Anda akan menambahkan bola ke dunia, dan membuatnya bergerak.

5. Menampilkan bola

Membuat komponen bola

Menempatkan bola bergerak di layar melibatkan pembuatan komponen lain dan menambahkannya ke dunia game.

Edit konten file lib/src/config.dart sebagai berikut.

lib/src/config.dart

const gameWidth = 820.0;
const gameHeight = 1600.0;
const ballRadius = gameWidth * 0.02;                            // Add this constant

Pola desain untuk menentukan konstanta bernama sebagai nilai turunan akan muncul berkali-kali dalam codelab ini. Dengan begitu, Anda dapat mengubah gameWidth dan gameHeight tingkat teratas untuk mempelajari bagaimana tampilan dan nuansa game berubah sebagai hasilnya.

Buat komponen Ball dalam file bernama ball.dart di lib/src/components.

lib/src/components/ball.dart

import 'package:flame/components.dart';
import 'package:flutter/material.dart';

class Ball extends CircleComponent {
  Ball({
    required this.velocity,
    required super.position,
    required double radius,
  }) : super(
         radius: radius,
         anchor: Anchor.center,
         paint: Paint()
           ..color = const Color(0xff1e6091)
           ..style = PaintingStyle.fill,
       );

  final Vector2 velocity;

  @override
  void update(double dt) {
    super.update(dt);
    position += velocity * dt;
  }
}

Sebelumnya, Anda menentukan PlayArea menggunakan RectangleComponent, jadi dapat diasumsikan bahwa ada lebih banyak bentuk. CircleComponent, seperti RectangleComponent, berasal dari PositionedComponent, sehingga Anda dapat memosisikan bola di layar. Yang lebih penting, posisinya dapat diperbarui.

Komponen ini memperkenalkan konsep velocity, atau perubahan posisi dari waktu ke waktu. Kecepatan adalah objek Vector2 karena kecepatan adalah kecepatan dan arah. Untuk memperbarui posisi, ganti metode update, yang dipanggil oleh mesin game untuk setiap frame. dt adalah durasi antara frame sebelumnya dan frame ini. Hal ini memungkinkan Anda beradaptasi dengan faktor-faktor seperti kecepatan frame yang berbeda (60 Hz atau 120 Hz) atau frame panjang karena komputasi yang berlebihan.

Perhatikan baik-baik update position += velocity * dt. Berikut cara menerapkan pembaruan simulasi gerakan diskrit dari waktu ke waktu.

Untuk menyertakan komponen Ball dalam daftar komponen, edit file lib/src/components/components.dart sebagai berikut.

lib/src/components/components.dart

export 'ball.dart';                           // Add this export
export 'play_area.dart';

Tambahkan bola ke dunia

Anda memiliki bola. Tempatkan di dunia dan siapkan agar dapat bergerak di area bermain.

Edit file lib/src/brick_breaker.dart sebagai berikut.

lib/src/brick_breaker.dart

import 'dart:async';
import 'dart:math' as math;                                     // Add this import

import 'package:flame/components.dart';
import 'package:flame/game.dart';

import 'components/components.dart';
import 'config.dart';

class BrickBreaker extends FlameGame {
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  final rand = math.Random();                                   // Add this variable
  double get width => size.x;
  double get height => size.y;

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());

    world.add(
      Ball(                                                     // Add from here...
        radius: ballRadius,
        position: size / 2,
        velocity: Vector2(
          (rand.nextDouble() - 0.5) * width,
          height * 0.2,
        ).normalized()..scale(height / 4),
      ),
    );

    debugMode = true;                                           // To here.
  }
}

Perubahan ini menambahkan komponen Ball ke world. Untuk menyetel position bola ke tengah area tampilan, kode terlebih dahulu membagi dua ukuran game, karena Vector2 memiliki penggantian operator (* dan /) untuk menskalakan Vector2 dengan nilai skalar.

Untuk mengatur bola velocity melibatkan lebih banyak kompleksitas. Tujuannya adalah memindahkan bola ke bawah layar dalam arah acak dengan kecepatan yang wajar. Panggilan ke metode normalized membuat objek Vector2 yang ditetapkan ke arah yang sama dengan Vector2 asli, tetapi diperkecil hingga jarak 1. Hal ini menjaga kecepatan bola tetap konsisten ke arah mana pun bola bergerak. Kecepatan bola kemudian ditingkatkan menjadi 1/4 dari tinggi game.

Untuk mendapatkan berbagai nilai ini dengan benar, diperlukan beberapa iterasi, yang juga dikenal sebagai uji coba dalam industri ini.

Baris terakhir mengaktifkan tampilan proses debug, yang menambahkan informasi tambahan ke tampilan untuk membantu proses debug.

Saat Anda menjalankan game sekarang, game akan terlihat seperti tampilan berikut.

Screenshot yang menampilkan jendela aplikasi brick_breaker dengan lingkaran biru di atas persegi panjang berwarna pasir. Lingkaran biru diberi anotasi dengan angka yang menunjukkan ukuran dan lokasinya di layar

Komponen PlayArea dan Ball memiliki informasi proses debug, tetapi latar belakang memangkas angka PlayArea. Alasan semua informasi debug ditampilkan adalah karena Anda mengaktifkan debugMode untuk seluruh hierarki komponen. Anda juga dapat mengaktifkan proses debug hanya untuk komponen yang dipilih, jika hal itu lebih berguna.

Jika Anda memulai ulang game beberapa kali, Anda mungkin melihat bahwa bola tidak berinteraksi dengan dinding seperti yang diharapkan. Untuk mendapatkan efek tersebut, Anda perlu menambahkan deteksi tabrakan, yang akan Anda lakukan pada langkah berikutnya.

6. Melompat-lompat

Menambahkan deteksi tabrakan

Deteksi tabrakan menambahkan perilaku saat game Anda mengenali saat dua objek bersentuhan satu sama lain.

Untuk menambahkan deteksi tabrakan ke game, tambahkan mixin HasCollisionDetection ke game BrickBreaker seperti yang ditunjukkan dalam kode berikut.

lib/src/brick_breaker.dart

import 'dart:async';
import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/game.dart';

import 'components/components.dart';
import 'config.dart';

class BrickBreaker extends FlameGame with HasCollisionDetection { // Modify this line
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  final rand = math.Random();
  double get width => size.x;
  double get height => size.y;

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());

    world.add(
      Ball(
        radius: ballRadius,
        position: size / 2,
        velocity: Vector2(
          (rand.nextDouble() - 0.5) * width,
          height * 0.2,
        ).normalized()..scale(height / 4),
      ),
    );

    debugMode = true;
  }
}

Sistem ini melacak hitbox komponen dan memicu callback tabrakan pada setiap tick game.

Untuk mulai mengisi hitbox game, ubah komponen PlayArea seperti yang ditunjukkan:

lib/src/components/play_area.dart

import 'dart:async';

import 'package:flame/collisions.dart';                         // Add this import
import 'package:flame/components.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';

class PlayArea extends RectangleComponent with HasGameReference<BrickBreaker> {
  PlayArea()
    : super(
        paint: Paint()..color = const Color(0xfff2e8cf),
        children: [RectangleHitbox()],                          // Add this parameter
      );

  @override
  FutureOr<void> onLoad() async {
    super.onLoad();
    size = Vector2(game.width, game.height);
  }
}

Menambahkan komponen RectangleHitbox sebagai turunan RectangleComponent akan membuat kotak hit untuk deteksi tabrakan yang sesuai dengan ukuran komponen induk. Ada konstruktor pabrik untuk RectangleHitbox yang disebut relative untuk saat Anda menginginkan hitbox yang lebih kecil, atau lebih besar, daripada komponen induk.

Memantulkan bola

Sejauh ini, penambahan deteksi tabrakan tidak memengaruhi gameplay. Nilai ini akan berubah setelah Anda mengubah komponen Ball. Perilaku bola yang harus berubah saat bertabrakan dengan PlayArea.

Ubah komponen Ball sebagai berikut.

lib/src/components/ball.dart

import 'package:flame/collisions.dart';                         // Add this import
import 'package:flame/components.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';                                 // And this import
import 'play_area.dart';                                        // And this one too

class Ball extends CircleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {   // Add these mixins
  Ball({
    required this.velocity,
    required super.position,
    required double radius,
  }) : super(
         radius: radius,
         anchor: Anchor.center,
         paint: Paint()
           ..color = const Color(0xff1e6091)
           ..style = PaintingStyle.fill,
         children: [CircleHitbox()],                            // Add this parameter
       );

  final Vector2 velocity;

  @override
  void update(double dt) {
    super.update(dt);
    position += velocity * dt;
  }

  @override                                                     // Add from here...
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    if (other is PlayArea) {
      if (intersectionPoints.first.y <= 0) {
        velocity.y = -velocity.y;
      } else if (intersectionPoints.first.x <= 0) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.x >= game.width) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.y >= game.height) {
        removeFromParent();
      }
    } else {
      debugPrint('collision with $other');
    }
  }                                                             // To here.
}

Contoh ini membuat perubahan besar dengan penambahan callback onCollisionStart. Sistem deteksi tabrakan yang ditambahkan ke BrickBreaker dalam contoh sebelumnya memanggil callback ini.

Pertama, kode menguji apakah Ball bertabrakan dengan PlayArea. Hal ini tampaknya berlebihan untuk saat ini, karena tidak ada komponen lain di dunia game. Hal itu akan berubah pada langkah berikutnya, saat Anda menambahkan kelelawar ke dunia. Kemudian, kode ini juga menambahkan kondisi else untuk menangani saat bola bertabrakan dengan benda yang bukan pemukul. Pengingat lembut untuk menerapkan logika yang tersisa, jika Anda mau.

Saat bola bertabrakan dengan dinding bawah, bola akan menghilang dari permukaan permainan, tetapi masih terlihat jelas. Anda akan menangani artefak ini pada langkah berikutnya, menggunakan kecanggihan Efek Flame.

Setelah bola bertabrakan dengan dinding game, akan sangat berguna jika pemain diberi pemukul untuk memukul bola...

7. Memukul bola dengan pemukul

Buat kelelawar

Untuk menambahkan pemukul agar bola tetap dalam permainan di dalam game,

Masukkan beberapa konstanta dalam file lib/src/config.dart sebagai berikut.

lib/src/config.dart

const gameWidth = 820.0;
const gameHeight = 1600.0;
const ballRadius = gameWidth * 0.02;
const batWidth = gameWidth * 0.2;                               // Add from here...
const batHeight = ballRadius * 2;
const batStep = gameWidth * 0.05;                               // To here.

Konstanta batHeight dan batWidth sudah jelas. Sebaliknya, konstanta batStep memerlukan sedikit penjelasan. Untuk berinteraksi dengan bola dalam game ini, pemain dapat menarik pemukul dengan mouse atau jari, bergantung pada platform, atau menggunakan keyboard. Konstanta batStep mengonfigurasi seberapa jauh bat melangkah untuk setiap penekanan tombol panah kiri atau kanan.

Tentukan class komponen Bat sebagai berikut.

lib/src/components/bat.dart

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/events.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';

class Bat extends PositionComponent
    with DragCallbacks, HasGameReference<BrickBreaker> {
  Bat({
    required this.cornerRadius,
    required super.position,
    required super.size,
  }) : super(anchor: Anchor.center, children: [RectangleHitbox()]);

  final Radius cornerRadius;

  final _paint = Paint()
    ..color = const Color(0xff1e6091)
    ..style = PaintingStyle.fill;

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    canvas.drawRRect(
      RRect.fromRectAndRadius(Offset.zero & size.toSize(), cornerRadius),
      _paint,
    );
  }

  @override
  void onDragUpdate(DragUpdateEvent event) {
    super.onDragUpdate(event);
    position.x = (position.x + event.localDelta.x).clamp(0, game.width);
  }

  void moveBy(double dx) {
    add(
      MoveToEffect(
        Vector2((position.x + dx).clamp(0, game.width), position.y),
        EffectController(duration: 0.1),
      ),
    );
  }
}

Komponen ini memperkenalkan beberapa kemampuan baru.

Pertama, komponen Bat adalah PositionComponent, bukan RectangleComponent atau CircleComponent. Artinya, kode ini perlu merender Bat di layar. Untuk melakukannya, callback render akan diganti.

Dengan melihat lebih dekat panggilan canvas.drawRRect (menggambar persegi panjang bulat), Anda mungkin bertanya-tanya, "di mana persegi panjangnya?" Offset.zero & size.toSize() memanfaatkan penggantian operator & pada class dart:ui Offset yang membuat Rect. Singkatan ini mungkin membingungkan Anda pada awalnya, tetapi Anda akan sering melihatnya di kode Flutter dan Flame tingkat yang lebih rendah.

Kedua, komponen Bat ini dapat ditarik menggunakan jari atau mouse, bergantung pada platform. Untuk mengimplementasikan fungsi ini, Anda menambahkan mixin DragCallbacks dan mengganti peristiwa onDragUpdate.

Terakhir, komponen Bat harus merespons kontrol keyboard. Fungsi moveBy memungkinkan kode lain memberi tahu kelelawar ini untuk bergerak ke kiri atau kanan dengan sejumlah piksel virtual tertentu. Fungsi ini memperkenalkan kemampuan baru mesin game Flame: Effect. Dengan menambahkan objek MoveToEffect sebagai turunan komponen ini, pemain akan melihat animasi kelelawar ke posisi baru. Ada kumpulan Effect yang tersedia di Flame untuk melakukan berbagai efek.

Argumen konstruktor Effect mencakup referensi ke getter game. Itulah sebabnya Anda menyertakan mixin HasGameReference pada class ini. Mixin ini menambahkan aksesori game yang aman untuk jenis ke komponen ini guna mengakses instance BrickBreaker di bagian atas hierarki komponen.

Agar Bat tersedia untuk BrickBreaker, perbarui file lib/src/components/components.dart sebagai berikut.

lib/src/components/components.dart

export 'ball.dart';
export 'bat.dart';                                              // Add this export
export 'play_area.dart';

Tambahkan kelelawar ke dunia

Untuk menambahkan komponen Bat ke dunia game, perbarui BrickBreaker sebagai berikut.

lib/src/brick_breaker.dart

import 'dart:async';
import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/events.dart';                             // Add this import
import 'package:flame/game.dart';
import 'package:flutter/material.dart';                         // And this import
import 'package:flutter/services.dart';                         // And this

import 'components/components.dart';
import 'config.dart';

class BrickBreaker extends FlameGame
    with HasCollisionDetection, KeyboardEvents {                // Modify this line
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  final rand = math.Random();
  double get width => size.x;
  double get height => size.y;

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());

    world.add(
      Ball(
        radius: ballRadius,
        position: size / 2,
        velocity: Vector2(
          (rand.nextDouble() - 0.5) * width,
          height * 0.2,
        ).normalized()..scale(height / 4),
      ),
    );

    world.add(                                                  // Add from here...
      Bat(
        size: Vector2(batWidth, batHeight),
        cornerRadius: const Radius.circular(ballRadius / 2),
        position: Vector2(width / 2, height * 0.95),
      ),
    );                                                          // To here.

    debugMode = true;
  }

  @override                                                     // Add from here...
  KeyEventResult onKeyEvent(
    KeyEvent event,
    Set<LogicalKeyboardKey> keysPressed,
  ) {
    super.onKeyEvent(event, keysPressed);
    switch (event.logicalKey) {
      case LogicalKeyboardKey.arrowLeft:
        world.children.query<Bat>().first.moveBy(-batStep);
      case LogicalKeyboardKey.arrowRight:
        world.children.query<Bat>().first.moveBy(batStep);
    }
    return KeyEventResult.handled;
  }                                                             // To here.
}

Penambahan mixin KeyboardEvents dan metode onKeyEvent yang diganti menangani input keyboard. Ingat kode yang Anda tambahkan sebelumnya untuk memindahkan kelelawar dengan jumlah langkah yang sesuai.

Potongan kode yang tersisa menambahkan kelelawar ke dunia game di posisi yang sesuai dan dengan proporsi yang tepat. Dengan semua setelan ini ditampilkan dalam file ini, Anda dapat dengan mudah menyesuaikan ukuran relatif tongkat pemukul dan bola untuk mendapatkan nuansa yang tepat untuk game.

Jika Anda memainkan game pada tahap ini, Anda akan melihat bahwa Anda dapat menggerakkan pemukul untuk mencegat bola, tetapi tidak mendapatkan respons yang terlihat, selain logging debug yang Anda tinggalkan dalam kode deteksi tabrakan Ball.

Saatnya memperbaikinya sekarang. Edit komponen Ball sebagai berikut.

lib/src/components/ball.dart

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';                           // Add this import
import 'package:flutter/material.dart';

import '../brick_breaker.dart';
import 'bat.dart';                                             // And this import
import 'play_area.dart';

class Ball extends CircleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {
  Ball({
    required this.velocity,
    required super.position,
    required double radius,
  }) : super(
         radius: radius,
         anchor: Anchor.center,
         paint: Paint()
           ..color = const Color(0xff1e6091)
           ..style = PaintingStyle.fill,
         children: [CircleHitbox()],
       );

  final Vector2 velocity;

  @override
  void update(double dt) {
    super.update(dt);
    position += velocity * dt;
  }

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    if (other is PlayArea) {
      if (intersectionPoints.first.y <= 0) {
        velocity.y = -velocity.y;
      } else if (intersectionPoints.first.x <= 0) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.x >= game.width) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.y >= game.height) {
        add(RemoveEffect(delay: 0.35));                         // Modify from here...
      }
    } else if (other is Bat) {
      velocity.y = -velocity.y;
      velocity.x =
          velocity.x +
          (position.x - other.position.x) / other.size.x * game.width * 0.3;
    } else {                                                    // To here.
      debugPrint('collision with $other');
    }
  }
}

Perubahan kode ini memperbaiki dua masalah terpisah.

Pertama, ini memperbaiki bola yang menghilang saat menyentuh bagian bawah layar. Untuk memperbaiki masalah ini, Anda harus mengganti panggilan removeFromParent dengan RemoveEffect. RemoveEffect menghilangkan bola dari dunia game setelah membiarkan bola keluar dari area permainan yang dapat dilihat.

Kedua, perubahan ini memperbaiki penanganan tabrakan antara tongkat pemukul dan bola. Kode penanganan ini sangat menguntungkan pemain. Selama pemain menyentuh bola dengan tongkat, bola akan kembali ke bagian atas layar. Jika ini terasa terlalu mudah dan Anda menginginkan sesuatu yang lebih realistis, ubah penanganan ini agar lebih sesuai dengan nuansa yang Anda inginkan untuk game Anda.

Perlu diperhatikan kompleksitas update velocity. Hal ini tidak hanya membalikkan komponen y kecepatan, seperti yang dilakukan untuk tabrakan dinding. Komponen ini juga memperbarui komponen x dengan cara yang bergantung pada posisi relatif kelelawar dan bola pada saat kontak. Hal ini memberi pemain lebih banyak kontrol atas apa yang dilakukan bola, tetapi cara kerjanya tidak dikomunikasikan kepada pemain dengan cara apa pun kecuali melalui permainan.

Sekarang setelah Anda memiliki tongkat untuk memukul bola, akan lebih menarik jika ada beberapa balok untuk dihancurkan dengan bola.

8. Menghancurkan dinding

Membuat bata

Untuk menambahkan balok ke game,

Masukkan beberapa konstanta dalam file lib/src/config.dart sebagai berikut.

lib/src/config.dart

import 'package:flutter/material.dart';                         // Add this import

const brickColors = [                                           // Add this const
  Color(0xfff94144),
  Color(0xfff3722c),
  Color(0xfff8961e),
  Color(0xfff9844a),
  Color(0xfff9c74f),
  Color(0xff90be6d),
  Color(0xff43aa8b),
  Color(0xff4d908e),
  Color(0xff277da1),
  Color(0xff577590),
];

const gameWidth = 820.0;
const gameHeight = 1600.0;
const ballRadius = gameWidth * 0.02;
const batWidth = gameWidth * 0.2;
const batHeight = ballRadius * 2;
const batStep = gameWidth * 0.05;
const brickGutter = gameWidth * 0.015;                          // Add from here...
final brickWidth =
    (gameWidth - (brickGutter * (brickColors.length + 1))) / brickColors.length;
const brickHeight = gameHeight * 0.03;
const difficultyModifier = 1.03;                                // To here.

Masukkan komponen Brick sebagai berikut.

lib/src/components/brick.dart

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';
import '../config.dart';
import 'ball.dart';
import 'bat.dart';

class Brick extends RectangleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {
  Brick({required super.position, required Color color})
    : super(
        size: Vector2(brickWidth, brickHeight),
        anchor: Anchor.center,
        paint: Paint()
          ..color = color
          ..style = PaintingStyle.fill,
        children: [RectangleHitbox()],
      );

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    removeFromParent();

    if (game.world.children.query<Brick>().length == 1) {
      game.world.removeAll(game.world.children.query<Ball>());
      game.world.removeAll(game.world.children.query<Bat>());
    }
  }
}

Sekarang, sebagian besar kode ini seharusnya sudah tidak asing lagi. Kode ini menggunakan RectangleComponent, dengan deteksi tabrakan dan referensi yang aman untuk game BrickBreaker di bagian atas hierarki komponen.

Konsep baru terpenting yang diperkenalkan oleh kode ini adalah cara pemain mencapai kondisi menang. Pemeriksaan kondisi kemenangan mengkueri dunia untuk mencari batu bata, dan mengonfirmasi bahwa hanya ada satu yang tersisa. Hal ini mungkin sedikit membingungkan, karena baris sebelumnya menghapus brick ini dari induknya.

Poin penting yang perlu dipahami adalah bahwa penghapusan komponen adalah perintah yang diantrekan. Brick akan dihapus setelah kode ini berjalan, tetapi sebelum tick berikutnya di dunia game.

Untuk membuat komponen Brick dapat diakses oleh BrickBreaker, edit lib/src/components/components.dart sebagai berikut.

lib/src/components/components.dart

export 'ball.dart';
export 'bat.dart';
export 'brick.dart';                                            // Add this export
export 'play_area.dart';

Menambahkan balok ke dunia

Update komponen Ball sebagai berikut.

lib/src/components/ball.dart

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';
import 'bat.dart';
import 'brick.dart';                                            // Add this import
import 'play_area.dart';

class Ball extends CircleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {
  Ball({
    required this.velocity,
    required super.position,
    required double radius,
    required this.difficultyModifier,                           // Add this parameter
  }) : super(
         radius: radius,
         anchor: Anchor.center,
         paint: Paint()
           ..color = const Color(0xff1e6091)
           ..style = PaintingStyle.fill,
         children: [CircleHitbox()],
       );

  final Vector2 velocity;
  final double difficultyModifier;                              // Add this member

  @override
  void update(double dt) {
    super.update(dt);
    position += velocity * dt;
  }

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    if (other is PlayArea) {
      if (intersectionPoints.first.y <= 0) {
        velocity.y = -velocity.y;
      } else if (intersectionPoints.first.x <= 0) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.x >= game.width) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.y >= game.height) {
        add(RemoveEffect(delay: 0.35));
      }
    } else if (other is Bat) {
      velocity.y = -velocity.y;
      velocity.x =
          velocity.x +
          (position.x - other.position.x) / other.size.x * game.width * 0.3;
    } else if (other is Brick) {                                // Modify from here...
      if (position.y < other.position.y - other.size.y / 2) {
        velocity.y = -velocity.y;
      } else if (position.y > other.position.y + other.size.y / 2) {
        velocity.y = -velocity.y;
      } else if (position.x < other.position.x) {
        velocity.x = -velocity.x;
      } else if (position.x > other.position.x) {
        velocity.x = -velocity.x;
      }
      velocity.setFrom(velocity * difficultyModifier);          // To here.
    }
  }
}

Hal ini memperkenalkan satu-satunya aspek baru, pengubah kesulitan yang meningkatkan kecepatan bola setelah setiap tabrakan dengan batu bata. Parameter yang dapat disesuaikan ini perlu diuji coba untuk menemukan kurva kesulitan yang sesuai untuk game Anda.

Edit game BrickBreaker sebagai berikut.

lib/src/brick_breaker.dart

import 'dart:async';
import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'components/components.dart';
import 'config.dart';

class BrickBreaker extends FlameGame
    with HasCollisionDetection, KeyboardEvents {
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  final rand = math.Random();
  double get width => size.x;
  double get height => size.y;

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());

    world.add(
      Ball(
        difficultyModifier: difficultyModifier,                 // Add this argument
        radius: ballRadius,
        position: size / 2,
        velocity: Vector2(
          (rand.nextDouble() - 0.5) * width,
          height * 0.2,
        ).normalized()..scale(height / 4),
      ),
    );

    world.add(
      Bat(
        size: Vector2(batWidth, batHeight),
        cornerRadius: const Radius.circular(ballRadius / 2),
        position: Vector2(width / 2, height * 0.95),
      ),
    );

    await world.addAll([                                        // Add from here...
      for (var i = 0; i < brickColors.length; i++)
        for (var j = 1; j <= 5; j++)
          Brick(
            position: Vector2(
              (i + 0.5) * brickWidth + (i + 1) * brickGutter,
              (j + 2.0) * brickHeight + j * brickGutter,
            ),
            color: brickColors[i],
          ),
    ]);                                                         // To here.

    debugMode = true;
  }

  @override
  KeyEventResult onKeyEvent(
    KeyEvent event,
    Set<LogicalKeyboardKey> keysPressed,
  ) {
    super.onKeyEvent(event, keysPressed);
    switch (event.logicalKey) {
      case LogicalKeyboardKey.arrowLeft:
        world.children.query<Bat>().first.moveBy(-batStep);
      case LogicalKeyboardKey.arrowRight:
        world.children.query<Bat>().first.moveBy(batStep);
    }
    return KeyEventResult.handled;
  }
}

Jika Anda menjalankan game, semua mekanisme game utama akan ditampilkan. Anda dapat menonaktifkan proses debug dan menandainya sebagai selesai, tetapi ada sesuatu yang terasa kurang.

Screenshot yang menampilkan brick_breaker dengan bola, pemukul, dan sebagian besar batu bata di area bermain. Setiap komponen memiliki label pen-debug-an

Bagaimana dengan layar selamat datang, layar game berakhir, dan mungkin skor? Flutter dapat menambahkan fitur ini ke game, dan di sinilah Anda akan mengalihkan perhatian Anda selanjutnya.

9. Menangkan pertandingan

Menambahkan status pemutaran

Pada langkah ini, Anda akan menyematkan game Flame di dalam wrapper Flutter, lalu menambahkan overlay Flutter untuk layar selamat datang, game berakhir, dan menang.

Pertama, Anda mengubah file game dan komponen untuk menerapkan status pemutaran yang mencerminkan apakah akan menampilkan overlay, dan jika ya, overlay mana yang akan ditampilkan.

Ubah game BrickBreaker sebagai berikut.

lib/src/brick_breaker.dart

import 'dart:async';
import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'components/components.dart';
import 'config.dart';

enum PlayState { welcome, playing, gameOver, won }              // Add this enumeration

class BrickBreaker extends FlameGame
    with HasCollisionDetection, KeyboardEvents, TapDetector {   // Modify this line
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  final rand = math.Random();
  double get width => size.x;
  double get height => size.y;

  late PlayState _playState;                                    // Add from here...
  PlayState get playState => _playState;
  set playState(PlayState playState) {
    _playState = playState;
    switch (playState) {
      case PlayState.welcome:
      case PlayState.gameOver:
      case PlayState.won:
        overlays.add(playState.name);
      case PlayState.playing:
        overlays.remove(PlayState.welcome.name);
        overlays.remove(PlayState.gameOver.name);
        overlays.remove(PlayState.won.name);
    }
  }                                                             // To here.

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());

    playState = PlayState.welcome;                              // Add from here...
  }

  void startGame() {
    if (playState == PlayState.playing) return;

    world.removeAll(world.children.query<Ball>());
    world.removeAll(world.children.query<Bat>());
    world.removeAll(world.children.query<Brick>());

    playState = PlayState.playing;                              // To here.

    world.add(
      Ball(
        difficultyModifier: difficultyModifier,
        radius: ballRadius,
        position: size / 2,
        velocity: Vector2(
          (rand.nextDouble() - 0.5) * width,
          height * 0.2,
        ).normalized()..scale(height / 4),
      ),
    );

    world.add(
      Bat(
        size: Vector2(batWidth, batHeight),
        cornerRadius: const Radius.circular(ballRadius / 2),
        position: Vector2(width / 2, height * 0.95),
      ),
    );

    world.addAll([                                              // Drop the await
      for (var i = 0; i < brickColors.length; i++)
        for (var j = 1; j <= 5; j++)
          Brick(
            position: Vector2(
              (i + 0.5) * brickWidth + (i + 1) * brickGutter,
              (j + 2.0) * brickHeight + j * brickGutter,
            ),
            color: brickColors[i],
          ),
    ]);
  }                                                             // Drop the debugMode

  @override                                                     // Add from here...
  void onTap() {
    super.onTap();
    startGame();
  }                                                             // To here.

  @override
  KeyEventResult onKeyEvent(
    KeyEvent event,
    Set<LogicalKeyboardKey> keysPressed,
  ) {
    super.onKeyEvent(event, keysPressed);
    switch (event.logicalKey) {
      case LogicalKeyboardKey.arrowLeft:
        world.children.query<Bat>().first.moveBy(-batStep);
      case LogicalKeyboardKey.arrowRight:
        world.children.query<Bat>().first.moveBy(batStep);
      case LogicalKeyboardKey.space:                            // Add from here...
      case LogicalKeyboardKey.enter:
        startGame();                                            // To here.
    }
    return KeyEventResult.handled;
  }

  @override
  Color backgroundColor() => const Color(0xfff2e8cf);          // Add this override
}

Kode ini mengubah banyak hal dalam game BrickBreaker. Menambahkan enumerasi playState memerlukan banyak pekerjaan. Hal ini mencatat posisi pemain saat memasuki, bermain, dan kalah atau memenangkan game. Di bagian atas file, Anda menentukan enumerasi, lalu membuat instance-nya sebagai status tersembunyi dengan getter dan setter yang cocok. Getter dan setter ini memungkinkan pengubahan overlay saat berbagai bagian game memicu transisi status pemutaran.

Selanjutnya, Anda membagi kode di onLoad menjadi onLoad dan metode startGame baru. Sebelum perubahan ini, Anda hanya dapat memulai game baru dengan memulai ulang game. Dengan penambahan baru ini, pemain kini dapat memulai game baru tanpa tindakan drastis tersebut.

Untuk mengizinkan pemain memulai game baru, Anda mengonfigurasi dua handler baru untuk game tersebut. Anda telah menambahkan handler ketukan dan memperluas handler keyboard untuk memungkinkan pengguna memulai game baru dalam beberapa modalitas. Dengan pemodelan status pemutaran, sebaiknya perbarui komponen untuk memicu transisi status pemutaran saat pemain menang atau kalah.

Ubah komponen Ball sebagai berikut.

lib/src/components/ball.dart

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';
import 'bat.dart';
import 'brick.dart';
import 'play_area.dart';

class Ball extends CircleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {
  Ball({
    required this.velocity,
    required super.position,
    required double radius,
    required this.difficultyModifier,
  }) : super(
         radius: radius,
         anchor: Anchor.center,
         paint: Paint()
           ..color = const Color(0xff1e6091)
           ..style = PaintingStyle.fill,
         children: [CircleHitbox()],
       );

  final Vector2 velocity;
  final double difficultyModifier;

  @override
  void update(double dt) {
    super.update(dt);
    position += velocity * dt;
  }

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    if (other is PlayArea) {
      if (intersectionPoints.first.y <= 0) {
        velocity.y = -velocity.y;
      } else if (intersectionPoints.first.x <= 0) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.x >= game.width) {
        velocity.x = -velocity.x;
      } else if (intersectionPoints.first.y >= game.height) {
        add(
          RemoveEffect(
            delay: 0.35,
            onComplete: () {                                    // Modify from here
              game.playState = PlayState.gameOver;
            },
          ),
        );                                                      // To here.
      }
    } else if (other is Bat) {
      velocity.y = -velocity.y;
      velocity.x =
          velocity.x +
          (position.x - other.position.x) / other.size.x * game.width * 0.3;
    } else if (other is Brick) {
      if (position.y < other.position.y - other.size.y / 2) {
        velocity.y = -velocity.y;
      } else if (position.y > other.position.y + other.size.y / 2) {
        velocity.y = -velocity.y;
      } else if (position.x < other.position.x) {
        velocity.x = -velocity.x;
      } else if (position.x > other.position.x) {
        velocity.x = -velocity.x;
      }
      velocity.setFrom(velocity * difficultyModifier);
    }
  }
}

Perubahan kecil ini menambahkan callback onComplete ke RemoveEffect yang memicu status pemutaran gameOver. Hal ini akan terasa tepat jika pemain membiarkan bola keluar dari bagian bawah layar.

Edit komponen Brick sebagai berikut.

lib/src/components/brick.dart

impimport 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';
import '../config.dart';
import 'ball.dart';
import 'bat.dart';

class Brick extends RectangleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {
  Brick({required super.position, required Color color})
    : super(
        size: Vector2(brickWidth, brickHeight),
        anchor: Anchor.center,
        paint: Paint()
          ..color = color
          ..style = PaintingStyle.fill,
        children: [RectangleHitbox()],
      );

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    removeFromParent();

    if (game.world.children.query<Brick>().length == 1) {
      game.playState = PlayState.won;                          // Add this line
      game.world.removeAll(game.world.children.query<Ball>());
      game.world.removeAll(game.world.children.query<Bat>());
    }
  }
}

Di sisi lain, jika pemain dapat menghancurkan semua batu bata, mereka akan mendapatkan layar "game menang". Bagus sekali, pemain!

Menambahkan wrapper Flutter

Untuk menyediakan tempat menyematkan game dan menambahkan overlay status bermain, tambahkan shell Flutter.

Buat direktori widgets di bawah lib/src.
Tambahkan file game_app.dart dan masukkan konten berikut ke file tersebut.

lib/src/widgets/game_app.dart

import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../brick_breaker.dart';
import '../config.dart';

class GameApp extends StatelessWidget {
  const GameApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textTheme: GoogleFonts.pressStart2pTextTheme().apply(
          bodyColor: const Color(0xff184e77),
          displayColor: const Color(0xff184e77),
        ),
      ),
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xffa9d6e5), Color(0xfff2e8cf)],
            ),
          ),
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Center(
                child: FittedBox(
                  child: SizedBox(
                    width: gameWidth,
                    height: gameHeight,
                    child: GameWidget.controlled(
                      gameFactory: BrickBreaker.new,
                      overlayBuilderMap: {
                        PlayState.welcome.name: (context, game) => Center(
                          child: Text(
                            'TAP TO PLAY',
                            style: Theme.of(context).textTheme.headlineLarge,
                          ),
                        ),
                        PlayState.gameOver.name: (context, game) => Center(
                          child: Text(
                            'G A M E   O V E R',
                            style: Theme.of(context).textTheme.headlineLarge,
                          ),
                        ),
                        PlayState.won.name: (context, game) => Center(
                          child: Text(
                            'Y O U   W O N ! ! !',
                            style: Theme.of(context).textTheme.headlineLarge,
                          ),
                        ),
                      },
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Sebagian besar konten dalam file ini mengikuti pembuatan hierarki widget Flutter standar. Bagian khusus untuk Flame mencakup penggunaan GameWidget.controlled untuk membuat dan mengelola instance game BrickBreaker serta argumen overlayBuilderMap baru untuk GameWidget.

Kunci overlayBuilderMap ini harus sesuai dengan overlay yang ditambahkan atau dihapus oleh setter playState di BrickBreaker. Mencoba menyetel overlay yang tidak ada dalam peta ini akan menyebabkan wajah tidak bahagia di mana-mana.

Untuk mendapatkan fungsi baru ini di layar, ganti file lib/main.dart dengan konten berikut.

lib/main.dart

import 'package:flutter/material.dart';

import 'src/widgets/game_app.dart';

void main() {
  runApp(const GameApp());
}

Jika Anda menjalankan kode ini di iOS, Linux, Windows, atau web, output yang diinginkan akan ditampilkan dalam game. Jika menargetkan macOS atau Android, Anda memerlukan penyesuaian terakhir untuk mengaktifkan tampilan google_fonts.

Mengaktifkan akses font

Menambahkan izin internet untuk Android

Untuk Android, Anda harus menambahkan izin Internet. Edit AndroidManifest.xml Anda sebagai berikut.

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Add the following line -->
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:label="brick_breaker"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:taskAffinity=""
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
    <!-- Required to query activities that can process text, see:
         https://developer.android.com/training/package-visibility and
         https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.

         In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
    </queries>
</manifest>

Mengedit file hak untuk macOS

Untuk macOS, Anda memiliki dua file yang perlu diedit.

Edit file DebugProfile.entitlements agar sesuai dengan kode berikut.

macos/Runner/DebugProfile.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
        <key>com.apple.security.app-sandbox</key>
        <true/>
        <key>com.apple.security.cs.allow-jit</key>
        <true/>
        <key>com.apple.security.network.server</key>
        <true/>
        <!-- Add from here... -->
        <key>com.apple.security.network.client</key>
        <true/>
        <!-- to here. -->
</dict>
</plist>

Edit file Release.entitlements agar sesuai dengan kode berikut

macos/Runner/Release.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
        <key>com.apple.security.app-sandbox</key>
        <true/>
        <!-- Add from here... -->
        <key>com.apple.security.network.client</key>
        <true/>
        <!-- to here. -->
</dict>
</plist>

Menjalankan kode ini apa adanya akan menampilkan layar selamat datang dan layar game berakhir atau menang di semua platform. Layar tersebut mungkin sedikit sederhana dan akan lebih baik jika ada skor. Jadi, coba tebak apa yang akan Anda lakukan di langkah berikutnya.

10. Mencatat skor

Menambahkan skor ke game

Pada langkah ini, Anda akan mengekspos skor game ke konteks Flutter di sekitarnya. Pada langkah ini, Anda akan mengekspos status dari game Flame ke pengelolaan status Flutter di sekitarnya. Hal ini memungkinkan kode game memperbarui skor setiap kali pemain menghancurkan batu bata.

Ubah game BrickBreaker sebagai berikut.

lib/src/brick_breaker.dart

import 'dart:async';
import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'components/components.dart';
import 'config.dart';

enum PlayState { welcome, playing, gameOver, won }

class BrickBreaker extends FlameGame
    with HasCollisionDetection, KeyboardEvents, TapDetector {
  BrickBreaker()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  final ValueNotifier<int> score = ValueNotifier(0);            // Add this line
  final rand = math.Random();
  double get width => size.x;
  double get height => size.y;

  late PlayState _playState;
  PlayState get playState => _playState;
  set playState(PlayState playState) {
    _playState = playState;
    switch (playState) {
      case PlayState.welcome:
      case PlayState.gameOver:
      case PlayState.won:
        overlays.add(playState.name);
      case PlayState.playing:
        overlays.remove(PlayState.welcome.name);
        overlays.remove(PlayState.gameOver.name);
        overlays.remove(PlayState.won.name);
    }
  }

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

    camera.viewfinder.anchor = Anchor.topLeft;

    world.add(PlayArea());

    playState = PlayState.welcome;
  }

  void startGame() {
    if (playState == PlayState.playing) return;

    world.removeAll(world.children.query<Ball>());
    world.removeAll(world.children.query<Bat>());
    world.removeAll(world.children.query<Brick>());

    playState = PlayState.playing;
    score.value = 0;                                            // Add this line

    world.add(
      Ball(
        difficultyModifier: difficultyModifier,
        radius: ballRadius,
        position: size / 2,
        velocity: Vector2(
          (rand.nextDouble() - 0.5) * width,
          height * 0.2,
        ).normalized()..scale(height / 4),
      ),
    );

    world.add(
      Bat(
        size: Vector2(batWidth, batHeight),
        cornerRadius: const Radius.circular(ballRadius / 2),
        position: Vector2(width / 2, height * 0.95),
      ),
    );

    world.addAll([
      for (var i = 0; i < brickColors.length; i++)
        for (var j = 1; j <= 5; j++)
          Brick(
            position: Vector2(
              (i + 0.5) * brickWidth + (i + 1) * brickGutter,
              (j + 2.0) * brickHeight + j * brickGutter,
            ),
            color: brickColors[i],
          ),
    ]);
  }

  @override
  void onTap() {
    super.onTap();
    startGame();
  }

  @override
  KeyEventResult onKeyEvent(
    KeyEvent event,
    Set<LogicalKeyboardKey> keysPressed,
  ) {
    super.onKeyEvent(event, keysPressed);
    switch (event.logicalKey) {
      case LogicalKeyboardKey.arrowLeft:
        world.children.query<Bat>().first.moveBy(-batStep);
      case LogicalKeyboardKey.arrowRight:
        world.children.query<Bat>().first.moveBy(batStep);
      case LogicalKeyboardKey.space:
      case LogicalKeyboardKey.enter:
        startGame();
    }
    return KeyEventResult.handled;
  }

  @override
  Color backgroundColor() => const Color(0xfff2e8cf);
}

Dengan menambahkan score ke game, Anda mengikat status game ke pengelolaan status Flutter.

Ubah class Brick untuk menambahkan poin ke skor saat pemain menghancurkan batu bata.

lib/src/components/brick.dart

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:flutter/material.dart';

import '../brick_breaker.dart';
import '../config.dart';
import 'ball.dart';
import 'bat.dart';

class Brick extends RectangleComponent
    with CollisionCallbacks, HasGameReference<BrickBreaker> {
  Brick({required super.position, required Color color})
    : super(
        size: Vector2(brickWidth, brickHeight),
        anchor: Anchor.center,
        paint: Paint()
          ..color = color
          ..style = PaintingStyle.fill,
        children: [RectangleHitbox()],
      );

  @override
  void onCollisionStart(
    Set<Vector2> intersectionPoints,
    PositionComponent other,
  ) {
    super.onCollisionStart(intersectionPoints, other);
    removeFromParent();
    game.score.value++;                                         // Add this line

    if (game.world.children.query<Brick>().length == 1) {
      game.playState = PlayState.won;
      game.world.removeAll(game.world.children.query<Ball>());
      game.world.removeAll(game.world.children.query<Bat>());
    }
  }
}

Membuat game yang terlihat bagus

Setelah Anda dapat mencatat skor di Flutter, saatnya menyusun widget agar terlihat bagus.

Buat score_card.dart di lib/src/widgets dan tambahkan hal berikut.

lib/src/widgets/score_card.dart

import 'package:flutter/material.dart';

class ScoreCard extends StatelessWidget {
  const ScoreCard({super.key, required this.score});

  final ValueNotifier<int> score;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<int>(
      valueListenable: score,
      builder: (context, score, child) {
        return Padding(
          padding: const EdgeInsets.fromLTRB(12, 6, 12, 18),
          child: Text(
            'Score: $score'.toUpperCase(),
            style: Theme.of(context).textTheme.titleLarge!,
          ),
        );
      },
    );
  }
}

Buat overlay_screen.dart di lib/src/widgets, lalu tambahkan kode berikut.

Hal ini akan membuat overlay terlihat lebih menarik menggunakan kemampuan paket flutter_animate untuk menambahkan beberapa gerakan dan gaya ke layar overlay.

lib/src/widgets/overlay_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';

class OverlayScreen extends StatelessWidget {
  const OverlayScreen({super.key, required this.title, required this.subtitle});

  final String title;
  final String subtitle;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: const Alignment(0, -0.15),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            title,
            style: Theme.of(context).textTheme.headlineLarge,
          ).animate().slideY(duration: 750.ms, begin: -3, end: 0),
          const SizedBox(height: 16),
          Text(subtitle, style: Theme.of(context).textTheme.headlineSmall)
              .animate(onPlay: (controller) => controller.repeat())
              .fadeIn(duration: 1.seconds)
              .then()
              .fadeOut(duration: 1.seconds),
        ],
      ),
    );
  }
}

Untuk melihat lebih mendalam kemampuan flutter_animate, lihat codelab Membangun UI generasi berikutnya di Flutter.

Kode ini banyak berubah di komponen GameApp. Pertama, untuk mengizinkan ScoreCard mengakses score , Anda mengonversinya dari StatelessWidget menjadi StatefulWidget. Penambahan kartu skor memerlukan penambahan Column untuk menumpuk skor di atas game.

Kedua, untuk meningkatkan pengalaman selamat datang, game berakhir, dan menang, Anda menambahkan widget OverlayScreen baru.

lib/src/widgets/game_app.dart

import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../brick_breaker.dart';
import '../config.dart';
import 'overlay_screen.dart';                                   // Add this import
import 'score_card.dart';                                       // And this one too

class GameApp extends StatefulWidget {                          // Modify this line
  const GameApp({super.key});

  @override                                                     // Add from here...
  State<GameApp> createState() => _GameAppState();
}

class _GameAppState extends State<GameApp> {
  late final BrickBreaker game;

  @override
  void initState() {
    super.initState();
    game = BrickBreaker();
  }                                                             // To here.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textTheme: GoogleFonts.pressStart2pTextTheme().apply(
          bodyColor: const Color(0xff184e77),
          displayColor: const Color(0xff184e77),
        ),
      ),
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xffa9d6e5), Color(0xfff2e8cf)],
            ),
          ),
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Center(
                child: Column(                                  // Modify from here...
                  children: [
                    ScoreCard(score: game.score),
                    Expanded(
                      child: FittedBox(
                        child: SizedBox(
                          width: gameWidth,
                          height: gameHeight,
                          child: GameWidget(
                            game: game,
                            overlayBuilderMap: {
                              PlayState.welcome.name: (context, game) =>
                                  const OverlayScreen(
                                    title: 'TAP TO PLAY',
                                    subtitle: 'Use arrow keys or swipe',
                                  ),
                              PlayState.gameOver.name: (context, game) =>
                                  const OverlayScreen(
                                    title: 'G A M E   O V E R',
                                    subtitle: 'Tap to Play Again',
                                  ),
                              PlayState.won.name: (context, game) =>
                                  const OverlayScreen(
                                    title: 'Y O U   W O N ! ! !',
                                    subtitle: 'Tap to Play Again',
                                  ),
                            },
                          ),
                        ),
                      ),
                    ),
                  ],
                ),                                              // To here.
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Setelah semuanya siap, Anda sekarang dapat menjalankan game ini di salah satu dari enam platform target Flutter. Game akan terlihat seperti berikut.

Screenshot brick_breaker yang menampilkan layar pra-game yang mengundang pengguna untuk mengetuk layar guna memainkan game

Screenshot brick_breaker yang menampilkan layar game berakhir yang ditempatkan di atas kelelawar dan beberapa batu bata

11. Selamat

Selamat, Anda berhasil membuat game dengan Flutter dan Flame.

Anda telah membuat game menggunakan game engine 2D Flame dan menyematkannya dalam wrapper Flutter. Anda menggunakan Efek Flame untuk menganimasikan dan menghapus komponen. Anda menggunakan paket Google Fonts dan Flutter Animate untuk membuat seluruh game terlihat didesain dengan baik.

Apa langkah selanjutnya?

Lihat beberapa codelab ini...

Pengantar Flame dengan Flutter

1. Pengantar

Yang akan Anda pelajari

Yang akan Anda build

2. Menyiapkan lingkungan Flutter Anda

Editor

Memilih target pengembangan

Menginstal Flutter

Pertanyaan Umum (FAQ)

3. Membuat proyek

Membuat proyek Flutter pertama Anda

Menyalin & Menempelkan aplikasi awal

4. Buat game

Menilai permainan

Membuat PlayArea

Membuat game Flame

Menampilkan game di layar

5. Menampilkan bola

Membuat komponen bola

Tambahkan bola ke dunia

6. Melompat-lompat

Menambahkan deteksi tabrakan

Memantulkan bola

7. Memukul bola dengan pemukul

Buat kelelawar

Tambahkan kelelawar ke dunia

8. Menghancurkan dinding

Membuat bata

Menambahkan balok ke dunia

9. Menangkan pertandingan

Menambahkan status pemutaran

Menambahkan wrapper Flutter

Mengaktifkan akses font

Menambahkan izin internet untuk Android

Mengedit file hak untuk macOS

10. Mencatat skor

Menambahkan skor ke game

Membuat game yang terlihat bagus

11. Selamat

Apa langkah selanjutnya?

Bacaan lebih lanjut