Создание браузерной игрульки в соц сети от и до
Путь до идеи полученной игры был очень долог. Всё началось с того, что я познал JQuery. Да. Это было золотое время. С помощью тупых анимаций я делал всякую хренотень вроде движения смайлика по полю в место клика мыши. Когда этот уровень достиг совершенства, мне захотелось добавить в эту «игру» онлайновости. И тут понеслась…
Первое что мне пришло в голову, это отправка каждые N секунд запроса на сервер, не сделал ли что-то второй игрок. Всё было сделано на PHP+MySQL. Данные о месте и времени клика сохранялись в базе и выдавались игрокам по запросу. Исходников чуда к сожалению не осталось, ну и ладно.
Следующим жизненно важным этапом стала производительность. Вариант с постоянными запросами к серверу естественно отпал, и была необходимость искать другие решения. Я перебирал всякие Comet-ы, флэши… но у меня это всё не получалось даже просто поставить на сервер. И тут вдруг я наткнулся на NodeJS. Это было что то. Я радовался как ребёнок делая первые тесты, а уж когда узнал про Socket.io. .Ну вы меня понимаете =)
Это всё было для меня как открыть Америку, я не спал ночами и писал код, делал тесты… как вдруг заметил что моя игра застряла на месте. Немного поразмыслив я стал делать своё первое творение, похожее на игру. Опять же… весть клиент был на JQuery, те же анимации, те же движения смайликов. Всё понемногу усовершенствовалось, добавился чат, несколько видов оружия (ага, смайлики стреляли). Большая карта была обычной картинкой размером 10к х 10к пикселей. Тогда же я узнал о Chrome Dev Tools. Увидев то, как моё детище жрёт память я стал снова углубляться в недры гугла. Узнал о том что уже существует HTML5 со своим Canvas-ом. Это стало еще одним поводом порадоваться. Опять бессонные ночи изучения API (слово ночи во множественном числе потому что JS я в общем то знал крайне поверхностно, и вот пришло время заняться и им вплотную). Спустя пару недель моя «игра» была переписана на чистый JS и HTML5. В то время я работал у себя в колледже лаборантом, и мы с такими же лаборантами сидели и тестировали мои костыли. Пару дней спустя стало уже скучно, и я стал погружаться в 3D…
Ох уж это 3D. Тупые попытки создания в браузере 3D фигур в основном ни к чему не приводили. То есть их получалось создать на странице, даже двигаться между красными шарами и серыми кракозябрами, слепленными в блендере. На удивление, при написании статьи обнаружил что на серваке эта ночь под названием «жена в ночной смене» еще жива. Ссылка для особо любопытных. — можно даже вращать мышкой и двигаться стрелками. TreeJS показался мне очень сложным и опять гугл пришёл мне на помощь. Там я узнал о Unity3D. Вообще у меня имеется дурацкая привычка делать тупые тесты производительности. При первом запуске юнити я был удивлён на сколько удобно сделан интерфейс, и даже не имея навыков работы с такого рода программами я сумел сделать карту с горами, тропинками и водопадами. С водопадами как то не срослось, случайно добавил их на карту несколько десятков тысяч и при рендере у меня отказала видеокарта. Ну что поделать… сделал отличную кладку кирпичей.
Переломный момент.
Думаю многим известна история успеха игры «Гонки на клавиатурах»? (ссылку на статью не нашёл, буду рад вставить). Когда я узнал, сколько зарабатывают разработчики УСПЕШНЫХ приложений в социальных сетях, мне, наверное, как и другим захотелось создать свою игру для социальной сети. И я начал активную работу над этим. Узнал, что еще и юнити проект можно собрать под веб… Замысел игры был относительно простой — своя линейка с чем нибудь и куртизанками. Чтобы было чем страдать в юнити, я даже уже было начал переговоры с дизайнером, который сможет отрисовать для игры мобов, карты и т.д. Конечно, на голом энтузиазме никто работать не захотел, и я принял решение сделать что нибудь «попроще», чтобы набить карман для первоначального бюджета более серьёзного проекта. Этим «попроще» стала идея сделать онлайн гонки 2d на HTML5, только не тот онлайн, в котором нажимаешь на соперника, ждешь, и «ты выиграл!/проиграл =(», а реальный онлайн с управлением автомобиля на трассе. Чтобы еще больше облегчить себе жизнь, гонки решил делать драговыми =) Ну а что… никаких поворотов, меньше физики… Короче говоря, спустя пол года всё закончилось тестовой версией с 20 автомобилями. Я уже выдохся искать все параметры для машин, т.к. пытался сделать реалистичную (даже 2d) физику, нужны были такие параметры, как аэродинамическое сопротивление, графики крутящего момента и прочие характеристики, которые, как оказалось, не так легко найти.
Но эти гонки были для меня чем-то обучающим. Я изучал всё новые новые технологии, придумывал велосипеды из костылей, натыкался по нескольку раз на свои грабли… И зато за эти пол года сложился некоторый идеальный для меня скелет клиент-сервера. Если говорить конкретно, то на клиента canvas, на сервере nodejs+socket.io. Банально, криво, зато работало. А если работает, значит не трогай =) В основном проблемы я испытывал из-за незнания языка, и даже самые простые ф-ии, уже встроенные в JS я велосипедил сам, не зная об их существовании. Примерно так выглядел небольшой кусок серверной части:
(Кому уже не интересно читать а хочется посмотреть — ссылка в конце статьи)
Внутри swith был код, отправляющий определённый ответ пользователю. Кстати о том, что в case можно писать не только цифры я еще не знал, по этому приходилось держать в голове все типы сообщений, которых было ни много ни мало — около 50. Среди них и авторизация, и начало гонки, и конец гонки, и чат, и разные разные внутриигровые события. Я знал, что для сокета вместо использования switch конструкции можно сразу писать socket.on(‘тип сообщения’. ), но такой подход создаёт лишнюю порцию спагетти, и не сильно большое удобство написания кода, по этому непосредственно серверная часть конечной игры написана именно так. То-есть скелет такой, позже то я всё таки узнал что в case можно писать что вздумается =). На клиенте конструкция один в один, только нету массива всех игроков, есть только объект самого себя (причем глобальный), и огромный набор функций (тоже глобальных), берущих на себя роль обработчиков входящих сообщений.
Постепенно я узнавал возможности JS, NodeJS и socket.io. Помню первый успешно-провалившийся тест максимального количества подключений. При 10к +- 250 коннектов socket.io терял отзывчивость и не принимал новые подключения. После долгой возни помогла вот эта статья. Там всё подробно описано так что повторяться не буду.
Как я уже говорил, с гонками я бодался пол года, и на большее сил не хватило. Про идею с 3d игрой я уже совсем забыл, и от неё остался лишь ватман на комнатной двери со структурой БД. И вот, так как гонки оказались для меня слишком сложными, я решил еще больше упростить себе задачу, и сделать самолётики, летающие в воздухе и просто стреляющие друг в друга.
Моя игра, моя игра.
Первая версия
Логика и говнокод
И вот, в один прекрасный свободный день, сел на работе, загрузил практикантов и стал снова экспериментировать с canvas-ом. Первые эксперименты были незатейливыми — заставить квадратик двигаться хотябы прямо (после того как в гонках квадратик ехал, я уже забыл как я это сделал и решил переписать всё заново уже с новыми знаниями). Конечно, он начал двигаться спустя минут 10… потом решил добавить управление клавишами — вверх и вниз. И тут всё застопорилось. Этот канвас со своими матриксами и транслейтами, будь они неладны… расчетов было столько, что я уже не мог ориентироваться в коде. Хоть и вся «физика» основывалась на геометрии 5 класса, а точнее геометрии различных треугольников =) Тригонометрию в школе ненавидел, о чем впоследствии сильно пожалел. Расчеты треугольников были слишком масштабными и тяжелыми, но изучив основы тригонометрии я понял какой был дурак. Но даже с тригонометрией расчетыпряморукость оставляла желать лучшего. Вот так выглядит рабочий код первой версии игры на канвасе при нажатой клавише вниз:
Сам вот сейчас сижу пишу статью и доказываю своему коту что это не мой код. Я уж не говорю что в коде имеют место быть константы, подобранные методом научного тыка… Показывать остальной код считаю опасным для жизни читателей. Все проблемы были из за того, что каждый раз приходилось делать канвасу translate, из за чего уловить РЕАЛЬНЫЕ координаты (те, которые видит пользователь) самолёта было ооочень трудно для меня, а реальные координаты нужны, как минимум для просчёта попадания по самолёту (в коде например координаты для канваса это player[pid].x, player[pid].y, а реальные координаты уже real[‘red’].x и real[‘red’].y) — не спрашивайте о выборе имён переменных, сейчас открываю код, а там. (чистый копипаст своего кода, комментарии такие и были чесслово, я даже вспомнил тот момент, потому что реально не понимал как работает requestAnimationFrame)
Кстати говоря, уже тогда вся игровая логика была перенесена на сервер. В частности, покупка игровых предметов, патроны и жизни во время боя. Всё считал сервер. Расчеты минимальные, и тесты показали что домашний celeron 2.4 ГГц вполне держит 10к РАЗНЫХ сообщений в секунду, что тогда еще было далеко от реальности и меня устраивало. Так что начало защиты от кулхацкеров было положено в это время.
Говнодизайн
Всё время разработки считал, что дизайн это просто. С этой идиотской мыслю я попрощался только после 3 версии релиза. Об этом позже… В общем, чтобы было понятно, выкладываю первый вариант «дизайна» «игры»: 
Как видно, контрастные цвета, круглые уголки, отсутствие рамок немного напоминают деревню. «Как умею так и брею» — так что технари отнеситесь с пониманием, а дизайнерам интерфейсов надеюсь эта картинка музу не спугнула.
Сессия, диплом, лето… лирическое отступление
Когда пришло лето со своими бонусами вроде сессии, а точнее гос. экзаменов, защитой неначатого диплома, проблем с армией — про игру пришлось ненадолго забыть, и в течении 2 месяцев (июнь, июль) был мозговой перерыв. И вдруг меня осенило, что как то я мало зарабатываю, и стал искать новую работу. Как то не особо получалось найти что-то приемлемое… как я открыл консоль на главной странице яндекса и увидел там «Любишь заглядывать в консоль? А может и js умеешь писать? company.yandex.ru/job/vacancies/interface_dev_mail.xml». Ради интереса ответил на тестовые вопросы и благополучно забыл. Через примерно неделю пришло письмо из яндекса «а не хотите ли пройти собеседование по скайпу?» Конечно хочу! Губа то не дура =) Короче говоря, собеседование я с треском завалил. А именно, я не знал элементарно что такое this и как им пользоваться, конструктор, new etc… Решил что хорошо бы себя поднатаскать и снова стал курить мануалы по JS. И осознал, как круто что есть this, new, call, apply… научился этими штучками пользоваться так сказать… и совершил нечто. Сел переписывать игру.
Первый запуск
И снова немножко о говнодизайне
Тем летом мне посчастливилось купить жене айфон а себе забрать HTC на WP 7.5. Мне почему то жутко понравился плиточный интерфейс. Он простой и понятный. Реально простой и понятный. И захотелось мне начать «переписывать» игру с дизайна. Для себя решил, что это должно быть просто и понятно… короче плагиат с плиточками. Короче говоря, то что у меня получилось куда-то делось, так что вам посчастливилось сейчас не закрывать рукой лицо в ужасе даже не смейте думать об этом. Но поверьте на слово, это выглядело гораздо лучше, чем предыдущая версия.
Кодим, кодим, снова кодим
Взбредило же мне делать эти плитки, решил выпендриться (перед кем?) и сделать каждую плиточку на отдельном канвасе. Сделал конечно… но, простите, плохое слово, обозначающее в русском языке запятую, одни плиточки заняли у меня почему то половину всего клиентского кода.
После переписывания всего всего, пришло время припиливать VK api. Вот тут я бы зачеркнул весь текст далее но… постараюсь выразить кратко и прилично: функционала много — документации мало. В документации коды ошибок даны не все, половины параметров не описано, результат возвращается в виде ничего тогда для меня не значащего непонятного массива объектов объектов. К игре припиливал всё эти запросы к API по 1 в день, ибо опять же методом научного тыка. Дело привычки конечно. Тут больше нечего сказать. Ребят, пишите документацию как для своей бабушки. Новички теряются).
Собственно, первый запуск
Приближалась запланированная дата выпуска игры, и возникали мелкие проблемы которые необходимо было решать. Во время разработки я пользовался исключительно своим домашним сервером, но было и так понятно, что арендовать всё таки придётся. Денег у меня не было, так что идеальным на тот момент для меня решением было арендовать облачный сервер. Selectel подошел идеально.
ХХХ августа настал день первого провала игры. Приложение было одобрено спустя неделю после подачи заявки, но это даже хорошо. За это неделю я успел слить почти 10 тыс на таргет рекламу ВК — самая бесполезная моя трата денег. 10к улетели за пару часов. Но эти пара часов оказались отличным опытом. С первыми же игроками по каждой фигне начал ныть и падать NodeJS, про try. catch я еще не знал, и пока игра не попала в каталог нужно было что-то решать. Успел закрыть много дыр, но далеко не все, из-за чего этот «релиз» провалился не успев начаться. Приходилось вручную перезапускать nodejs, в круглосуточном режиме сидеть в консоли чтобы не дай бог нода лежала больше минуты. О такой вещи как bash я тоже не знал, а точнее не хотел знать.
Немножко статистики
В первые дни игру установило 6-7 тыс. человек, что не могло меня не радовать (конечно, сравнивать то несчем). Так, к слову, интересный (а может и нет) момент произошел вот тут 
(обведено в кружок)
Там видно какая дата, так что о возрасте игроков не трудно догадаться. Будьте осторожны в выборе дат релиза.
Всё, после этого я совсем отчаялся, установки шли на спад, онлайн был максимум полтора «пилота». Это включая меня.
Единственный плюс, который заставил меня продолжать работу — это нехилые предложения о покупке игры. В первый день было много предложений об обмене, и цены до 80тыс.р. Во второй день мне предлагали до 7 тыс. $, теперь жалею что не согласился.
Работа над ошибками
Пораскинув мозгами о том, что кладут в шампунь для волос не так, решил что дело в свистелках, перделках и отсутствии социального спама на стенах (законного разумеется, от имени приложения). И как вы думаете что я сделал? Не угадали. Я снова стал переписывать игру. Начал снова с дизайна.
Ошибка 1. Я думал что из меня выйдет неплохой дизайнер.
Решил упростить ещё сильнее, сделал огромные кнопки с некрасивыми надписями — это чудо я тоже не хочу показывать из религиозных соображений.
Ошибка 2. Мало свистелок (оружия, обвеса, как хотите)
Тут была проделана огромная работа (над ошибками, конечно). Кроме того, что я добавил 12 новых видов оружия/бонусов, я сделал для каждого из них «спецэффект» при попадании — кстати смотрелось ничего. На этом этапе переписывание себя оправдало. Появилась некая модульность, благодаря которой я сейчас могу добавлять хоть по новому оружию в минуту, были бы идеи. Тут же была сделана суперзащита от кулхацкинга.
Если раньше было так: клиент стреляет, клиент проверяет есть ли вообще оружие такое, всё он же (клиент) проверяет — не попала ли ракета в соперника, и если попала, то только тогда отправляем сообщение на сервер и он передает сообщение оппоненту о том что в него попали.
То стало вот так: клиент нажимает клавишу, на сервер передаётся код клавиши, сервер смотрит — на какое оружие назначена у игрока эта клавиша, проверяет перезаряжено ли оружие, есть ли оно вообще, можно ли им пользоваться на этом самолёте (самолётов тоже добавил, у каждого свои преимущества, в том числе какое оружие можно использовать), и ещё куча мелких условий. В случае, если не было ни одного false, данные о выстреле отправлялись обоим игрокам. Если false все таки нашелся, то у стрелявшего вежливо (красными большими буквами) показывалось сообщение вроде «ПЕРЕЗАРЯДКА. ». Собственно, если интересно то вот так:
Немного пояснения к коду. players — массив всех игроков и с идентификацией по socket.id. Каждый элемент массива — это объект игрока, который создается сразу при входе в игру, методом присваивания того, что вернула MySQL. На самом деле, между каждым else if стояла отправка ошибки юзеру, но я этот код не нашёл. weapons — это массив параметров оружий и бонусов.
Просчет попадания я сделал по хитрому: просчитывает оппонент. Как бы это описать дальше… после успешного выстрела 1 игрока, 2 игрок отрисовывает у себя ракету и смотрит, не попала ли она в него (в себя). Если попала, то отправляет мэссадж на сервер с содержанием «что попало и в каком месте на экране». Сервер высчитывает урон, и отправляет обоим игрокам. При этом рисуется сказочный спецэффект и ракета исчезает. Заодно на сервере проверяется сколько там чего осталось, жизней и т.д. — и если жизней вдруг у игрока 2 стало меньше 0, то записываем всё в БД, отправляем игрокам инфу о том кто выиграл а кто проиграл и все счастливы.
Если интересно, то вот клиентский код рассчета попадания:
weapons_1 — ничто иное как массив всех выпущенных оппонентом ракет. Как видно, чтобы не грузить память, когда ракета покидает пределы канваса, она удаляется из массива.
Второй кусочек — небольшая оптимизация. Я не знаю, на сколько это полезно, но вот чтобы не считать каждый кадр гипотенузу (в треугольнике ракета — самолёт), сначала идет небольшой расчет абсолютного положения на экране. И если ракета по приблизительным меркам слишком далеко, то и гипотенузу считать незачем.
avatars[0] и avatars[1] — это объекты игроков. После прочтения этой статьи, почему-то решил назвать это аватарами, так и повелось.
«Событие» попадания на клиенте выгладит так:
Тут case ‘pop’ — ничто иное как перевод слова «попал», так что те кто не может похвастаться знанием языка может меня поймут. particles — массив частиц (спецэффектов). Тут и прокомментировать нечего. Событие выстрела происходит по аналогии, только вместо частиц используются массивы weapons_0 (мои ракеты) и weapons_1 (его ракеты), с напихиванием в них новеньких объектов.
Ошибка 3. Множество багов.
Если не считать мелких падений сервера из за резкого отсутствия каких-либо переменных, то основной проблемой для меня стал пинг. Так случилось, что на работе с патч-корда слетел коннектор, а в запасе как то не оказалось, и пришлось сидеть по wifi. На работе он гниленький, так что задержки были обеспечены качественные (150-200мс вместо 18-20 привычных). Тестируя очередное оружие, заметил что через некоторое время в двух окнах браузера картина расположения самолётов совсем не одинаковая. А как оказалось, виной тому wifi, а точнее пинг а то и вовсе потери пакетов. Как решил — читаем дальше если не устали.
Что происходит в игре вообще. Механика.
Да нечего тут сказать. Нажимаешь кнопку — самолёт летит вверх/вниз. Только вот лететь в нужном направлении у играющего он начинает сразу, а у соперника не сразу, ибо долго ожидание злосчастного мэссаджа о том, что оппонент уже давно нажал кнопочку вверх и летит себе… Собственно это и есть проблема с пингом. Чем больше пинг — тем быстрее картина становится разной у двух клиентов. Решил проблему гениально — каждый N промежуток времени (1.5 — 3сек) делается синхронизация о реальном положении дел. Появились конечно незначительные скачки самолётов во время этой синхронизации (в радиусе 2-3px), но это не так заметно, как то, что вот стреляешь ты в соперника, видишь как ракета пролетает его насквозь, а не попал — потому что на самом деле игрок уже может быть вообще в другом углу и палить оттуда в тебя. И так туда-сюда.
Вся система была построена в духе клиент-(сервер-проверка)-клиент(ы).
Второй запуск
Когда я позакрывал дыры, понаставил try. catch-ей, научился проверять на баше запущенность сервера (скрипт ниже), припилил VK API на уровне получения фотки соперника, и выдачи ТОП-30 игроков (тоже с фотками между прочим, и даже с именами), стал опять тратить деньги на рекламу. На этот раз более осмысленно, прямо в каталоге приложений. За умеренные 100 голосов (700р) я получал порядка 200-300 установок, ну и примерно половина из установленных сразу удалялись, так что «150 чистыми».
Скрипт проверки, запущена ли нода
Кстати, тут ещё стоит отметить что нашел для себя потрясающую утилиту screen, а то без неё выход из терминала означал смерть. Сейчас без неё как без рук.
Опять переделки
- Опять недостаточно социальности
- Недостаточно привлекательности (
говнодизайн берёт своё) - Отсутствие сюжета
- Сложные расчеты на клиенте (8-10мс на просчет и отрисовку одного кадра это дофига для такой «игры» на i7, прошу заметить)
- Большая нагрузка на сервере (30 чел онлайна — 10% одного ядра, про память не помню, и трафик 5мбит)
- Нет обучения, из за чего игрокам вообще не ясно что и как
Делаем стимул играть
Из новых добавленных возможностей, основным достижением я считаю получение медалей и бонусов за какие-то заслуги. Сыграть 100 раз, добить пулемётом и т.д. естественно с предложением разместить красивую картинку медальки у себя на стене. Двух зайцев одним ударом. Социальная перделка была выполнена. Кстати, вот код для загрузки фотографии на сервер Вконтакте:
Выложил этот код по той причине, что нихрена готового в сети найти не мог, и это некий слепок из всего того что удалось найти. С curl пришлось работать первый раз, по этому не обошлось и без проблем с его установкой, но это не так интересно.
Расскажу про алгоритм постинга записи на стене пользователя с картинкой. Точнее и быстрее будет привести код с подробнейшими комментариями.
Такие вот спагетти получаются. Кушайте на здоровье!
Оптимизация клиента
Итак, я всё-таки решился поплотнее почитать про синусы-косинусы и впервую очередь избавиться от отдельных расчетов для отрисовки и реальных координат. Тут рассказывать особо нечего, но код стал явно получше.
Тут вроде всё понятно кроме имён переменных, расскажу про проверки на NaN. Одним из игроков был обнаружен (и позже проверен мной) неприятный баг — самоёт резко оказывается в левом верхнем углу и всё, можно выходить из игры. Всё из-за того, что при просчете некоторые переменные с небольшой долей вероятности становились === 0, а потом на них приходилось делить, и получалась такая лажа. После вкропления в код проверки на NaN баг изчез и все довольны.
if(this.opacity >= 0.5) <. >код именно отрисовки на канвасе выполняется только в случае, если самолёт не находится в режиме невидимости (да, есть и такой бонус)
Еще момент — функция принимает параметр t. Он по сути нужен для слабых компьютеров/планшетов. Тоесть в этом параметре содержится инфа о том, сколько по времени рисуется кадр, и если это больше 40мс (всё работает на скорости 25 кадров в секунду), то все передвижения самолёта необходимо пропорционально увеличить. Эти изменения сократили время отрисовки примерно на 2-3мс, что уже не плохо.
Следующим шагом стала оптимизация дыма от самолёта, т.к. больше всего памяти и процессора кушал именно он. О том как реализован дым, я писал в этой статье. Для оптимизации я сделал другую картинку — меньше в размере и которую не надо вращать (серый круглый градиент), и один раз отрисовал его на невидимом канвасе (буфер), а потом копировал с него. Ничего сложного. А, ну и ещё сделал чтобы частицы добавлялись только когда мощей устройства хватает для его отрисовки (t<10). Это дало ещё минус 3-4мс расчетов.
Потом нашлась самая большая дырка — в отрисовке показателя перезарядки и количества для каждого оружия. В бою это выглядит так: 
Стрелками показаны штуки, отрисовка которых была наиболее сложной (arc). Я решил, что т.к. большинство оружия бОльшую часть времени находится в полной перезарядке (или с отсутствием патронов (нижняя полосочка)), то можно просто нарисовать эти состояния на отдельной канве, и при необходимости просто рисовать готовое (не рисовать вообще). Самое интересное — что оптимизация этих 32 полукругов дала наибольший эффект — аш 5-6мс. И теперь миссия выполнена. При максимально возможном дыме у обоих игроков (чем меньше жизней тем больше дыма), кадр стал рисоваться 1-2мс, а без дыма вообще меньше 1мс (0.2-0.3 если брать среднее). Все цифры для Chrome 32.
Оптимизация сервера
Проверять каждую выпущенную ракету на сервере оказалось слишком затратно, а уж тем более отсылать ответ клиенту (socket.io не совершенен, как оказалось). По этому эту ответственность я перенес на клиента, но чтобы всё-таки уберечься от читеров, на сервере существует просто выборочная проверка сомнительных пользователей (такую штуку соорудил умную — у каждого пользователя на сервере накапливается определенное количество ошибок, после чего за ним устанавливается более тщательный контроль, вплоть до того что я лично проверяю логи игрока — ну это совсем если подозрительный попался). И ответ от сервера в случае, например, отсутствия оружия не идёт — а что, я еще и читера должен уведомлять о том что у него не получится? В общем то это сняло колоссальную часть нагрузки и на ноду и на базу. Итог составил 5% CPU на 150чел. онлайна. Памяти кушает вообще копейки.
Какие-то неясные потери клиентов
Когда давал рекламу в каталоге приложений контактика, статистика установкой не соответствовала действительности, т.е. множество пользователей просто даже не дожидались загрузки игры (меньше 2 секунд в среднем — это вам не флэш). Стал искать проблему и оказалась она в использовании некоторыми игроками (20%) https. И тут понеслись танцы с бубнами. В конечном итоге socket.io и nginx удалось настроить. Вот кусок кода nodejs сервера, создающего https сервер socket.io
Прокомментировать нечего, однако на это я потратил не один день, и это не считая заказывания и установки сертификатов на сервер.
Третий запуск
А точнее — недозапуск. Вконтакте есть возможность разместить своё приложение в топ 9 блока «Новые» за 1000 голосов (7тыс.р. не считая скидки). Закинул голосов, отправил заявку, выбрал день (прямо на тогдашнее завтра), и ждал. Ночью пришло уведомление, что мне вынуждены отказать в размещении, с предложением добавить в игру возможность игры с компьютером или обучение. Решил делать и то и другое.
Искусственный интеллект
О возможности игры с компьютером я уже думал, но как то не хотел лезть в эту кашу, т.к. думал что это как всегда на долго у меня затянется. Но так как выше я уже говорил, что код игры получился модульным, за первый день я сделал возможность убивать болванку компьютера, за второй день сделал компьютеру мозги и припилил ему 30 уровней. В общей сложности на серверной части добавил 3 строчки (не считая конфига уровней), и на клиенте строчек 30-40. И оказалось вполне не плохо, сам вот не могу убить ИИ 25 уровня.
Код ИИ заключается в немногом: самолёт противника просто постоянно следует за твоим самолётом, и в случае, когда угол атаки становится приемлемым — стреляет из всего оружия. Тут опять тригонометрия 7 класса и не более того. Код:
Кроме идеи отсюда нечего почерпнуть, код использовать не советую.
Блок if(avatars[1].time2 <= 0 && avatars[0].levelBot == 0 && avatars[1].time3 <= 0) <. >— это обучение. Оно происходит только при игре с ИИ 0 уровня. Там суть в том что сообщения выводятся по буковке (модно, типа печатается) из массива сообщений.
Так же у ИИ есть немного мозгов на тему того, чтоб не разбиться. На высоте ниже определенной, он начинает игнорировать вас, и пытается вырулить чтобы не умереть. Ну… и аптечки он тоже использует грамотно, а не как попало.
Собственно, миссия выполнена, ИИ готов, обучение есть, дело за малым — дождаться одобрения администрации на повторное заявление о размещении в том самом блоке. Почему-то во второй раз ближайшую дату размещения я смог выбрать 23 марта, так что жду, жду. И если это выведет на какой-то постоянный онлайн и прибыль, то обязательно напишу статью про вывод денег, налоги и прочее. Пока игра принесла 20 голосов, так что говорить даже не о чем.
Выводы
- Нельзя делать как я
- Тестируйте больше. Просите друзей, желательно из возрастной категории игроков, который Вы ожидаете увидеть в игре. Можно просто показать картинку и спросить, что как удобно нет
- Если Вы не собираетесь добавить овер 100500 новых фич в игре — не переписывайте весь код! А вообще, лучше начинать с чего-то более простого
- Всё что написано выше — это лишь малая часть всего того ужаса, с которым я столкнулся. Так что будьте готовы к трудностям!
- Начали — доделывайте до конца. НО! Только в случае, если вы уверены в успехе и преследуете конкретную цель а не развлекаетесь… а иначе зачем?
- Не пытайтесь мыть яйца дорогим шампунем. Мылом будет самое оно. (Метафора, которую можно понять по разному, но смысл не исчезнет)
p.s. Ни в коем случае не рекомендую использовать написанный тут код. Уверен, что есть на много более элегантные решения, о которых буду рад услышать в комментариях. Спасибо за внимание!
Update С чистой совестью, ввиду большого кол-ва просьб показать ссылку, пишу её тут: ссылочка
Создание браузерной игры. Как заработать миллион?
К браузерным играм не привыкли относиться всерьез, но на самом деле – это неплохой бизнес для небольшой команды друзей, у которых нет денег, но есть светлые мысли. А если еще и деньги есть, то тогда все значительно упрощается.
На самом деле создать браузерную онлайн игру может любой, у кого есть желание учиться, но не думайте, что вас ждет легкая прогулка. Даже если вы мастер на все руки (программист и дизайнер в одном флаконе), то придется потратить уйму времени. Если же вы не владеете ни кодом, ни карандашом, то затраты будут финансовыми.
Как создать браузерную игру ничего не изучая?
Ответ – никак. Для начала нужно будет выучить HTML – язык разметки, который работает в связке с каскадной таблицей стилей – CSS. Эти языки располагают текст и изображения на странице, собирая картинку из множества фрагментов. Поскольку вы намерены сделать именно браузерную игру, то ей обязательно понадобится сайт, желательно красивый и функциональный. Поэтому не обойтись без JavaScript – самого простого способа визуализировать вашу игру на стороне геймера. Этот язык позволяет менять местами элементы страницы без ее перезагрузки. По сути, JavaScript управляет элементами CSS и HTML в реальном времени.
Для создания браузерной игры придется выучить HTML, CSS, PHP и JavaScript, так что бессонные ночи вам гарантированы
Язык программирования PHP нужен для создания движка игры. Он используется на сервере для обработки данных, поступающих от разных геймеров. Это – ядро, которое приводит в действие все внутренние механизмы.
Я не хочу ничего учить, но у меня есть деньги
Поздравляем, вы избежали многих проблем. И тут же получили новые. Чтобы сделать браузерную игру хорошего качества (в плохую никто играть не будет) нужно иметь хорошую команду разработчиков, а хорошие спецы стоят денег. Если брать по минимуму, то вам необходимы:
- Программист – 2 штуки
- Дизайнер и художник – 2 штуки
- Гейм-дизайнер – 1 штука
- Комьюнити-менеджер – 1 штука
- Гейм-мастер – 1 штука.
Если у вас нет личных знакомств, то придется обращаться к аутсорсингу. Обычно такие ребята трутся на биржах фрилансеров, самой популярной их которых является www.fl.ru/.
Всех необходимых работников можно найти на биржах фрилансеров
Правда, в этом случае нужно быть очень осторожным, поскольку фрилансеры привыкли регулярно срывать сроки. Как говорят опытные руководители, можно бесконечно смотреть на 3 вещи: как течет память, как горит дедлайн и как не работает фрилансер.
Во сколько обойдется разработка?
Во столько, сколько у вас есть денег. Вот здесь приведены примерные выкладки и структура расходов на создание среднестатистической браузерки. Итоговая сумма – 25 миллионов рублей. Однако не стоит пугаться этой цифры. В статье автор посчитал расходы на разработку по максимуму, так что при желании эту сумму модно уменьшить в разы и даже десятки раз. Или увеличить, если ваш папа – прокурор. Безусловно, такие проекты, как Drakensang Online или City of Steam требуют сумм как минимум с шестью нулями, но простую табличную браузерку можно сделать за пару десятков тысяч рублей.
В конце концов, вы всегда можете обратиться к краудфандингу. Пути Кикстартера неисповедимы, взлететь там может любой проект. Главное правильно подать блюдо.
Этапы разработки
Создание браузерной игры с нуля можно разделить на несколько этапов:
1. Поиск идеи
Поскольку у вас вряд ли есть 25 миллионов рублей и вы вряд ли являетесь гением в программировании и дизайне, единственное, чем вы можете зацепить пользователя, это необычный сеттинг. Даже пресловутая кампания из эльфов, орков, людей и гномов способна увлечь клиента, если погрузить их в необычную среду или заставить делать странные вещи. Например, игра Ботва Онлайн была написана «по приколу» четырьмя людьми в свободное от работы время, но благодаря своему необычному сеттингу быстро стала успешным бизнес проектом.
2. Разработка сюжета
Сюжет очень важен (если конечно, вы не делаете стратегию). Если у самого воображения не хватает, наймите кого-нибудь, у кого оно есть. В крайнем случае, обратитесь к аутсорсингу и найдите толкового копирайтера, у которого уже есть опыт создания квестов.
3. Создание игры
Даже если вы выучили вдоль и поперек JavaScript и CSS, вы все еще ничего не знаете о том, как создать браузерную игру. Это примерно то же самое, как если бы вы выучили теорию плавания, ни разу не побывав в бассейне. Лучший выход в этом случае – воспользоваться самоучителем. Вот здесь можно многое узнать о разработке игр, причем не только браузерных.
Скорее всего, ваша первая браузерка будет выглядеть так. Это – легендарный Бойцовский Клуб
4. Продвижение проекта
Последний этап, на котором дело в свои руки берут комьюнити-менеджер и специалист по маркетингу (если таковой имеется). В крупных компаниях на долю рекламы уходит примерно 60% бюджета, поэтому на эту статью денег лучше не жалеть. Если же ваши финансы поют романсы, то тогда не остается ничего другого, как самому перепахивать игровые форумы и завлекать геймеров всеми возможными способами.
Как создать браузерную игру с помощью конструктора
Оказывается, ушлые программисты уже давно создали кучу конструкторов MMO, которые могут помочь новичку создать браузерную онлайн игру бесплатно. Это не значит, что вы можете успокоиться и удалить все закладки по программированию, но с помощью конструктора можно здорово ускорить процесс.
Популярный игровой конструктор Construct 2
Большой популярностью пользуется MMO Constructor – отечественный продукт, в котором можно создать все элементы полноценной браузерной RPG. Взамен авторы требуют совсем ничего – 50% от прибыли проекта. Разобраться в конструкторе непросто, но добрые люди уже написали гайды. Также чтобы создать браузерную игру, можно воспользоваться такими программами, как Construct Classic, Eclipse, FPS Creator.
Больше информации о конструкторах можно узнать на форуме Gcup, где тусуются все: и продвинутые геймдевы, и зеленые новички.
Так что там насчет миллиона?
Любая, даже мобильная игра должна приносить прибыль. Иначе нет никакого смысла тратить свое и чужое время. Дабы сделать свой проект финансово успешным, нужно слушать, что говорят опытные разработчики и делать то же самое:
- Не жадничайте! Более 80% игроков вообще не платят, либо платят копейки. Однако они создают массовку, на которую подтягивается крупная рыба. Сконцентрируйтесь на ней. Остальным дайте возможность резвиться бесплатно.
- Постарайтесь сделать так, чтобы донаторы не сильно выделялись из общей массы, иначе масса уйдет, оставив вас без донаторов и без денег. В общем, бряцайте мускулами аккуратно.
- Лучше всего тратят деньги те, кто не хочет тратить свое время, поэтому монетизируйте наиболее рутинные операции. Не разменивайтесь по мелочам.
- Уроки истории создания игр показывают, то онлайн-проект должен быть бесконечным. Если у геймера появится чувство, что ему нечего делать — он уйдет, а туда, где нет онлайна, новый геймер не придет никогда.
Напоследок хочется сказать – не так страшен черт, как его малюют. Даже лучшие геймдевы когда-то начинали с нуля, и кто знает, может быть именно вы станете следующим Джоном Кармаком или Ричардом Гэрриотом?
11 доступных движков для тех, кто хочет начать создавать свои игры
Инструменты и ресурсы для разработки игр становятся все более доступными для всех, даже если у вас нет опыта программирования. Часто эти инструменты также доступны бесплатно. Вот список из 11 игровых движков / редакторов. Он облегчит задачу тем, кто хочет начать создавать игры.
Фото: instabug.com
Некоторые из них предназначены для определенного жанра игры и могут быть невероятно легкими для новичков. Другие являются профессиональными инструментами разработки AAA-игр, но они по сути бесплатны для любителей и по-прежнему предлагают множество средств обучения, которые помогут тем, у кого есть некоторый опыт программирования.
Конечно, в разработку игр входит множество вещей: музыка, анимация, работа со звуком и текстом, текстурирование, моделирование и т. д. Однако выбранный вами движок / редактор игры окажет наибольшее влияние на то, какого рода проект получится в итоге.
CRYENGINE
Коммерческий кроссплатформенный 3D-движок, разработанный Crytek. Он использовался для таких игр, как Prey (2017) и Everybody’s Gone to the Rapture.
Фото: store.steampowered.com
Предназначен для разработки: 3D-игр.
Платформы: Windows.
Языки программирования: Lua.
Стоимость: Бесплатный, пока ваш проект не заработает более 5000 долларов в год, впоследствии взимается 5-процентный сбор.
Обучение: CryEngine имеет несколько бесплатных обучающих видео, которые охватывают все: от установки программы и пошаговой инструкции по созданию простой игры, похожей на Flappy Bird, до более сложных вещей, таких как сборка настраиваемой версии движка.
GAMEMAKER
Кроссплатформенный коммерческий движок для 2D-игр, разработанный YoYo Games. Он использовался для таких игр, как Undertale, Hyper Light Drifter и Minit.
Фото: kanobu.ru
Для разработки: 2D-игр.
Платформы: Windows или macOS.
Языки программирования: Использует собственный язык сценариев, называемый GameMaker Language (GML), и язык визуальных сценариев, называемый Drag and Drop (DnD).
Стоимость: Бесплатная пробная версия на 30 дней, потом нужно купить лицензию за $39 в год.
Обучение: Несколько бесплатных тестовых и видеоуроков, которые охватывают основы. Есть объемные уроки про то, как создавать конкретные жанры игр, такие как пошаговые RPG, Tower Defense и фермы. Есть также ссылки на некоторые внешние сайты и сообщества, в которых есть руководства, помогающие людям начать работу с этой программой.
GDEVELOP
2D-движок с открытым исходным кодом, разработанный для удобства использования.
Фото: gdevelop-app.com
Для разработки: 2D-игр.
Платформы: Windows, macOS, Linux или браузерная версия.
Языки программирования: Нет, использует интерфейс Drag-and-drop.
Стоимость: Бесплатно.
Обучение: В вики GDevelop доступно множество руководств и учебных пособий, а также более 80 тестовых файлов о том, как создавать игры определенных жанров и вводить особые игровые функции.
GODOT
Игровой движок с открытым исходным кодом для создания 2D-и 3D-игр. Отличается простотой в освоении и подходит для совместной работы целой команды.
Фото: github.com
Для разработки: 2D- и 3D-игр.
Платформы: Windows, macOS и Linux.
Языки программирования: GDScript, C# и визуальный скриптинг.
Стоимость: Бесплатно.
Обучение: У Godot есть обширное пошаговое руководство по использованию их редактора, а также бесплатные текстовые руководства, охватывающие более конкретные аспекты, такие как реализация виртуальной реальности, использование скелетов для 2D-анимации и создание процедурной геометрии.
LUMBERYARD
Коммерческий кроссплатформенный движок для 3D-игр, разработанный Amazon. Он основан на более старой версии CryEngine. Он был использован для таких игр, как Star Citizen и The Grand Tour Game.
Фото: robertsspaceindustries.com
Для разработки: 3D-игр с интеграцией Twitch и многопользовательских функций.
Платформы: Windows.
Языки программирования: Lua.
Стоимость: Бесплатно.
Обучение: Существует бесплатная серия обучающих видеороликов и видео-бесед о более специфических особенностях движка.
REN’PY
Игровой движок для создания визуальных новелл с открытым исходным кодом. Он использовался для таких игр, как Doki Doki Literature Club, Butterfly Soup и One Night, Hot Springs.
Фото: doki-doki-literature-club.fandom.com
Для разработки: Визуальных новелл.
Платформы: Windows, macOS и Linux.
Языки программирования: Язык скриптов Ren’Py и Python.
Стоимость: Бесплатно.
Обучение: Существует бесплатный текстовый гайд, как сделать простую игру в Ren’Py, и дополнительные текстовые руководства для более специфической настройки вашего проекта.
RPG MAKER
Коммерческий игровой движок, разработанный Degica. Он разработан специально для создания классических игр в стиле JRPG без необходимости уметь программировать. Он был использован для таких игр, как Corpse Party и Rakuen.
Фото: medium.com
Для разработки: Ролевых 2D-игр.
Платформы: Windows и macOS.
Языки программирования: JavaScript.
Стоимость: $79.99.
Обучение: Есть несколько бесплатных обучающих программ для старых версий движка, которые, вероятно, все еще возможно применить на практике. Однако для самой последней версии MV, кажется, лучшие ресурсы уже создаются сообществом.
TWINE
Редактор с открытым исходным кодом для интерактивных текстовых историй. Он был использован для таких игр, как Lionkiller и The Uncle Who Works For Nintendo.
Для разработки: Интерактивных текстовых квестов.
Платформы: Windows, macOS или браузерная версия.
Языки программирования: Собственный язык, но также поддерживает HTML, Javascript, и CSS.
Стоимость: Бесплатно.
Обучение: Существует руководство, которое охватывает основы их языка и предлагает несколько примеров более сложных сценариев.
UNITY
Кроссплатформенный коммерческий игровой движок, разработанный Unity Technologies. Он использовался для таких игр, как Untitled Goose Game, Ori and Will of the Wisps и Hollow Knight.
Фото: epicgames.com
Для разработки: 2D- и 3D-игр.
Платформы: Windows, macOS и Linux.
Языки программирования: C#.
Стоимость: Бесплатно для личного пользования предоставляется студентам и любителям, а также небольшим компаниям, которые зарабатывают менее 100 000 долларов в год. Помимо этого, существуют годовые планы, начинающиеся с 399 долларов в год или 40 долларов в месяц.
Обучение: Unity предоставляет некоторые бесплатные ресурсы, чтобы помочь новичкам начать работу с движком. Но в рамках программы Unity Learn Premium она предоставляет гораздо больше возможностей, включая курсы, учебные пособия и даже сертификаты. Unity Learn Premium в настоящее время бесплатна до 10 июня 2020 года, но обычно стоит 15 долларов в месяц.
UNREAL
Кроссплатформенный коммерческий игровой движок, разработанный Epic Games. Он использовался для таких игр, как Fortnite, ремейка Final Fantasy VII и Octopath Traveller.
Фото: playground.ru
Для разработки: 3D-игр.
Платформы: Windows.
Языки программирования: C++ и Blueprints Visual Scripting.
Стоимость: Бесплатно, но с 5-процентным сбором от общего дохода игры, если она принесет более 3000 долларов в квартал.
Обучение: Epic Games предлагает ряд бесплатных онлайн-видео курсов, которые охватывают вводные аспекты использования редактора движка и некоторые более сложные темы, такие как эффекты постобработки и создание ресурсов.
VN MAKER
Коммерческий игровой движок, разработанный Degica. Он разработан специально для создания визуальных романов без необходимости уметь программировать.
Фото: gamingtrend.com
Для разработки: Визуальных новелл.
Платформы: Windows, macOS и Linux.
Языки программирования: JavaScript и CoffeeScript.
Стоимость: $69.99.
Обучение: Существует бесплатное обширное руководство, которое охватывает широкий круг тем, включая основы редактора, как структурировать историю, которую вы пишете, как настроить проект без программирования, а также отдельное руководство только для сценариев и документации.