ivan221100

ivan221100

Пикабушник
Дата рождения: 22 ноября
115 рейтинг 3 подписчика 0 подписок 4 поста 0 в горячем
0

Как я не выпустил ни одной игры, но случайно стал веб-разработчиком

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

И тут у меня появилась идея. Если я не могу пробиться в их экосистему, чтобы показать свои проекты, почему бы не создать свою собственную площадку? Не очередной магазин приложений, а эдакую доску объявлений и витрину. Место, где такие же инди-разработчики, как я, фрилансеры и паблишеры смогут находить друг друга, собирать команды и показывать свои прототипы. Назвать всё это дело было решено DevBoard.

Снова Figma и смена курса

Так как амбиции снова ударили в голову, игровой движок Godot пришлось закрыть. Для создания полноценного веб-сервиса нужны были совершенно другие инструменты.

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

Набросок сайта в Figma

Набросок сайта в Figma

В качестве «мозгов» для сайта был выбран современный стек: React для визуальной части (фронтенда) и Supabase в качестве базы данных и системы регистрации (бэкенда).

Разработка и обманчивая легкость

На удивление, процесс написания логики шел бодро. React оказался довольно логичным, а Supabase брал на себя кучу рутины. Я прикрутил регистрацию пользователей, настроил публичные права доступа (RLS), чтобы любой посетитель мог видеть витрину игр, и написал фильтры.

Сначала я тестировал всё через облачный сервис Vercel. Там сайт работал как часы, правда, из-за блокировок провайдеров приходилось использовать внутренний прокси, чтобы запросы к базе данных доходили куда нужно. Потом было принято при помощи мощностей cloudflare проксировать каждый запрос. Я уже потирал руки, думая, что дело в шляпе. Но я еще никогда так не ошибался. Если вам нужен совет, не тратьте время на эти зарубежные площадки, ТПСУ Роскомнадзора блокироет их ip адреса и есть вариант что сегодня ваш сайт открывается, а завтра уже нет.

Финальный босс

Чтобы сайт работал независимо и стабильно, я арендовал виртуальный сервер, накатил на него Ubuntu.

Первым моим врагом стала командная строка винды, через которую и происходит управление виртуальным сервером (весь фнотенд написан в vs code). Когда я пытался прописать в конфигурационном файле ключи от базы данных, кнопка Backspace вместо удаления символов просто начала печатать какую-то дичь. В итоге файл .env сломался, и скомпилированный сайт, не зная адреса базы данных, начал делать запросы... сам к себе.

Я открываю свой новенький сайт по IP-адресу, пытаюсь войти в аккаунт, а мне в лицо летит красная ошибка: Unexpected token '<', "<html>... is not valid JSON". Сайт пытался прочитать HTML-страницу как базу данных.

Дальше — больше. Когда я починил ключи, вылезла следующая проблема. Код был написан хитро: он обращался к виртуальной папке /supabase-api/, а Vercel под капотом сам перекидывал это в базу данных. Но на моем голом сервере за всё отвечал Nginx. И он вообще не понимал, что от него хотят.

Началась долгая и мучительная настройка прокси-сервера. Nginx то выдавал ошибку 403 Forbidden, то 401 Unauthorized с издевательской припиской Invalid API key. Оказалось, что при перенаправлении запросов мой сервер просто «съедал» заголовки с ключами авторизации, и Supabase не пускал нас на порог.

Итог

После десятка пересборок, жестких очисток кэша в браузере  и правильной настройки передачи заголовков (proxy_pass_request_headers on), магия свершилась. Красные ошибки в консоли исчезли. Игры подтянулись из базы данных. Регистрация заработала.

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

Экраны сайта

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

Но это, как говорится, уже совсем другая история.

Если вы тоже делаете игру «в стол», ищете художника, программиста или просто хотите показать свой прототип миру — залетайте на DevBoard (возможно поисковые системы нас еще не индексировали, так что адрес увидите на скриншотах выше). Буду рад видеть ваши проекты на витрине! А так же буду рад вашей обратной связи, готов обсудить фичи и фишки, которые могу сделать платформу удобной для пользователей!

Показать полностью 7

Вам тоже нравятся мобильные игры из рекламы? Я решил сделать свою такую (игру, не рекламу). Часть 3

Ссылка на первую часть

Ссылка на вторую часть

