Привет ,Habr. Сегодня мы начнём разработку своего карточного рогалика про приготовление... рогаликов! Именно эта тема победила в обсуждении под предыдущим туториалом. Работать будет на свежем Godot 4.1. В этой статье добавим карты, "Руку (Копыто) карт" и реализуем функцию Drag & Drop.
Знакомство
Для начала давайте познакомимся с Эдгаром, отважным поросёнком, который мечтает стать пекарем и ради своей мечты отправится в подземелье, чтобы накормить тамошних обитателей свежей выпечкой.
В последующих статьях он будет для нас:
Замешивать тесто
Формировать рогалики
Печь
Сервировать стол
С Эдгаром познакомились, вернёмся к нему в следующей части. Пока, Эдгар...
Создание проекта
Создаём проект примерно так:
После создание проекта, заходим в настройки проекта -> Список действий и добавляем действие "click", щелчок ЛКМ
Сцена болванка для карт
Начнём как всегда с создания сцены, которую позже будем наследовать для разных карт.
Главным узлом выбираем Node2D(CardDefault), дочерний к нему Sprite2D(CardSprite) - текстурка нашей карты, дочерние к CardSprite:
Sprite2D(CardTitul) - Картинка рисуемая на карте
Label(CardName) - Заголовок карты
Label(CardDescription) - Описание карты
Дерево объектов:
Выглядеть это должно примерно так:
Давайте загрузим шрифт в Label, на 4 версии, это делается в пару кликов. Найдите где-то шрифт, файл .ttf. Выберите в дереве объектов Label, В инспекторе на вкладке "Control", последний пункт "Theme Overrides", выбираем Fonts -> загрузить и загружаем свой шрифт, поменяйте ему цвет, размер, сделайте всё под себя. Также в инспекторе, найдите свойство Autowrap Mode и установите его в Word (Smart), для обоих Label. Создайте несколько карт. Изменяя текстуру в CardTitul и напишите для них название в CardName и описание в CardDescription. Должно получится примерно следующее:
Чтобы создать карту:
Создаём новую сцену
Главным узлом сцены выбираем "Инстанцировать дочернею сцену"
(Ctrl+Shift+A) и выбираем нашу сцену, которую только-что создали.CardTitul, В свойстве Texture, нажимаем на стрелочку "Сделать уникальным" и добавляем свою картинку.
В оба Label пишем текст.
(Ctrl+Shift+A) и выбираем нашу сцену, которую только-что создали.К скрипту вернёмся чуть позже.
Сцена "Руки карт"
Главным узлом сцены выбираем Node2D(CardArm), и дочерние к нему элементы:
Sprite2D
4 Marker2D(Card1...Card4)
Каждая метка будет указывать местоположение и угол поворота для карты. У вас может быть больше 4-х, просто у Эдгара влезает только 4 карты. Заливаем текстуру нашей руки и выставляем местоположение для Marker2D. Не большое отступление, так-же выставляйте угол поворота. Карты обычно держат под углом. Для Sprite2D выставляем Z_index = 2
Небольшой лайфхак. Вы можете добавить на сцену, 4 карты, инстанцировав дочернею сцену. Расположить их как вам нравится. Потом записать в Marker2D положения по X и Y и угол поворота
Добавляем скрипт на CardArm и переходим к его редактированию:
extends Node2D
#Объявляем 4 переменных на экспорт, это и будут наши карты
@export var card1:PackedScene
@export var card2:PackedScene
@export var card3:PackedScene
@export var card4:PackedScene
#Записываем наши паркеры и переменные
@onready var _card1_marker = $Card1
@onready var _card2_marker = $Card2
@onready var _card3_marker = $Card3
@onready var _card4_marker = $Card4
#Спрайтик тоже запишем, вдруг пригодится потом
@onready var _sprite = $Sprite2D
#Каждой карте мы будем присваивать ID, просто пропишите эту строчку
var ID = 0
#В функции _ready, создаём наши карты
func _ready():
place_card(card1,_card1_marker)
place_card(card2,_card2_marker)
place_card(card3,_card3_marker)
place_card(card4,_card4_marker)
#Функция создания карты, в качестве аргумента,
#передаём сцену, которую ставим и маркер - куда ставим.
func place_card(scene,marker):
#Установили сцену карты
var s = scene.instantiate()
#Выставили карте поворот
s.rotation_degrees = marker.rotation_degrees
#Выставили карт местоположение
s.position = marker.position
#Увеличили счётчик, перед присваиванием, т.к. ID начинается с 1
ID += 1
#Присвоили ID
s.ID = ID
#Добавили сцену, как потомка
add_child(s)
Переменная ID, потребуется в дальнейшем, чтобы управлять картами.
Синглтон CardMover
Создаём новый скрипт, обязательно проверяем, чтобы он наследовал Node. После создания скрипта, это делается на вкладке "Script" -> Файл -> Новый скрипт. Обязательно назовите его CardMover. Переходим в настройки -> Автозагрузка -> выбираем путь до нашего скрипта и нажимаем добавить. Мы будем использовать Глобальный синглтон, для управления рукой карт. Переходим к редактированию этого скрипта:
extends Node
#Выбранная карта
var selected_card_ID = null
#Установить ID
func set_ID(ID):
selected_card_ID = ID
#Обнулить ID
func unset_ID():
selected_card_ID = null
#Получить ID
func get_ID():
return selected_card_ID
#Проверить ID
#Мы можем взаимодействовать только с выбранной картой
#Или с пустой
func check_ID(ID):
if((selected_card_ID == null) or (selected_card_ID == ID)):
return true
else:
return falseТут никаких сложных функций нет, только почти обычные гетеры и сетеры.
Скрипт болванки для карт
Навешиваем скрипт на CardDefault и переходим к его редактированию:
extends Node2D
#Объявили переменные дерева
@onready var _card_sprite = $CardSprite
@onready var _card_titul = $CardSprite/CardTitul
@onready var _card_description = $CardSprite/CardDescription
#Объявили переменную ID
@export var ID = "0"
#Объявили локальные переменные
var start_rotation:int#Переменная стартовой позиции
var start_position:Vector2#Переменная стартового поворота
var dragable = false#Выделен-ли объект, для перетаскивания
var start_z_index#Стартовый Z-index
#Объявляем все стартовые переменные
func _ready():
start_z_index = z_index
start_rotation = rotation_degrees
start_position = position
#Функция обработки ввода игроком
func _input(event):
#Если нажата ЛКМ
if event is InputEventMouseButton and event.is_action_pressed("click"):
#Если клик произошёл в области спрайта карты и проверили ID
if (_card_sprite.get_rect().has_point(to_local(event.position)) and CardMover.check_ID(ID)):
#Можно перетаскивать
dragable = true
#Установили ID
CardMover.set_ID(ID)
#Если отпущена ЛКМ
if event is InputEventMouseButton and event.is_action_released("click"):
#Если отпустили ЛКМ в области спрайта карты и проверили ID
if (_card_sprite.get_rect().has_point(to_local(event.position)) and CardMover.check_ID(ID)):
#Отменили перетаскивание
dragable = false
#Обнулили ID
CardMover.unset_ID()
#Если переместили карту, то
if(position != start_position):
#Убирам стартовый поворот
start_rotation = 0
#Меняем стартовое положение
start_position = position
#Поменяли угол
rotation_degrees = start_rotation
#Если курсор мыши двигается
if event is InputEventMouseMotion:
#Если при движении курсор мыши задел спрайт нашей карты и проверили ID
if (_card_sprite.get_rect().has_point(to_local(event.position)) and CardMover.check_ID(ID)):
#Убрали поворот
rotation_degrees = 0
#Установили поверх других карт
z_index = 2
#Задали ID
CardMover.set_ID(ID)
else:
#Проверили ID
if (CardMover.check_ID(ID)):
#Вернули z_index
z_index = start_z_index
#Вернули угол поворота
rotation_degrees = start_rotation
#Обнулили ID
CardMover.unset_ID()
func _process(delta):
#Если состояние карты перетягивание, то следуем за курсором
if dragable:
set_global_position(get_global_mouse_position())
При создании карт в "Руке карт" мы добавляли каждой карте ID, чтобы была возможность отслеживать каждую карту в руке и взаимодействовать только с ней, если такого не было-бы, то в местах наслаивания карт друг на друга, мы бы брали две карты сразу или поворачивали две карты сразу при наведении.
Код в целом прокомментирован очень подробно, думаю вопросов не должно возникнуть.
Заключение
Вот мы и создали наши карты и базовое взаимодействие с ними. В следующей части мы научим каждую карту уникальному эффекту и будем взаимодействовать с игрой, с помощью карт.
