Pelajari cara membuat menu game dan mendesain antarmuka pengguna dengan mudah menggunakan alat GUI Arcade.

Menu game dan antarmuka pengguna (UI) memainkan peran penting dalam meningkatkan pengalaman pengguna dan interaksi game. Arcade, perpustakaan Python populer untuk pengembangan game, menyediakan alat GUI (Graphical User Interface) yang kuat yang memudahkan untuk merancang dan mengimplementasikan menu game dan elemen UI.

Buat Game Sederhana

Sebelum memulai, pastikan Anda sudah pip diinstal pada perangkat Anda. Gunakan perintah ini untuk menginstal perpustakaan arcade:

pip menginstal arcade

Mulailah dengan membuat game sederhana menggunakan Arcade.

Kode yang digunakan dalam artikel ini tersedia di sini repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Game ini akan menampilkan objek pemain yang dapat bergerak ke kiri dan ke kanan serta objek musuh. Berikut kode untuk gamenya:

impor arcade
LEBAR = 800
TINGGI = 600
PEMAIN_KECEPATAN = 25


kelasPermainan(arcade. Jendela):
def__init__(diri sendiri):





instagram viewer


 super().__init__(LEBAR, TINGGI, "Permainan Sederhana")
 self.player_x = LEBAR // 2
 self.enemy_x = LEBAR - 50
 self.game_over = PALSU


defmempersiapkan(diri sendiri):
 arcade.set_background_color (arcade.color. PUTIH)


defon_draw(diri sendiri):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arcade.color. BIRU)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arcade.color. MERAH)


defmemperbarui(mandiri, waktu_delta):
 diri.musuh_x += 0.5
jika self.enemy_x >= LEBAR:
 self.game_over = BENAR


defon_key_press(mandiri, kunci, pengubah):
jika kunci == arcade.kunci. KIRI:
 self.player_x -= PLAYER_SPEED
elif kunci == arcade.kunci. BENAR:
 self.player_x += PLAYER_SPEED
permainan = permainan()
game.setup()
arcade.lari()

Menambahkan Layar Game Over

Tambahkan layar game over yang menampilkan pesan saat musuh bergerak di luar jendela permainan. Menggunakan arcade.gui. Manajer UI Dan arcade.gui. UIMessageBox kelas untuk mencapainya.

Buat contoh dari Manajer UI dan mengaktifkannya. Di dalam on_draw metode, periksa apakah permainan telah berakhir bendera disetel, dan jika demikian, gambar pengelola UI. Itu show_game_over_screen metode menciptakan a UIMessageBox dengan pesan game-over dan menambahkannya ke pengelola UI. Anda juga dapat mengaktifkan dan menonaktifkan pengelola UI di memperbarui metode berdasarkan status permainan.

Buat file baru bernama game-over.py dan tambahkan kode dengan pembaruan di bawah ini:

impor arcade
dari arcade.gui impor UIManager, UIMessageBox
LEBAR = 800
TINGGI = 600
PEMAIN_KECEPATAN = 25


kelasPermainan(arcade. Jendela):
def__init__(diri sendiri):
 super().__init__(LEBAR, TINGGI, "Permainan Sederhana")
 self.player_x = LEBAR // 2
 self.enemy_x = LEBAR - 50
 self.ui_manager = UIManager()
 self.game_over = PALSU


defmempersiapkan(diri sendiri):
 arcade.set_background_color (arcade.color. PUTIH)
 self.ui_manager.enable() # Aktifkan manajer UI