Казалось бы, дело в шляпе: игра готова, заливай в App Store и Google Play, собирай отзывы аудитории и начинай делать следующий проект. Ага, конечно. В обоих сторах для публикации нужен аккаунт разработчика, а чтобы его получить, придется неслабо напрячься.

Поговорим о «яблоке»

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

Как выяснилось, для успешного прохождения квеста с регистрацией нужно собрать настоящее бинго: гео вашего аккаунта, банковской карты и фактического места проживания (по паспорту) должны полностью совпадать. У меня этот пазл не сложился. Оглядываясь на схожие трудности с получением статуса разработчика в Google Play, я решил отложить идею с релизом в долгий ящик. Или нет?.. Но об этом чуть позже.

Куй железо...

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

Если вы читали первую часть моего рассказа, то помните, что свой путь в геймдеве я начал именно с трехмерных игр. Самое время к ним вернуться! Но что взять в качестве референса? На удивление, новых реклам, которые смогли бы меня заинтересовать - не попадалось.

Зато случилось кое-что другое. Разбирая старый шкаф на даче, я наткнулся на классический «Тетрис». Сначала отложил его в сторону, но к вечеру он снова попался на глаза. Из налобного фонарика были добыты две пальчиковые батарейки, и игрушка «ожила». А следом за ней в моей голове материализовалась идея: что, если осовременить классическую механику, перенеся её в 3D? (Только не осуждайте, я знаю, что подобных проектов сотни тысяч, но мне ведь нужно на чем-то учиться).

От идеи к прототипу

И снова дизайн-документ. Я примерно набросал, как всё должно выглядеть и работать, после чего сразу начал переносить логику в Godot.

Визуализация идеи в Figma

Визуализация идеи в Figma

Буквально за два дня родилась новая игра — трехмерная головоломка BlockOut: Cube Puzzle. В силу приобретенных ранее знаний проект уже без проблем сбилдился и отлично завелся на смартфонах.

Скриншоты геймплея

Но тут снова всплывает наша главная проблема: куда девать эти игры, если не предвидится абсолютно никакой возможности публиковать их самому?

И тут у меня появилась одна идея.

Продолжение следует…

Ссылка на первую часть

Ссылка на вторую часть

Показать полностью 8

Вам тоже нравятся мобильные игры из рекламы? Я решил сделать такую же (игру, а не рекламу). Часть вторая

Я не могу назвать неудачной игру той концепции, которую выбрал для разработки первой (ссылка на первую часть истории будет где-нибудь тут). Хочу лишь сказать, что просто из-за недостатка времени не потянул весь объем работы, который предстояло выполнить. Когда я ненадолго отошел от разработки в целом, мне попалась ещё одна реклама. Игра из неё показалась мне такой же увлекательной и интересной, но в то же время сильно более легкой в реализации (как же я ошибался). Именно её я и взял как основу для своего следующего проекта.

И вновь увлекательный геймплей из рекламы

И вновь увлекательный геймплей из рекламы

Дальше – больше

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

В начале уровня вам выдается один юнит первого уровня, рандомно расположенный на сетке (вы сразу можете его перемещать), и один кристалл. Когда ваш герой разбивает кристалл, из него появляется ещё один герой тоже первого уровня (герои могут быть как дальнего боя, так и ближнего), а на сетке спавнится ещё один кристалл. Если у вас появилось два одинаковых героя, вы можете объединить их, увеличив их силу (минимум в 2,5 раза) и освободив место на сетке. Объединение происходит посредством перетаскивания одного героя на другого.

Когда у вас появляется два героя пятого уровня с одинаковым типом атаки (ближнего или дальнего) — можно объединить их в уникального юнита. Причем на выбор дается два варианта: средние характеристики, но шанс на успех равен 100%, или же очень высокие характеристики, но шанс на успех равен только 50%. В случае неудачи на месте объединения спавнится герой первого уровня.

Те самые эволюции

Те самые эволюции

Первый прототип

Ну что ж, идея понятна, нужно приступать к работе. Начал я с рабочего прототипа: условно набросал сетку и путь движения мобов. При слиянии кубики (герои) просто меняли цвет. В целом всё работало адекватно, и пришло время прикручивать ко всему этому визуал.

Как мне показалось, органично в этом всём будет смотреться пиксельная стилизация, и я начал отрисовывать героев. Тут на сцену и выходит Figma, о которой я упоминал в первой части своего рассказа. Да, не смейтесь, рисовал абсолютно всё я в Фигме. Несмотря на обилие софта для пиксель-арта, я выбрал именно её, потому что имел базовые знания по работе там. За стандартный пиксель я принял квадрат 10x10 реальных пикселей и принялся отрисовывать всё, что мне нужно.

