Карточная игра на Unity. Динамическая колода

<?the_title()?>

Этот туториал отличается от моих предыдущих, поскольку он ориентирован на геймджемы и прототипирование, в особенности, карточных игр. Мы собираемся создать 2D колоду игральных карт в Unity не используя ни единого рисунка — исключительно с помощью кода.

Карточная игра на Unity
Будет выглядеть примерно так

Компоненты игральной колоды карт

В игральной колоде содержится всего 52 карты с 13 картами каждой из 4 разных мастей. Чтобы создать пригодный для использования код, нам необходимо создать эти 4 масти, закругленную прямоугольную основу карты и дизайн обложки карт. 

Дизайном обложки у карты может быть любой абстрактный рисунок, и существует множество способов создать его. Мы сделаем простой бесшовный узор, который для создания дизайна потом замостит поверхность. Никакого специального дизайна для тузов (A), королей (K), дам (Q) и валетов (J) у нас не будет.

Альтернативные решения

Перед тем как начать, я должен упомянуть, что существуют более простые решения, которые мы могли бы использовать для создания колоды карт. Некоторые из них перечислены ниже.

  1. Очевидным является использование для всех эскизов предварительно отрисованного арта.
  2. Менее очевидно использовать шрифт, который содержит все необходимые символы. Вышеупомянутый шрифт мы также можем превратить в битмаповый, чтобы уменьшить число вызовов отрисовки и повысить производительность.

Решение на основе шрифтов самое быстрое и простое, если вы ходите делать быстрые прототипы.

Создание текстур во время исполнения

Первым шагом изучим как создать Texture2D с использованием кода, который потом будет использован для создания Sprite в Unity. Следующий код показывает создание пустой текстуры 256×256.

Идея в том, чтобы нарисовать все эскизы до того, как мы будем использовать метод Apply. Мы можем нанести эскиз на текстуру пиксель за пикселем, используя метод SetPixel, как показано ниже.

Например, если мы хотели заполнить всю текстуру цветом, мы могли бы использовать метод следующим образом.

Как только мы создали Texture2D, мы можем использовать ее для создания Sprite, выводимого на экран.

Сложной частью всего этого является создание на текстуре нужных эскизов.

Создание фигуры для червовой масти

Когда дело доходит до создания фигуры для червей, мы можем использовать несколько различных подходов, среди которых есть как сложные уравнения, так и простое смешение фигур. Как показано ниже мы будем использовать метод смешения фигур, в частности, тот что с треугольником.

Динамическое создание колоды карт

Как вы заметили, мы можем использовать два круга и квадрат или треугольник, чтобы создать базовую фигуру сердца. Это означает, что у сердца не будет тех самых красивых изгибов, но оно идеально подойдет для нашей цели.

Рисование круга

Давайте освежим некоторые уравнения, чтобы нарисовать круг. Для круга с центром в начале координат и радиусом r уравнение для точки (x, y) на окружности имеет вид x2 + y2 = r2. Теперь, если центр круга находится в точке (h, k), уравнение становится (x-h) 2 + (y-k) 2 = r2. Таким образом, если у нас есть ограничивающий прямоугольник, то мы можем перебрать все точки внутри этого прямоугольника и определить, какие из них попадают в круг, а какие нет. Основываясь на этом понимании, мы можем с легкостью создать метод PaintCircle, как показано ниже.

Как только у нас есть метод PaintCircle, мы можем продолжить создание фигуры червей как показано ниже.

Переменная resolution является шириной и высотой текстуры.

Создание фигуры для бубновой масти

Мы обсудим два способа нарисовать бубны.

Рисование простого ромба

Проще всего расширить код использованный для треугольника и добавить перевернутый треугольник наверху, чтобы создать необходимую фигуру как показано ниже.

Рисование изогнутого ромба

Второй способ — это использовать еще одно уравнение для создания улучшенной, изогнутой версии ромба. Мы будем использовать его для создания узора на обратной стороне нашей карты. Уравнение для круга получается из исходного уравнения для эллипса, оно выглядит как (x/a)2 + (y/b)2 = r2.

Это уравнение совпадает с уравнением окружности, когда переменные a и b равны 1. Затем уравнение эллипса можно расширить в уравнение суперэллипса для аналогичных фигур, просто изменив степень, (x/a)n + (y/b)n = rn. Поэтому когда n равно 2, у нас есть эллипс, а для других значений n у нас будут разные фигуры, одной из которых является наш ромб. Мы можем использовать подход, использованный для получения метода PaintCircle и получить новый метод PaintDiamond.

Рисование закругленного прямоугольника

Изменяя значение n, это же уравнение можно использовать для создания базовой формы в виде закругленного прямоугольника для нашей карты.

Рисование бесшовного узора

Используя этот метод PaintDiamond, мы можем нарисовать пять ромбов и создать бесшовный узор для задней стороны нашей карты.

обложка колоды и масть бубен

Код для рисования бесшовного узора будет такой, как ниже.

Создание фигуры для пиковой масти

Фигура для пик — это просто вертикальное отражение фигуры червей, наложенное на базовую фигуру. Эта базовая фигура останется одинаковой для треф. На рисунке ниже показано, как для создания базовой фигуры мы можем использовать два круга.

пиковая масть

Метод PaintSpades будет таков, как показано ниже.

Создание фигуры для масти треф

В этом месте я уверен, что вы можете самостоятельно догадаться, как просто стало сделать фигуру для треф. Нам нужны всего лишь две окружности и базовая фигура, которую мы создали для пик.

карточная игра на Unity - трефы

Метод PaintClubs будет таков, как показано ниже.

Упаковка текстур

Если вы изучите исходные файлы Unity для этого проекта, вы найдете класс TextureManager, который выполняет всю тяжелую работу. После того как мы создали все необходимые текстуры, класс TextureManager использует метод PackTextures, чтобы объединить их в одну текстуру, тем самым уменьшая количество вызовов отрисовки, требуемых при использовании этих фигур.

Используя массив packAssets, мы можем получить ограничивающие рамки отдельных текстур из основной текстуры с именем packTexture.

Заключение

Создав все необходимые компоненты, мы можем приступить к созданию нашей колоды карт, так как это просто вопрос правильного расположения фигур. Для составления карт мы можем использовать пользовательский интерфейс Unity, или можно создавать карты в виде отдельных текстур. Вы можете изучить пример кода, чтобы понять, как для создания макетов карт я использовал первый из способов.

Мы можем использовать этот же метод для создания любого динамического арта во время выполнения в Unity. Создание графики во время выполнения — это операция, требующая высокой производительности, но ее можно произвести только один раз, если мы эффективно сохраним и повторно используем эти текстуры. Путем упаковки динамически созданных ресурсов в одиночную текстуру, мы также получаем преимущества от использования атласа текстур. 

Теперь, когда у нас есть колода игральных карт, дайте мне знать, какие игры вы планируете создать с ее помощью.

Источник: https://gamedevelopment.tutsplus.com/tutorials/creating-playing-cards-dynamically-using-code-for-game-jams—cms-30613

Понравилась статья? Поделиться с друзьями:
Переводит для Вас самые интересные статьи про разработку игр. По образованию физик-программист. Техническими переводами начала подрабатывать еще на старших курсах и постепенно это переросло в основное занятие. Интересуется гуманитарными технологиями, пробует себя в журналистике.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *