Пост про маленькі відеоігри

Привіт, друзі. В цьому пості мені б хотілося розповісти, як я писав маленькі HTML5-ігри для конкурсу js13k, які підводні камені зустрілися на цьому тернистому шляху, і що вийшло в результаті.

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

Але спочатку 77 слів про js13k


Якщо хтось пропустив, коротко про конкурс: js13k це такий спеціальний спосіб для вбивства вільного часу наповал. Потрібно написати відеогру, часу на це відводиться місяць (я написав одразу дві, від жадібності якось само вийшло).

Основна вимога — розмір усіх джерел додатки у архіві (zip) повинен бути не більше 13 кілобайт. Програма повинна працювати оффлайн, тобто довантажити улюблені шрифти з серверів гугла, а музику з серверів SoundCloud не вийде — треба все брати з собою в архів.

Вийшло ось що

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

Це дуже серйозна економія(Це дуже серйозна економія: середня кількість переглядів моїх постів (на вибірці з останніх чотирьох) — майже 20 тисяч. Якщо заощадити 20 тисяч разів за 10 хвилин, виходить чотири з половиною місяці — діти в цьому віці вже батьків візуально відрізняють від інших предметів.)
Ось два посилання, перша і друга. Гитхаб там всередині є.

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

Отже, розповідь про запчастини відеоігор:

Планета, схожа на дискотечний кулька

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

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

І ось тут відразу починаються помилки проектування.

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

Краще було обійтися чим-то простіше, хоча б навіть і статичною (або обертається в площині екрана, наприклад) картинкою. Таке рішення дало б некислий виграш по продуктивності, так і виглядало б на 20-25% краще, ніж нічого. Ну да ладно, переробляти не став — нехай буде диско-кулька.

(Про оверкилл: там у фінальному варіанті ще замість текстури затайленный шум Перліна. Половина програми тільки й робить, що малює непотрібний кулька, безблагодатно, невпинно.)

Астероїди

Далі весела шизофренія у вигляді падаючих на планету різнокольорових астероїдів. Тут така штука: хотілося, щоб вони летіли не по прямій, а як-небудь по-чудернацьки. Моїх уривчастих ностальгічних спогадів про шкільному курсі математики вистачило на траєкторію у вигляді дуги кола. Для простоти всі астероїди падають проти годинникової стрілки.

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

Самі астероїди простенькі, такі кривуваті багатокутники (до кожної вершини додана пара випадкових чисел в межах декількох пікселів). Багатокутник рендерится в текстуру один раз і кешується на протязі всього життєвого шляху астероїда, після чого викидається.

Швидкість у космічних об'єктів виключно кутова і абсолютно однакова, оскільки автор виявився казково ледачий.

І інший космос

Про решту космосі навіть розповісти толком нічого. Зірочки ходять строєм з кроком 5 пікселів. Хотів ще атмосферу планеті намалювати, вийшла ось така штука, але потім прибрав — конструкція в зборі виглядала жахливо, і мій внутрішній роскомнагляд Максвелла не пропустив цю гуманітарно-естетичну катастрофу у світ живих.

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

Штучний канонерский супутник, який кружляє навколо планети, взагалі дуже нудний і не заслуговує ні крапельки уваги. А при попаданні астероїда в планету включається ось такий ефект тремтіння на CSS.

На цьому інший космос як-то сам собою закінчився, і почалося

Звуковий супровід

Ось тут мене приємно здивували відразу багато речей.

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

По-друге, хотілося якийсь фонової музики, для цього jsfxr не підходить. Згадав про цю штуку, коротко це такий своєрідний хак: беремо цілі числа від 0 і поки не набридне, для кожного вважаємо формулу, пишемо байт в звукову карту.

Деякі маніяки прямо справжню музику роблять у такий спосіб.

У справі здобуття формули для неотвратительной фонової мелодії мені дуже допоміг демосценер ryg (Fabian Giesen, з Farbrausch). Ось тут в Твіттері можна поспостерігати, як ця чудова людина і талановитий програміст дарує мені формулу. Було дуже приємно. Та що там, досі приємно.

Мінімальний синтезатор звуку ось тут, в ньому всього кілька рядків.

До речі, якщо вас зацікавила процедурна музика, отримана таким способом, то ось невелика колекція формул.

Тривимірні кубики

У другій відеогрі істотно менше елементів, в основному там просто дошка з різнокольоровими кубиками посеред нічого. Програмування графіки за допомогою canvas мене надзвичайно до того часу втомило, тому вирішив використовувати CSS3. Вийшло ніби класно:



Погратися з прототипом тут. Можна вертіти дошкою за допомогою слайдера. Слово nopsp (несправжнє) означає безперспективність, її треба виключити.

Про браузерну сумісність: у цьому проекті я з префіксами не перепрацював, тому де працює, там працює. Останній Firefox і Хром/Хромиум зазвичай OK. (Проблема з префіксами в тому, що вони не тільки в CSS.)

Ще Firefox малює стирчать пікселі без згладжування, що могло б збентежити якого-небудь злегка эстетствующего розробника, а мені так більше подобається, ніж мильні краю полігонів в Хромі — таке восьмибитное чарівність. Обожнюю старі відеоігри.

Пошук шляху та інші речі

Щоб вороги наздоганяли персонажа, знадобився пошук шляху. Нічого вигадувати не став, використовував алгоритм A*, ось цю реалізацію. Дуже класна версія алгоритму, маленька і швидка.

Інші аспекти гри не уявляють, як мені здається, технічного інтересу.

Якщо ви можете дізнатися назви рівнів без гуглевания, ми могли б потоваришувати, напевно.

Висновок

Звичайно, в інтернеті можна без праці знайти пекельну прірву матеріалу на тему програмування графіки, звуку і чого завгодно ще.

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

Знаєте, як у великих фірмах буває — збираємо, значить, нараду, щоб обговорити результати обговорення результатів позаминулого наради… І нечисленна радість від роботи йде, залишаючи після себе гнітючу порожнечу і безвихідь. А тут виходить зовсім навпаки, душі прекрасні пориви йдуть в усі поля.

І пам'ятайте: спроба — перший крок до провалу.


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

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

0 коментарів

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