Hướng dẫn sử dụng công cụ GUI của Arcade để tạo menu game và giao diện người dùng

Học lập trình Game - Python

Menu game và giao diện người dùng đóng vai trò quan trọng trong việc nâng cao trải nghiệm và tính hấp dẫn cho trò chơi. Dưới đây là cách tạo menu và thiết kế UI dễ dàng bằng các công cụ GUI của Arcade.

Hướng dẫn sử dụng công cụ GUI của Arcade để tạo menu game và giao diện người dùng

Arcade, một thư viện Python nổi tiếng trong lập trình game, cung cấp những công cụ GUI mạnh mẽ để tạo các thanh menu, UI dễ dàng. Sau đây là hướng dẫn chi tiết.

Tạo game đơn giản

Trước khi bắt đầu, đảm bảo đã cài pip trên thiết bị. Dùng lệnh này để cài thư viện arcade:

pip install arcade

Bắt đầu bằng cách tạo một game đơn giản bằng Arcade.

Game này sẽ bao gồm một đối tượng người chơi có thể di chuyển sang trái & phải và một đối tượng kẻ thù. Đây là code cho game:

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

Thêm màn hình Game Over

Thêm màn hình game over hiện thông báo khi kẻ thù di chuyển ra ngoài cửa sổ game. Dùng class arcade.gui.UIManager và arcade.gui.UIMessageBox để đạt được điều này.

Tạo phiên bản của UIManager và kích hoạt nó. Bên trong on_draw, kiểm tra xem flag game_over đã được thiết lập hay chưa. Nếu có, hãy thiết kế trình quản lý UI. Lệnh show_game_over_screen tạo một UIMessageBox kèm thông báo game-over và thêm nó vào trình quản lý UI. Bạn cũng có thể kích hoạt và vô hiệu hóa trình quản lý này bằng phương thức update dựa trên trạng thái game.

Tạo một file mới tên game-over.py và thêm code cùng các update bên dưới:

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() # Kích hoạt trình quản lý UI

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

Kết quả:

Thêm màn hình Game Over

Thêm nút bấm

Giờ cải tiến màn hình game over bằng cách thêm các nút bấm để khởi động lại hoặc thoát game. Bạn có thể hoàn thành việc này bằng cách dùng tham số buttons của UIMessageBox và cung cấp một hàm callback để xử lý các lượt click vào nút bấm.

Tạo file mới tên button.py và thêm code với các bản update sau:

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

Kết quả:

Thêm nút bấm

Trong show_game_over_screen, thêm hai nút bấm, Restart và Exit, tới UIMessageBox bằng cách xác định chúng trong tham số buttons. Ngoài ra, cung cấp một hàm callback, on_game_over_button_click, để xử lý các lượt nhấp vào nút bấm. Bên trong hàm callback, kiểm tra nút bấm được click và thực hiện các hành động tương ứng.

Những tính năng bổ sung của công cụ GUI trong Arcade

Công cụ GUI của Arcade cung cấp một loạt tính năng bổ sung, giúp nâng cao chức năng và hoạt động tương tác của menu game và thiết kế UI. Sau đây là một số ví dụ:

  • Class UIDraggableMixin tạo widget UI có thể kéo.
  • Class UIMouseFilterMixin cho phép bạn ghi lại tất cả sự kiện chuột xảy ra trong widget cụ thể.
  • Class UIWindowLikeMixin cung cấp hành vi giống cửa sổ cho một widget.
  • Class Surface đại diện cho một bộ đệm để vẽ các phần tử UI.

Trên đây là cách tạo menu game và UI bằng những công cụ GUI của Arcade. Hi vọng bài viết hữu ích với các bạn.

CÓ THỂ BẠN QUAN TÂM