Media Pengembangan Web & App | by APPKEY

Pembuatan AplikasiAplikasi GameCara Membuat Game 2D dengan Flutter

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?

cara-membuat-game

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]),
          )),
       ),
      )
     ],
    );
   });
}
Artikel Terkait  Ini Dia NoSQL Database Terbaik yang Bisa Anda Coba

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:

Artikel Terkait  MySQL vs SQLite : Apa sih Bedanya? Yuk Cari Tahu!
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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya