Як я писав гру на конкурс, або чудесне перетворення «Ліній» в «Морський бій»



Ця історія про те, як я робив чергову 3D веб-гру. Історія мук і сумнівів, історія недосипання і ліні. Історія про те, як все зробити в самий останній момент. Загалом, чого тягнути кота за роги – перейду до розповіді. Але спершу – ще дещо, щоб покінчити з усіма формальностями. «Мадам, вам каву в ліжко?» «Ні, краще в чашку». Кава був моїм щоденним порятунком з лап Морфея, особливо коли я хотів попрацювати над грою з ранку, перед усіма іншими денними турботами. Треба віддати йому належне. Я просто не можу не згадати про нього, так як для мене це стало воістину однією з складових успіху, під яким я розумію доведення гри до релізу. (Тут могла бути ваша реклама кави).

Конкурс
Насправді, я не вписався в той конкурс, для якого я б міг щось зробити. За його умовами було потрібно створити гру під Windows, скачувати і запускається з exe-файлу. Я ж люблю програмувати під браузери. Я не знаю C++ і C#, у мене навіть немає Visual Studio. Але тут раптово у мене з'явилася чудова ідея гри, і я подумав – а якого біса! Буду просто робити гру. А вийде дотримати всі умови конкурсу чи ні – не так важливо. Врешті-решт, просто запущу її у соціальних мережах.

Немає межі досконалості
Моя попередня гра запускалася з php-файл з сервера. На цей раз я вирішив піти далі. Мені захотілося, щоб все працювало не тільки в Інтернеті, але і з файлової системи локального веб-сервера зовсім. По-перше, автономної версії вимагали умови конкурсу, а, по-друге, щоб можна було хоча б самому пограти в дорозі, наприклад, де немає Інтернету. (Взагалі, все, що я роблю, я роблю для себе. І зараз граю в свою гру.) Але при необхідності – і з сервера теж, з людьми, а не з ІІ, тобто, такий варіант теж повинен бути присутнім. Загалом, завдання полягало в тому, щоб створити універсальну збірку з усіма скриптами, 3D моделями, текстурами і звуками для розповсюдження на сторінці в Інтернеті, так і у вигляді архіву, який можна було б завантажити, розпакувати і просто запустити гру index.html. Звичайно ж, останній варіант має сенс тільки для однокористувацької версії.

По суті, вищезгаданий локальний варіант являє собою збережену локально веб-сторінку з відносними шляхами. Заковика в тому, що там міститься не тільки текст з картинками, але ще й 3D движок, а також моделі з текстурами. Втім, з самим движком немає ніяких проблем. Це THREE.JS він написаний на JavaScript, важить 500 Кб і підключається просто тегом SCRIPT. Однак, движок не вміє завантажувати 3D моделі з локальної файлової системи, а хоче тягнути їх ajax-му з сервера. Довелося допилити завантажувач для цього, щоб моделі теж підключалися з файлів скриптів. Зверніть увагу на рядок.



Спочатку створені мною 3D моделі для веб-версії зберігалися у файлах виду model.json, однак, я виявив, що при підключенні їх тегом SCRIPT все працює в Firefox, але в Chrome видає помилку, пов'язану з політикою безпеки. Рішення виявилося простим: перейменовуємо json в js – і ніяких проблем. Ну, напевно, можна було б примусово поставити потрібний content-type, але хто знає, які там у майбутньому ще з'являться політики безпеки в браузерах. Раптом вони все одно не будуть дозволяти завантажувати скрипти з файлів, які називаються інакше, ніж *.js, з локальної файлової системи. А так, js – і жодних питань. Завантажуй скрипт і не випендрюйся. Завантаження 3D моделі:

var el=document.createElement("script");
el.type="text/javascript";
el.src=url+'.json.js'; el.async=true;
document.getElementsByTagName("head")[0].appendChild(el);

Також політики безпеки браузера текстури моделей, які чудово вели себе у версії з сервером, навідріз відмовилися підключатися зі своїх файлів png і jpg, розташованих локально, тому довелося їх конвертувати в base64 і оформити також у вигляді скриптів, з іменами файлів типу texture.png.js. Ну а ці скрипти підключати старим добрим тегом SCRIPT, динамічно створюваних. Це дуже просто!

var image = document.createElement( 'img' );
image.onload = function() {
var tex = new THREE.Texture( image );
tex.needsUpdate = true;
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.anisotropy = 5;
};
image.src="data:image/gif;base64,"+imagedata.replace(/^data:image\/png|jpg);base64,/, "");

