Как минифицировать вашу HTML5 игру для соревнования Js13kGames

Слышали ли вы что-нибудь о соревновании под названием js13kGames? Это мероприятие ориентировано на разработчиков игр, использующих возможности HTML5. Основное требование для участия — размер игры не должен превышать 13 КБ.

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

Подробнее о js13kGames

Как уже говорилось выше, js13kGames предназначено для HTML5 и JavaScript программистов, которые хотят проверить свои навыки, соревнуясь с другими участниками. Здесь, как и в любом другом конкурсе, требуется следовать правилам турнира и придерживаться установленного срока (с 13 августа по 13 сентября). Не допускается использовать какие-либо внешние библиотеки или ресурсы, такие как Google Fonts. Все, что вы хотите использовать в своей игре, должно умещаться в ZIP-архив, размер которого не должен превышать 13 КБ. Участие в конкурсе бесплатное, однако исходные коды должны размещаться в GitHub.

13 КБ? Слишком мало, скажете вы. Да, я с вами соглашусь. Но не забывайте, что ограничения частенько порождают творчество: вам следует подумать о том, как реализовать свои идеи оптимальным образом, поскольку здесь имеет значение каждый байт!

Почему вы должны принять участие?

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

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

Советы и хитрости

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

Общие советы

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

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

Ресурсы, используемые в играх, зачастую очень большие. Лучше сжать изображения, а в игре программно ее увеличить. Да, мы потеряем немного в качестве, но зато уложимся в свои 13 КБ.

Минификация кода

Основным ядром вашей игры будет исходный код. Именно поэтому оптимизации кода следует уделить большое внимание. Самым простым способом уменьшить размер кода является минификация кода. Это означает, что в вашем коде не будет пробелов, табуляций и переводов строк. После удаления всего лишнего, ваш код станет гораздо легче.

Чтобы еще больше сжать код, используйте короткие имена для переменных. Да, это сделает ваш проект абсолютно нечитаемым (обфусцированным). Именно поэтому вы должны иметь читаемую копию у себя и именно ее вы должны выкладывать в GitHub.

Вот список инструментов, которые позволят вам обфусцировать ваш код:

• Оффлайн:Google Closure CompilerYUI CompressorUglifyJS
• Онлайн:Compressor RaterJSMiniJSObfuscate

Сжатие изображений

Если вы хотите уложиться в 13 КБ, то количество изображений в вашей игре должно стремиться к нулю. Но если же они все-таки есть, то вам следует потратить некоторое время на их оптимизацию. Существуют несколько онлайн инструментов, таких как TinyPNG и Optimizilla, оффлайн инструментов, таких как ImageOptim, инструментов для командной строки и т.д. Думаю, среди такого обилия программ вы найдете то, что придется вам по вкусу.

Вы также можете написать игру в очень низком разрешении, а затем просто все масштабировать.

Процедурная генерация уровней

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

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

А вот несколько статей о процедурной генерации игровых карт:

1. Алгоритмы генерации лабиринтов — авторская статья-дайджест нашего главного редактора
2. Создание процедурно генерирующейся системы подземных пещер
3. Использование BSP-деревьев для генерирования игровых локаций
4. Процедурное создание 3D-пещер
5. Генерирование пещерных локаций, используя клеточные автоматы

Генерация аудио

Какая же игра без музыкального сопровождения? Но как добавить в игру музыкальный файл весом 5 МБ или больше, если размер игры ограничен всего лишь 13 КБ? Да запросто! Jsfxr вам в помощь!

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

Вот статья по созданию ретро-музыки: “Создание ретро звуков с использованием Bfxr”

Система сборки

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

Шаблонный код

Использование в проекте определенной структуры файлов и папок требует дополнительного места. Конечно же, вы можете расположить все ваши файлы (будь то JavaScript, CSS или изображения) в разные папки для более удобного доступа к ним. Однако для экономии места можно все скрипты располагать в основном файле index.html.

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

Выбор правильного типа игры

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

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

Учитесь у других

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

Вывод

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

Полезные ссылки

• 13 простых шагов по созданию игры для js13kGames — презентация от onGameStart 2012
• Звуки для аркадной игры от Jack Rugile
• Triskaidekaphobia — игра, созданная для продвижения соревнования js13kGames
• Официальные правила и требования
• Список судей и призов в этом году
• Игры предыдущих годов — 2012, 2013, 2014
• Gamedev.js Weekly — новости об обновления
• Хэштеги Twitter: #js13k или #js13kGames
• Полезные сайты для разработчиков игр: js1k, Ludum Dare, 1GAM
• Найти соревнования и конкурсы: compohub.net, indiegamejams.com

Перевод статьи “How to Minify Your HTML5 Game for the Js13kGames Competition”.