نحوه ایجاد منوهای رابط کاربری سفارشی در Godot با استفاده از گره های کنترل

یاد بگیرید که چگونه دکمه های سفارشی را در صحنه های جداگانه نمایش دهید تا به عنوان منوهای صفحه نمایش ساده برای بازی های شما عمل کنند.

نکات کلیدی

• منوهای سفارشی در گودو می توانند تعامل و تجربه کاربر را با ارائه ناوبری آسان و دسترسی سریع به ویژگی های بازی بهبود بخشند.
• Godot یک مجموعه ابزار قدرتمند برای ایجاد منوهای UI سفارشی با استفاده از گره های کنترل در موتور بازی ارائه می دهد.
• می‌توانید با افزودن گره‌های مناسب و پیاده‌سازی عملکرد آن‌ها با استفاده از GDScript، منوهایی مانند منوهای شروع، منوهای مکث و صفحه‌های بازی روی صفحه در Godot ایجاد کنید.

منوهای سفارشی می توانند تعامل و تجربه کاربری بازی Godot شما را تا حد زیادی افزایش دهند. با ایجاد منوهای بصری و بصری جذاب، می‌توانید مسیریابی آسان و دسترسی سریع به ویژگی‌های مختلف بازی را برای بازیکنان فراهم کنید.

خوشبختانه، گودو مجموعه ابزار قدرتمندی برای ایجاد منوهای UI سفارشی با استفاده از گره های کنترلی ارائه می دهد.

راه اندازی بازی گودو

برای شروع، یک صحنه بازی دو بعدی در موتور بازی گودو ایجاد کنید. یک گره KinematicBody2D برای کاراکتر بازیکن اضافه کنید و یک گره CollisionShape2D را به آن وصل کنید، یک شکل مستطیل تعریف کنید که نشان دهنده ناحیه برخورد بازیکن است.

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

علاوه بر این، یک گره Sprite2D برای نمایش شخصیت بازیکن به صورت بصری اضافه کنید. در زیر یک قطعه کد GDScript برای فعال کردن حرکت بازیکن آورده شده است:

extends KinematicBody2D

const SPEED = 200
const GRAVITY = 500
var velocity = Vector2.ZERO

func _physics_process(delta):
    var move_direction = 0

    if Input.is_action_pressed("ui_right"):
        move_direction += 1

    if Input.is_action_pressed("ui_left"):
        move_direction -= 1

    velocity.x = move_direction * SPEED
    velocity.y += GRAVITY * delta
    velocity = move_and_slide(velocity, Vector2.UP)

در این کد یک SPEED ثابت برای کنترل سرعت حرکت بازیکن تعریف کنید. متغیر سرعت را در پاسخ به ورودی کاربر به‌روزرسانی کنید و با در نظر گرفتن برخوردها و گرانش بازی، برای حرکت بازیکن () move_and_slide را فراخوانی کنید.

یک منوی شروع ایجاد کنید

برای ایجاد یک منوی شروع در گودو، یک گره کنترل را به عنوان ریشه صحنه اضافه کنید. یک گره Label را به عنوان فرزند این گره کنترل اضافه کنید و متن آن را روی Simple Game قرار دهید. می توانید فونت، اندازه و رنگ برچسب را مطابق با سبک بازی خود سفارشی کنید.

پس از آن، یک گره Button به عنوان فرزند گره Control اضافه کنید. متن دکمه را روی Play Game تنظیم کنید. برای کنترل عملکرد دکمه Play Game کد سفارشی بنویسید:

extends Control

func _ready():
    var playButton = $Button
    playButton.connect("pressed", self, "_on_PlayButton_pressed")

func _on_PlayButton_pressed():
    # Load the game scene
    var gameScene = preload("res://GameScene.tscn")
    
    # Transition to the game scene
    get_tree().change_scene(gameScene)

این کد سیگنال فشرده شده playButton را به تابع _on_PlayButton_pressed متصل می کند. این تابع صحنه بازی را با استفاده از () preload بارگذاری می کند و نمونه ای از آن ایجاد می کند. سپس از change_scene() برای انتقال به صحنه بازی استفاده می کند.

به طور مشابه، می توانید یک دکمه خروج اضافه کنید که بازیکنان می توانند از آن برای ترک بازی استفاده کنند:

func _ready():
    var playButton = $Button
    var exitButton = $Button2
    playButton.connect("pressed", self, "_on_PlayButton_pressed")
    exitButton.connect("pressed", self, "_on_ExitButton_pressed")

func _on_ExitButton_pressed():
    # Quit the game
    get_tree().quit()

