Cara Membuat Game 2D dengan Flutter

Last Updated on December 1, 2021 by

Flutter tidak hanya digunakan untuk membuat aplikasi seluler biasa, Flutter juga bisa digunakan untuk membangun aplikasi game lintas platform. Kabar baiknya, Game Flutter dapat dibuat hanya dengan beberapa baris kode untuk desain dan logika game. Anda juga dapat mempertahankan UI/UX yang hebat untuk Game 2D yang Anda buat di Flutter.

Menariknya, Flutter memiliki kemampuan untuk merender hingga 60FPS. Anda dapat memanfaatkan kemampuan tersebut untuk membuat sebuah game 2D atau bahkan game 3D yang sederhana. Perlu dicatat bahwa Flutter tidak ditujukan untuk mengembangkan game yang lebih kompleks karena sebagian besar developer akan tertarik pada native development untuk aplikasi yang kompleks.

Dalam tutorial ini, kami akan menjelaskan cara membuat game 2D. Game ini adalah pembuatan game ulang salah satu game komputer pertama yang pernah dibuat yaitu Pong. Pong merupakan game yang sederhana. Oleh karena itu, Flutter bisa menjadi tempat yang bagus untuk memulai. Artikel ini dibagi menjadi dua bagian utama: logika permainan dan user interface, untuk membuat build sedikit lebih jelas dengan berfokus pada bagian penting secara terpisah.

Apa saja yang Dibutuhkan?

Sebelum mengembangkan game ini, ada beberapa hal yang Anda butuhkan.

• Software Flutter
• Text Editor

Jika belum menginstal Flutter, Anda bisa install terlebih dahulu softwarenya di sini: https://docs.flutter.dev/get-started/install

Cara Membuat Game Dengan Flutter

Berikut ini adalah cara membuat game 2D Flutter dengan mudah.

1. Buat Proyek Flutter Anda

Dalam tutorial ini, kami akan menggunakan Alignment(x,y) sebagai representasi Vektor(x,y) untuk posisi sumbu X dan Y layar, yang akan membantu mengembangkan fisika permainan. Kami juga akan membuat widget stateless untuk beberapa variabel kami dan mendeklarasikannya di file homepage.dart untuk membuat kode tidak terlalu besar dan mudah dimengerti.

Cara membuat game yang pertama adalah buat proyek Flutter. Hapus kode default di file main.dart, dan impor paket material.dart untuk menyertakan widget Material dalam aplikasi.

Selanjutnya, buat kelas bernama MyApp() dan kembalikan MaterialApp(), lalu buat statefulWidget HomePage() dan teruskan ke parameter home MaterialApp() seperti yang ditunjukkan di bawah ini:

import 'package:flutter/material.dart';
import 'package:pong/homePage.dart';
void main() {
 runApp(MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   debugShowCheckedModeBanner:false,
   home: HomePage(),
  );
 }
}

2. Membuat Logika Game

Di dalam HomePage(), kita perlu menulis beberapa fungsi dan metode untuk menangani operasi yang berhubungan dengan matematika game 2D. Ini termasuk penanganan tabrakan (crash), akselerasi atau deselerasi, dan navigasi dalam game.

Tapi pertama-tama, kita perlu mendeklarasikan beberapa parameter yang akan mewakili keberpihakan posisi bola, pemain, dan skor awal kedua pemain. Kode untuk parameter harus ditempatkan di bawah _HomePageState, yang akan kita rujuk nanti di pos:

//player variations
double playerX = -0.2;
double brickWidth = 0.4;
int playerScore = 0;
// enemy variable
double enemyX = -0.2;
int enemyScore = 0;
//ball
double ballx = 0;
double bally = 0;
var ballYDirection = direction.DOWN;
var ballXDirection = direction.RIGHT;
bool gameStarted = false;
...

Kemudian, kita akan menyediakan enumerasi untuk untuk arah gerakan bola dan bata :

enum direction { UP, DOWN, LEFT, RIGHT }
...

Agar game 2D ini bisa bekerja, kita perlu membuat artificial gravity (gravitasi buatan) sehingga ketika bolanya menyentuh bata atas atau bata bawah, maka bola tersebut akan mengarah ke arah yang berlawanan. Jika tidak, jika tidak mengenai salah satu batu bata dan masuk ke atas (1) atau bawah (-1) dari lapangan permainan, ia mencatatnya sebagai kerugian bagi pemain.

Ketika bola mengenai dinding di sebelah kiri (1) atau kanan (-1), bola bergerak ke arah yang berlawanan:

void startGame() {
 gameStarted = true;
 Timer.periodic(Duration(milliseconds: 1), (timer) {
  updatedDirection();
  moveBall();
  moveEnemy();
  if (isPlayerDead()) {
   enemyScore++;
   timer.cancel();
   _showDialog(false);
   // resetGame();
  }
   if (isEnemyDead()) {
   playerScore++;
   timer.cancel();
   _showDialog(true);
   // resetGame();
  }
 });
}
...

