Как сделать игру для друзей
Давайте предположим, что вы спрашиваете с позиции геймдизайна. Тогда я бы посоветовала вам начать с проработки идеи.
ШАГ НОМЕР 1: РАБОТА С ИДЕЯМИ
У всех у нас есть игры, которые нас вдохновляют, которые мы любим. Мы знаем, как сделать их еще лучше, или хотим сделать похожее, но свое. Многие геймдизайнеры-теоретики мечтают выпустить свою ММОРПГ с открытым миром, или стратегию уровня Civilization, или мощный шутер от первого лица с нелинейным сюжетом.
Такие амбиции заслуживают уважения, но они, к сожалению, никогда не будут удовлетворены. Задумайтесь, почему ни одна российская игровая компания с многомиллионным капиталом не выпускает блокбастеры ААА класса? Потому что работа эта сопряжена с огромными денежными затратами и огромными рисками, потому что если проект после разработки “не выстрелит”, то гигантские средства, потраченные на разработку, не вернутся. Все деньги игровой индустрии сосредоточены на западе, и конкурировать с выпускаемыми там проектами очень сложно. Поэтому, если вы замахиваетесь на масштабный проект, то он должен по уровню графики, эффектов, наворочанности игровых механик быть конкурентоспособным хотя бы в среде бета-самцов жанра, что совершенно невозможно, если у вас нет опыта, средств и огромной команды. Как правило, начиная разработку такого проекта, геймдизайнер ненамеренно устраивает сам себе ад на земле. Команда вся идет вразнобой, разработка проекта затягивается, постоянно возникают какие-то проблемы, для решения которых геймдизайнеру необходимо иметь 34 часа в сутках и как минимум шесть рук. Особые наркоманы начинают вливать такие мертворожденные проекты свои собственные деньги. В итоге вся эта канитель продолжается год или два, и геймдизайнер, измученный и истощенный с криком “это надо только мне одному, а больше никто работать не хочет”, бросает проект, испытывая отвращение к геймдизайну, к людям в целом и к себе в частности. Такой ошеломляющий провал как правило убивает в человеке желание попытаться снова чуть более чем полностью.
Вам нужно выбрать такой проект, который вы сможете реализовать небольшим коллективом и при этом впоследствии опубликовать его в сторах. В этой статье я не буду рассматривать площадки и способы продвижения проекта на них, скажу только, что самым простым вариантом для вашей первой игры является мобильный проект с последующей публикацией в первую очередь на Google Play, а затем в AppStore.
Что сказать о самой игре? Поверьте мне, даже если вы соберетесь создать примитивный тетрис, то вы столкнетесь с таким количеством сложностей и проблем, что вы удивитесь, как вообще кто-то умудряется выпускать в этом мире игры. Возьмите на вооружение концепт с небольшим количеством графики и простыми игровыми механиками.
ШАГ НОМЕР 2: ПЕРВИЧНАЯ ДОКУМЕНТАЦИЯ
Содержание концепт-документа должно быть следующим:
1. Среда разработки
Мобильная платформа, или ПК, а может быть консоль или соцсети. Это, собственно, определит очень многое. Некоторые компании или издатели работают только с конкретными платформами. Выбор платформы также поможет определить среду разработки и выбрать игровой движок, что в свою очередь создаст определенные требования к программистам на проекте. Выбор платформы также определяет рекламную кампанию, и направление для маркетинговых работ.
2. Жанр, целевая аудитория
Выбор целевой аудитории также даст представление о том, как в дальнейшем продвигать проект, о том, какую нишу он займет на рынке игр, и даже о некоторых игровых механиках вашей игры.
Если вы не знаете, что написать в этот пункт, значит вы недостаточно хорошо продумали свою концепцию и открыв вашу игру, игроки не найдут в ней ничего нового и интересного и просто закроют ее.
5. Сюжет, история мира.
Здесь нужно дать общее представление о сюжете и о том как механики, описанные выше обоснованы сюжетно. Можно также указать ключевых персонажей вашей истории с кратким описанием их характеров. Можно упомянуть основные конфликты, интересные сюжетных ходы, чтобы дать наиболее полное представление об игровом мире.
6. Контент
Это ваш примерный фронт работ. Конечно, на стадии идеи вам будет трудно продумать все детали, но это и не нужно, достаточно просто примерно посчитать то, что вам нужно будет сделать. Это поможет вам понять, какого размера команда вам потребуется для разработки, и возможно протрезветь на тему того, потянете ли вы вообще масштаб, который задумали. Посчитать количество персонажей, квестов, диалогов, бэкграудов, объектов и прочего и записать списком в документ.
7. Стиль графики с референсами.
Если вы сами не рисуете, найдите в сети референсы на то, как вы хотите, чтобы выглядела ваша игра, скриншоты их других игр, работы художников, палитры цветов. Добавьте эти картинки с небольшим текстовым описанием: что самое важное на той, или иной картинке.
ШАГ НОМЕР 3: ПОИСК КОМАНДЫ
Если вам удалось сформулировать ценную и интересную идею, то теперь ее необходимо разделить с другими людьми. Попробуйте поискать разработчкиков в инди-пространствах, на форумах, или в тематических группах. Это не очень простой шаг.
Постарайтесь остановить свой выбор на таком концепте, для разработки которого потребуется не более 4 человек. При более многочисленной команде начнется искажение и искривление планов и вы не сможете ее контролировать, потому что работать вы все будете, скорее всего, удаленно. Заранее составьте план разработки и четкую презентационную документацию по проекту, чтобы доказать свою компетентность и серьезность своих намерений. Не принимайте людей в команду «за ради Христа», выставляйте четкие требования к возможным кандидатам, чтобы сразу дать им понять всю меру ответственности, которую вы от них ждете. Ищите команду в группах по геймдизайну, программированию и концепт-арту, на форумах типа gamedev.ru. Не переживайте, если поиск займет много времени. В данном случае важнее всего качество, а не количество.
Отдельно о работе с художниками можно почитать тут:
https://vk.com/@mistle_gamer-kak-rabotat-s-hudozhnikami
Как работать с программистами можно почитать тут:
ШАГ 4: РАЗРАБОТКА
Для того, чтобы суметь построить свой рабочий процесс над проектом, нужно ознакомиться с уже существующими методологиями работы. Существуют целые системы циклов производств, которые помогут вам системно подойти к разработке.
О методологиях работы над проектом можно почитать вот тут:
О системе дизайн-документации и принципах ее написания можно почитать вот тут:
Разработка собственного проекта это, как правило, адский труд, требующий огромной мотивации, целеустремленности, умения структурировать и систематизировать работу на насколько месяцев вперед, уверенности в своей идее и хорошего ее понимания. Правильно оцените свои силы и будьте уверены в себе, и тогда все ваши старания непременно окупятся.
Как создать игру без навыков программирования
Мечтаете создать свою игру, но мысли о том, что придётся учить языки программирования пугают вас? Вы гуманитарий? А может, у вас просто не хватает времени на изучение C# или Java? В любом случае, речь в этом посте пойдёт об игровых конструкторах. Для тех, кто не в курсе, это программы, в которых можно делать игры без написания кода. Конструкторы подходят для создания прототипов и участия в коротких Game Jams, которые сейчас популярны.
Первое знакомство
Однажды мне довелось побывать на мастер-классе по прототипированию у одного известного левел-дизайнера, работавшего в одной из крупнейших IT-компаний в России. На мастер-классе каждому участнику предложили создать свою игру за 1 час, а в конце часа показать игру остальным. То есть я первый раз запускаю программу и через час должен создать игру? Обладая некоторым опытом работы в программах, где необходимо писать код, я не поверил, что такое возможно. К моему удивлению, все (я в том числе) успели сделать свою первую маленькую игру. Пусть и простую, но в нее можно было играть. Так во мне зародилась любовь к конструктору под названием Clickteam Fusion 2.5 (раньше назывался Multimedia Fusion). Ещё популярными конструкторами являются Game Maker Studio и Construct 2. В основном, я работаю в Clickteam Fusion 2.5 (далее CF 2.5). На её примере раскрою принцип работы таких программ и их возможности.
Как это работает
Сразу отмечу, что конструкторы предназначены для работы в 2D. Уверен, в ближайшее время появятся и полноценные 3D-аналоги. Если вы настроены попробовать себя в 3D, то без знания программирования, вы сможете создать только карты для популярных игр, которые имеют редакторы-карт. Это уже другая тема, а сейчас я расскажу, как же работать в конструкторе.
При создании новой игры необходимо определить, для какой платформы хотите творить. Конструкторы дают возможность создавать игры для PC, IOS, Android, Html 5, Flash и т.д. Например, чтобы создать игру не только для PC, но и для IOS в программе CF 2.5, придётся докупить или скачать export module ios. Модуль конвертирует игру в код платформы – Xcode. Затем, через несколько нажатий, вы уже сможете тестировать игру на устройствах Apple (также нужен аккаунт разработчика Apple).
Ваша игра будет состоять из кадров (сцен). В каждом кадре можно создавать объекты, которые помогут вам решить любую задачу. Например, если это главное меню и вы хотите создать кнопку «Start», вам необходимо создать объект «active».
Окно «Редактор кадра».
Нажимаем правую кнопку мыши и выбираем «Insert object».
Выбираем объект «active».
Затем, нужно вставить в объект изображение кнопки или нарисовать во встроенном редакторе. В этом окне также можно создать покадровую анимацию. Один объект может иметь несколько анимаций (герой стоит, герой бежит, герой летит).
Окно «Графический редактор».
Осталось придумать событие, которое будет происходить с этим объектом.
Для этого, переходим с вкладки «редактор кадра» на вкладку «редактор событий».
Выбираем из списка необходимые события (условия), при которых, произойдут установленные вами действия над выбранным объектом, группой объектов, кадром.
Если игрок нажимает левой кнопкой мыши на объект «Start», то — 
— происходит переход на следующий кадр.
Вот так просто, без программирования, можно создавать различные события, из которых будет состоять ваша игра.
Ещё несколько примеров:
— Если объект «шар» коснулся объекта «шип», то на экране появляется надпись «вы проиграли», а объект «шар» меняет анимацию на «шар лопнул».
— Если прошло более 5 секунд с начала запуска кадра, то в правом верхнем углу появляется объект «аптечка».
— Если объект «птичка» коснулся объекта «червяк», то «червяк» исчезает, в объект «счётчик очков» прибавляется единица и один раз проигрывается звук «жалобный крик червя».
Не изучая программирование, вы сможете создавать самые разные механики, используя фантазию и большое количество вспомогательных объектов. Перечислю некоторые из них:
Active object – самый популярный объект, его используют для создания объектов взаимодействия (главный герой, враги, платформы, ящики и т.д.). Он может содержать много разных анимаций (герой стоит, герой бежит, герой стреляет), иметь встроенные стандартные механики движения и управления.
Counter object – создает всевозможные счётчики жизней, денег, очков и т. д. Может быть представлен как в виде цифр, так и в виде шкалы.
INI object – сохраняет данные после выхода игрока из игры. Можно использовать для сохранения месторасположения любых объектов в кадре.
Physic engine object – появление этого объекта в кадре создаёт гравитацию, параметры которой можно регулировать.
Joystick control object– для touch-устройств создаёт эмулятор джойстика.
IOS store object – даёт возможность сделать внутриигровые покупки для AppStore.
Admob object – позволяет поместить баннерную рекламу в игру.
Touch object – учитывает все касания к экрану touch-устройства. Например, можно создать такое событие:
если игрок одновременно коснулся экрана тремя пальцами, то игра останавливается на паузу.
Если что-то не получается
У CF 2.5 есть отличная техподдержка, которая в течение 24 часов всегда отвечала мне. Ещё у них неплохой форум, на котором выложено много готовых кусков игр и рассказывается, как работать с новыми объектами. Не знаю, как дела с технической поддержкой у других конструкторов, но думаю, не хуже. Game Maker более популярен, чем CF 2.5 и, как мне кажется, тоже должен иметь хорошую поддержку. Один мой знакомый работает на Construct 2, он никогда не слышал, чтобы возникали трудности. А на youtube.com выложено много роликов, где разжёвывают создания популярных механик для большинства конструкторов.
Список популярных игр созданных на конструкторах
Создание браузерной игрульки в соц сети от и до
Вступление. (Это можно пропустить)
Путь до идеи полученной игры был очень долог. Всё началось с того, что я познал JQuery. Да. Это было золотое время. С помощью тупых анимаций я делал всякую хренотень вроде движения смайлика по полю в место клика мыши. Когда этот уровень достиг совершенства, мне захотелось добавить в эту «игру» онлайновости. И тут понеслась…
Первое что мне пришло в голову, это отправка каждые N секунд запроса на сервер, не сделал ли что-то второй игрок. Всё было сделано на PHP+MySQL. Данные о месте и времени клика сохранялись в базе и выдавались игрокам по запросу. Исходников чуда к сожалению не осталось, ну и ладно.
Ох уж это 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 я тоже не знал, а точнее не хотел знать.
Немножко статистики
Работа над ошибками
Пораскинув мозгами о том, что кладут в шампунь для волос не так, решил что дело в свистелках, перделках и отсутствии социального спама на стенах (законного разумеется, от имени приложения). И как вы думаете что я сделал? Не угадали. Я снова стал переписывать игру. Начал снова с дизайна.
Ошибка 1. Я думал что из меня выйдет неплохой дизайнер.
Решил упростить ещё сильнее, сделал огромные кнопки с некрасивыми надписями — это чудо я тоже не хочу показывать из религиозных соображений.
Немного пояснения к коду. players — массив всех игроков и с идентификацией по socket.id. Каждый элемент массива — это объект игрока, который создается сразу при входе в игру, методом присваивания того, что вернула MySQL. На самом деле, между каждым else if стояла отправка ошибки юзеру, но я этот код не нашёл. weapons — это массив параметров оружий и бонусов.
Просчет попадания я сделал по хитрому: просчитывает оппонент. Как бы это описать дальше… после успешного выстрела 1 игрока, 2 игрок отрисовывает у себя ракету и смотрит, не попала ли она в него (в себя). Если попала, то отправляет мэссадж на сервер с содержанием «что попало и в каком месте на экране». Сервер высчитывает урон, и отправляет обоим игрокам. При этом рисуется сказочный спецэффект и ракета исчезает. Заодно на сервере проверяется сколько там чего осталось, жизней и т.д. — и если жизней вдруг у игрока 2 стало меньше 0, то записываем всё в БД, отправляем игрокам инфу о том кто выиграл а кто проиграл и все счастливы.
Если интересно, то вот клиентский код рассчета попадания:
weapons_1 — ничто иное как массив всех выпущенных оппонентом ракет. Как видно, чтобы не грузить память, когда ракета покидает пределы канваса, она удаляется из массива.
Второй кусочек — небольшая оптимизация. Я не знаю, на сколько это полезно, но вот чтобы не считать каждый кадр гипотенузу (в треугольнике ракета — самолёт), сначала идет небольшой расчет абсолютного положения на экране. И если ракета по приблизительным меркам слишком далеко, то и гипотенузу считать незачем.
avatars[0] и avatars[1] — это объекты игроков. После прочтения этой статьи, почему-то решил назвать это аватарами, так и повелось.
«Событие» попадания на клиенте выгладит так:
Тут case ‘pop’ — ничто иное как перевод слова «попал», так что те кто не может похвастаться знанием языка может меня поймут. particles — массив частиц (спецэффектов). Тут и прокомментировать нечего. Событие выстрела происходит по аналогии, только вместо частиц используются массивы weapons_0 (мои ракеты) и weapons_1 (его ракеты), с напихиванием в них новеньких объектов.
Что происходит в игре вообще. Механика.
Да нечего тут сказать. Нажимаешь кнопку — самолёт летит вверх/вниз. Только вот лететь в нужном направлении у играющего он начинает сразу, а у соперника не сразу, ибо долго ожидание злосчастного мэссаджа о том, что оппонент уже давно нажал кнопочку вверх и летит себе… Собственно это и есть проблема с пингом. Чем больше пинг — тем быстрее картина становится разной у двух клиентов. Решил проблему гениально — каждый N промежуток времени (1.5 — 3сек) делается синхронизация о реальном положении дел. Появились конечно незначительные скачки самолётов во время этой синхронизации (в радиусе 2-3px), но это не так заметно, как то, что вот стреляешь ты в соперника, видишь как ракета пролетает его насквозь, а не попал — потому что на самом деле игрок уже может быть вообще в другом углу и палить оттуда в тебя. И так туда-сюда.
Вся система была построена в духе клиент-(сервер-проверка)-клиент(ы).
Второй запуск
Когда я позакрывал дыры, понаставил try. catch-ей, научился проверять на баше запущенность сервера (скрипт ниже), припилил VK API на уровне получения фотки соперника, и выдачи ТОП-30 игроков (тоже с фотками между прочим, и даже с именами), стал опять тратить деньги на рекламу. На этот раз более осмысленно, прямо в каталоге приложений. За умеренные 100 голосов (700р) я получал порядка 200-300 установок, ну и примерно половина из установленных сразу удалялись, так что «150 чистыми».
Скрипт проверки, запущена ли нода
Опять переделки
Делаем стимул играть
Из новых добавленных возможностей, основным достижением я считаю получение медалей и бонусов за какие-то заслуги. Сыграть 100 раз, добить пулемётом и т.д. естественно с предложением разместить красивую картинку медальки у себя на стене. Двух зайцев одним ударом. Социальная перделка была выполнена. Кстати, вот код для загрузки фотографии на сервер Вконтакте:
Выложил этот код по той причине, что нихрена готового в сети найти не мог, и это некий слепок из всего того что удалось найти. С curl пришлось работать первый раз, по этому не обошлось и без проблем с его установкой, но это не так интересно.
Расскажу про алгоритм постинга записи на стене пользователя с картинкой. Точнее и быстрее будет привести код с подробнейшими комментариями.
Такие вот спагетти получаются. Кушайте на здоровье!
Оптимизация клиента
Итак, я всё-таки решился поплотнее почитать про синусы-косинусы и впервую очередь избавиться от отдельных расчетов для отрисовки и реальных координат. Тут рассказывать особо нечего, но код стал явно получше.
Тут вроде всё понятно кроме имён переменных, расскажу про проверки на NaN. Одним из игроков был обнаружен (и позже проверен мной) неприятный баг — самоёт резко оказывается в левом верхнем углу и всё, можно выходить из игры. Всё из-за того, что при просчете некоторые переменные с небольшой долей вероятности становились === 0, а потом на них приходилось делить, и получалась такая лажа. После вкропления в код проверки на NaN баг изчез и все довольны.
if(this.opacity >= 0.5) <. >код именно отрисовки на канвасе выполняется только в случае, если самолёт не находится в режиме невидимости (да, есть и такой бонус)
Еще момент — функция принимает параметр t. Он по сути нужен для слабых компьютеров/планшетов. Тоесть в этом параметре содержится инфа о том, сколько по времени рисуется кадр, и если это больше 40мс (всё работает на скорости 25 кадров в секунду), то все передвижения самолёта необходимо пропорционально увеличить. Эти изменения сократили время отрисовки примерно на 2-3мс, что уже не плохо.