Все инструменты, которые мы использовали для создания популярной HTML5-игры Curious Expedition

В 2012 году мы начали работать над Curious Expedition. Тогда HTML5 был совсем другим, но идея быть в авангарде этой технологии была для меня захватывающей. Я начал создавать собственный движок с поддержкой HTML5 2D Canvas и пониманием того, что мы перейдем на подходящий движок, как только достигнем предела в развитии нашей игры. Но мы никогда этого не сделали, и в итоге выпустили премиум-игру на HTML5 в Steam, GOG и HumbleStore. К настоящему моменту продано более 200,000 единиц, и в Steam игра имеет рейтинг в 89%.

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

Sublime Text

Это был мой любимый текстовый редактор в первые пару лет работы над Curious Expedition. Я был рад уйти от всех сумасшедших IDE, с которым мне приходилось сталкиваться в дни моей AAA-разработки на C++, и просто работать с минималистичным, но чрезвычайно быстрым и мощным текстовым редактором. В Sublime Text есть огромное количество шорткатов, которые действительно могут помочь вам в программировании.

Вердикт: Хотя мне нравится то, что Sublime Text принес в мир программирования, я думаю, что в настоящее время его заменили другие мощные текстовые редакторы общего назначения, такие как Visual Studio Code…

Visual Studio Code

Ненавидя Visual Studio, я довольно скептически относился к Visual Studio Code, пока не прочитал, что в его разработку был вовлечен Эрих Гамма. Я попробовал VSC, когда захотел реализовать собственное дополнение для Sublime Text. Я сдался после трех дней чтения непонятной документации и просто попробовал VS Code, где смог быстро сделать собственную подсветку синтаксиса и глубокую интеграцию игровых скриптов.

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

VS Code, очевидно, вдохновлена подходом Sublime Text, но сочетает в себе как сильные стороны Sublime, так и современную интеграцию TypeScript/node. Неудивительно, что сейчас это самый популярный инструмент разработки по версии StackOverflow.

Вердикт: Все еще использую Visual Studio Code, даже когда я работаю в Unity. По-прежнему лучший текстовый редактор.

Photoshop

Мой партнер по разработке игр Йоханнес Кристманн, который делал почти всю графику для Curious Expedition, использовал Photoshop для работы.

Вердикт: Золотой стандарт для работы с пикселями.

Paint.net

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

Вердикт: Все еще используем его.

TexturePacker

Так как я сделал наш собственный движок, я был счастлив использовать модульные инструменты, которые могли бы просто решать его конкретные задачи. Мы использовали TexturePacker для создания таблиц спрайтов, чтобы браузеру не приходилось загружать сотни отдельных спрайтов (как мы это делали в начале), а просто пару больших таблиц. Это очень помогло со временем загрузки в веб-версии (оказалось, что загрузка каждого изображения с установкой нового  соединения — очень медленный процесс, и это также помогло остаться ниже максимального количества одновременных соединений, разрешенного для страницы). TexturePacker экспортировал файл JSON вместе с атласом, который было легко интегрировать в наш HTML5-движок.

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

Trello

После работы над AAA-играми  и работы с Hansoft и Jira, я был рад увидеть что-то более простое и гибкое (я большой сторонник простоты — см. Текстовые редакторы). Мы использовали Trello довольно интенсивно в течение первого года производства и действительно наслаждались тем, как это весело, но в конечном итоге столкнулись с проблемой масштабирования. Карточки часто пропадали при переносе между множеством досок, которыми мы вскоре обросли. Нам было трудно оценить, сколько мы можем сделать в каждом альфа-обновлении, и передача карточек другому человеку была сложной, что часто приводило к путанице в команде.

Вердикт: отлично подходит для хобби-проектов, но, по-моему, недостаточно для запуска полноценного игрового производства. Вот почему мы начали использовать Codecks.

Codecks