Pada kode di atas, kita akan memulai dengan sebuah fungsi startGame() yang mana akan mengubah Boolean ‘gameStarted’ ke ‘true’, setelah itu kita panggil Timer() dengan durasi satu detik.

Di dalam timer, fungsi seperti updatedDirection(),moveBall(), dan moveEnemy() diteruskan bersama pernyataan if untuk memeriksa apakah salah satu pemain gagal. Jika demikian, skor diakumulasikan, timer dibatalkan, dan dialog ditampilkan.

Fungsi berikut memastikan bahwa bola tidak melampaui garis 0,9, dan bola hanya akan bergerak ke arah yang berlawanan ketika bersentuhan dengan batu bata:

void updatedDirection() {
 setState(() {
  //update vertical dirction
  if (bally >= 0.9 && playerX + brickWidth>= ballx && playerX <= ballx) {
   ballYDirection = direction.UP;
  } else if (bally <= -0.9) {
   ballYDirection = direction.DOWN;
  }
  // update horizontal directions
  if (ballx >= 1) {
   ballXDirection = direction.LEFT;
  } else if (ballx <= -1) {
   ballXDirection = direction.RIGHT;
  }
 });
}
void moveBall() {
 //vertical movement
 setState(() {
  if (ballYDirection == direction.DOWN) {
   bally += 0.01;
  } else if (ballYDirection == direction.UP) {
   bally -= 0.01;
  }
 });
 //horizontal movement
 setState(() {
  if (ballXDirection == direction.LEFT) {
   ballx -= 0.01;
  } else if (ballXDirection == direction.RIGHT) {
   ballx += 0.01;
  }
 });
}
...

Selain itu, jika bola mengenai kiri atau kanan lapangan, bola akan bergerak ke arah yang berlawanan:

void moveLeft() {
 setState(() {
  if (!(playerX - 0.1 <= -1)) {
   playerX -= 0.1;
  }
 });
}
void moveRight() {
 if (!(playerX + brickWidth >= 1)) {
  playerX += 0.1;
 }
}
...

Fungsi moveLeft() dan moveRight() membantu mengontrol gerakan bata kita dari kiri ke kanan menggunakan panah keyboard. Hal ini akan bekerja dengan pernyataan if untuk memastikan batu bata tidak melebihi lebar kedua sumbu bidang.

Fungsi resetGame() mengembalikan pemain dan bola ke posisi default mereka:

void resetGame() {
 Navigator.pop(context);
 setState(() {
  gameStarted = false;
  ballx = 0;
  bally = 0;
  playerX = -0.2;
  enemyX =- 0.2;
 });
}
...

Selanjutnya, kita membuat dua fungsi, isEnemyDead() dan isPlayerDead(), yang mengembalikan nilai boolean. Mereka memeriksa apakah salah satu pemain kalah (jika bola mengenai bagian vertikal di belakang bata):

bool isEnemyDead(){
 if (bally <= -1) {
  return true;
 }
 return false;
}
bool isPlayerDead() {
 if (bally >= 1) {
  return true;
 }
 return false;
}
...

Terakhir, fungsi _showDialog menampilkan dialog saat salah satu pemain menang. Ini melewati boolean, musuhDied, untuk membedakan ketika seorang pemain kalah. Kemudian, itu menyatakan pemain yang tidak kalah telah memenangkan putaran, dan menggunakan warna pemain yang menang untuk teks yang ditampilkan “play again:”

void _showDialog(bool enemyDied) {
 showDialog(
   context: context,
   barrierDismissible: false,
   builder: (BuildContext context) {
    // return object of type Dialog
    return AlertDialog(
     elevation: 0.0,
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(10.0)),
     backgroundColor: Colors.purple,
     title: Center(
      child: Text(
       enemyDied?"Pink Wins": "Purple Wins",
       style: TextStyle(color: Colors.white),
      ),
     ),
     actions: [
      GestureDetector(
       onTap: resetGame,
       child: ClipRRect(
        borderRadius: BorderRadius.circular(5),
        child: Container(
          padding: EdgeInsets.all(7),
          color: Colors.purple[100],
          child: Text(
           "Play Again",
           style: TextStyle(color:enemyDied?Colors.pink[300]: Colors.purple[000]),
          )),
       ),
      )
     ],
    );
   });
}

3. Membuat User Interface

Cara membuat game 2D Flutter selanjutnya adalah memulai pengembangan antarmuka pengguna. Di dalam widget build di file homePage.dart, tambahkan kode di bawah ini:

