Однажды я принял решение взять себя в руки, побороть лень и сделать свою игру. В этой публикации я расскажу о пути от идеи до реализации, который страшил меня много лет (и, наверняка, страшит многих), но оказался увлекательным, обучающим и сильно меняющим отношение к созданию игр.
Идея
На стене над рабочим столом жены висела открытка с девятью разноцветными квадратами (три на три), одного взгляда на которую хватило для зарождения в голове общей идеи игры. Суть такова: квадратное игровое поле состоит из клеток разных цветов, на которые можно нажимать для случайного изменения цвета клетки; один раз сменив цвет, клетка метится крестиком; три и более клетки одного цвета по горизонтали или вертикали исчезают, принося по одному очку за каждую клетку и за каждый крестик, клетки сверху над исчезнувшими «падают» вниз, а недостающие сверху создаются со случайными цветами. Игра заканчивается, когда все клетки на поле помечены крестиками и по ним нельзя щелкать.
Вывод
Прежде чем писать код, нужно тщательно и спокойно обдумать игровую механику, ее понятность, удобство и интерес. В моем случае этого сделано не было, так как идея захватила меня. В итоге игра получилась «на любителя».
Первая рабочая версия
Так как последние несколько лет я работаю с 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 рублей), поэтому я решил методом проб и ошибок рекламировать игру через таргетированную рекламу ВКонтакте. При создании рекламы ВКонтакте есть много параметров задания целевой аудитории, но при этом также важно проверить, какой формат рекламы наиболее подходит. На выбор предоставляется четыре формата: «Изображение и текст», «Большое изображение», «Квадратное изображение» и «Специальный». Из-за отсутствия опыта первые 500 рублей я спустил практически без какого-либо результата, но потом понял, что нужно проверить разные целевые аудитории и, глядя на результаты, подбирать свою.
Вывод
Без какой-либо рекламы (таргетированная реклама, посты в сообществах, обзоры) посетителей я не получил. Но при этом, судя по моим субъективным ощущениям, с увеличением количества установок приложения повышается число уникальных пользователей за счет повышения позиции в списке Популярных приложений.
При создании рекламных объявлений опытным путем я выяснил, что при использовании формата Специальный я получил максимальное количество переходов по своим объявлениям (300 переходов, из них 190 установок, на 83 500 показов за 150 рублей). Также я узнал, что на рекламу моего приложения больше всего реагирует целевая аудитория Женщины до 18 лет.
Безопасность отправки данных
Как только я реализовал функционал отправки количества очков по завершению игры, меня стала посещать навязчивая мысль о нехороших игроках, которые могут посмотреть js-код и запросы с результатами, отправляемыми на сервер и отправить любое количество очков на сервер, ведь игра происходит полностью на клиенте, а на сервер можно отправить все, что угодно, главное притвориться браузером с нужным HTTP_REFERER. Потратив две недели времени, несчетное число нервов, но приобретя несколько седых волос, я понял, что подход с игрой (а точнее с рандомом) на клиенте работает только в случае повторения нескольких итераций следующего цикла:
- адовое запутывание кода;
- добавление уникальных для каждого запроса токенов;
- обфускация.
При этом такой вариант по-прежнему не дает стопроцентную гарантию того, что ваш код будет устойчив к пониманию. Полную уверенность в достоверности результатов дает только полное выполнение игры на сервере. Не долго думая, я переписал нужным образом клиентский и серверный код.
Таким образом, при каждом клике происходит отправка данных на сервер, проверка, запись в базу, и отправка рандомных цветов новых клеток клиенту. Если после проверки данные считаются некорректными, то результат игры помечается специальной галочкой и не учитывается в дальнейшем. Спустя полгода существования игры при наличии 900 установок и 10 уникальных пользователей в сутки данная вакханалия никак не повлияла на производительность сервера, но, лучшего решения я не смог придумать.
Вывод
Необходимо уже на ранней стадии создания игры продумывать технические нюансы реализации, в частности учитывать возможности недобросовестных игроков.
Статистика
Это график уникальных посетителей по дням. Все пики, кроме последнего, соответствуют рекламным кампаниям, последний пик — необъяснимое повышение количества установок из раздела Популярное. Самый высокий пик соответствует рекламной кампании в формате Специальный.
Итоги
Несмотря на то, что разработка игры отняла у меня время (около трех недель, если считать, что каждый день я работал по восемь часов), деньги и нервы, в результате я получил весьма ощутимый багаж новых знаний и опыта, который используется мной сейчас при создании следующей игры. Поэтому, вспоминая свои нерешительные мысли о создании игры на протяжении нескольких последних лет, я хочу пожелать всем людям, вынашивающим такие же мысли, взять себя в руки и творить.
Подводя черту под своим сумбурно составленным рассказом, хочу составить следующий план, который был нужен мне в тот день, когда я решил сделать игру:
- выбрать платформу;
- взять бумагу и карандаш и нарисовать свое виденье интерфейса игры (стартовый экран, экран выбора уровня, экран игры...);
- записать правила игры и перечитать их несколько раз;
- составить структурную схему взаимодействия между структурными частями игры (например, клиента с сервером), с указанием в какие моменты происходит каждое из них;
- написать код рабочего прототипа игры так, чтобы потом этот код легко было использовать с учетом взаимодействий, выписанных в предыдущем пункте;
- поиграть самому и дать поиграть друзьям с позитивным для получения первой обратной связи с точки зрения игровой механики (игра должна приносить удовольствие);
- подумать над монетизацией для грамотного встраивания ее в игру;
- сделать наброски основных этапов разработки, а затем максимально подробно расписать по пунктам что и в каком порядке делать;
- если нужно, то начать искать людей, которые могут помочь сделать что-то лучше, чем можете вы сами;
- периодически повторно выполнять пункты этого списка для улучшения детальности проработки проекта;
- приступить к выполнению данного плана.
Автор: mospans
