Как создать свою игру на пк 3д

Как я создаю игры на своём 3D движке в одиночку

Много лет назад я занимался созданием маленьких Flash игр и публиковал их на сайте Newgrounds. Сейчас я делаю полноценные игры для ПК.

На сегодняшний день у меня 4 законченные коммерческие игры в Steam, и самая последняя из них — выпущенная в 2021 году Pilie Pals, о процессе создания которой я расскажу в этой статье. Я работал над игрой всего примерно 6 месяцев, по вечерам после работы и на выходных.

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

Я написал собственный 3D игровой движок YUME, используя Haxe, C++ и OpenGL, и на данный момент он используется тремя моими играми. Подробности и причины создания собственного движка приведены в отдельной статье. Такой подход меня вполне удовлетворяет, и я не планирую его менять.

Разработка Pilie Pals

В начале разработки Pilie Pals я скопировал папку проекта своей предыдущей игры Phantom Path и удалил все ресурсы и файлы кода, связанные с игрой. Остался «чистый» движок, с которым можно экспериментировать, чтобы создать прототип следующей игры.

Перед тем, как описывать создание Pilie Pals, я объясню несколько главных принципов работы моего движка.

Хранение игровых данных в текстовых файлах

Мой движок почти полностью основывается на внешних данных (data-driven). Это значит, что я создаю набор файлов с данными, а движок их читает и обрабатывает.

Я стараюсь избегать жёсткого прописывания чего-либо в исходном коде игры. По возможности, вся информация хранится в отдельных файлах: игровые объекты, уровни, переводы текстов, визуальные и звуковые эффекты, и даже некоторая игровая логика, написанная на собственном языке сценариев YumeScript. Большая часть данных хранится в формате JSON.

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

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

Сущности

Два главных компонента сцены игры в моём движке — это сущности и карты.

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

Файл описания сущности содержит информацию:

• Какие 3D модели содержит данная сущность, и как их отображать
• Какие анимации могут совершать модели этой сущности, и как осуществляются переходы из одного состояния в другое
• Какие эффекты может запускать данная сущность
• Какие звуки может воспроизводить данная сущность
• Какие области соприкосновения есть у данной сущности
• Какие у сущности могут быть состояния, и каково поведение сущности в разных состояниях
• Другие данные для использования в игровой логике: специальные тэги, группы, и т.д.

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

Например, можно задать состояние «walk» (ходьба) для сущности персонажа игры, и последовательность действий этого состояния может содержать команды, которые запускают нужную анимацию 3D модели, проигрывают звуки шагов и показывают эффект поднимающийся с земли пыли. Всё это описывается в текстовом файле, который можно редактировать и сразу тестировать, и это сильно ускоряет процесс разработки.

Карты

Карта — это файл данных, который содержит описание расположения сущностей. В этом файле также есть многоуровневая сетка «плиток», из которой можно построить ландшафт. Я не меняю файлы карт вручную — карты создаются с помощью встроенного редактора.

Так как движок знает всю информацию о сущностях, которые располагаются на карте, он в состоянии автоматически оптимизировать некоторые вещи. Например, если сущность является статичной и никогда не двигается (например, дерево или ландшафт), то движок автоматически объединяет её вместе с другими статичными сущностями, которые используют одинаковую текстуру, и создаёт одну общую 3D модель. Это значительно сокращает количество отображаемых видеокартой объектов, что сильно улучшает производительность игры.

Игровая логика

Некоторая часть игровой логики может быть описана в текстовых файлах, но она используется только для создания игровых сценариев, а не основной функциональности игры. Такая логика, как система соприкосновений, поведения искусственного интеллекта, правила игрового процесса и т.д. — программируется в исходном коде Haxe, который превращается в C++ при компиляции.

Есть 2 категории файлов кода, связанных с логикой:

1. Процессоры логики сущностей — могут быть присоединены к отдельным сущностям, используются для обработки индивидуальной логики объектов (например, искусственного интеллекта). Не каждой сущности нужен процессор логики.
2. Ядро — одиночный класс, который описывает общую логику правил игрового процесса.

Первый месяц: Прототип

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

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

Игрок может выделить персонажа и выполнить действие (например, переместиться, или поднять предмет), которое меняет состояние игрового мира. Игра потом вычисляет, является ли возможным новое состояние мира (например, не столкнулся ли игрок с препятствием), и проверяет, нужна ли какая-либо реакция на это изменение, со стороны других элементов головоломки (например, если игрок положил какой-то предмет на кнопку, то у кнопки должно измениться состояние на «нажатая»). Если все проверки пройдены, то изменения применяются и добавляются в историю шагов.

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