این کد سیگنال فشار داده شده دکمه خروج را به تابع _on_ExitButton_pressed متصل می کند. این تابع quit() را برای خروج از بازی فراخوانی می کند.

منوی مکث را ایجاد کنید

برای افزودن یک منوی مکث به بازی گودو، یک صحنه جدید با گره کنترل به عنوان ریشه منوی مکث ایجاد کنید. عناصر بصری منو را طراحی کنید، از جمله برچسبی برای Paused و دکمه هایی برای از سرگیری بازی، بازگشت به منوی اصلی و خروج از بازی.

صحنه را به عنوان گره کودک بازی اصلی اضافه کنید. در اسکریپت متصل به گره Control، کد زیر را اضافه کنید:

extends Control

func _ready():
    $btnResume.connect("pressed", self, "_on_resume_button_pressed")
    $btnHome.connect("pressed", self, "_on_menu_button_pressed")
    $btnExit.connect("pressed", self, "_on_exit_button_pressed")
    pause_mode = Node.PAUSE_MODE_PROCESS
    get_tree().paused = false
    self.hide()
    
func _input(event):
    if event.is_action_pressed("ui_cancel"):
        if not self.is_visible_in_tree():
            # Pause the game when the pause menu is not visible
            self.show()
            get_tree().paused = true
        else:
            # Unpause the game when the pause menu is already visible
            self.hide()
            get_tree().paused = false

func _on_resume_button_pressed():
    # Hide the pause menu and resume the game
    self.hide()
    get_tree().paused = false

func _on_menu_button_pressed():
    # Return to the main menu
    get_tree().change_scene("res://StartMenu.tscn")

func _on_exit_button_pressed():
    # Quit the game
    get_tree().quit()

در تابع _ready()، سیگنال فشار داده شده دکمه های رزومه، خانه و خروج را به عملکردهای مربوطه وصل کنید: _on_resume_button_pressed()، _on_menu_button_pressed() و _on_exit_button_pressed().

pause_mode گره را روی Node.PAUSE_MODE_PROCESS تنظیم کنید. این به بازی اجازه می دهد تا زمانی که منوی مکث قابل مشاهده است به اجرا ادامه دهد. به طور پیش فرض، منوی مکث را با استفاده از self.hide() مخفی کنید و get_tree().paused را روی false قرار دهید تا مطمئن شوید که بازی در ابتدا متوقف نشده است.

سپس، از عبارت if در تابع _input(event) استفاده کنید تا بررسی کنید که آیا عملکرد ui_cancel فشرده شده است یا خیر. اگر منوی مکث در حال حاضر قابل مشاهده نیست، می توانید با نمایش منوی مکث و تنظیم get_tree().paused روی true، بازی را متوقف کنید.

یک بازی روی صفحه ایجاد کنید

برای پیاده سازی یک بازی روی صفحه در گودو، یک صحنه جداگانه به نام GameOver.tscn ایجاد کنید تا عناصر و عملکرد رابط کاربری آن را تعریف کنید. هنگامی که بازیکن از مرزهای صفحه عبور می کند، می توانید این صحنه را به عنوان یک گره فرزند اضافه کنید که نشان دهنده پایان بازی است.

یک صحنه جدید در گودو باز کنید و یک گره کنترل را به عنوان ریشه صحنه اضافه کنید. در داخل گره کنترل، یک گره Label برای نمایش متن Game Over اضافه کنید. فونت، اندازه و رنگ برچسب را با توجه به سبک بصری بازی خود سفارشی کنید.

سپس، گره‌های دکمه‌ای را برای گزینه‌های Play Again و Exit اضافه کنید. آنها را به طور مناسب روی صفحه نمایش قرار دهید.

سیگنال های دکمه را به عملکردهای مربوطه وصل کنید تا هنگام کلیک کردن، اقدامات را انجام دهند. برای مثال، دکمه Play Again را به تابعی به نام onPlayAgainPressed و دکمه Exit را به تابعی به نام onExitPressed متصل کنید.

برای کنترل عملکرد دکمه، باید توابع مربوطه را در کد GDScript بازی روی صحنه تعریف کنید. در اینجا یک مثال است:

extends Control

func _ready():
    $Button.connect("pressed", self, "onPlayAgainPressed")
    $Button2.connect("pressed", self, "onExitPressed")

func onPlayAgainPressed():
    var gameScenePath = "res://GameScene.tscn"
    get_tree().change_scene(gameScenePath)
    
func onExitPressed():
    get_tree().quit() # Close the game application

