З розвитком можливостей браузерів і HTML, ідея створення кроссплатформенних ігри та програми з кожним роком стає все більш і більш популярною. Вже зараз існує безліч рішень, що спрощують створення таких додатків. На вскидку можна назвати WinJS, Intel XDK, Sencha, Ionic, Enyo, Adobe AIR. Ну і, звичайно, популярні ігрові движки на зразок Cocos2D, EasyJS, Three.js і Phaser.
Я - великий фанат мови TypeScript, і, відповідно, фреймворків, які дозволяють його використовувати. Зокрема, я хочу показати вам, як можна використовувати фреймворк Phaser і мову TypeScript для створення простого платформера. Також ми будемо використовувати збирач проектів GulpJS.
Phaser - це фреймворк для розробки десктопних і мобільних HTML5 ігор. Ви пишете гру, використовуючи можливості HTML5 і JS, потім цю гру можна буде запускати в будь-якому сучасному браузері, в тому числі і на мобільних пристроях. Втім, на мобільних пристроях подібні додатки зазвичай запускаються за допомогою PhoneGap або CocoonJS, що дозволяє домогтися кращої продуктивності і доступу до просунутим можливостям пристроїв, таким як нотифікації, роботу з контактами пристрою, зчитування даних різних датчиків.
Отже, що нам потрібно, щоб почати працювати з Phaser?
Web Server
Нинішні браузери, на жаль, а може бути і на щастя, параноїдальні щодо файлів, що завантажуються з локальної файлової системи, тому для повноцінної роботи движка Phaser нам буде потрібно встановити локальний веб-сервер. Веб-серверів існує безліч, і вибір не є принциповим. Якщо ви до цього працювали з Apache, використовуйте його. Якщо ви фанат IIS, IIS Express, nginx, Mongoose, або голого веб-сервера, написаного вами на nodejs, - то вибирайте те, що вам ближче.
Найпростіше, звичайно, використовувати простий веб-сервер для Node.JS. Наприклад, можна використовувати NPM, щоб встановити пакет http-server.
Нам будуть потрібні пакети phaser. який містить движок, і пакет http-server - найпростіший веб сервер на Node. Для цього в командою рядку перейдемо в потрібну нам папку і встановимо все, що необхідно:
Я явно вказав тут версію Phaser 2.1.0, так як в різних версіях API може відрізнятися.
Тепер, якщо виконати команду
Task-Manager
Також нам потрібно таск-менеджер для збірки наших скриптів, і кілька плагінів для нього. Я вважаю за краще використовувати Gulp, але ви можете використовувати і Grunt, і будь-які інші, зручні вам. Так, чи інакше, потрібно встановити Gulp за допомогою пакетного менеджера:
Для складання TypeScript файлів, потрібно встановити gulp-typescript.
І також необхідно створити опис сценарію нашої збірки у файлі gulpfile.js. Вміст його буде простим:
Тут ми оголошуємо два завдання:
- phaser - копіює скрипт движка в папку release.
- compile-Scripts - компілює всі TypeScript файли з папки lib і поміщає їх в папку release.
Тепер в командою рядку можна набрати gulp. і проект буде зібраний.
інкрементальний збірка
Так як кожен раз запускати gulp вручну для збірки не зручно, можна включити автоматичну збірку змінених файлів за допомогою gulp watch. Для цього ми трохи змінимо наш gulpfiles.js:
Тепер можна набрати в командному рядку gulp watch. щоб включити стеження за TypeScript файлами і автоматичну компіляцію змінених файлів. Має сенс відкрити для цього окрему командний рядок: в одній буде запущений http-server. в інший - Інкрементальний збірка.
Відмінно, движок викачаний, веб-сервер запущений. Спробуємо створити просте застосування на TypeScript і Phaser.
Для цього нам буде потрібно створити найпростіший index.html в корені нашого проекту, який буде завантажувати наші скрипти:
І простий typescript файл game.ts в папці lib:
Найцікавіша частина в цьому коді - це конструктор класу Phaser.Game. Як параметри він приймає:
- Ширину в пікселях, або відсотках (в разі відсотків значення має бути рядком).
- Висоту.
- Метод виведення: Phaser.AUTO (автоматичний вибір), Phaser.CANVAS, Phaser.WEBGL, Phaser.HEADLESS (без рендеринга).
- Ідентифікатор DOM елемента, в який буде рендерится гра, або сам DOM елемент.
- Об'єкт, що містить обробники подій: preload, create, update, render. Preload використовується для завантаження даних гри. Create викликається після завантаження даних. Update і Render викликаються для зміни стану ігрової моделі і при її відображенні.
Завантажувати зображення в Phaser дуже просто. Всі необхідні ресурси завантажуються всередині функції preload. Завантажити картинку можна, викликавши
Потім ми можемо додати завантажений спрайт в сцену в функції create:
Я додав все зображення в папку assets. Цей набір графіки містить в собі всі потрібні тайли і анімації персонажа, але почнемо ми з того, що просто виведемо одну картинку:
Spritesheet з анімованим персонажем вже був підготовлений за нас, нам залишилося лише його завантажити. Крім Spritesheet, Phaser підтримує анімацію з текстурного атласу (Texture Atlas), який можна створити, використовуючи Texture Packer.
Налаштування для Texture Packer, необхідні для генерації атласу, сумісного з Phaser:
- Data Format: JSON (Array)
- Texture Format: PNG
- Max size: 2048
- Allow rotation: false
- Border padding: 0
- Shape padding: 0
Для завантаження атласу потрібно використовувати функцію game.load.atlas. яка приймає на вхід ім'я ресурсу та шляхи до json і png файлів. Так як ми маємо справу зі Spritesheet, будемо використовувати game.load.spritesheet. яка приймає ім'я ресурсу, шлях до png файлу і розміри кадру. Анімація до спрайту додається функцією spriteObject.animations.add - вказується назва анімації і кадри, які в неї входять. У випадку з атласом вказуються імена файлів, у випадку зі Spritesheet - номери кадрів.
Spritesheet персонажа містить в собі 4 кадри. Перший - це спокійний стан, другий і третій - анімація пересування і останній - персонаж дивиться вгору.
Персонаж у нас є, тепер треба створити карту рівня. Для цього нам буде потрібно spritesheet з тайлами землі, він у нас вже є. Карту рівня з тайлів можна зібрати, використовуючи додаток Tiled.
Створимо нову карту розміром, скажімо 50 на 50. Розмір тайла - 16x16px.
Далі додамо наш Tileset
І намалюємо наш рівень.
Зберігаємо результат у вигляді JSON файлу level.json в тій же папці assets. Важливо, щоб файл тайлів, використаний в Tiled називався так само, як той файл, який ви будете завантажувати.
У Phaser є кілька доступних фізичних движків: Arcade, Ninja і P2. В теорії доступні ще Box2D і Chipmunk, але вони поки в розробці, тому використовувати їх можна на свій страх і ризик. Можна включати одночасно кілька двигунів, але кожен ігровий об'єкт приєднаний тільки до одного з них. Двигуни відрізняються детальністю симуляції і, відповідно, продуктивністю, тому частина фізики з метою оптимізації має сенс прораховувати більш простим движком.
Про Box2D і Chipmunk ви могли вже чути, так як вони популярні. Arcade, Ninja і P2 - це все винаходи розробників Phaser.
Arcade Physics працює на дуже простий і швидкої реалізації AABB зіткнень, тобто перевірка зіткнень здійснюється на основі прямокутників без урахування повороту цих прямокутників.
Ninja Physics враховує обертання прямокутників, тому може використовуватися для більш складної геометрії, але працює повільніше Arcade.
P2 - це більш повноцінний фізичний движок, за можливостями близький вже Box2D.
Ми будемо використовувати найпростішу і швидку фізичну модель Arcade.
Клавіші управління потрібно зареєструвати в об'єкті game.input.keyboard:
Потім можна буде здійснювати перевірку натискання тієї чи іншої клавіші
При натисканні на пробіл наш персонаж буде стрибати. Ми будемо одноразово встановлювати йому негативну вертикальну швидкість, якщо персонаж стоїть на землі.
При натисканні на клавіші вліво і вправо - будемо міняти горизонтальну швидкість і інвертувати спрайт персонажа.
Дуже добре, тепер персонаж може бігати і стрибати по Тайлі карти, але, на жаль, може виходити за межі камери. Для виправлення цього недоліку досить включити стеження камери за спрайтом
Отже, ми отримали простий платформер. Цілком його код можна подивитися на сторінці проекту. а приклад тут. Він безсумнівно потребує доопрацювання: потрібно додати обробку перетину з тайлами шипів і сходи. Зробити це можна в обробнику зіткнень:
Потрібно додати ворогів і обробники зіткнень з ними, меню, звуки, розбити код на модулі, але це вже виходить за рамки цього туторіал.
В цілому, Phaser справляє приємне враження і містить все необхідне для створення простих 2д ігор:
- спрайт
- фізика
- карти тайлів
- Анімація, в тому числі на основі кісток
- системи частинок
- Камера
- звук