ساخت یک بازی دو بعدی با فلاتر

ظهور و رشد Flutter باعث توسعه طراحی بازی های کراس پلتفرم شده است. بازی های فلاتر را می توان تنها با چند خط کد ، طراحی و بر اساس منطق ایجاد کرد، در عین حال که UI/UX عالی را حفظ کرد.

فلاتر قابلیت رندر تا 60 فریم بر ثانیه را دارد. شما می توانید از این قابلیت برای ساخت یک بازی ساده دو بعدی یا حتی سه بعدی استفاده کنید. به خاطر داشته باشید که بازی های پیچیده تر برای توسعه در Flutter ایده خوبی نخواهد بود، زیرا بیشتر توسعه دهندگان به سمت توسعه native برای برنامه های پیچیده می روند.

در این آموزش، یکی از اولین بازی های کامپیوتری که تا به حال ساخته شده است را بازسازی خواهیم کرد: Pong.  یک بازی ساده است، بنابراین یک موقعیت عالی برای شروع است. این مقاله به دو بخش اصلی تقسیم شده است: منطق بازی و UI، تا با تمرکز بر بخش های مهم به طور جداگانه، مراحل ساخت کمی واضح تر شود.

قبل از اینکه وارد ساخت بازی شویم، بیایید پیش نیازها و تنظیمات را مرور کنیم.

پیش نیازهای ساخت بازی با فلاتر

برای درک پروژه و کدنویسی ، به موارد زیر نیاز دارید:

فلاتر روی دستگاه شما نصب شده باشد

دانش کار با دارت و فلاتر

یک ویرایشگر متن (text editor)

شروع کار برنامه نویسی بازی دو بعدی با فلاتر

در اینجا ما از Alignment(x,y) به عنوان نمایشی از Vector(x,y) برای موقعیت محور X و Y صفحه استفاده می کنیم که به توسعه ساختار بازی کمک می کند. ما همچنین برای برخی از متغیرهای خود ویجت‌های stateless ایجاد می‌کنیم و آنها را در فایل homepage.dart تعریف می‌کنیم تا کد،  حجم کمتری داشته باشد و درک آن آسان شود.

ابتدا یک پروژه فلاتر ایجاد کنید. سپس کد پیش‌فرض فایل main.dart را پاک کنید و پکیج material.dart را برای گنجاندن ویجت‌های Material در برنامه import کنید.

در مرحله بعد، یک کلاس به نام MyApp() ایجاد کنید و MaterialApp  را return کنید، سپس یک ویجت stateful ، با نام HomePage() ایجاد کنید و آن را به پارامتر home در  MaterialApp مانند زیر ارسال کنید:

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

منطق بازی (Game logic)

در داخل HomePage()، باید توابع و متدهایی بنویسیم تا عملیات مربوط به ریاضی و فیزیک و ساختار را پشتیبانی و handle کنیم. اینها شامل رسیدگی به برخوردها(collisions)، شتاب گیری یا کاهش سرعت (accelerating or decelerating) و مسیریابی (navigation) در بازی است.

اما ابتدا باید برخی از پارامترها را تعریف کنیم که نشان‌دهنده هم‌ترازی موقعیت توپ، بازیکنان و امتیاز اولیه هر دو بازیکن است. کد پارامترها باید در زیر _HomePageState قرار گیرد که در ادامه مقاله به آن اشاره خواهیم کرد:

//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;
...

سپس، enum برای جهت حرکت توپ و آجر ارائه می کنیم:

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

برای اینکه این بازی کار کند، باید جاذبه مصنوعی ایجاد کنیم تا وقتی توپ به آجر بالایی (0.9) یا آجر پایینی (0.9-) برخورد کرد، در جهت مخالف حرکت کند. در غیر این صورت، اگر به هیچ یک از آجرها برخورد نکند و به بالای (1) یا پایین (1-) زمین بازی برود، آن را به عنوان باخت (loss) بازیکن ثبت می کند.

هنگامی که توپ در سمت چپ (1) یا راست (-1) به دیوار برخورد می کند، در جهت مخالف می رود:

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

در کد بالا، با یک تابع startGame() شروع کردیم که gameStarted boolean را به true تغییر می‌دهد، پس از آن یک Timer() با مدت زمان یک ثانیه فراخوانی می‌کنیم.

در تایمر، توابعی مانند updatedDirection()،moveBall()، و moveEnemy() در کنار یک دستور if ارسال می شوند تا بررسی شود که آیا هر یک از بازیکنان شکست خورده اند یا خیر. در این صورت، امتیاز جمع می شود، تایمر cancel می شود و یک dialog نشان داده می شود.

