Девочка-волшебница
0,2
рейтинг
14 сентября 2014 в 00:56

Разработка → Пост о маленьких видеоиграх

Привет, друзья. В этом посте мне бы хотелось рассказать, как я писал маленькие HTML5-игры для конкурса js13k, какие подводные камни повстречались на этом тернистом пути, и что получилось в результате.

Подводные камни на тернистом пути
(Подводные камни на тернистом пути — это русло пересыхающей реки, например. Летом в нем растет всякая трава и другие вегетарианские штуки, а осенью начинаются дожди, и всё уходит под воду. Получается терновник вместе с подводными камнями, очень метафорично и травмоопасно.)

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

Но сначала 77 слов про js13k


Если кто-то пропустил, вкратце про конкурс: js13k это такой специальный способ для убиения свободного времени наповал. Нужно написать видеоигру, времени на это отводится месяц (я написал сразу две, от жадности как-то само получилось).

Основное требование — размер всех исходников приложения в архиве (zip) должен быть не более 13 килобайт. Программа должна работать оффлайн, сиречь подгрузить любимые шрифты с серверов гугла, а музыку с серверов SoundCloud не получится — нужно всё брать с собой в архив.

Получилось вот что


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

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

Вот две ссылки, первая и вторая. Гитхаб там внутри есть.

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

Итак, рассказ про запчасти видеоигр:

Планета, похожая на дискотечный шарик


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

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

И вот тут сразу начинаются ошибки проектирования.

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

Лучше было обойтись чем-то попроще, хотя бы даже и статичной (или вращающейся в плоскости экрана, например) картинкой. Такое решение дало бы некислый выигрыш по производительности, да и смотрелось бы на 20-25% лучше, чем ничего. Ну да ладно, переделывать не стал — пусть будет диско-шарик.

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

Астероиды


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

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

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

Скорость у космических объектов исключительно угловая и совершенно одинаковая, поскольку автор оказался сказочно ленив.

И прочий космос


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

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

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

На этом прочий космос как-то сам собой закончился, и началось

Звуковое сопровождение


Вот тут меня приятно удивили сразу многие вещи.

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

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

Некоторые маньяки прямо настоящую музыку делают таким способом.

В деле обретения формулы для неотвратительной фоновой мелодии мне очень помог демосценер ryg (Fabian Giesen, из Farbrausch). Вот тут в Твиттере можно пронаблюдать, как этот замечательный человек и талантливый программист дарит мне формулу. Было очень приятно. Да что там, до сих пор приятно.

Минимальный синтезатор звука вот тут, в нем всего несколько строк.

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

Трехмерные кубики


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



Поиграться с прототипом тут. Можно вертеть доской при помощи слайдера. Слово nopsp (ненастоящее) означает бесперспективность, её надо выключить.

Про браузерную совместимость: в этом проекте я с префиксами не перетрудился, поэтому где работает, там работает. Последний Firefox и Хром/Хромиум обычно OK. (Проблема с префиксами в том, что они не только в CSS.)

Еще Firefox рисует торчащие пиксели без сглаживания, что могло бы смутить какого-нибудь слегка эстетствующего разработчика, а мне так больше нравится, чем мыльные края полигонов в Хроме — такое восьмибитное очарование. Обожаю старые видеоигры.

Поиск пути и другие вещи


Чтобы враги догоняли персонажа, понадобился поиск пути. Ничего изобретать не стал, использовал алгоритм A*, вот эту реализацию. Очень классная версия алгоритма, маленькая и быстрая.

Прочие аспекты игры не представляют, как мне кажется, технического интереса.

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

Вывод


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

Писать видеоигры — достаточно трудоемкий, но захватывающе интересный процесс, особенно спонтанно и «for fun», когда выдумываешь всё на ходу без предварительного планирования и разного там менеджмента.

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

И помните: попытка — первый шаг к провалу.



Такой вот мотивационный пост. Пожалуйста, напишите мне личные сообщения про то, как я не дружу с живым великорусским языком, и хорошего времени суток вам.
Рей @printf
карма
105,5
рейтинг 0,2
Девочка-волшебница
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (19)

  • +2
    В трехмерных кубиках я как раз и обратил внимание на названия уровней. Узнал в некоторых названия треков Celldweller :)
  • +7
    Если вы можете узнать названия уровней без гуглевания, мы могли бы подружиться, наверное.

    Только «You are (not) alone» ( ._.)
    • +4
      Ну «This was a triumph» то все должны знать :)
      • 0
        А, не обратил внимания
        Да, знакомо
  • +1
    Музыка хорошая у Вас.
  • +5
    Я думал, что процедурная музыка умерла со времени AY, ан нет :)
    Спасибо Вам огромное, что напомнили, да еще и ссылками полезными поделились.

    Игра про астероиды ОЧЕНЬ понравилась — и сеттинг и управление и звук. Вот реально вроде все просто — а затягивает.

    Пойду доделывать свой булдер дэш, который забросил пару лет назад :) Мотивировали!
    • +1
      Если ваш булдер дэш, еще и тот который с приставкой супер- был на бк 0010-01, то дайте мне ваш телефон, буду раз в неделю мотивирующую смс присылать.
  • +1
    О, очень годно. Автор – молодец. Сам потихоньку пилю html-игрулю на голом javascript'e, боли здесь предостаточно.
  • +1
    Отличная механика в игре про луну. Кстати, я уверен, что это не диско-шарик, а именно луна.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        «We require more marketing.»
  • +1
    Кстати, может подскажете, позволяется ли в рамках js13k тянуть системные текстурки? Как это делали, например в kkrieger?

    P.S. А игрули получились шикарные. Отдельное спасибо за аппаратную музыку)
    • 0
      Вам спасибо на добром слове. А какие в браузере системные текстуры?
      • 0
        Да любые из system32 хотя бы)
        • 0
          Пользователи OS X скажут вам огромное спасибо.
          • 0
            Я сам такой, это для примера же, да и вопрос был в том допускается ли использование условиями конкурса.
            • 0
              В правилах, кажется, ничего про это нет.
  • +1
    Отлично! И игры и текст. Так держать.
  • 0
    Класс! Замечание про экономию времени бесподобно.

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