Этот рыцарь является героем ближне боя 5 lvl

Этот рыцарь является героем ближне боя 5 lvl

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

Пару кадров из анимции этого рыцаря

Пару кадров из анимции этого рыцаря

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

Поговорим о главном

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

Тут я познакомился с понятием, которое впоследствии сильно упростит мне разработку чего-либо — звучит оно как «дизайн-документ». Оказалось, что, если визуализировать все свои мысли и идеи хотя бы на листе бумаги, многие нюансы всплывают еще до начала полноценного кода. После текстового описания всего, что только приходило в голову, я принялся рисовать интерфейсы всех экранов в Figma.

Когда дизайн и логика всех экранов была продумана - нстало время переносить это всё в Godot

Когда дизайн и логика всех экранов была продумана - нстало время переносить это всё в Godot

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

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

Полностью работающее главное меню

Полностью работающее главное меню

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

Часть отрисованных карт, на скрин попали и референсы

Часть отрисованных карт, на скрин попали и референсы

Особенности портирования

Когда у вас на руках есть что-то напоминающее продукт, хочется посмотреть на то, как это будет работать на реальном устройстве. Поэтому дело планомерно подходило к портированию на платформы, которые изначально и подразумевались как основные для моих игр — iOS и Android.

К сожалению, в своем быту я не нашел достаточно современных устройств на Android (единственным рабочим оказался LG L5, который когда-то довольно долго служил мне верой и правдой), поэтому вариантов не оставалось — делаем сразу на iPhone.

Там тоже не без нюансов, но обойти их мне показалось сильно проще. Дело в том, что вы не можете экспортировать свой проект из Godot в формате IPA. Для этого нужно какое-либо железо от Apple с установленным Xcode. Благо, макбук был найден в ближнем окружении, и работу это сильно не затормозило.

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

Скриншоты работающей игры

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

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

Но то, что выяснилось дальше, поставило целесообразность разработки игр подобного рода под большое сомнение.

Продолжение следует…

Показать полностью 14
15

Вам тоже нравятся мобильные игры из рекламы? Я решил сделать такую же (игру, а не рекламу). Часть первая

Тот самый момент, когда, сидя в очереди, ты во что-то играешь и в рекламе между уровнями неожиданно видишь очень интересный геймплей. Там какой-нибудь чумной доктор или дровосек под твоим управлением начинает бегать и добывать ресурсы. Когда ты приносишь эти ресурсы на базу, тебе выдают монеты, на которые ты тут же строишь укрепления от ломящихся со всех сторон врагов. И в этой интерактивной рекламе такой геймплей тебя цепляет, и, конечно же, ты нажимаешь кнопку «Скачать» в сторе — почему бы и нет?

Увлекательный геймплей из рекламы

Увлекательный геймплей из рекламы

А когда загрузка заканчивается, ты выясняешь, что реально такого геймплея в игре не так уж и много (раз в 5–10–15 уровней, нужное подчеркнуть), а иногда бывает, что и вообще нет. Чаще всего случается так, что игра оказывается самым обычным градостроительным «симулятором», где уже на второй день время возведения одной постройки увеличивается с 10 секунд до 1,5 суток. Может, конечно, я потратил недостаточно времени на поиск такого проекта, но было принято решение: сделать свою игру! Отсюда я и начну свою историю.

Немного о себе

Не судите строго, я тут первый раз. Всем привет, зовут меня Ваня, я студент 5 курса института. Обучаюсь по технической специальности, и термин «разработка» применим в моей жизни разве что к написанию управляющих программ для станков с числовым программным управлением (ЧПУ). Сюда можно добавить ещё и то, что около пяти лет назад я познакомился с Figma и с тех пор активно пользуюсь ею чуть ли не в бытовых задачах, но до Фигмы в этой истории нам еще предстоит дойти. Также по мелочи на любительском уровне занимаюсь видеомонтажом и много чем ещё. Ну а мы двигаемся дальше.

Выбор движка и помощника

Итак, опыта в геймдеве ноль, а планы амбициозные, поэтому я начал выбирать игровой движок. UE сходу показался очень большим и, по факту, избыточным по своим мощностям. Unity отпал из-за недавних изменений в их политике распространения — я не углублялся и просто сразу скипнул его. И тут я наткнулся на Godot: он оказался бесплатным и в целом достаточно удобным для использования.