В этом заключается основная функциональность игрового ядра. На самом деле, всё немного сложнее, потому что мне нужно обеспечить плавные, анимированные переходы между состояниями, позволить элементам быть переносимыми другими элементами, и делать другие интересные вещи — но всё это добавляется к базовому «фундаменту» логики игры.

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

Я создал 4 уровня игры, используя мой существующий редактор карт, чтобы убедиться, что игровой процесс действительно интересный. Результат мне понравился, и я продолжил разработку.

Второй месяц: Графика

Теперь у меня был рабочий прототип игры, и можно было начинать экспериментировать с художественными стилями. Я остановился на мультяшном визуальном стиле, и весь месяц занимался созданием 3D моделей, анимаций, эффектов, интерфейса, переходами, и т.д. Игра разбита на 5 тематических миров.

Я использую Blender для создания 3D моделей и анимаций, и GIMP для создания текстур.

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

Идея такого эффекта появилась у меня после работы с программами 3D моделирования и скульптуры. Подобный эффект в таких программах иногда называется MatCap. Мой подход заключается в том, что я смешиваю такой приём с традиционными алгоритмами освещения в реальном времени. Получается интересный эффект, который обрабатывается видеокартой очень быстро.

Третий месяц: Полировка

Весь месяц я улучшал User Experience игры: добивался плавности анимаций, хорошей чувствительности управления, чистоты графических элементов, удобности интерфейса.

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

Работать над интерфейсами довольно утомительно, но плохой UX раздражает игроков, поэтому важно сделать всё правильно с самого начала.

Я решил сделать отполированный, полноценный «вертикальный срез» как можно быстрее. Таким образом я смог бы проверить, как бы выглядел готовый проект. Так как в игре на тот момент было мало контента, можно было свободно вносить глобальные изменения без особых проблем.

Четвёртый месяц: Музыка, звуки и демо версия

Я пишу музыку и создаю звуки в виртуальном модульном синтезаторе SunVox. Я — самоучка, и создание музыки у меня занимает довольно много времени.

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

На тот момент у меня была полностью «отполированная» игра, в которой было всего 4 уровня. Я создал ещё 6, и выпустил демо версию игры.

Так я стал собирать отзывы от игроков на ранней стадии разработки, и смог на их основе улучшить User Experience игры.

Примерно в это время я добавил систему подсказок в игру. О ней я подробно написал в отдельной статье.

Пятый и шестой месяцы: Контент игры

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

Эти два месяца я в основном работал в редакторе карт.

Вывод

В целом я удовлетворён результатом.

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

Также оказалось хорошей идеей сделать отполированный вертикальный срез как можно скорее. Таким образом, я мог начать делать скриншоты, видео и даже выложить демо версию хорошего качества всего после 4 месяцев работы. Я получил несколько полезных отзывов от игроков ещё до того, как большая часть контента была готова, поэтому было проще вносить изменения, ничего при этом не ломая.

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

Введение в программирование: простой 3D-шутер с нуля за выходные, часть 1

Этот текст предназначен для тех, кто только осваивает программирование. Основная идея в том, чтобы показать этап за этапом, как можно самостоятельно сделать игру à la Wolfenstein 3D. Внимание, я совершенно не собираюсь соревноваться с Кармаком, он гений и его код прекрасен. Я же целюсь совсем в другое место: я использую огромную вычислительную мощность современных компьютеров для того, чтобы студенты могли создавать забавные проекты за несколько дней, не погрязая в дебрях оптимизации. Я специально пишу медленный код, так как он существенно короче и просто понятнее. Кармак пишет 0x5f3759df, я же пишу 1/sqrt(x). Мы преследуем разные цели.

Я убеждён, что хороший программист получается только из того, кто кодит дома в своё удовольствие, а не только просиживает штаны на парах в университете. В нашем университете программистов учат на бесконечной череде всяких библиотечных каталогов и прочей скукоте. Брр. Моя цель — показать примеры проектов, которые интересно программировать. Это замкнутый круг: если интересно делать проект, то человек проводит над ним немало времени, набирается опыта, и видит вокруг ещё больше интересного (оно же стало доступнее!), и снова погружается в новый проект. Это называется проектное обучение, вокруг сплошной профит.

Простыня получилась длинная, поэтому я разбил текст на две части:

• Часть первая: отрисовка стен
• Часть вторая: населяем наш мир + оконный интерфейс

Это не законченная игра, но только заготовка для студентов. Пример законченной игры, написанной двумя первокурсниками, смотрите во второй части.

