ایجاد منوهای بازی و طراحی رابط کاربری بدون زحمت با استفاده از ابزارهای رابط کاربری گرافیکی Arcade را بیاموزید.
منوهای بازی و رابط های کاربری (UI) نقش مهمی در افزایش تجربه کاربر و تعامل یک بازی دارند. Arcade، یک کتابخانه محبوب پایتون برای توسعه بازی، ابزارهای قدرتمند GUI (رابط کاربری گرافیکی) را ارائه می دهد که طراحی و پیاده سازی منوهای بازی و عناصر UI را آسان می کند.
یک بازی ساده بسازید
قبل از شروع، مطمئن شوید که پیپ را روی دستگاه خود نصب کرده اید. برای نصب کتابخانه آرکید از این دستور استفاده کنید:
pip install arcade
با ایجاد یک بازی ساده با استفاده از Arcade شروع کنید.
کد استفاده شده در این مقاله در این مخزن GitHub موجود است و برای استفاده شما تحت مجوز MIT رایگان است.
این بازی دارای یک جسم بازیکن است که می تواند به چپ و راست حرکت کند و یک شی دشمن. این هم کد بازی:
import arcade
WIDTH = 800
HEIGHT = 600
PLAYER_SPEED = 25
class Game(arcade.Window):
def __init__(self):
super().__init__(WIDTH, HEIGHT, "Simple Game")
self.player_x = WIDTH // 2
self.enemy_x = WIDTH - 50
self.game_over = False
def setup(self):
arcade.set_background_color(arcade.color.WHITE)
def on_draw(self):
arcade.start_render()
arcade.draw_circle_filled(self.player_x, HEIGHT // 2, 20, arcade.color.BLUE)
arcade.draw_circle_filled(self.enemy_x, HEIGHT // 2, 20, arcade.color.RED)
def update(self, delta_time):
self.enemy_x += 0.5
if self.enemy_x >= WIDTH:
self.game_over = True
def on_key_press(self, key, modifiers):
if key == arcade.key.LEFT:
self.player_x -= PLAYER_SPEED
elif key == arcade.key.RIGHT:
self.player_x += PLAYER_SPEED
game = Game()
game.setup()
arcade.run()
اضافه کردن بازی روی صفحه
یک بازی روی صفحه اضافه کنید که وقتی دشمن به خارج از پنجره بازی حرکت می کند، پیامی را نشان می دهد. برای رسیدن به این هدف از کلاس‌های arcade.gui.UImanager و arcade.gui.MessageBox استفاده کنید.
یک نمونه از UImanager ایجاد کنید و آن را فعال کنید. در روش on_draw، بررسی کنید که آیا پرچم game_over تنظیم شده است یا خیر، و اگر چنین است، مدیر رابط کاربری را رسم کنید. متد show_game_over_screen یک UImessageBox با یک پیام بازی over ایجاد می کند و آن را به مدیر رابط کاربری اضافه می کند. همچنین می توانید UI manager را در روش به روز رسانی بر اساس وضعیت بازی فعال و غیرفعال کنید.
یک فایل جدید به نام game-over.py ایجاد کنید و کد را با به روز رسانی های زیر اضافه کنید:
import arcade
from arcade.gui import UIManager, UIMessageBox
WIDTH = 800
HEIGHT = 600
PLAYER_SPEED = 25
class Game(arcade.Window):
def __init__(self):
super().__init__(WIDTH, HEIGHT, "Simple Game")
self.player_x = WIDTH // 2
self.enemy_x = WIDTH - 50
self.ui_manager = UIManager()
self.game_over = False
def setup(self):
arcade.set_background_color(arcade.color.WHITE)
self.ui_manager.enable() # Enable the UI manager
def on_draw(self):
arcade.start_render()
arcade.draw_circle_filled(self.player_x, HEIGHT // 2, 20, arcade.color.BLUE)
arcade.draw_circle_filled(self.enemy_x, HEIGHT // 2, 20, arcade.color.RED)
if self.game_over:
self.ui_manager.draw()
def update(self, delta_time):
self.enemy_x += 0.5
if self.enemy_x >= WIDTH:
self.show_game_over_screen()
self.game_over = True
if self.game_over:
self.ui_manager.enable()
else:
self.ui_manager.disable()
def on_key_press(self, key, modifiers):
if key == arcade.key.LEFT:
self.player_x -= PLAYER_SPEED
elif key == arcade.key.RIGHT:
self.player_x += PLAYER_SPEED
def show_game_over_screen(self):
message_box = UIMessageBox(
width=400,
height=200,
message_text="Game Over!"
)
self.ui_manager.add(message_box)
game = Game()
game.setup()
arcade.run()
در زیر خروجی است:
اضافه کردن دکمه ها
اکنون، با افزودن دکمه‌هایی برای راه‌اندازی مجدد بازی یا خروج، بازی را روی صفحه افزایش دهید. می‌توانید این کار را با استفاده از پارامتر دکمه‌های UIMessageBox و ارائه عملکرد برگشت به تماس برای کنترل کلیک‌های دکمه انجام دهید.
یک فایل جدید به نام buttons.py ایجاد کنید و کد را با به روز رسانی های زیر اضافه کنید:
def show_game_over_screen(self):
message_box = UIMessageBox(
width=400,
height=200,
message_text="Game Over!",
buttons=("Restart", "Exit"),
callback=self.on_game_over_button_click
)
self.ui_manager.add(message_box)
def on_game_over_button_click(self, button_text):
if button_text == "Restart":
self.restart_game()
elif button_text == "Exit":
arcade.close_window()
def restart_game(self):
self.game_over = False
self.enemy_x = WIDTH - 50
self.ui_manager.clear()
در زیر خروجی است:
در روش show_game_over_screen دو دکمه Restart و Exit را با مشخص کردن آنها در پارامتر buttons به UIMessageBox اضافه کنید. همچنین یک تابع callback، on_game_over_button_click، برای رسیدگی به کلیک دکمه ها ارائه دهید. در داخل تابع callback، بررسی کنید که روی کدام دکمه کلیک شده و عمل مربوطه را انجام دهید.
ویژگی های اضافی ابزارهای رابط کاربری گرافیکی Arcade
ابزارهای رابط کاربری گرافیکی Arcade ویژگی‌های اضافی مختلفی را ارائه می‌دهند که می‌توانند عملکرد و تعامل منوهای بازی و طراحی‌های رابط کاربری شما را بیشتر کنند. در اینجا چند نمونه هستند:
UIdraggableMixin
کلاس UIDraggableMixin را می توان برای کشیدن هر ویجت UI استفاده کرد. عملکردی را برای کنترل رفتار کشیدن ارائه می کند و به کاربران امکان می دهد عناصر UI را در اطراف صفحه نمایش جابجا کنند. ترکیب این میکس با سایر ویجت‌های رابط کاربری به شما امکان می‌دهد پنجره‌ها یا پنل‌های قابل کشیدن را در بازی خود ایجاد کنید.
UImouseFilterMixin
کلاس UIMouseFilterMixin شما را قادر می سازد تا تمام رویدادهای ماوس را که در یک ویجت خاص رخ می دهند، مشاهده کنید. این به ویژه برای ویجت‌های پنجره‌مانندی که می‌خواهید از تأثیرگذاری رویدادهای ماوس بر عناصر UI اساسی جلوگیری کنید، مفید است. با فیلتر کردن رویدادهای ماوس، می توانید تعامل درون ویجت را به طور مستقل کنترل کنید.
UIWindowLikeMixin
کلاس UIWindowLikeMixin رفتار پنجره مانندی را برای یک ویجت ارائه می کند. تمام رویدادهای ماوس را که در محدوده‌های ویجت رخ می‌دهند مدیریت می‌کند و اجازه می‌دهد ویجت کشیده شود. این برای ایجاد پنجره‌ها یا پنل‌های قابل کشیدن که کاربران می‌توانند در بازی شما با آنها تعامل داشته باشند، ایده‌آل است.
سطح
کلاس Surface نشان دهنده یک بافر برای ترسیم عناصر UI است. طراحی روی بافر را انتزاع می کند و روش هایی را برای فعال کردن، پاک کردن و ترسیم بافر روی صفحه ارائه می دهد. می توانید از این کلاس به صورت داخلی برای رندر کردن ویجت ها یا عناصر رابط کاربری سفارشی در بازی خود استفاده کنید.
این ویژگی‌های اضافی فرصت‌هایی را برای ایجاد تجربه‌های تعاملی و پویاتر کاربر در بازی‌های شما ارائه می‌دهند. این ویژگی‌ها را آزمایش کنید تا عملکرد منحصربه‌فرد اضافه کنید و منوهای بازی و طراحی‌های رابط کاربری خود را برجسته کنید.
بهترین روش ها برای ترکیب رابط کاربری گرافیکی
هنگام استفاده از ابزارهای رابط کاربری گرافیکی در بازی های خود با استفاده از Arcade، رعایت برخی از بهترین روش ها برای اطمینان از تجربه کاربری روان و بدون درز بسیار مهم است. در اینجا نکاتی وجود دارد که باید در نظر داشته باشید:
طرح و نمونه اولیه
قبل از اینکه وارد پیاده سازی شوید، زمانی را صرف برنامه ریزی و نمونه سازی منوهای بازی و عناصر رابط کاربری خود کنید. برای اطمینان از طراحی منسجم و کاربرپسند، چیدمان، عملکرد و زیبایی بصری را در نظر بگیرید.
آن را ثابت نگه دارید
سبک بصری و چیدمان ثابتی را در منوهای بازی و عناصر رابط کاربری خود حفظ کنید. این به کاربران کمک می‌کند تا راحت‌تر در بازی شما حرکت کنند و تجربه‌ای منسجم را فراهم می‌کند.
طراحی تعاملی
عناصر رابط کاربری خود را طوری طراحی کنید که پاسخگو و قابل انطباق با اندازه ها و وضوح های مختلف صفحه نمایش باشند. این تضمین می‌کند که منوهای بازی و رابط کاربری شما در دستگاه‌های مختلف قابل استفاده و از نظر بصری جذاب باقی می‌مانند.
مدیریت رویداد موثر
رویدادهای ورودی کاربر را به طور موثر مدیریت کنید تا از تعاملات پاسخگو و روان اطمینان حاصل کنید. از محاسبات غیرضروری یا پردازش رویدادها که می‌توانند باعث تأخیر یا تأخیر در پاسخگویی رابط کاربری شوند، خودداری کنید.
بازخورد کاربر
هنگامی که کاربران با منوهای بازی و عناصر UI شما تعامل دارند، بازخورد واضح و فوری را به کاربران ارائه دهید. نشانه‌های بصری، انیمیشن‌ها و بازخورد صوتی در بازی‌ها می‌توانند تجربه کاربر را بهبود بخشند و بازی را زیباتر کنند.
با پیروی از این بهترین شیوه‌ها، می‌توانید منوهای بازی و طرح‌های رابط کاربری ایجاد کنید که بصری و از نظر بصری جذاب باشند.
تعامل کاربر را با رابط کاربری جذاب بصری افزایش دهید
افزودن عناصر رابط کاربری گرافیکی به بازی شما نه تنها قابلیت استفاده را بهبود می بخشد، بلکه جذابیت بصری و درگیری کلی بازیکنان را نیز افزایش می دهد. چه در حال ایجاد یک منوی شروع، بازی روی صفحه یا هر عنصر رابط کاربری دیگری باشید، ابزارهای رابط کاربری گرافیکی Arcade طیف وسیعی از ویژگی ها و عملکردها را برای بهبود تجربه کاربری بازی شما ارائه می دهند.