Поскольку эта статья вышла в блоге Codecks, вы, возможно, уже понимаете, что такое Codecks. Это недостающий шаг между чем-то простым, вроде Trello, и чем-то чрезмерно сложным и требовательным, вроде Jira. Первоначально он был запущен моим старым коллегой из Yager. Вот так я и услышал о нем в первый раз в 2015 году, и с тех пор мы использовали его на разных этапах работы нашей компании (от 2 человек до более 20 человек, работающих сейчас над сиквелом). В то время мы еще не знали, что влюбимся в Codecks настолько сильно, что создадим совместную компанию с первоначальной командой и будем совместно создавать инструмент с 2019 года.

Вердикт: Мы любим Codecks.

Google Chrome

Браузер Google был не только нашей основной тестовой средой, но и главной станцией отладки благодаря превосходным инструментам разработки Chrome. Еще в 2013 году Firefox был лидером в этой области благодаря Firebug, но Chrome в настоящее время главный для разработчиков, на мой взгляд.

Вердикт: Chrome по-прежнему предлагает веб-разработчикам лучшие инструменты.

Bitbucket

Я решил использовать git в том же стиле, что и HTML5 — это была интересная технология, и она, казалось, решила одну из самых больших проблем, с которыми я столкнулся при работе в большими играми: создание ветки с ним занимает секунды, а не минуты. или часы. Я выбрал Bitbucket для хостинга, потому что он был бесплатным для пяти пользователей, в то время как GitHub хоть и получил весь хайп, но не предлагал бесплатного тарифа для небольших команд, желающих работать над проектами с закрытым исходным кодом.

Самым большим недостатком git является то, что он изначально не подходит для обработки больших файлов и не допускает эксклюзивной работы (помечая двоичный файл как используемый и не позволяя кому-либо еще работать над ним). Обе проблемы не были актуальны для нашей команды, так как мы просто хранили большие исходные и видеофайлы на облачном диске, в то время как внутриигровые ресурсы были очень маленькими из-за работы над ретро-игрой с низким разрешением. Вторая проблема также не повлияла на нас, так как наша команда была четко разделена на техническую и художественную. Между тем Bitbucket теперь также предлагает поддержку LFS, которая позволяет обрабатывать большие файлы непосредственно в git, управляя ссылками на облачные сервера, без каких-либо дополнительных действий пользователя.

Вердикт: Мы по-прежнему довольны Bitbucket, хотя после превышения порога в 5 человек цена значительно возрастает.

Sourcetree

Sourcetree — это отличный бесплатный git-клиент, который был приобретен Atlassian и поэтому имеет отличную интеграцию с Bitbucket, включая отличную поддержку LFS. Иногда случайные обновления версий приводят к ухудшению работы, но в целом я доволен им и еще не нашел лучший клиент.

Вердикт: Все еще используем его.

HTML5: Electron / NW.js

После того, как вы начнете распространять свою HTML5-игру в таких магазинах, как Steam или GOG, вам понадобится настоящий исполняемый файл, который люди смогут загрузить, чтобы играть в игру в офлайне. NW.js и Electron — два отличных варианта для этого. Это похоже на загрузку браузера Chrome с фиксированной домашней страницей, которая указывает на вашу игру, при этом без обычного интерфейса браузера. С точки зрения пользователя, отличий от обычной программы на C++ нет. Они также поставляются со своим собственным node-бэкэндом, который позволяет получить доступ к специальным файловым API и функциям, которые обычно используются в десктоп-программах, но не являются частью обычной спецификации HTML5. Я обнаружил, что обе платформы работают хорошо, их легко установить и настроить. Мы использовали NW.js для первых двух выпусков, но позже переключились на Electron, потому что он дал лучшую производительность.

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

HTML5: Greenworks

Green Heart Games оказали большую помощь разработчикам игр, внедрив Javascript-библиотеку в Steam SDK. Она позволяет вам легко интегрировать расширенные функции Steam в вашу HTML5-игру. Библиотека не полностью поддерживает последние версии Steam SDK, но она обрабатывает все основные функции, которые вам нужны будут для выхода в Steam.

Вердикт: Спасибо Green Heart Games! Будет использовать снова (ну и просто нет другого варианта, кроме как реализовывать собственную JS-библиотеку).

Back4App / Parse