Получается, я совсем чуточку вас обманул, я не расскажу как сделать полную игру за одни выходные. Я сделал только 3Д движок. Монстры у меня не бегают, да и главный персонаж не стреляет. Но, по крайней мере, этот движок я написал за одну субботу, можете проверить историю коммитов. В принципе, воскресенья вполне достаточно, чтобы сделать нечто играбельное, то есть, в одни выходные можно уложиться.

На момент написания этого текста репозиторий содержит 486 строк кода:

haqreu@daffodil:~/tinyraycaster$ cat *.cpp *.h | wc -l 486 

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

Итак, я разбиваю весь код на этапы, стартуя с голого компилятора C++. Как и в предыдущих моих статьях по графике (тыц, тыц, тыц), я придерживаюсь правила «один этап = один коммит», так как github позволяет очень удобно просматривать историю изменений кода.

Этап 1: сохранение картинки на диск

Итак, поехали. До оконного интерфейса нам ещё очень далеко, для начала мы будем просто сохранять картинки на диск. Итого, нам нужно уметь хранить картинку в памяти компьютера и сохранять её на диск в формате, который поймёт какая-нибудь сторонняя программа. Я хочу получить вот такой файл:

Вот так выглядит полный C++ код, который рисует то, что нам нужно:

#include #include #include #include #include uint32_t pack_color(const uint8_t r, const uint8_t g, const uint8_t b, const uint8_t a=255) < return (a<<24) + (b<<16) + (g<<8) + r; >void unpack_color(const uint32_t &color, uint8_t &r, uint8_t &g, uint8_t &b, uint8_t &a) < r = (color >> 0) & 255; g = (color >> 8) & 255; b = (color >> 16) & 255; a = (color >> 24) & 255; > void drop_ppm_image(const std::string filename, const std::vector &image, const size_t w, const size_t h) < assert(image.size() == w*h); std::ofstream ofs(filename); ofs (r) (g) (b); > ofs.close(); > int main() < const size_t win_w = 512; // image width const size_t win_h = 512; // image height std::vectorframebuffer(win_w*win_h, 255); // the image itself, initialized to red for (size_t j = 0; j > drop_ppm_image("./out.ppm", framebuffer, win_w, win_h); return 0; > 

Если у вас под рукой нет компилятора, то это не беда, при наличии учётной записи на гитхабе этот код можно посмотреть, отредактировать и запустить (sic!) в один клик прямо из браузера.

По этой ссылке gitpod создаст для вас виртуальную машину, запустит VS Code, и откроет терминал на удалённой машине. В истории команд терминала (ткните в консоль и нажмите стрелку вверх) уже полный набор команд, который позволяют скомпилировать код, его запустить и открыть результирующую картинку.

Итак, что нужно понять из этого кода. Первое, цвета я храню в четырёхбайтном целочисленном типе uint32_t. Каждый байт — это компонента R, G, B или A. функции pack_color() и unpack_color() позволяют добираться до индивидуальных компонент каждого цвета.

Второе, двумерную картинку я храню в обычном одномерном массиве. Чтобы добраться до пикселя с координатами (x,y) я не пишу image[x][y], но пишу image[x + y*width]. Если этот способ упаковки двумерной информации в одномерный массив для вас нов, то прямо сейчас возьмите ручку и разберитесь с ним. У меня лично этот этап даже не доходит до головного мозга, обрабатывается прямо в спинном. Трёх- и более -мерные массивы можно упаковать точно так же, но мы выше двух компонент не поднимемся.

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

Этап 2: рисуем карту уровня

Нам нужна карта нашего мира. На этом этапе я хочу всего лишь определить структуру данных и нарисовать карту на экране. Примерно так оно должно выглядеть:

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

Напоминаю, что вот эта кнопка даст запустить код прямо на этом этапе:

Этап 3: добавляем игрока

Что нам нужно, чтобы уметь нарисовать игрока на карте? GPS координат достаточно 🙂

Добавляем две переменные x и y, и отрисовываем игрока в соответствующем месте:

Внесённые изменения можно посмотреть тут. Про гитпод больше напоминать не буду 🙂

Этап 4: виртуальный дальномер aka трассировка первого луча

Помимо координат игрока нам неплохо было бы ещё знать, в каком направлении он смотрит. Потому добавим ещё одну переменную player_a, которая даёт направление взгляда игрока (угол между направлением взгляда и осью абсцисс):

А теперь я хочу иметь возможность скользить вдоль оранжевого луча. Как это делать? Предельно просто. Давайте рассмотрим зелёный прямоугольный треугольник. Мы знаем, что cos(player_a) = a/c, и что sin(player_a) = b/c.