توابع زیر تضمین می‌کنند که توپ از 0.9 فراتر نمی‌رود و زمانی که توپ با آجر تماس پیدا می‌کند، فقط در جهت مخالف حرکت می‌کند:

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

همچنین اگر توپ به سمت چپ یا راست زمین برخورد کند، در جهت مخالف می رود:

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

توابع moveLeft() و moveRight() به کنترل حرکت آجرها از چپ به راست با استفاده از فلش صفحه کلید (keyboard arrow) کمک می کند. این توابع با یک عبارت if کار می کنند تا اطمینان حاصل شود که آجرها از عرض هر دو محور محدوده فراتر نمی روند.

تابع resetGame() بازیکنان و توپ را به موقعیت های پیش فرضشان برمی گرداند:

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

در مرحله بعد، دو تابع isEnemyDead() و isPlayerDead() ایجاد می کنیم که یک مقدار boolean را برمی گرداند. آنها بررسی می کنند که آیا هر یک از بازیکنان شکست خورده اند یا خیر (بررسی اینکه توپ به بخش عمودی پشت آجر برخورد کرده است):

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

در نهایت، تابع _showDialog زمانی که هر یک از بازیکنان برنده می‌شوند، دیالوگی را نمایش می‌دهد. برای متمایز کردن زمانی که یک بازیکن بازنده می شود، از متغیرboolean با نام enemyDied می فرستد . سپس اعلام می‌کند که بازیکنی که بازنده نیست راند را برده است و از رنگ بازیکن برنده برای متن نمایش داده شده «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]),
          )),
       ),
      )
     ],
    );
   });
}

رابط کاربری (User Interface)

اکنون توسعه رابط کاربری را آغاز می کنیم.داخل ویجت build در فایل homePage.dart، کد زیر را اضافه کنید:

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)
     ],
    ))),
 ),
);

در کد،  RawKeyboardListener()را return می کنیم که حرکت از چپ به راست را در حین ساختن در وب ارائه می‌کند. این را می توان برای دستگاه های Touchscreen نیز تکرار کرد.

ویجت GestureDetector() عملکرد onTap را ارائه می دهد که برای فراخوانی تابع startGame() که در بالا در منطق برنامه نوشته شده است، استفاده می شود. یک فرزند(child)، Scaffold() نیز برای مشخص کردن رنگ پس‌زمینه و بدنه برنامه نوشته شده است.

در مرحله بعد، یک کلاس به نام Welcome  ایجاد کنید و در یک Boolean ،pass  دهید تا بررسی کنید که آیا بازی شروع شده است یا خیر. اگر بازی شروع نشده باشد، متن “tap to play” قابل مشاهده خواهد بود:

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

اکنون می‌توانیم کلاس دیگری به نام Ball ایجاد کنیم تا با استفاده از Alignment(x,y) طرح توپ و موقعیت آن را در هر نقطه از محدوده  مدیریت کنیم. ما این پارامترها را از طریق یک سازنده برای ایجاد قابلیت جابجایی و تحرک pass می دهیم، مانند:

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

حالا بیایید کلاس Brick (آجر) را طوری طراحی کنیم که طرح آجر (brick design)، رنگ، موقعیت(position) و نوع بازیکن را مدیریت کند.

در اینجا، ما از یک معادله ریاضی (Alignment((2* x +brickWidth)/(2-brickWidth), y)) برای عبور از موقعیت محور x و 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,
       ),
    ));
 }

در نهایت، کلاس Score باید مستقیماً در زیر ویجت build در فایل homepage.dart قرار گیرد. که این کلاس امتیاز هر بازیکن را نشان می دهد.

یک سازنده برای متغیرهای armiqScore و playerScore ایجاد کنید تا امتیاز هر بازیکن را کنترل کند، و gameStarted برای بررسی اینکه آیا بازی شروع شده است یا خیر. در نهایت یک محتوای Stack()، یا یک Container()  خالی نمایش می دهد.

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

gif زیر یک تست از بازی را نشان می دهد:

نتیجه گیری

در این مقاله، alignment، RawKeyboardListener، ویجت‌ها، Boolean ها ، ClipRect برای container ها و توابع ریاضی را در کد خود پوشش دادیم که همگی برای بازسازی بازی Pong استفاده می‌شوند. بازی همچنین می تواند با افزایش تعداد توپ ها یا کاهش طول آجر بهبود یابد و آن را پیچیده تر کند.

امیدوارم این مقاله به اندازه ساختن و مستندسازی آن مفید و سرگرم کننده بوده باشد.