Пользователь
0,0
рейтинг
30 января 2015 в 12:52

Разработка → От желания создать игру до запуска — один шаг из песочницы tutorial

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

Идея


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

Вывод

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

Первая рабочая версия


Так как последние несколько лет я работаю с html и js, то момент, когда выбирается платформа для разработки, был подсознательно пропущен. Сильный зуд в верхних конечностях и возбуждение от того, что идея игры родилась в голове быстро и безболезненно, настолько повлияли на последовательность и обдуманность действий, что через несколько секунд я уже писал код в файле squares.html.

Вкратце опишу содержание этого файла через четыре часа, когда я созерцал содеянное:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>Квадраты</title>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
	<div id="wrapper"></div>
	<script type="text/javascript">
	var go={
		fld:{},//двумерный массив с игровым полем
		x:10,//количество столбцов клеток игрового поля
		y:10,//количество строк клеток игрового поля
		cnt:5,//количество вариантов цветов клеток
		wid:50,//ширина и высота клетки в пикселях
		tmrc:0,//количество миллисекунд, прошедших с начала игры
		cclick:true,//переключатель для возможности клика (равен false во время анимации)
		callch:false,//переключатель для вызова функции проверки наличия минимум трех одноцветных клеток в ряд
		cdisap:false,//переключатель для возможности исчезновения клеток
		cshft:false,//переключатель для возможности "падения" клеток вниз
		cago:false,//переключатель для вызова функции анимации конца игры
		pts:0,//количество набранных очков
		fill:function(){...},//функция заполнения массива go.fld разноцветными клетками, где каждая клетка имеет вид {c:1, f:false, d:false}, где c - это номер цвета клетки, f - наличие крестика в клетке, d - переключатель для исчезновения клетки
		pic:function(){...},//функция создания структуры DOM игрового поля
		rfpic:function(){...},//функция обновления структуры DOM игрового поля
		check:function(x,y){...},//функция проверки клетки игрового поля go.fld[y][x]. Возвращает false, если клетка go.fld[y][x] не находится в ряду из трех одноцветных клеток, true - в обратном случае, при этом у найденных одноцветных клеток переключатель go.fld[y][x].d меняется на true
		ashft:function(){...},//функция анимации "падения" клеток вниз
		adisap:function(){...},//функция исчезновения клеток
		ago:function(){...},//функция анимации конца игры
		allcheck:function(){...},//функция проверки игрового поля на наличие рядов одноцветных клеток
		isgo:function(){...},//функция проверки закончилась ли игра
		tmrf:function(){...},//функция выполняется по таймеру каждые 50 миллисекунд и в зависимости от состояния переключателей запускает необходимые функции
		start:function(){...}//функция запуска новой игры
	};
	go.start();
	<script>
</body>
</html>

Вывод

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



Первые доработки и добавление приложения в каталог ВКонтакте


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

Из-за отсутствия кнопки «Превратить html-файл с игрой в популярное приложение» на этом этапе пришлось подумать, погуглить и почитать. Вариантов, к которым я пришел, было несколько:

1. Делать сайт с игрой.
2. Размещать игру в социальных сетях.
3. Делать мобильное приложение.

Прочитав ряд статей и обдумав свежую информацию, я выбрал второй пункт, а в частности — ВКонтакте, так как только об этой социальной сети я имел хоть какое представление.

Сказано — сделано. Залил игру на виртуальный хостинг, зашел в раздел VK Developers на сайте Вконтакте, нашел ссылку для создания IFrame-приложения, заполнил информацию и лицезрел свою игру, подгружаемой в iframe. Пока приложение не пройдет проверку, оно не появится в каталоге приложений и видно только создателю.

Тут ко мне пришло осознание того, что приложение выглядит малопривлекательно не только с визуальной точки зрения, но и с функциональной. Последовал мозговой штурм, по результатам которого была добавлена возможность выбора размера уровня (3х3, 5х5, 7х7, 9х9, 10х10) и немного переработан интерфейс.



Вывод

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