Працює так: мій парсер моделі знаходить в її файлі посилання на зображення, ці посилання домагаються закінченнями .js, динамічно підключаються скрипти з картинками текстур, картинки перекладається з base64 і накладаються на модель. А для того, щоб уже напевно, залізно, визначити момент закінчення завантаження скрипта, я кожен такий скрипт доповнив в кінці викликом функції, що сигналізує основній програмі про те, що він завантажений і з містяться в ньому зображенням чи моделлю тепер можна працювати далі.

Засоби розробки
Отже, тепер, коли завантажувач моделей і текстур нормально запрацював з файловою системою, без якого-небудь сервера, я почав писати сам гру. Так, я програмують на чистому JavaScript. Багато на цьому місці покрутили пальцем біля скроні. Я не використовую ніяких бібліотек (крім 3D движка), навіть JQuery не використовую. ООП не використовую теж. Прототипи – в рідкісних випадках, тільки тоді, коли, на мій погляд, це дійсно необхідно. Люблю мінімалізм і нічого зайвого. І ніякого зайвого коду, в якому я не розумію, що робить кожна строчка!

Відкрию страшну таємницю. Я також не розбираюся в новомодних менеджерах для складання проектів, не користуюся гитхабом і жодного разу не відкривав ніяке Visual Studio. Доктор, що зі мною? Із засобів програмування я використовую тільки блокнот просунутий. Я, напевно, псих.

Однак, мені здається, що це дуже просто – підключити на сторінку скриптовую 3D бібліотеку, що працює з WebGL і створити сцену. Хто-небудь ще сьогодні підключає скрипти тегом SCRIPT і створює HTML розмітку вручну? Хто-небудь сьогодні взагалі натискає на кнопки пальцями і дивиться в монітор очима? Цими ось пальцями – за цим кнопкам? Цими ось очима – в цей монітор? Дикість якась! Гаразд, жартую. Але сьогодні доторкнутися до HTML або, не дай бог, до чистого JavaScript – це доторкнутися до змії. Краще навернути поверх кілька шарів. І після конвертувати код десятьма етапами в JavaScript, дивуючись, чому в підсумку ні чорта не працює. Я нікого не засуджую, просто, мені здається, що в веб-розробці спостерігається деякий не зовсім здоровий перекіс в сторону використання численних засобів, менеджерів і бібліотек. Сподіваюся, моя розповідь не викличе ні у кого напад когнітивного дисонансу.

Техзавдання? Чого? Самому собі? Диздок? Та ну, от ще, витрачати дорогоцінні хвилини свого життя на цю нісенітницю. Єдине, про що я пошкодував – що відразу не намалював блок-схему алгоритму серверної частини багатокористувацької версії. У підсумку, вона заробила неправильно. Але коли я все ж намалював на папірці блок-схему, то відразу побачив всі свої помилки і виправив їх.

Творчість
Що мені подобається в індії-розробці, так це творчий процес. Взагалі-то спочатку в рамках конкурсу, я задумав написати варіацію на тему Color Lines і навіть створив працює перший рівень. Ось як це виглядало.



Сенс був у тому, що гра працює в 3D, а м'ячі самі не з'являються на полі, їх туди треба кидати і складати лінії одного кольору. Тобто, необхідно потрапляти в потрібні лузи в решітці. Після чого під м'ячами відкриваються стулки в підлозі, і вони провалюються. Але, коли був готовий перший рівень, і я сам в нього зіграв, я раптом зрозумів, що гра вийшла не надто цікавою. І тоді я вирішив залишити це до кращих часів, поки мені в голову не прийде ідея, як покращити це творіння, що, може бути, додати. У мене з'явилася інша ідея. Кидання м'ячів викликало у мене асоціацію з польотом гарматних ядер. І я вирішив швидко переробити цю гру в морський бій. Благо, на написання конкурсного проекту відводилося цілих два місяці.

Та-дам! Легким рухом руки «Лінії» перетворюються… перетворюються… перетворюються… В елегантний «Морський бій!» І так, я просто не міг не створити «Чорну перлину». Який же морський бій без грози морів.



3D графіка – це, звичайно, не моя стихія. Кораблі зробив, як міг. З метою зниження навантаження для визначення зіткнень я використовував невидимі колайдери навколо кожного корабля. На один корабель — один коллайдер, приблизно повторює форму.

Таким чином, вийшов покроковий морський бій, але в 3D і з можливістю переміщати кораблі в будь-яку точку ігрового поля. Сенс в тому, щоб, правильно змінюючи кути повороту і нахилу гармат, потрапляти ядрами в кораблі супротивника.

Способи поділитися з усім світом
1. Конкурс.

