Від бажання створити гру до запуску - один крок

Одного разу я прийняв рішення взяти себе в руки, побороти лінь і зробити свою гру. У цій публікації я розповім про шляхи від ідеї до реалізації, який лякав мене багато років (і, напевно, лякає багатьох), але виявився цікавим, повчальним і сильно змінюють ставлення до створенню ігор.

Ідея

На стіні над робочим столом дружини висіла листівка з дев'ятьма різнокольоровими квадратами (три на три), одного погляду на яку вистачило для зародження в голові загальної ідеї гри. Суть така: квадратне ігрове поле складається з клітин різних кольорів, на які можна натискати для випадкового зміни кольору клітини; один раз змінивши колір, клітина мітить хрестиком; три і більше клітини одного кольору по горизонталі або вертикалі зникають, приносячи по одному очку за кожну клітину і за кожен хрестик, клітини зверху над зниклими «падають вниз, а відсутні зверху створюються з випадковими квітами. Гра закінчується, коли всі клітини на полі позначені хрестиками і з ним не можна клацати.

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

Перша робоча версія

Так як останні кілька років я працюю з 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:{},//двовимірний масив з ігровим полем
х:10,//количество стовпців клітин ігрового поля
у:10,//количество рядків клітин ігрового поля
cnt:5,//кількість варіантів кольорів клітин
wі: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 унікальних користувачів на добу ця вакханалія ніяк не вплинула на продуктивність сервера, але, кращого рішення я не зміг придумати.

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

Статистика



Це графік унікальних відвідувачів щодня. Всі піки, крім останнього, відповідають рекламним кампаніям, останній пік — незрозуміле підвищення кількості установок з розділу Популярний. Найвищий пік відповідає рекламної кампанії в форматі Спеціальний.

Підсумки

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

Підводячи риску під своїм сумбурно складеним розповіддю, хочу скласти такий план, який був потрібен мені в той день, коли я вирішив зробити гру:
  • вибрати платформу;
  • взяти папір і олівець і намалювати своє бачення інтерфейсу гри (стартовий екран, екран вибору рівня, екран гри...);
  • записати правила гри і перечитати їх кілька разів;
  • скласти структурну схему взаємодії між структурними частинами гри (наприклад, клієнта з сервером), із зазначенням у які моменти відбувається кожне з них;
  • написати код робочого прототипу гри так, щоб потім цей код легко було використовувати з урахуванням взаємодій, виписаних у попередньому пункті;
  • пограти самому і дати пограти друзям з позитивним мисленням для отримання першої зворотного зв'язку з точки зору ігрової механіки (гра повинна приносити задоволення);
  • подумати над монетизацією для грамотного вбудовування її в гру;
  • зробити начерки основних етапів розробки, а потім максимально детально розписати по пунктах що і в якому порядку робити;
  • якщо потрібно, то почати шукати людей, які можуть допомогти зробити щось краще, ніж можете ви самі;
  • періодично повторно виконувати пункти цього списку для поліпшення детального опрацювання проекту;
  • приступити до виконання цього плану.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.