Превращение игры для себя в некое подобие социальной игры


Далее я наткнулся на статью «Запуск приложения во Вконтакте» (змейка), из которой узнал, что для одобрения приложения нужно реализовать функционал рейтинга пользователей.

И снова Яндекс, VK API, рисунки структуры базы данных… Продумав структуру БД и протестировав работу с VK API, я сел писать серверную часть и js-функционал взаимодействия с сервером. Функционал состоял в следующем: после загрузки index.html js обращается к серверу, получает рейтинги и выводит их на странице; при нажатии на кнопку с размером игрового поля начинается новая игра, а на сервере создается запись о начале игры этим пользователем; когда игра заканчивается, на сервер отправляются результаты (время и очки). За несколько часов я справился с этой подзадачей и радостно отправил игру на проверку, заплатив залог 10 голосов (внутренняя валюта ВКонтакте).

Первый час после отправки я каждые пять минут проверял не одобрили ли приложение, потом успокоился и стал ждать. Примерно через сутки пришел ответ «Заявка на проверку отклонена. Необходимо подключить сертификат безопасности.». Так как тема подключения SSL рассмотрена во многих статьях, упомяну лишь то, что воспользовался бесплатным сертификатом от startssl.com. После следующей проверки, приложение было одобрено и добавлено в каталог.

Вывод

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

Внешний вид


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



К сожалению, это никак не сказалось на количестве уникальных посетителей и конверсии переходов с рекламных объявлений (об этом ниже).

Дополнительный функционал


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

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

Вывод

За прошедшее время с момента реализации этого функционала я заработал один голос (примерно 3 рубля при выводе денег из системы) накануне написания статьи.

Реклама и посетители


В статье про змейку автор говорит о стартовом трафике за счет того, что приложение попадает в раздел «Новые». В момент добавления моего приложения (июль 2014 г.) эта функция стоила 1000 голосов (7000 рублей), поэтому я решил методом проб и ошибок рекламировать игру через таргетированную рекламу ВКонтакте. UPDATE: мне подсказывают, что сейчас размещение в блоке «Новые» снова бесплатно. Но для моего приложения эта функция уже недоступна, т.к. по новым правилам «на место в блоке могут претендовать качественные приложения, прошедшие модерацию менее 6 месяцев назад.»
При создании рекламы ВКонтакте есть много параметров задания целевой аудитории, но при этом также важно проверить, какой формат рекламы наиболее подходит. На выбор предоставляется четыре формата: «Изображение и текст», «Большое изображение», «Квадратное изображение» и «Специальный». Из-за отсутствия опыта первые 500 рублей я спустил практически без какого-либо результата, но потом понял, что нужно проверить разные целевые аудитории и, глядя на результаты, подбирать свою.
UPDATE: Стоит упомянуть о системе рекламы ВК:
Я пользовался только разделом Таргетинг, но упомяну, что на странице "Реклама ВКонтакте" можно выбрать пункт Реклама в сообществах. Интерфейс прост и понятен:
1. В разделе Бюджет можно пополнить баланс, с которого списываются деньги при запуске объявлений.
2. Экспорт статистики позволяет выбрать один из форматов данных: html, xls, csv.
3. Есть настройки оповещений (смс среди ночи это норма) и прав доступа пользователей к рекламным кампаниям.
4. Ретаргетингом не пользовался, но слышал хвалебные отзывы от нескольких друзей, занимающихся рекламой. Имея телефоны, адреса электронной почты или id ВК своих клиентов/пользователей, можно создавать группы пользователей, которым будут показываться отдельные объявления, построенные на том, что им уже был интересен определенный продукт.
5. И, наконец, внутри раздела «Рекламные кампании», для каждого созданного пункта добавляются объявления. При этом, каждое из них проходит премодерацию (ожидание доходило до 20 часов). С ограничением по количеству создаваемых объявления я не столкнулся, но при каждом запуске объявления происходит проверка наличия ста рублей на балансе на каждое объявление.
Расскажу про нюансы, которые для меня были открытием, как для новичка в этой отрасли. При создании объявления помимо естественных полей «Заголовок», «Описание» и «Изображение» есть целый ворох свойств для настройки целевой аудитории (укажу разделы: География, Демография, Интересы, Образование и работа, помимо которых можно выбрать тип мобильного устройства, операционную систему, браузер и принадлежность к категории «Использовал голоса ВКонтакте»), а также Настройки цены. У объявления задается способ оплаты (за переходы или показы) и стоимость перехода/1000 показов, при этом рядом показывается рекомендуемая стоимость перехода/1000 показов.

