Cara Membuat Game 2D dengan Flutter untuk Game Tenis Meja “Pong”

lutter adalah salah satu teknologi yang diciptakan Google, yang berbasis open source, serta banyak digunakan oleh para developer dalam membuat sebuah multiplatform dengan mudah. Salah satunya yaitu dengan hanya mengandalkan satu codebase saja. Lebih jauh lagi, flutter juga bisa digunakan untuk membuat game 2D. Bagaimana caranya? Yuk simak cara membuat game 2D dengan flutter berikut ini!

Pengertian dan Cara Membuat Game 2D dengan Flutter

Bisa dibilang, flutter adalah satu teknologi yang dikembangkan oleh Google, yang mengusung fitur interface yang mudah. Sehingga bisa digunakan oleh siapa saja, tanpa membutuhkan sistem coding yang rumit.

Flutter sendiri pertama diperkenalkan pada tahun 2017 yang lalu. Dimana tujuan utama dari pembuatan flutter sendiri yaitu bisa digunakan dalam pembuatan aplikasi android, desktop hingga web. Uniknya, flutter memungkinkan Anda untuk bisa membuat aplikasi di android, desktop dan web tersebut hanya dengan satu coding (codebase) saja.

Dalam arti, dengan menggunakan flutter, Anda bisa membuat 2 aplikasi yang berbeda, yang terdiri dari iOs dan juga android. Namun hanya dengan satu bahasa pemrograman dan juga satu codebase saja. Lalu bahasa pemrograman apa yang digunakan pada flutter ini?

Sebagaimana diketahui, Dart adalah bahasa pemrograman yang digunakan oleh flutter. Lebih jauh lagi, dengan flutter, Anda bisa membuat sebuah aplikasi desain hingga game 2D. Bagaimana cara membuat game 2D dengan flutter ini? Anda bisa menyimak langkah-langkahnya dalam panduan berikut ini!

Panduan Membuat Game 2D Pong dengan Flutter

Pong adalah salah satu game sederhana yang menampilkan permainan bola pingpong (tenis meja). Dimana pemain akan bertugas untuk menggerakkan bet untuk menahan bola pingpong yang menuju ke arahnya. Gerakan bola biasanya dibuat secara naik-turun.

Untuk membuat game 2D Pong ini, Anda bisa mengandalkan flutter. Bagaimana caranya? Ini dia beberapa langkahnya:

Pastikan bahwa Anda telah menginstal flutter sebelumnya

Jika memang flutter telah terpasang pada desktop Anda, maka langkah pertama, Anda perlu menghapus kode default yang ada pada file main.dart

Selanjutnya, impor material.dart. Fungsinya yaitu untuk memasukkan widget pada material aplikasi

Langkah selanjutnya, Anda bisa membuat kelas yang diberi nama MyApp (). Kemudian posisikan semula materialApp. Selanjutnya, buatlah sebuah stateful Widget Homepage (), yang nantinya akan diteruskan pada parameter home MaterialApp (). Tampilan pada monitor akan terlihat seperti berikut 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(), ); }}

Dalam kelas/kolom homepage (), Anda perlu menulis beberapa metode yang berhubungan dengan matematika dan juga fisika. Termasuk diantaranya yang meliputi akselerasi, penanganan jika terjadi tabrakan fungsi, deselerasi, hingga navigasi dalam game tersebut

Untuk selanjutnya, Anda juga perlu mengatur posisi bola, pemain, dan juga skor awal. Baik itu skor untuk pemain pertama dan juga pemain kedua. Kode parameter untuk melakukan pengaturan tersebut haruslah Anda tempatkan di bawah homepage (), seperti berikut ini:

//player variations (variasi pemain)double playerX = -0.2;bata ganda lebar (double brickwidth) = 0.4;int player score (skor pemain) = 0;// variabel kemungkinan lawan (enemy variable)double enemyX (musuh/lawan ganda) = -0.2;int enemy score (skor lawan) = 0;//ball double ballx = 0;double bally = 0;var ballYDirection = direction.DOWN;var ballXDirection = direction.RIGHT;bool gameStarted = false;

Jika langkah diatas telah Anda lakukan, maka kini Anda bisa melakukan enumerasi posisi dan gerakan bola maupun bata (bricks). Dimana gerakan/posisi tersebut diatur dengan arah up (atas), down (bawah), right (kanan), dan juga left (kiri)

Sebenarnya, cara membuat game 2D dengan flutter pada game Pong ini sudah dianggap selesai. Namun agar game ini bisa dimainkan, maka Anda perlu melakukan pengaturan lainnya. Diantaranya pengaturan mengenai bagaimana membuat gravitasi buatan, sehingga bola bisa naik ke atas, turun ke bawah, hingga membentur ke dinding, tepat di bagian kanan dan juga kiri pemain. Caranya yaitu dengan mengetik kode berikut ini:

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(); } });}

Setelah Anda melakukan langkah diatas, maka kini giliran Anda untuk menetapkan pengaturan, agar bola nantinya tidak melampaui garis 9.0. Dimana nantinya, bola hanya akan bergerak secara berlawanan, bilamana bola bersentuhan dengan bata. Adapun caranya dengan mengetik kode-kode flutter seperti berikut ini:

void updateddirection() {
 setstate(() {
  //update vertical direction
  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

Itu dia cara membuat game 2D dengan flutter untuk jenis game tenis meja Pong ini. Bagi Anda yang masih pemula, mungkin cara diatas terbilang rumit. Namun jika dibandingkan dengan teknologi pembuat aplikasi dan game lainnya, membuat game 2D dengan flutter ini terbilang mudah. Anda hanya perlu menyimak panduan diatas, dan praktekkan langkah demi langkah di atas, dengan teliti dan penuh kehati-hatian. Selamat mencoba!