return RawKeyboardListener(
 focusNode: FocusNode(),
 autofocus: false,
 onKey: (event) {
  if (event.isKeyPressed(LogicalKeyboardKey.arrowLeft)) {
   moveLeft();
  } else if (event.isKeyPressed(LogicalKeyboardKey.arrowRight)) {  
moveRight();
  }
 },
 child: GestureDetector(
  onTap: startGame,
  child: Scaffold(
    backgroundColor: Colors.grey[900],
    body: Center(
      child: Stack(
     children: [
      Welcome(gameStarted),
      //top brick
      Brick(enemyX, -0.9, brickWidth, true),
      //scoreboard
      Score(gameStarted,enemyScore,playerScore),
      // ball
      Ball(ballx, bally),
      // //bottom brick
      Brick(enemyX, 0.9, brickWidth, false)
     ],
    ))),
 ),
);

Dalam kode, kami mengembalikan RawKeyboardListener(), yang akan memberikan gerakan dari kiri ke kanan saat kami membangun di web. Ini juga dapat direplikasi untuk perangkat layar sentuh.

Widget GestureDetector() menyediakan fungsionalitas onTap yang digunakan untuk memanggil fungsi startGame yang ditulis di atas dalam logika. Child, Scaffold(), juga ditulis untuk menentukan warna latar belakang dan badan aplikasi.

Selanjutnya, buat kelas bernama Welcome dan berikan boolean untuk memeriksa apakah game sudah dimulai atau belum. Jika permainan belum dimulai, teks “tap to play” akan terlihat:

class Welcome extends StatelessWidget {

 final bool gameStarted;
 Welcome(this.gameStarted);
 @override
 Widget build(BuildContext context) {
  return Container(
    alignment: Alignment(0, -0.2),
    child: Text(
     gameStarted ? "": "T A P T O P L A Y",
     style: TextStyle(color: Colors.white),
    ));
 }
}

Sekarang kita dapat membuat kelas lain, Ball, untuk menangani desain bola dan posisinya di setiap titik di lapangan menggunakan Alignment(x,y). Kami meneruskan parameter ini melalui konstruktor untuk mobilitas seperti di bawah ini:

class Ball extends StatelessWidget {
 final x;
 final y;
 Ball(this.x, this.y);
 @override
 Widget build(BuildContext context) {
  return Container(
   alignment: Alignment(x, y),
   child: Container(
    decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.white),
    width: 20,
    height: 20,
   ),
  );
 }
}

Sekarang mari kita desain kelas Brick untuk menangani desain bata, warna, posisi, dan tipe pemain. Di sini, kita menggunakan persamaan matematika (Alignment((2* x +brickWidth)/(2-brickWidth), y)) untuk melewatkan posisi sumbu x dan y:

class Brick extends StatelessWidget {
 final x;
 final y;
 final brickWidth;
 final isEnemy;
 Brick( this.x, this.y, this.brickWidth, this.isEnemy);
 @override
 Widget build(BuildContext context) {
  return Container(
    alignment: Alignment((2* x +brickWidth)/(2-brickWidth), y),
    child: ClipRRect(
     borderRadius: BorderRadius.circular(10),
     child: Container(
       alignment: Alignment(0, 0),
       color: isEnemy?Colors.purple[500]: Colors.pink[300],
       height: 20,
       width:MediaQuery.of(context).size.width * brickWidth/ 2,
       ),
    ));
 }
}

Terakhir, kelas Score pada Game 2D harus ditempatkan langsung di bawah widget build di file homepage.dart; ini menampilkan skor setiap pemain.

Buat konstruktor untuk variabel musuhScore dan playerScore untuk menangani skor setiap pemain, dan gameStarted untuk memeriksa apakah game telah dimulai. Ini akan menampilkan konten Stack(), atau Container() yang kosong:

class Score extends StatelessWidget {
 final gameStarted;
 final enemyScore;
 final playerScore;
 Score(this.gameStarted, this.enemyScore,this.playerScore, );
 @override
 Widget build(BuildContext context) {
  return gameStarted? Stack(children: [
   Container(
     alignment: Alignment(0, 0),
     child: Container(
      height: 1,
      width: MediaQuery.of(context).size.width / 3,
      color: Colors.grey[800],
     )),
   Container(
     alignment: Alignment(0, -0.3),
     child: Text(
      enemyScore.toString(),
      style: TextStyle(color: Colors.grey[800], fontSize: 100),
     )),
   Container(
     alignment: Alignment(0, 0.3),
     child: Text(
      playerScore.toString(),
      style: TextStyle(color: Colors.grey[800], fontSize: 100),
     )),
  ]): Container();
 }
}

Dalam tutorial ini, kami membahas cara membuat game 2D mulai dari penyelarasan, RawKeyboardListener, widget, boolean, ClipRect untuk wadah, dan fungsi matematika dalam kode kami, semuanya digunakan untuk membuat ulang game Pong. Permainan juga dapat ditingkatkan dengan menambah jumlah bola atau mengurangi panjang bata, membuatnya lebih kompleks.

Jika ingin tahu lebih banyak pembahasan tentang pembuatan game, kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.