Выводы

1. Без какой-либо рекламы (таргетированная реклама, посты в сообществах, обзоры) посетителей я не получил. Но при этом, судя по моим субъективным ощущениям, с увеличением количества установок приложения повышается число уникальных пользователей за счет повышения позиции в списке Популярных приложений.
2. При использовании формата Специальный я получил максимальное количество переходов по своим объявлениям (300 переходов, из них 190 установок, на 83 500 показов за 150 рублей).
3. На рекламу моего приложения больше всего реагирует целевая аудитория Женщины до 18 лет.
4. Если выбирать способ оплаты «За показы», можно сэкономить.
5. Ни в коем случае не надо запускать объявление по рекомендуемой стоимости. Следует подбирать значение самостоятельно (иногда я начинал с стоимости в 20 раз меньшей, чем рекомендуемая), т.к. оно влияет на частоту показов, и можно обнулить свой баланс за считанные секунды с гораздо меньшей эффективностью.
6. Обязательно стоит указывать Лимит у каждого объявления, либо не пополнять баланс на крупные суммы.

Безопасность отправки данных


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

  • адовое запутывание кода;
  • добавление уникальных для каждого запроса токенов;
  • обфускация.

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

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

Вывод

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

Статистика




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

Итоги


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

Подводя черту под своим сумбурно составленным рассказом, хочу составить следующий план, который был нужен мне в тот день, когда я решил сделать игру:
  • выбрать платформу;
  • взять бумагу и карандаш и нарисовать свое виденье интерфейса игры (стартовый экран, экран выбора уровня, экран игры...);
  • записать правила игры и перечитать их несколько раз;
  • составить структурную схему взаимодействия между структурными частями игры (например, клиента с сервером), с указанием в какие моменты происходит каждое из них;
  • написать код рабочего прототипа игры так, чтобы потом этот код легко было использовать с учетом взаимодействий, выписанных в предыдущем пункте;
  • поиграть самому и дать поиграть друзьям с позитивным мышлением для получения первой обратной связи с точки зрения игровой механики (игра должна приносить удовольствие);
  • подумать над монетизацией для грамотного встраивания ее в игру;
  • сделать наброски основных этапов разработки, а затем максимально подробно расписать по пунктам что и в каком порядке делать;
  • если нужно, то начать искать людей, которые могут помочь сделать что-то лучше, чем можете вы сами;
  • периодически повторно выполнять пункты этого списка для улучшения детальности проработки проекта;
  • приступить к выполнению данного плана.