هنگامی که صحنه GameOver.tscn را تنظیم کردید و عملکرد دکمه لازم را تعریف کردید، می توانید از کد زیر در صحنه اصلی بازی برای نمایش بازی روی صفحه استفاده کنید:

extends KinematicBody2D

func _physics_process(delta):
    # Check if the player has crossed the screen boundaries
    var screen_size = get_viewport_rect().size
    if velocity.y > screen_size.y or velocity.y < 0:
        show_game_over_screen()

func show_game_over_screen():
    get_tree().change_scene("res://GameOver.tscn")

صفحه Game Over چیزی شبیه به این خواهد بود، با دکمه هایی برای راه اندازی مجدد یا خروج بازیکن:

از جمله ویژگی های اضافی

هنگام ایجاد منوهای رابط کاربری سفارشی در گودو با استفاده از گره‌های کنترلی، شما این قابلیت را دارید که ویژگی‌های مختلفی را برای افزایش عملکرد و جذابیت بصری منوهای خود اضافه کنید. در اینجا چند ایده برای بررسی وجود دارد.

انتقال متحرک

انتقال صاف بین صفحه‌های منوی مختلف، مانند جلوه‌های محو شدن، اسلایدها یا جلوه‌های مقیاس‌بندی را اضافه کنید. شما می توانید با اصلاح ویژگی های گره های کنترل در طول زمان با استفاده از tweens یا پخش کننده های انیمیشن به این هدف دست یابید.

جلوه های صوتی

هنگامی که پخش کننده دکمه های منو را فشار می دهد، جلوه های صوتی را برای ارائه بازخورد صوتی اجرا کنید. شما می توانید صداهای مختلف را برای کلیک دکمه ها، انتقال منو یا سایر تعاملات پخش کنید تا منوها پاسخگوتر و جذاب تر شوند.

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

جلوههای بصری

برای افزودن جلوه های بصری به منوهای خود از سایه زن ها یا سیستم های ذرات استفاده کنید. به عنوان مثال، می‌توانید یک افکت درخشش ظریف را روی دکمه‌های انتخاب شده اعمال کنید یا افکت‌های ذره‌ای ایجاد کنید که هنگام انجام برخی اقدامات منو فعال شوند. این افکت‌ها می‌توانند حس صیقلی و غوطه‌وری را به رابط کاربری شما اضافه کنند.

موسیقی پس زمینه

پخش موسیقی پس‌زمینه بدون حق نسخه‌برداری مخصوص هر صفحه منو را در نظر بگیرید تا فضایی فراگیرتر ایجاد کنید. می‌توانید از جریان‌های صوتی یا اتوبوس‌های صوتی در گودو برای مدیریت موسیقی پس‌زمینه و اطمینان از انتقال بدون درز بین آهنگ‌های مختلف هنگام حرکت پخش‌کننده در منوها استفاده کنید.

پشتیبانی محلی سازی

اگر قصد دارید بازی خود را به چندین زبان ترجمه کنید، به منوهای UI خود پشتیبانی محلی سازی اضافه کنید.

مکانیزمی برای تغییر پویا محتوای نوشتاری برچسب‌ها و دکمه‌ها بر اساس زبان انتخابی ارائه دهید. ابزارها و منابع محلی سازی گودو می توانند به مدیریت عناصر UI چند زبانه کمک کنند.

به یاد داشته باشید که منوهای خود را با کاربران واقعی آزمایش و تکرار کنید تا مطمئن شوید که ویژگی‌های اضافی تجربه کلی کاربر را بهبود می‌بخشند و برای پیمایش بصری هستند. به ملاحظات عملکرد، به ویژه هنگام استفاده از انیمیشن ها و جلوه های بصری توجه کنید تا از تعاملات رابط کاربری نرم و پاسخگو اطمینان حاصل کنید.

جذاب‌تر کردن بازی‌های گودو با منوی UI سفارشی

منوهای رابط کاربری سفارشی می‌توانند نقش مهمی در تعامل بازیکن داشته باشند. آنها ناوبری بصری را ارائه می دهند، امکان دسترسی آسان به ویژگی های بازی را فراهم می کنند و جذابیت بصری کلی بازی شما را افزایش می دهند.

با کمی خلاقیت و مقداری کد نویسی، می توانید منوهایی طراحی کنید که نه تنها عملکردهای ضروری را ارائه می دهند، بلکه بازیکنان را مجذوب خود کرده و تجربه کلی بازی آنها را افزایش می دهد. بنابراین، شروع به کاوش و ساخت منوهای منحصر به فرد خود کنید تا بازی های گودو خود را از بقیه متمایز کنید.

منبع مقاله