Что будет, если я произвольно возьму значение c (положительное) и посчитаю x = player_x + c*cos(player_a) и y = player_y + c*sin(player_a)? Мы окажемся в фиолетовой точке; варьируя параметр c от нуля до бесконечности, мы можем заставить скользить эту фиолетовую точку вдоль нашего оранжевого луча, причём c — это расстояние от (x,y) до (player_x, player_y)!

Сердце нашего графического движка — это вот такой цикл:

 float c = 0; for (; c

Мы двигаем точку (x,y) вдоль луча, если она натыкается на препятствие на карте, то прерываем цикл, и переменная c даёт расстояние до препятствия! Чем не лазерный дальномер?

Этап 5: сектор обзора

Один луч это прекрасно, но всё же наши глаза видят целый сектор. Давайте назовём угол обзора fov (field of view):

И выпустим 512 лучей (кстати, почему 512?), плавно заметая весь сектор обзора:

Внесённые изменения можно посмотреть тут.

Этап 6: 3Д!

А теперь ключевой момент. Для каждого из 512 лучей мы получили расстояние до ближайшего препятствия, так? А теперь давайте сделаем вторую картинку шириной (спойлер) 512 пикселей; в которой мы для каждого луча будем рисовать один вертикальный отрезок, причём высота отрезка обратно пропорциональна расстоянию до препятствия:

Ещё раз, это ключевой момент создания иллюзии 3Д, убедитесь, что вы понимаете, о чём идёт речь. Рисуя вертикальные отрезки, по факту, мы рисуем частокол, где высота каждого кола тем меньше, чем дальше он от нас находится:

Этап 7: первая анимация

На этом этапе мы впервые рисуем что-то динамическое (я просто скидываю на диск 360 картинок). Всё тривиально: я изменяю player_a, отрисовываю картинку, сохраняю, изменяю player_a, отрисовываю, сохраняю. Чтобы было чуть веселее, я каждому типу клетки в нашей карте присвоил случайное значение цвета.

Этап 8: коррекция «рыбьего глаза»

Вы обратили внимание, какой отличный эффект «рыбьего глаза» у нас получается, когда мы смотрим на стенку вблизи? Примерно вот так оно выглядит:

Почему? Да очень просто. Вот мы смотрим на стенку:

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

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

Этап 9: загрузка файла текстур

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

На этом этапе я просто гружу текстуры в память. Чтобы проверить работоспособность написанного кода, просто рисую как есть текстуру с индексом 5 в левом верхнем углу экрана:

Внесённые изменения можно посмотреть тут.

Этап 10: рудиментарное использование текстур

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

Внесённые изменения можно посмотреть тут.

Этап 11: текстурируем стены по-настоящему

А вот теперь настал долгожданный момент, когда мы наконец-то увидим кирпичные стены:

Основная идея очень простая: вот мы скользим вдоль текущего луча и останавливаемся в точке x,y. Давайте предположим, что мы остановились на «горизонтальной» стене, тогда y почти целочисленнен (не совсем, т.к. наш способ движения вдоль луча вносит небольшую ошибку). Давайте возьмём дробную часть от x и назовём её hitx. Дробная часть меньше единицы, следовательно, если мы умножим hitx на размер текстуры (у меня 64), то это нам даст столбец текстуры, который нужно нарисовать в этом месте. Осталось его растянуть до нужного размера и дело в шляпе:

В общем, идея крайне примитивная, но требует аккуратного исполнения, так как у нас есть ещё и «вертикальные» стены (те, у которых hitx будет близок к нулю [x целочисленный]). Для них столбец текстуры определяется hity, дробной частью от y. Внесённые изменения можно посмотреть тут.

Этап 12: время рефакторить!

На этом этапе я ничего нового не стал делать, просто занялся генеральной уборкой. До сего момента у меня был один гигантский (185 строк!) файл, и в нём стало трудно работать. Поэтому я его разбил на тучу мелких, к сожалению, попутно почти удвоив размер кода (319 строк), не добавив никакой функциональности. Но зато стало гораздо удобнее пользоваться, например, чтобы сгенерировать анимацию, достаточно сделать вот такой цикл:

 for (size_t frame=0; frame 

Ну а вот результат:

Продолжение следует… незамедлительно

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

• геометрия для пятого класса
• азы программирования

• Программирование
• C++
• Работа с 3D-графикой
• Разработка игр
• Алгоритмы

Как создать игру на Unity

Владимир Филимонов Эксперт в медицинских тренажерах VR на Unity, физических симуляциях и сетевых играх.

Сделать игру на Unity сможет даже начинающий кодер, который не знает С#. Большое количество обучающих материалов и активное комьюнити значительно облегчают первые этапы знакомства с движком и создание первого проекта. Вместе с ведущим разработчиком Unity Владимиром Филимоновым и преподавателем на курсе «Разработчик игр» разбираемся, почему писать код — не главное в геймдеве и какие базовые инструменты и ПО в играх нужно освоить, чтобы соорудить свою первую игру.

Что такое Unity

Unity — это и среда разработки, и игровой движок, с помощью которого создаются проекты для разных платформ: ПК, мобильных устройств, игровых консолей и интернет-платформ, — поэтому он называется кроссплатформенным. В Unity есть инструменты для создания объектов, их перемещения, работы с графикой, текстурами и звуком, поэтому сделать полноценную игру с его помощью можно даже в одиночку. Наглядный пример игры, созданной на Unity, которая поддерживает разные устройства, — Genshin Impact, успешный мультиплатформенный проект китайской студии miHoYo Limited. Более популярной стала ее мобильная версия, но пользователи могут войти в аккаунт, например, с компьютера и продолжить играть с того же момента, на котором остановились в мобильной версии. Кроме Genshin Impact, на Unity созданы такие известные проекты, как Hearthstone, Outlast, Cuphead, Pokemon GO и многие другие.

Освойте профессию «Разработчик игр на Unity»
Разработчик игр на Unity

Все главные навыки разработчика игр на одном курсе. Вы освоите все этапы геймдизайна, научитесь программировать на С# и создадите 7 игр во время курса.

Профессия / 18 месяцев
Разработчик игр на Unity
Создавайте виртуальные миры
5 399 ₽/мес 9 817 ₽/мес

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

Читайте также Как скачать и установить Unity

Как создать простую игру

При создании собственного проекта важно помнить, что разработка кода — это примерно 20% игры; гораздо большее значение в ней имеют другие аспекты:

• Геймплей — это общее понятие взаимодействия игрока с игровым миром, которое определяет его действия (бежать вперед, преодолевать препятствия, стрелять по мишеням, обгонять других) и цели (прийти первым к финишу, выбить 10 из 10, победить врага в бою, собрать как можно больше монет). Геймплей напрямую связан с жанром игры, так как у каждого из них есть специфичный набор правил и механик.
• Игровые механики— конкретные элементы взаимодействия с игрой, которые входят в состав геймплея. Стрельба — это одна механика, сражение на мечах — другая, гонка — третья. Одна игра может сочетать в себе десятки таких механик.
• Сюжет— это развитие действия в игре; он одинаково важен и для масштабных AAA-проектов, и для небольших, но глубоких инди-игр. Сюжет должен затянуть игрока, рассказать ему историю, а также развивать персонажей, чтобы они не оставались однобокими и раскрывались для игрока с новых сторон.
• Персонажи — в них важны и дизайн, и характер. Удачно проработанный персонаж обладает узнаваемыми особенностями поведения, интересной историей, а еще для полного погружения он должен иметь что-то общее с игроком, что зацепит его и заставит сопереживать. На эту тему Unity разработали гайд «Пять типов привлекательных игровых персонажей», чтобы у новичков получалось сделать игрового персонажа правдоподобным.
• Дизайн уровней— это внешний вид игры, цветовые решения, общая стилистика объектов, фона, персонажей, предметов, которая создает определенное настроение. В помощь начинающим разработчикам Unity опубликовали в своем блоге «Советы по дизайну уровней вашей первой видеоигры».
• Баланс — это соотношение характеристик разных объектов, он тоже отвечает за увлеченность игрока. Например, если меч в игре может наносить объекту 3 единицы урона, а объект имеет всего 3 HP (hit points — величина, обозначающая максимальный урон), то его можно уничтожить с первого раза, и играть будет слишком легко. Если объект имеет 30 HP, то игроку придется нанести 10 ударов, чтобы его уничтожить. Такое уже подходит скорее для босса, например на первом или втором уровне. Разработчику важно грамотно распределить эти величины, чтобы игра была увлекательной и бросала игроку вызовы.

Разработчик игр на Unity – одна
из самых творческих профессий в IT. Создайте виртуальные миры уже через полгода обучения

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

• Ассет (Asset)— готовый компонент, который можно использовать для создания своих проектов. Это могут быть элемент интерфейса в игре, текстура, фигурка персонажа, шрифт или звук.
• Игровой объект (GameObject)— это любой ассет, который используется в игровой сцене. Например, изображение монетки, сам ее внешний вид — это ассет, а пять монет, которые должен подобрать персонаж в процессе прохождения уровня — это пять игровых объектов. Сам персонаж при этом тоже станет игровым объектом.
• Компоненты (Components) — часть игрового объекта, отвечающая за его поведение в процессе игры: перемещение или реакцию на определенные триггеры.
• Скрипт (Script)— код на C#, в котором прописаны конкретные условия работы компонента.

Установка Unity занимает 5–10 минут. Для этого нужно зайти на официальный сайт проекта и выбрать бесплатный тариф для физических лиц — Personal. Его будет достаточно для самостоятельного изучения Unity и создания первой игры. Еще один бесплатный тариф — студенческий, но он подойдет тем, кто зарегистрирован на GitHub и может подтвердить свой ученический статус.

После нажатия кнопки «Начать» откроется Unity Store. Для новых пользователей в нем есть вариант установки движка с обучающим руководством для начинающих. С помощью кнопки «Начните здесь» скачивается установщик UnityHubSetup.exe, который запускается как любой другой установщик: нужно просто открыть файл, принять условия пользовательского соглашения и нажать кнопку «Установить».

Русского языка в настройках нет, так что придется совершенствовать технический английский. Всего Unity занимает 11,3 Гб,поэтому перед установкой лучше проверить свободное место на диске и почистить его при необходимости.

Следующий шаг — создание Unity ID. Можно регистрироваться с помощью почты или использовать предложенные аккаунты, например Google или Apple. Важно поставить первые две галочки: согласие с условиями использования Unity и признание политики конфиденциальности. Третья галочка — это согласие на маркетинговые рассылки, ее ставить не обязательно.

После регистрации Unity предложит создать тестовый проект Microgame. На выбор предлагается пять шаблонов:

• LEGO Microgame;
• шутер от первого лица;
• картинг;
• платформер;
• пустой 3D-шаблон.

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

Создание проекта

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

Новому проекту присваивается имя, выбираются место хранения на диске и темплейт — то есть шаблон для разработки, внешний вид и функционал которого зависит от количества измерений в игре. Проще начинать с 2D-проектов, так как для этого формата создано больше готовых ассетов. Конечно, можно сразу начать делать 3D-игры, но в этом случае многие элементы и анимации придется самостоятельно создавать с нуля или выделять бюджет на то, чтобы делегировать эту часть работы другим специалистам.

Настройка интерфейса

В стандартном интерфейсе проекта шесть элементов рабочей области:

1. Верхняя панель инструментов— в ней находятся стандартные вкладки File, Edit, Help, как во многих других интерфейсах, а также вкладки Assets, GameObject, Components и Window.
2. Scene — окно сцены, в котором выстраивается игровое пространство (элементы игрового мира, текстуры, фигурки персонажей и прочее).
3. Games — это окно игры, в котором можно посмотреть глазами пользователя, как будут двигаться элементы и работать игровые механики.
4. Hierarchy — окно иерархии, в нем перечислен список всех элементов (GameObject), которые помещены в окно Scene.
5. Project — это система папок, в которых хранятся ассеты по категориям (текстуры, шрифты, звуки и т.д.).
6. Inspector — окно для изменения элементов игры, их размера, цвета, положения в пространстве и других характеристик.

Добавление объекта

Объекты на экран Scene можно добавить из Asset Store. Для этого на панели инструментов нужно кликнуть на вкладку Window –> General –> Asset Store.

В строке поиска можно по названиям найти нужные компоненты, например, сет Free Platform Game Assets.

Как и другие ассеты, он загружается с помощью кнопки Import.

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

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

Шаг 2. Перенести в область Scene

Работа со скриптами

За поведение игровых объектов отвечают присоединенные к ним компоненты (Components). Базовый компонент любого объекта — Transform, он отвечает за положение элемента в окне Scene, возможность поворачивать и масштабировать его. К базовому компоненту можно добавить, например, Renderer, который меняет цвет, или RigidBody, который отвечает за массу и физику объекта. Но кроме базовых компонентов, объектам можно задавать особые условия, и для этого как раз используются скрипты.

Создать новый скрипт можно в окне Project, кликнув мышкой на Assets –> Create –> C# Script.

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

Базовые элементы скриптов — это:

• using — элемент в коде, который подключает библиотеки;
• public class — в этой строке обычно прописан класс MonoBehaviour, он содержит набор функций, необходимых для работы скрипта;
• void — те самые функции, с их помощью прописываются действия, происходящие в игре.

Рассмотрим, например, функцию start. Любое действие в ней произойдет только один раз, когда запустится игра. Пропишем здесь print (“Hi”).

И можно заметить, что в консоли это слово выводится один раз.

Функция update — повторяющаяся, ее можно использовать, например, для передвижения объекта. Для этого в скрипте задается переменная int i = 0, она выводится на экран с помощью функции print (i) и увеличивается на одну единицу за каждый шаг с помощью i++.

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

Настройка триггеров

Для понимания сути триггеров важно усвоить, что такое коллайдер (Collider). Это компонент, который присваивается объекту в пространстве игры, задает форму и делает его твердым, недоступным для прохождения сквозь него. Например, если мы разместим монетку в 2D-пространстве и захотим сделать так, чтобы она упала на платформу, то без использования компонента Collider ничего не получится — монетка пролетит сквозь платформу.

Поэтому обоим объектам необходимо присвоить компонент Box Collider 2D — это тонкая зеленая линия, которая обводит элементы по контуру, и за счет этой рамки они становятся твердыми, то есть один не может пройти сквозь другой.

Так объекты обязательно соприкоснутся и монета встанет на платформу.

Триггер (Trigger) — это пространство на карте, при попадании объекта в которое происходит действие; он тоже обводит объект или область в пространстве по краям. По сути, это тот же коллайдер, только триггер позволяет объектам проходить внутрь этой области. Представьте, что на ту же самую платформу вместе с коллайдером наброшен триггер, и при попадании персонажа внутрь триггерной области активируется телепорт — персонажа перебрасывает в другую точку карты.

Чтобы создать триггер, нужно накинуть тот же самый компонент коллайдера, но поставить галочку Is Trigger.

Триггеры распознают три варианта взаимодействия области на карте и объекта:

• OnTriggerEnter — объект зашел в зону;
• OnTriggerStay — объект находится в зоне;
• OnTriggerExit — объект покинул зону.

Что дальше?

Освоить интерфейс Unity довольно легко, в интернете есть разные гайды на тему того, как сделать это действительно быстро. Например, видео «Я сделал игру на Unity за неделю» или обучающий мини-курс «Как создать RPG за час». Можно изучать геймдев самостоятельно или начать обучение на курсе — это ускорит процесс и даст более заметные результаты.

Для работы со скриптами и создания более сложных механик разработчикам в любом случае понадобится С#, так что к его изучению вы тоже рано или поздно придете. Но в отличие от Unity, по C# нет в свободном доступе такого большого количества актуальных и понятных гайдов, так что в целях экономии времени и сил лучше записаться на курс «Разработчик игр на Unity», где все знания упакованы в структурированные блоки и сбалансированы с практикой на тренажерах.

Как создать 3d игру прямо в браузере

Привет всем. Сегодня я вам расскажу как легко вы можете создать 3d игру прямо в вашем браузере и сделать вы сможете это очень быстро, примерно за минут 30.

Three.js

Это библиотека которая позволяет создавать 3д графику, она довольно проста и мощна. Мы будем использовать только её и больше никаких других фреймворков. Чтобы её подключить вам нужно скачать файл из этого рипозитория в папке build/three.js. Я качаю файл three.min.js (точно такая же, но весит меньше) и просто подключаю.

Обратите внимание что отступы у body стоят нулевые, это нужно чтобы экран не съезжал вправо.

scene, camera и renderer

Создание графики в данной библиотеке основано на трёх столпах. Первое Scene это весь наш мир, вся информация, которая содержится о нём. Второе Camera это объект, который обозначает с какого ракурса мы будем смотреть на этот мир. Третье Render, объект который обрабатывает камеру и сцену и выдаёт результат на экран. Давайте создадим эти три объекта для начала.

var scene = new THREE.Scene(); //камера содержит 4 аргумента: угол обзора в градусах, отношение сторон экрана, и растояние обработки минимальное и масимальное var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.lookAt(new THREE.Vector3(0, 0, 0)); //указываем куда будет смотреть камера scene.add(camera); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //указываем размеры рендера, которые соответсвую нашей камере document.body.appendChild(renderer.domElement); //добавляем DOM элемент рендара в html код

Также нам нужна функция анимации, которая будет покадрово обновлять сцену.

function animate() < requestAnimationFrame(animate);//вызываем функцию при каждом обновлении кадра renderer.render(scene, camera);//обновляем рендер >animate();//вызываем первый раз функцию

Автообновление размеров экрана

Размеры окна браузера могут меняться нам нужно поставить событие на изменение размеров и обновлять размеры камеры и рендера.

function setSize() < renderer.setSize(window.innerWidth, window.innerHeight);// устанавливаем размеры рендера camera.apect = window.innerWidth/window.innerHeight;//устанаваливает отношение сторон камеры camera.updateProjectionMatrix();//обновляем камеру >window.addEventListener("resize", setSize);//создаем событие на изменение размеров окна браущера

Освещение

Чтобы было что-товидно нам нужен свет. Я создам два типа света, первый свет Ambient, которая распределён равномерно по всей сцене и как бы имитирует солнце. И второй Point (точечный) имитирует свет лампочки.

var light = new THREE.AmbientLight(0xffffff, 0.2);//создаем равномерный свет белого цвета с мощностью 0.2 scene.add(light);//добавляем в сцену равномерный свет var light = new THREE.SpotLight(0xffffff);//создаем точечный свет белогоцвета light.position.set(0, 5, 0);//задаем координаты точечного света scene.add(light);//добавляем в сцену точечный свет

Создаём первый объект

Объекты в three.js добавляется путём задание геометрии объекта и материала. Для начала создадим пол коричневого цвета, это будет просто обычный параллелограмм. Поэтому геометрию возьмём BOX и просто растянем его под размеры параллелограмма, а материал возьмём Phong чтобы хорошо было видно отражение точечного света.

//создаём пол с геометрией куба и Phong материалом коричневого цвета, side указываем с обоих сторон материал var floor = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshPhongMaterial()); floor.scale.set(5, 0.1, 10); //устанавливаем нужные размеры floor.position.y = -0.5; //указываем координату чтобы он был под ногами scene.add(floor); // добавляем в сцену

Смотрим что получилось:

Как мы видим у нас под ногами пол коричневого цвета.

Управление

Теперь нам нужно осуществить управление. Сделаем его с помощью кнопок WASD. W и S будем ходить вперёд назад. A и D будем поворачивать камеру по вертикальной оси. Сначала будем отслеживать нажатие кнопок WASD и записывать в переменную какая кнопка нажата в данный момент

var keys = < w: false, a: false, s: false, d: false >; //переменная указывает какие кнопки нажаты сейчас function keyDown(e) < //если нажали какую-то кнопку запишем в переменную это if (e.code == "KeyW") < keys.w = true; >else if (e.code == "KeyA") < keys.a = true; >else if (e.code == "KeyS") < keys.s = true; >else if (e.code == "KeyD") < keys.d = true; >> function keyUp(e) < //если отпустили кукую-то кнопку запишем в переменную это if (e.code == "KeyW") < keys.w = false; >else if (e.code == "KeyA") < keys.a = false; >else if (e.code == "KeyS") < keys.s = false; >else if (e.code == "KeyD") < keys.d = false; >> window.addEventListener("keydown", keyDown);//событие нажатие кнопки window.addEventListener("keyup", keyUp);//событие отпускание кнопки

Теперь зная какая кнопка нажата в данный момент, мы можем в нашу функцию анимации добавлять координаты и поворот камеры. Вот как мы изменяем функцию animate

function animate() < var speed = 0.05;//скорость пердвежение if (keys.w && !keys.s) if (!keys.w && keys.s) if (keys.a && !keys.d) if (!keys.a && keys.d) // добавляем ограничения по координатам чтобы мы не могли уйти бесконечно далеко if (position[0] > 2.3) < position[0] = 2.3 >if (position[0] < -2.3) < position[0] = -2.3 >if (position[1] > 4.8) < position[1] = 4.8 >if (position[1] < -4.8) < position[1] = -4.8 >//устанаваливаем координаты камеры camera.position.x = position[0]; camera.position.z = position[1]; //устанавливаем точку куда должна смотреть камера camera.lookAt(position[0]+5*Math.sin(rotate), 0, position[1]+5*Math.cos(rotate)) //эти две строчки уже и так были в той функции requestAnimationFrame(animate); renderer.render(scene, camera); >

Теперь мы можем передивигаться.

Заканчиваем

Теперь же просто для завершённости проекта добавим еще стены и потолок точно по такому же принципу как с полом и покрасим стены в зелёный и потолок в сиреневвый.

var wall1 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshPhongMaterial()); wall1.scale.set(5, 1, 0.1); wall1.position.z = 5; scene.add(wall1); var wall2 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshPhongMaterial()); wall2.scale.set(5, 1, 0.1); wall2.position.z = -5; scene.add(wall2); var wall3 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshPhongMaterial()); wall3.scale.set(0.1, 1, 10); wall3.position.x = 2.5; scene.add(wall3); var wall4 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshPhongMaterial()); wall4.scale.set(0.1, 1, 10); wall4.position.x = -2.5; scene.add(wall4); var ceil = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshPhongMaterial()); ceil.scale.set(5, 0.1, 10); ceil.position.y = 0.5; scene.add(ceil);

Вот что у нас получилось:

Конечный код

Вот полностью код, который мы написали:

Заключение

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