defon_draw(diri sendiri):
 arcade.start_render()
 arcade.draw_circle_filled (self.player_x, HEIGHT // 2, 20, arcade.color. BIRU)
 arcade.draw_circle_filled (self.enemy_x, HEIGHT // 2, 20, arcade.color. MERAH)
jika self.game_over:
 self.ui_manager.draw()


defmemperbarui(mandiri, waktu_delta):
 diri.musuh_x += 0.5
jika self.enemy_x >= LEBAR:
 self.show_game_over_screen()
 self.game_over = BENAR
jika self.game_over:
 self.ui_manager.enable()
kalau tidak:
 self.ui_manager.disable()


defon_key_press(mandiri, kunci, pengubah):
jika kunci == arcade.kunci. KIRI:
 self.player_x -= PLAYER_SPEED
elif kunci == arcade.kunci. BENAR:
 self.player_x += PLAYER_SPEED


defshow_game_over_screen(diri sendiri):
 kotak_pesan = UIMessageBox(
 lebar=400,
 tinggi =200,
 pesan_teks="Permainan telah berakhir!"
 )
 self.ui_manager.tambahkan (message_box)
permainan = permainan()
game.setup()
arcade.lari()

Di bawah ini adalah outputnya:

Menambahkan Tombol

Sekarang, tingkatkan layar game over dengan menambahkan tombol untuk memulai kembali game atau keluar. Anda dapat melakukannya dengan menggunakan tombol parameter dari UIMessageBox dan menyediakan fungsi panggilan balik untuk menangani klik tombol.

Buat file baru bernama tombol.py dan tambahkan kode dengan pembaruan di bawah ini:

defshow_game_over_screen(diri sendiri):
 kotak_pesan = UIMessageBox(
 lebar=400,
 tinggi =200,
 pesan_teks="Permainan telah berakhir!",
 tombol=("Mengulang kembali", "KELUAR"),
 callback=self.on_game_over_button_click
 )
 self.ui_manager.tambahkan (message_box)
defon_game_over_button_click(diri, tombol_teks):
jika tombol_teks == "Mengulang kembali":
 self.restart_game()
elif tombol_teks == "KELUAR":
 arcade.close_window()
defrestart_game(diri sendiri):
 self.game_over = PALSU
 self.enemy_x = LEBAR - 50
 self.ui_manager.clear()

Di bawah ini adalah outputnya:

Dalam show_game_over_screen metode, tambahkan dua tombol, Mengulang kembali Dan KELUAR, ke UIMessageBox dengan menentukannya di tombol parameter. Juga menyediakan fungsi callback, on_game_over_button_click, untuk menangani klik tombol. Di dalam fungsi panggilan balik, periksa tombol mana yang diklik dan lakukan tindakan yang sesuai.

Alat GUI Arcade menawarkan berbagai fitur tambahan yang selanjutnya dapat meningkatkan fungsionalitas dan interaktivitas menu game dan desain UI Anda. Berikut beberapa contohnya:

UIDraggableMixin

Itu UIDraggableMixin kelas dapat digunakan untuk membuat widget UI apa pun dapat diseret. Ini menyediakan fungsionalitas untuk menangani perilaku menyeret, memungkinkan pengguna untuk memindahkan elemen UI di sekitar layar. Menggabungkan mixin ini dengan widget UI lainnya memungkinkan Anda membuat jendela atau panel yang dapat diseret di game Anda.

UIMouseFilterMixin

Itu UIMouseFilterMixin class memungkinkan Anda menangkap semua peristiwa mouse yang terjadi dalam widget tertentu. Ini sangat berguna untuk widget mirip jendela di mana Anda ingin mencegah peristiwa mouse memengaruhi elemen UI yang mendasarinya. Dengan memfilter peristiwa mouse, Anda dapat mengontrol interaksi di dalam widget secara mandiri.

UIWindowLikeMixin

Itu UIWindowLikeMixin kelas menyediakan perilaku seperti jendela ke widget. Ini menangani semua peristiwa mouse yang terjadi dalam batas widget dan memungkinkan widget untuk diseret. Ini ideal untuk membuat jendela atau panel yang dapat diseret yang dapat berinteraksi dengan pengguna di game Anda.

Permukaan

Itu Permukaan class mewakili buffer untuk menggambar elemen UI. Ini mengabstraksi gambar pada buffer dan menyediakan metode untuk mengaktifkan, menghapus, dan menggambar buffer di layar. Anda bisa menggunakan kelas ini secara internal untuk merender widget atau elemen UI khusus di game Anda.

Fitur tambahan ini menawarkan peluang untuk menciptakan pengalaman pengguna yang lebih interaktif dan dinamis di game Anda. Bereksperimenlah dengan fitur-fitur ini untuk menambahkan fungsionalitas unik dan menonjolkan menu game dan desain UI Anda.

Praktik Terbaik untuk Memasukkan GUI

Saat menggabungkan alat GUI ke dalam game Anda menggunakan Arkade, penting untuk mengikuti beberapa praktik terbaik untuk memastikan pengalaman pengguna yang lancar dan lancar. Berikut adalah beberapa tips yang perlu diingat:

Rencanakan dan Prototipe

Sebelum terjun ke implementasi, luangkan waktu untuk merencanakan dan membuat prototipe menu game dan elemen UI Anda. Pertimbangkan tata letak, fungsionalitas, dan estetika visual untuk memastikan desain yang koheren dan ramah pengguna.

Tetap Konsisten

Pertahankan gaya visual dan tata letak yang konsisten di seluruh menu game dan elemen UI Anda. Ini membantu pengguna menavigasi game Anda dengan lebih mudah dan memberikan pengalaman yang kohesif.

Desain responsif

Rancang elemen UI Anda agar responsif dan dapat disesuaikan dengan berbagai ukuran dan resolusi layar. Ini memastikan menu game dan UI Anda tetap dapat digunakan dan menarik secara visual di berbagai perangkat.

Penanganan Acara yang Efisien

Tangani peristiwa input pengguna secara efisien untuk memastikan interaksi yang responsif dan lancar. Hindari penghitungan atau pemrosesan peristiwa yang tidak perlu yang dapat menimbulkan kelambatan atau keterlambatan dalam respons UI.

Umpan Balik Pengguna

Berikan umpan balik yang jelas dan segera kepada pengguna saat mereka berinteraksi dengan menu game dan elemen UI Anda. Isyarat visual, animasi, dan umpan balik audio dalam game dapat meningkatkan pengalaman pengguna dan membuat game terasa lebih halus.

Dengan mengikuti praktik terbaik ini, Anda dapat membuat menu game dan desain UI yang intuitif dan menarik secara visual.

Tingkatkan Keterlibatan Pengguna Dengan UI yang Menarik Secara Visual

Menambahkan elemen GUI ke game Anda tidak hanya meningkatkan kegunaan tetapi juga meningkatkan daya tarik visual dan keterlibatan pemain secara keseluruhan. Baik Anda membuat menu mulai, layar game over, atau elemen UI lainnya, alat GUI Arcade menawarkan berbagai fitur dan fungsi untuk meningkatkan pengalaman pengguna game Anda.