По-перше, звичайно, конкурс. У процесі з'ясувалося, що організаторів конкурсу не влаштовує запуск гри з html-файлу і потрібен неодмінно exe. Що там у нас із складанням экзешников з js? Спочатку я спробував було Electron. Однак, там для мене все виявилося занадто складно. Потрібно було встановити купу якихось менеджерів з гитхаба і провести десятки маніпуляцій по налаштуванню і збірці всього цього. Я так зрозумів, що Electron хоче мене відвести на шлях стандартної веб-розробки. У мене не було часу з цим розбиратися, так як йшов останній день відведеного на створення конкурсної гри терміну. Ні, це не годиться. І тут я наткнувся на утиліту web2exe. Все дуже просто – запускаєш її, тыкаешь в html-файл, вона навіть сама хитає node-webkit, і на виході отримуєш збірку з exe-файлом. Що мені не сподобалося – так це те, що файл виявився дуже великий, 105 Мб. М-да… В той час, як сама гра важить всього 15 Мб. Однак, я знайшов пакувальну утиліту, за допомогою якої стиснув найбільший файл nw.dll. У підсумку вся збірка стала важити 68 Мб, а в zip-архіві 43 Мб.

До речі, web2exe не підтримує збірку «эезешника» під Windows XP, а шкода. Моя html версія працює і в XP теж. Тільки в цій операційці є деякі особливі вимоги для WebGL графіки в браузерах.

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



Що ж, підемо далі, і будемо викладати веб-варіант. Після закінчення конкурсу я написав сервер на php. На це пішло близько місяця вільних вечорів.

Так, до речі, сервер
Опитувати сервер на звичайному хостингу http занадто часто не вийде. Тому будемо опитувати його раз в 10 секунд. На клієнта створюється чергу з дій гравця, таких як рух корабля з точки А в точку Б, постріл і т. д. І підійшов момент часу відправлення даних ця черга йде на сервер. Суперник її читає і у нього формується черга вже для програвання. Все те ж: рух, постріл і т. д., тільки, з його точки зору, з кораблями опонента. Таким чином, у кожного з гравців є дві черги – одна для відсилання інформації на сервер, інша – для програвання дій противника. Тут, звичайно, не буде ніякої синхронізації, але, оскільки гра покрокова, то вона і не потрібна. Головне – щоб корабель противника стріляв у результаті потрібної точки, що прийшла з сервера. А маршрут до неї будує програма на клієнта, і в цю точку переміщує корабель.

Весь серверний скрипт на php, якщо його представити одним рядком, вийшов ось такий:


2. Фейсбук

Взагалі, викладати що-небудь у Фейсбук досить безглуздо, якщо ти не компанія, що спеціалізується на ААА-іграх. Заробити там на внутрішньоігрових покупок простому смертному, назвемо так програміста, який працює за ідею, досить складно, а рекламу сторонніх банерних мереж Фйсбук не дозволяє. Тільки розоришся на хостингу. Є, правда, спеціальний список партнерів, переважно американських, через яких допускається розміщувати рекламу в своєму додатку. Але для цього треба через їх сайт відправляти їм лист з роз'ясненням того, чого ти від них хочеш і т. д. Не факт, що вони погодяться працювати з додатком якогось хлопця з Росії. Та й на більшості їх сайтів, до того ж, я ні слова не виявив про Фейсбук… Теж мені, партнери. А ще питання сплати податків, як в США, так і в Росії. Загалом, пробувати з ними домовлятися мені відразу перехотілося. І я просто сверстал свій невеликий банер з назвою гри і розмістив в нижній частині екрана. Його можна вимкнути, пожертвувавши автору деяку суму через систему внутрішньоігрових покупок.

3. ВКонтакте.

Модерація у ВК тривала кілька діб. І гру додали, як правило, в самий низ каталогу. Зате в ВК можна відразу і без проблем підключати рекламний банер. Схема монетизації така ж, як у Фейсбуці – відключення банера. Треба відзначити, що рекламна система ВК дуже зручна, проста і зрозуміла. Особистий кабінет – вище всяких похвал. Ось тільки заробити на рекламі там можна дуже небагато. До того ж, ВК платить тільки за кліки, а не за покази. І в деякі дні на приблизно 200 показів отримуєш просто 0 рублів. Мало, хто взагалі клацає по рекламі, мабуть.

Підсумок
Зазначу, чого я досяг. Тепер я можу писати однокористувацькі ігри з використанням графіки WebGL, які запускаються з html-файлу як сервера, так і з локальної файлової системи. Працює все це в обох варіантах Windows, Android і має працювати в iOs і Linux – але ці ОС у мене немає можливості перевірити. Також, я можу робити з тієї ж html версії більш «важкі» складання з виконуваними файлами під Windows і iOs (в web2exe є така можливість). Весь код пишеться один раз на JS і працює у всіх перерахованих варіантах. Ну хіба що для онлайн варіанти для соц.мереж потрібно додати ще серверний скрипт і клієнтські звернення до api.


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

0 коментарів

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