@mospans
карма
31,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • 0
    Ничего себе сумбурный рассказ. Подумайте о карьере преподавателя. Я вроде не интересуюсь темой, а кофе остыл пока читал. При этом всё по делу, в нужной последовательности и не выглядит тупым потоком сознания.

    Кстати, я не уверен, что именно рейтинг был решающим при одобрении. Они смотрят скорее на «социализацию». Социализация может быть какая-нибудь ещё. Но рейтинг — да, самое то для приведённого примера.

    Как там модно было говорить 10 лет назад? Афтар, пеши ищо!
    • +2
      Спасибо.
      О решающей роли рейтинга при одобрении приложения не могу судить, т.к. делал его до подачи заявки, основываясь на материале статьи «Запуск приложения во Вконтакте». Могу только повториться про обязательный ssl. Без него точно не одобряют.
  • +1
    Хорошая статья, было бы интересным почитать более подробно о использовании vk api и о процессе разработке вашей новой игры.
    • +1
      Кстати забавно. API Вконтакте с одной стороны понятный, а с другой — запутанный. Вот например, и документация, и старый FAQ самого Вконтакта, и статьи на Хабре — все говорят, что нельзя использовать VK API с сервера нативными приложениями (IFrame/Flash). Только JS API и методы secure.* с сервера. Только что обнаружил, что при первом запросе в IFrame передаётся access_token (задокументирован), который прекрасно позволяет дёргать с сервера запросы к API. Да, я проверил, что это методы, требующие авторизации — например можно посмотреть список друзей, установивших приложение.

      Ещё например есть такая штука — у вас почему-то отвалилась своя запись сессий (сервер упал, перенос был). А пользователь не покидал приложения и начал кнопки тыкать. На сервер приходят неавторизованные запросы. Тоже тема.

      Ещё приложениям приходит некий sid в параметрах. Не знаю что с ним делать. А, ещё secure — тоже не нашёл в доке.
      • 0
        Да, я тоже сталкивался с тем, что иногда vk api срабатывает для ненадлежащих запросов (как в вашем примере про не secure-методы с сервера). Например, несколько лет назад на своем сайте через js api можно было узнать id залогиненного пользователя без авторизации, но потом это прикрыли (сейчас недобросовестные люди делают это при помощи прозрачного виджета авторизации, но не об этом). В общем, vk api бывает неоднозначным, но он совершенствуется.
        • +1
          Похоже не тот случай. Я специально пробовал без права приложению — не прокатывает. Похоже это access_token на сессию именно для запросов с сервера.
    • 0
      Моего опыта работы с vk api вряд ли хватит на полноценную статью, т.к. использую всего шесть методов. Но я сейчас думаю написать еще одну статью про создание игры с другой точки зрения, подробно описав техническую составляющую и, в том числе, vk api.
      По поводу статьи о разработке новой игры: пока рано писать, потому что сейчас есть только рабочий прототип. До релиза еще долгий путь.
  • +1
    Спасибо за статью.
    Сам буквально недавно прошел этот путь, только это была довольно большая игра, ушло на нее более полу года работы двух человек, далеко не фултайм, но старались работать регулярно.
    Я давно пробовал создать игру, никогда не получалась довести до конца, потому читал много статей «как закончить игру», наконец закончили, но к запуску, как оказалось был полностью не готов. Сейчас приложение ВК насчитывает около тысячи пользователей, приложение в ФБ всего пару сотен, а на рекламу ушло около 100$. К сожалению, ВК почему-то не пустили меня в раздел новые, мотивировав это недостаточным качеством приложения… Возможно. Но в разделе новые я точно видел игры хуже, на мой субъективный взгляд.
    Еще раз спасибо за статью.
  • +1
    целевая аудитория Женщины до 18 лет

    Интересно, я вот не уделял внимания «целевой аудитории», а задуматься стоит. Ведь если держать её (аудиторию) в голове, можно многие решения принять, эм, неожиданным для себя образом. В вашей игре, например, это может сильно повлиять на графику — форма кнопочек явно должна быть не футуристичная, к примеру. А сам контент, тут просятся какие-то котята/щенки/помада/одежда в коробках. Они (женщины до 18) ведь любят животных, косметику, и открывать коробки после шопинга ;)? Вряд ли я заказал бы подобный контент будучи в трезвом уме, но зная о «целевой аудитории» — выбор уменьшается и становится более осмысленным.
    С названием то же самое. «Рандомные квадраты», конечно, зачёт (или оно не настоящее?). А представляя себе игрока из ЦА, кажется, подойдёт что-то вроде «распаковки покупок».

    Спасибо, что заставили задуматься!
  • 0
    Очень интересно, спасибо :)
    Пару пунктов испытал на себе: рисовать карту экранов на листочке карандашом — быстрый и наглядный результат.
    Редко встречаешь людей, которые на 1-й игре зарабатывают миллионы.
    Я считаю, что главный доход с первых проектов — ОПЫТ.

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