Но как быть дальше? Начал я смотреть обучающие видео по Godot, чтобы разобраться хотя бы в базовых моментах. На этапе скриптов было принято решение, что код будет писать нейросеть, а я уже в процессе буду разбираться, что к чему. В качестве нейросети был выбран Gemini 3.1 Pro. Тут каких-то особых мук выбора не было: просто в какой-то момент у меня появилась подписка AI Pro от Google, которая позволяет не сильно париться о лимитах в чате. Например, при использовании DeepSeek меня очень сильно калило то, что в самый неподходящий момент вылезает сообщение: «Достигнут лимит сообщений, начните новый чат».

Первый блин комом

Сразу после старта разработки я осознал, что был чересчур амбициозен, потому что объем работы предстоял просто титанических масштабов. Дело в том, что пусть в Godot и достаточно просто собирать свою игру, а Gemini довольно лихо справляется с написанием скриптов — всё рано или поздно упирается в визуал. А если быть точным, то в 3D-модели.

По долгу профессии, на которую я обучаюсь, я очень близко знаком с 3D-моделированием (ниже вы увидите что-нибудь из моих работ). Но в 3D-моделировании для производства и для игр есть колоссальные отличия. В первом случае весь процесс происходит в так называемых CAD-системах (AutoCAD, SolidWorks, Компас-3D, Inventor и т. д.), где модель, по сути, описывается математическими формулами и максимально приближена к реальному объекту. Грубо говоря, для того чтобы получить условное зубчатое колесо, вы сначала нарисуете его в CAD-системе, затем на базе своей 3D-модели напишете управляющую программу (УП), загрузите УП и заготовку в станок и только после этого, с учетом ещё тысячи и одного нюанса, у вас получится желаемый результат.

Корпусная деталь, сделанная в SolidWorks

Корпусная деталь, сделанная в SolidWorks

Полигональное моделирование же призвано просто передать узнаваемую форму, не привязываясь к четким математическим значениям. С полигональным моделированием я, на удивление, познакомился сильно раньше, чем вообще поступил в технический институт. Программа называлась Cinema 4D (а еще был софт для рендера Octane, ради которого мне даже пришлось копить на GTX 980 Ti), и я очень хотел делать красивые ролики с графикой. Обучение началось у меня, как и у всех, со всяких бубликов и прочего, но я достаточно быстро перешагнул к более сложным вещам и стал воспроизводить формы актуальных на тот момент айфонов. Проектов, как и скриншотов с тех пор, к сожалению, не сохранилось, но я и не рассчитываю на то, что вы поверите мне, — всё-таки к делу это мало относится.

Вернемся к делу. Поскольку воды с тех пор утекло немало, я решил попутно освоить что-то новое, и на ум мне пришел Blender. Забавным мне показалось то, что, когда я открыл на ютубе обучающие уроки по Blender, я увидел — внимание! — всё тот же пончик. Оказывается, несмотря на разный софт, учатся люди примерно на одном и том же. И на том спасибо, что при обучении моделированию в CAD-системах не было ничего про пончик. А хотя…

Снова пончик делать я не стал, а решил сразу набивать руку на более сложных формах. Так сложилось, что с детства меня влекли автомобили, и именно на них я стал набивать руку. Поскольку для моей игры нужны были low-poly модели, кузова машин я начал делать именно в этой стилистике (я предвижу ваш диссонанс и непонимание того, как автомобили могут быть задействованы в этой игре, и у меня есть ответ: никак).

Low Poly модели машинок

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

Первый домик (скорее всего кузница)

Первый домик (скорее всего кузница)

После того как первый домик был готов, пришло понимание, что процесс этот трудоемок и, ввиду моей студенческой жизни и близящегося диплома, столько свободного времени я не имею. Внизу прикладываю фотографии игрового билда, до которого сделанный домик так и не добрался. Реализована система сбора бревен и их продажи на "лесопилке" за монеты. Курс: 1 бревно = 1 монета. Так же была сделана система магазина, которы сначала нужно построить за монеты. На скриншотах среди стандартных моделей Godot вы можете увидеть сделанное мной бревно, которое является одним из добываемых ресурсов в этой игре.

Первый билд

Продолжение следует…

Ссылка на вторую часть истории

Показать полностью 9
Отличная работа, все прочитано!

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества

Недвижимость и ремонт

Теги

Популярные авторы

Сообщества