Мы решили не только выпустить нашу игру в PC-магазинах, которые занимаются для нас платежами и управлением пользователями, но и на нашем собственном сайте. Вы можете играть в полную игру онлайн здесь. Но нам пришлось подключить нашу собственную аутентификацию пользователей и процесс оплаты. Для обработки регистраций пользователей я использовал Parse, бэкендом основе node, который предоставляет множество базовых функций, таких как регистрации, управление сбросом паролей и облачную базу данных для хранения информации. В какой-то момент во время нашего развития Facebook, к сожалению, купил Parse и решил закрыть его. К счастью, другие компании заполнили пробел и предоставили Parse-совместимые услуги. В итоге я использовал Back4App, который мы используем с тех пор, и хотя бэкэнд может быть иногда немного неуклюжим, в целом он работает отлично.

Вердикт: Отлично сработало для нашего проекта, но я бы, вероятно, использовал что-то с большей долей рынка.

HumbleStore Widget

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

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

Layershift

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

Вердикт: Никогда не было проблем с этим. Будем использовать снова.

Crowdin

Curious Expedition содержит более 80,000 слов, и все же был переведен на более чем 10 языков благодаря нашей базе энтузиастов. Crowdin — это мощная система управления переводами, которая позволяет вам загружать свою текстовую базу и управлять переводчиками из сообщества. Вы можете обойтись без выделенной системы, просто если бы сообщество самостоятельно управляло переводами, но предоставление общего пространства для этого отлично подходит для лучшего открытия и обеспечивает прозрачность для всех участников.

Вердикт: Супер, спасибо нашему переводческому сообществу и оно того стоит.

HTML5: CoffeeScript

CoffeeScript — это язык программирования, который объединяет идеи Python и Ruby в синтаксис JavaScript, избавляется от фигурных скобок и использует вместо этого пробелы. Он допускает гораздо более плотный и в то же время читаемый стиль, но легко компилируется в обычный JavaScript.

Вердикт: CoffeeScript послужил нам очень хорошо, но теперь я бы просто использовал обычный JavaScript или что-то современное, вроде TypeScript, поскольку синтаксис JavaScript развился до такой степени, что преимущества больше не стоят того, чтобы иметь дело с дополнительным шагом на конвейере.

Buzz! / FFmpeg

Buzz! — небольшая звуковая библиотека JS, которая помогает разобраться с некоторыми тонкостями поддержки звука в различных типах браузеров. Чтобы охватить всех основных вендоров, я конвертировал все наши wav-файлы, используя скрипт Python и FFmepg, в .ogg и .mp3, а затем использовал Buzz! для воспроизведения.

Вердикт: Buzz! легковесный, но довольно ограниченный, и мне пришлось сильно расширять его во время создания игры. Если бы я начал все сначала, я бы, вероятно, просто начал с обычных звуковых возможностей HTML5.

HTML5: SugarJS

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

Вердикт: Очень понравилось работать с ним.

HTML5: tween.js

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

Вердикт: Работа сделана. Жаловаться не на что.

HTML5: hjson

Все объекты внутри Curious Expedition определены в декларативном скриптовом стиле. Первые пару месяцев я просто загружал обычные JS-файлы со словарями, расположенными в соответствии с нашей собственной моделью сущностей. В конце концов я переключился на JSON для облегчения перезагрузки во время выполнения, но жесткие правила синтаксиса привели к недостатку гибкости. Я переключился на hjson ради большего удобства. Кстати, вы можете найти все наши файлы с игровыми  сценариями на github. В конце концов даже hjson оказался не таким гибким, как мне хотелось, и я реализовал более упрощенный синтаксический парсер, основанный на анализаторе hjson.

Вердикт: Все равно вы будете использовать HJSON вместо JSON, если только вы не просто читаете ваши файлы конфигурации.

Python / Ruby

Python и Ruby — отличные скриптовые языки для быстрого создания файлов сценариев. Я использовал их время от времени для пре или пост обработки файлов сборки, например, для упаковки игры для релизов в Steam.

Вердикт: Будем использовать снова.

Curious Expedition 2

Спасибо за чтение. Если у вас есть дополнительные вопросы или замечания, пожалуйста, свяжитесь со мной в твиттере или по электронной почте riad-at-codecks.io. В настоящее время мы работаем над продолжением Curious Expedition. Вы можете узнать больше об этом здесь.

Источник