Зміст
- 01. Покращити досвід гри HTML5
- 02. Досягти 60 кадрів в секунду
- 03. Завантаження нестандартних шрифтів
- 04. Збережіть гру
- 05. Стандартний шейдер фрагментів
- 06. Змінити метод тонування
- 07. Перевірити овердрафт
- 08. Чому фізичні двигуни - ваші друзі
- 09. Експорт звуків
- 10. Як користуватися MP3-файлами
Adobe повільно відмовляється від Flash на користь HTML5 та JavaScript; його офіційний кінець життя призначений на 2020 рік. І саме тут ця стаття стане в нагоді.
- Відновіть веб-сайт Flash 2004 року на 2018 рік
Поради, описані нижче, мають на меті допомогти розробникам ігор HTML5 уникнути типових помилок при перетворенні Flash-ігор на JavaScript, а також зробити так, щоб весь процес розробки пройшов якомога плавніше. Все, що вам потрібно - це базові знання JavaScript, WebGL та фреймворку Phaser.
Зміна вашого ігрового дизайну з SWF на JavaScript може забезпечити кращу взаємодію з користувачем, що, у свою чергу, надає йому сучасного вигляду. Але як це зробити? Вам потрібен спеціальний конвертер ігор JavaScript, щоб позбутися цієї застарілої технології? Що ж, перетворення Flash у HTML5 може бути шматочком - ось що повинен сказати досвідчений розробник ігор на JavaScript з цього приводу.
Хочете спростити процес проектування? Конструктор веб-сайтів і відповідний провайдер веб-хостингу можуть зберегти його таким.
01. Покращити досвід гри HTML5
Перетворення гри на іншу платформу - відмінна можливість її вдосконалити, виправити її проблеми та збільшити аудиторію. Нижче наведено декілька речей, які можна легко зробити і які варто розглянути:
- Підтримка мобільних пристроїв
Перетворення з Flash на JavaScript дозволяє охопити ширшу аудиторію - користувачі мобільних пристроїв, як правило, потребують впровадження в гру підтримки підтримки сенсорного екрану. На щастя, і Android, і iOS-пристрої тепер також підтримують WebGL, тому рендерінг 30 або 60 кадрів в секунду зазвичай можна легко досягти. У багатьох випадках 60 кадрів в секунду не створюватимуть жодних проблем, які з часом лише покращуватимуться, оскільки мобільні пристрої стають дедалі ефективнішими. - Підвищення продуктивності
Що стосується порівняння ActionScript та JavaScript, то останній відбувається швидше. Крім цього, перетворення гри - це хороший привід переглянути алгоритми, що використовуються в коді гри. За допомогою розробки ігор на JavaScript ви можете оптимізувати їх або повністю позбавити невикористаного коду, що залишився від оригінальних розробників. - Виправлення помилок та вдосконалення ігрового процесу
Наявність нових розробників, які вивчають вихідний код гри, може допомогти виправити відомі помилки або виявити нові та дуже рідкісні. Це зробило б гру менш дратуючою для гравців, що змусило б їх проводити більше часу на вашому сайті та заохочувало б їх спробувати інші ігри. - Додавання веб-аналітики
На додаток до відстеження трафіку, веб-аналітика також може використовуватися для збору знань про те, як гравці поводяться в грі і де вони застряють під час гри. - Додавання локалізації
Це збільшить аудиторію, і це важливо для дітей з інших країн, які грають у вашу гру. Або, можливо, ваша гра не англійською мовою, і ви хочете підтримати цю мову?
02. Досягти 60 кадрів в секунду
Що стосується розробки ігор на JavaScript, може виникнути спокуса використати HTML і CSS для ігрових кнопок, віджетів та інших елементів графічного інтерфейсу. Наша порада - тут бути обережними. Це не інтуїтивно, але насправді використання елементів DOM є менш ефективним у складних іграх, і це набуває все більшої ваги для мобільних пристроїв. Якщо ви хочете досягти постійних 60 кадрів в секунду на всіх платформах, може знадобитися вихід із HTML та CSS.
Неінтерактивні елементи графічного інтерфейсу, такі як панелі здоров'я, боєприпаси або лічильники рахунків, можна легко реалізувати у Phaser, використовуючи звичайні зображення (клас "Phaser.Image"), використовуючи властивість ".crop" для обрізки та "Phaser". Клас "Текст" для простих текстових міток.
Інтерактивні елементи, такі як кнопки та прапорці, можуть бути реалізовані за допомогою вбудованого класу «Phaser.Button». Інші, більш складні елементи можуть складатися з різних простих типів, таких як групи, зображення, кнопки та текстові мітки.
03. Завантаження нестандартних шрифтів
Якщо ви хочете відтворити текст за допомогою власного векторного шрифту (наприклад, TTF або OTF), вам потрібно переконатися, що шрифт вже завантажений браузером перед тим, як відтворювати будь-який текст. Phaser v2.6 не пропонує рішення для цієї мети, але можна використовувати іншу бібліотеку - Web Font Loader.
Якщо припустити, що у вас є файл шрифту та на вашій сторінці є веб-завантажувач шрифтів, нижче наведено простий приклад завантаження шрифту. Створіть простий CSS-файл, який буде завантажений за допомогою Web Font Loader (вам не потрібно включати його у свій HTML):
@ font-face {// Це ім'я ви будете використовувати в сімействі шрифтів JS: ‘Gunplay’; // URL-адреса файлу шрифту, може бути відносним або абсолютним src: url (’../ fonts / gunplay.ttf’) format (‘truetype’); шрифт-вага: 400; }
Тепер визначте глобальну змінну з іменем WebFontConfig. Цього настільки простого, як цього, зазвичай вистачає:
var WebFontConfig = {'classes': false, 'timeout': 0, 'active': function () {// Шрифт успішно завантажений ...}, 'custom': {'families': ['Gunplay'] , // URL-адреса раніше згаданих "URL-адрес" CSS: ['styles / fonts.css']}};
Не забудьте ввести свій код у «активний» зворотний дзвінок, показаний вище. І це все!
04. Збережіть гру
Зараз ми знаходимося в середній точці нашого перетворення Flash на JavaScript - настав час подбати про шейдери. Для постійного зберігання локальних даних у ActionScript ви використовуєте клас «SharedObject». У JavaScript простою заміною є localStorage API, який дозволяє зберігати рядки для подальшого отримання, переживши перезавантаження сторінки.
Зберегти дані дуже просто:
var хід = 15; localStorage.setItem (‘myGame.progress’, хід);
Зверніть увагу, що у наведеному вище прикладі змінна ‘progress’, яка є числом, буде перетворена у рядок.
Завантаження теж просте, але пам’ятайте, що отримані значення будуть рядками або нульовими, якщо вони не існують.
var progress = parseInt (localStorage.getItem (’myGame.progress’)) || 0;
Тут ми гарантуємо, що повернене значення - це число. Якщо вона не існує, тоді змінній ‘хід’ буде призначено 0.
Ви також можете зберігати і отримувати більш складні структури, наприклад, JSON:
var stats = {’goals’: 13, ‘wins’: 7, ‘проиграні’: 3, ‘нічиї’: 1}; localStorage.setItem (‘myGame.stats’, JSON.stringify (stats)); … Var stats = JSON.parse (localStorage.getItem (’myGame.stats’)) || {};
Бувають випадки, коли об’єкт ‘localStorage’ буде недоступним. Наприклад, під час використання протоколу file: // або коли сторінка завантажується у приватне вікно. Ви можете використовувати оператор „try and catch”, щоб переконатися, що ваш код буде продовжувати працювати і використовувати значення за замовчуванням, як показано в прикладі нижче:
спробуйте {var progress = localStorage.getItem (‘myGame.progress’); } catch (виняток) {// localStorage недоступний, використовуйте значення за замовчуванням}
Ще одне, що слід пам’ятати, це те, що збережені дані зберігаються в домені, а не на URL-адресі. Тож якщо існує ризик, що багато ігор розміщуються в одному домені, тоді краще використовувати префікс (простір імен) під час збереження.У наведеному вище прикладі «myGame.» Є префіксом, і ви зазвичай хочете замінити його на назву гри.
Якщо ваша гра вбудована у iframe, то localStorage не буде зберігатися на iOS. У цьому випадку вам потрібно буде зберігати дані в батьківському iframe.
05. Стандартний шейдер фрагментів
Коли Phaser і PixiJS відтворюють ваші спрайти, вони використовують простий внутрішній шейдер фрагментів. Він не має багатьох функцій, оскільки пристосований до швидкості. Однак ви можете замінити цей шейдер для своїх цілей. Наприклад, ви можете скористатися ним, щоб перевірити перевитрату або підтримати більше функцій для візуалізації. Нижче наведено приклад того, як забезпечити власний шейдер фрагментів за замовчуванням Phaser v2.
функція preload () {this.load.shader (‘filename.frag’, ’shaders / filename.frag’); } функція create () {var renderer = this.renderer; var batch = renderer.spriteBatch; batch.defaultShader = новий PIXI.AbstractFilter (this.cache.getShader (‘ім’я файлу.frag’)); batch.setContext (renderer.gl); }
06. Змінити метод тонування
Спеціальний шейдер за замовчуванням може бути використаний для заміни методів тонування за замовчуванням у Phaser та PixiJS. Тонування в Phaser та PixiJS працює шляхом множення текстурних пікселів на заданий колір. Множення завжди темніє кольори, що, очевидно, не є проблемою; це просто відрізняється від тонування Flash. Для однієї з наших ігор нам потрібно було застосувати тонування, схоже на Flash, і вирішили, що може бути використаний спеціальний шейдер за замовчуванням. Нижче наведено приклад такого фрагментного шейдера:
// Специфічний варіант відтінку, подібний до відтінку Flash, який додає // до кольору і не множиться. Щоб цей шейдер працював належним чином, потрібно вказати мінус кольору //, тобто встановити // sprite.tint на 0, щоб перетворити весь спрайт в білий. точний поплавок низького рівня; змінна vec2 vTextureCoord; змінюється vec4 vColor; рівномірний пробовідбірник 2D uSampler; void main (void) {vec4 f = texture2D (uSampler, vTextureCoord); float a = clamp (vColor.a, 0.00001, 1.0); gl_FragColor.rgb = f.rgb * vColor.a + затискач (1.0 - vColor.rgb / a, 0.0, 1.0) * vColor.a * f.a; gl_FragColor.a = f.a * vColor.a; }
Цей шейдер освітлює пікселі, додаючи базовий колір до відтінку. Щоб це працювало, вам потрібно надати негативи потрібного кольору. Тому, щоб отримати білий, потрібно встановити:
sprite.tint = 0x000000; // Це забарвлює спрайт у білий Sprite.tint = 0x00ffff; // Це дає червоний
07. Перевірити овердрафт
Заміна шейдера за замовчуванням також може допомогти з налагодженням. Нижче ми пояснили, як за допомогою такого шейдера можна виявити перевитрату.
Перевитрата відбувається, коли багато або всі пікселі на екрані відображаються кілька разів. Наприклад, багато об’єктів займають одне і те ж місце і рендеруються один над одним. Скільки пікселів може зробити графічний процесор за секунду, описується як швидкість заповнення. Сучасні настільні графічні процесори мають надмірну швидкість заповнення для звичайних 2D-цілей, але мобільні набагато повільніші.
Існує простий метод з’ясувати, скільки разів пишеться кожен піксель на екрані, замінюючи стандартний шейдер фрагментів за замовчуванням у PixiJS та Phaser на такий:
void main (void) {gl_FragColor.rgb + = 1.0 / 7.0; }
Цей шейдер освітлює пікселі, які обробляються. Число 7.0 вказує, скільки записів потрібно, щоб пікселі стали білими; Ви можете налаштувати цей номер на свій смак. Іншими словами, світліші пікселі на екрані писалися кілька разів, а білі - щонайменше сім разів.
Цей шейдер також допомагає знаходити як "невидимі" об'єкти, які з якихось причин все ще відображаються, так і спрайти, які мають надмірно прозорі області навколо, які потрібно позбавити (GPU все ще повинен обробляти прозорі пікселі у ваших текстурах).
08. Чому фізичні двигуни - ваші друзі
Фізичний двигун - це проміжне програмне забезпечення, яке відповідає за імітацію фізичних тіл (як правило, жорсткої динаміки тіла) та їх зіткнень. Фізичні двигуни імітують 2D або 3D простори, але не обидва. Типовий фізичний двигун забезпечить:
- Рух об’єкта шляхом встановлення швидкостей, прискорень, шарнірів та двигунів;
- Виявлення зіткнень між різними типами фігур;
- Розрахунок реакцій на зіткнення, тобто як два об'єкти повинні реагувати при зіткненні.
Існує плагін Phaser, який добре працює для цієї мети. Box2D також використовується в ігровому механізмі Unity та GameMaker Studio 2.
Хоча фізичний движок прискорить ваш розвиток, вам доведеться заплатити ціну: зниження продуктивності роботи. Виявлення зіткнень та обчислення відповідей - завдання, що вимагає великих затрат процесора. Можливо, ви обмежитеся кількома десятками динамічних об’єктів у сцені на мобільних телефонах або зі зниженою продуктивністю, а також зниженою частотою кадрів нижче 60 кадрів в секунду.
09. Експорт звуків
Якщо у вас є звукові ефекти Flash-гри всередині файлу .fla, то експортувати їх із графічного інтерфейсу неможливо (принаймні не в Adobe Animate CC 2017) через відсутність параметрів меню, що слугують цій меті. Але є інше рішення - виділений сценарій, який робить саме це:
функція normalizeFilename (ім'я) {// Перетворює ім'я camelCase на ім'я snake_case, що повертає name.replace (/ ([A-Z]) / g, ’_ $ 1’). replace (/ ^ _ /, ’’) .toLowerCase (); } функція displayPath (шлях) ’,’: ’); fl.outputPanel.clear (); if (fl.getDocumentDOM (). library.getSelectedItems (). length> 0) // Отримати лише вибрані елементи var library = fl.getDocumentDOM (). library.getSelectedItems (); else // Отримати всі елементи var library = fl.getDocumentDOM (). library.items; // Запитати користувача про каталог призначення експорту var root = fl.browseForFolderURL (‘Виберіть папку.’); помилки var = 0; for (var i = 0; i library.length; i ++) {var item = library [i]; якщо (item.itemType! == ‘звук’) продовжувати; var шлях = корінь + ’/’; якщо (item.originalCompressionType === ’RAW’) шлях + = normalizeFilename (item.name.split (’.’) [0]) + ’.wav’; else шлях + = normalizeFilename (item.name); var успіх = item.exportToFile (шлях); якщо (! успіх) помилки + = 1; fl.trace (displayPath (path) + ’:’ + (успіх? ’ОК’: ‘Помилка’)); } fl.trace (помилки + ’помилка (и)’);
Як використовувати скрипт для експорту звукових файлів:
- Збережіть наведений вище код у форматі .jsfl на своєму комп’ютері.
- Відкрийте файл .fla за допомогою Adobe Animate.
- Виберіть Команди> Виконати команду у верхньому меню та виберіть сценарій у діалоговому вікні, що відкриється.
- Тепер з’являється інший діалоговий файл для вибору каталогу призначення експорту.
Зроблено! Тепер у вас повинні бути файли WAV у вказаному каталозі. Залишилося перетворити їх на, наприклад, MP3, OGG або AAC. (Якщо у вас є ігрові файли для захисту, перейдіть на гідне хмарне сховище.)
10. Як користуватися MP3-файлами
Повернувся старий добрий формат MP3, оскільки термін дії деяких патентів закінчився, і тепер кожен браузер може декодувати та відтворювати MP3. Це полегшує розробку, оскільки нарешті немає необхідності готувати два окремі аудіоформати. Раніше вам потрібні були, наприклад, файли OGG та AAC, тоді як MP3 буде достатньо.
Тим не менше, про MP3 потрібно пам’ятати дві важливі речі:
- MP3-файли потрібно декодувати після завантаження, що може зайняти багато часу, особливо на мобільних пристроях. Якщо ви бачите паузу після завантаження всіх ваших ресурсів, то це, мабуть, означає, що MP3-файли декодуються
- Безпроблемне відтворення певних MP3-файлів трохи проблематично. Рішення полягає у використанні mp3loop, читайте більше в цій статті, розміщеній Compu Phase.
Ця стаття спочатку була опублікована у випуску 277 журналу творчого веб-дизайну Web Designer. Придбайте випуск 277 тут або підпишіться на веб-дизайнер тут.
