Як створити Tappy Plane (клон Flappy Bird)
Вступ:
Привіт і ласкаво просимо до навчання щодо створення власної гри в стилі "Flappy Birds" в hyperPad.
Наша версія трохи відрізняється, тому ми називаємо її Tappy Plane.
Цей навчальний посібник створений для початківців, які хочуть глибше зануритися в нашу поведінкову систему і дізнатися про візуальне кодування. Протягом навчання ви також навчитеся орієнтуватися в інтерфейсі hyperPad.
У цьому навчальному посібнику ми створимо просту гру в стилі Flappy Bird. Геймплей буде полягати в тому, що гравець торкається екрану, щоб контролювати літак, піднімаючи його вгору і вниз, проходячи повз низку скель. Кожна пройдена скеля додасть очко, а з достатньою кількістю очок гравці отримають медаль. Медалі підвищуються в цінності залежно від набраних очок, аж до блискучої золотої медалі! А хто ж не любить блискучі речі!?
Якщо у вас ще немає hyperPad, ви можете завантажити його з App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8
Ви можете дізнатися більше про hyperPad на нашому веб-сайті за адресою http://www.hyperpad.com
Отже, без понад домовленостей, давайте розпочнемо!
Частина 1: Підготовка
Створення проекту:
Перше, що нам потрібно зробити, це розпочати новий проект. Після запуску hyperPad ви повинні побачити екран проекту. Тут ви знайдете всі проекти, які ви створили, а також будь-які, які ви завантажили. На даний момент ми бажаємо почати новий проект. Торкніться кнопки Новий проект у верхньому правому кутку екрана, як показано нижче.
Після цього з'явиться спливаюче вікно. Тут ми називатимемо проект і створимо резервну копію в хмарі, якщо це потрібно. Крім того, ви можете натиснути кнопку "Почати з прикладу" для імпорту одного з наших базових проектів. Однак поки що ми не будемо цього робити. Назвіть проект Tappy Plane, а потім натисніть кнопку 'Далі'.
На цьому новому екрані ми визначимо пристрій, для якого ми проектуємо, і орієнтацію. Для цього проекту встановіть орієнтацію на пейзажну і підтримку пристрою на iPad. Не переживайте, якщо вам потрібно буде змінити щось пізніше. Ці налаштування можна налаштувати в будь-який час у меню глобальних налаштувань.
На кінець, ми можемо обрати, який тип гри ми хочемо створити. Наразі hyperPad підтримує два типи режимів: верхній вид і боковий вид. Верхній вид, або вид з пташиного лету, зазвичай використовується для ігор, таких як The Legend of Zelda до його переходу на 3D, головоломок, таких як Bejeweled та верхньо-с shooter ігор. Боковий вид зазвичай використовується для платформерних ігор, таких як Super Mario Bros.
Обидва варіанти працюють однаково з однією маленькою різницею: у верхньому виді налаштування гравітації будуть вимкнені (вона розраховується на основі опору повітря для моделювання гравітації, що йде в екран), тому тримайте це в увазі при створенні вашого проекту. Ви завжди можете змінити це пізніше в меню глобальних властивостей.
Для цього навчального посібника ми будемо використовувати боковий вид, тому оберіть його. Далі у нас є налаштування гравітації та співвідношення PTM. За замовчуванням гравітація буде встановлена на 0 і -25.
Це значення x і y, або, простіше кажучи, горизонтальні та вертикальні значення нашого ігрового світу. X представляє горизонтальну, або ліво-право, тоді як Y представляє вертикальну, або вгору-донизу. За замовчуванням 0 і -25 означає, що не буде ніяких гравітаційних сил, які тягнутимуть об'єкти ліворуч і праворуч, але вони падуть зі швидкістю 25 метрів на секунду. Для цього навчального посібника значення за замовчуванням цілком підходять.
Співвідношення PTM означає бали до метрів або, простіше кажучи, скільки пікселів (балів) в 1 метрі hyperPad. За замовчуванням це встановлено на 32 пт/м або 32 пікселя на метр. Це важливо знати, коли створюєте графічні активи, і всі графічні активи повинні дотримуватися цієї шкали. У цьому навчальному посібнику ми будемо використовувати безкоштовні активи з бібліотеки активів hyperPad, тому не потрібно змінювати масштаб.
Виконавши це, натисніть кнопку створення, і ми почнемо!
Редактор:
Тепер, коли ми в проекті, ви повинні побачити екран, що виглядає так:
Це наш холст, і саме тут ми будемо будувати нашу гру. У центрі екрана ви повинні побачити тонке зелене обведення коробки. Це представляє наш перегляд екрану. Будь-яке розташування в цій коробці буде відразу видно під час запуску гри, а все, що знаходиться поза нею, не буде відображатися. Якщо вам хочеться, витратьте трохи часу, натискаючи навколо, і подивіться, що роблять речі, перед тим як перейти до наступного кроку.
Якщо ви готові, натисніть на піктограму шухляди в правому нижньому кутку, щоб відкрити браузер активів.
Бібліотека активів:
Це місце, де зберігаються всі активи для нашої гри. За замовчуванням новий проект hyperPad містить лише кілька початкових активів. Вам потрібно імпортувати свої, або завантажити комплект з магазину активів hyperPad. У цьому навчальному посібнику ми зосередимося на використанні активів, наданих магазином активів hyperPad. Ліворуч ви знайдете панель з чотирма кнопками. Натисніть кнопку Отримати активи, щоб відкрити магазин Hyperpad.
Тут ви знайдете безкоштовні пакети активів, створені нами в Hyperpad, щоб допомогти вам розпочати ваші проекти. Знайдіть і натисніть пакет активів Tappy Plane.
Тепер зазначте 'Отримати' для початку імпорту (Примітка: якщо виникає помилка, просто натисніть його ще раз, щоб перезапустити імпорт). Як тільки це буде зроблено, ви отримаєте повідомлення про те, що активи були успішно імпортовані. Просто натисніть Закрити у верхньому правому кутку екрана, щоб повернутися до Hyperpad.
І це так просто. Тепер ви повинні бачити нову папку у вашому браузері активів під назвою Завантаження. Натискаючи на неї, ви побачите папку пакету Tappy Plane а всередині наші графічні активи.
Наступним кроком ми розпочнемо збирання нашої гри.
Частина 2: Геймплей
Якщо ви знайомі з Flappy Bird, то ви будете знайомі зі стилем геймплею. Торкайтеся екрана, щоб утримати пташку, або в нашому випадку літак, у повітрі, намагаючись не натрапити на наближаючі перешкоди. Ці перешкоди з'являтимуться в випадкових конфігураціях, тому кожен раз проходження буде відрізнятися від попереднього. Оцінки нараховуються за успішне уникнення перешкод, а ваш високий бал фіксується.
Додавання літака:
Отже, тепер, коли ви розумієте основний геймплей, можемо розпочати. Перше, що нам потрібно зробити, це додати нашого персонажа гравця на екран. Перейдіть до свого браузера активів і відкрийте папку завантажень і знайдіть свої графічні активи. Серед них повинна бути папка під назвою Літаки.
Відкрийте цю папку і виберіть будь-який колір, що вам найбільше подобається. Потім просто виберіть першу графіку літака. Це закриє бібліотеку активів і поверне вас до основного екрана редактора, де ви повинні зараз бачити літак в об'єктному доку внизу. Ця секція UI відома як Об'єктний док. Тут відображатимуться останні 5 активів, які ви використовували. Тепер, щоб отримати наш літак у ігровій зоні, просто перетягніть літак з доку на холст.
З нашим літаком тепер у грі, нам потрібно зробити одну швидку налаштування. Торкніться літака, щоб вибрати його, і відкрийте вкладку властивостей праворуч. Що нам потрібно зробити, це налаштувати літак так, щоб він став прохідною стіною. Досить просто, знайдіть перемикач "Прохідний" і натисніть його, щоб увімкнути. Ми робимо це, тому що не хочемо, щоб літак падала, поки гравець не отримає можливість почати гру. Ми також налаштовуємо його на прохідний, оскільки наразі не хочемо, щоб у нього була будь-яка колізія.
Після цього давайте перейдемо до того, щоб зробити його ігровим.
Літаючий літак:
Отже, нам потрібно знайти спосіб розпочати гру. Щоб це зробити, нам знадобиться кнопка. Зараз ми можемо використовувати просту графіку, щоб вказати, де торкнутися, але для нашої гри ми хочемо дозволити гравцеві торкнутися в будь-якому місці на екрані. Як ми це зробимо? Ми зробимо всій екрані кнопку!
Перше, що нам потрібно зробити для цього, це створити новий шар. Але для цього нам потрібно зняти виділення з літака. Для цього просто торкніться будь-де, де є пустий простір. Після зняття виділення, властивості об'єкта закриються, і ви повинні побачити вкладку шарів праворуч. Якщо ні, просто змахніть пальцем з правого боку екрана зліва, щоб розкрити його.
Як ви можете бачити, наразі є три шари за замовчуванням. Глобальний UI, Сцена UI і потім Головний після роздільної лінії. Швидка примітка: будь-які об'єкти на шарі Глобальний UI з'являтимуться в кожній сцені вашої гри. Всі інші шари є специфічними для своїх окремих сцен. Щоб створити новий шар, просто натисніть значок + в нижній частині панелі шарів. Це запропонує нам дати ім'я новому шару. Надрукуйте кнопку і натисніть OK.
За замовчуванням активний шар змінить на новостворений. Коли ви використовуєте шари, лише об'єкти в активному шарі можуть бути вибрані. Це чудовий спосіб зберегти порядок під час створення вашої гри, оскільки ви не випадково змістите те, що не бажаєте. Завжди контролюйте, над яким шаром ви зараз працюєте. Також врахуйте, що шари, розташовані над іншими, будуть відображатися поверх цього шару. Таким чином, ви можете уникнути того, щоб ваш фон закривав ігрову зону.
Тепер, щоб створити нашу кнопку, це дуже просто. Торкніться кнопки Спеціальні об'єкти (піктограма колби) у нижньому правому кутку Об'єктного доку. Це викличе меню для створення типу об'єкта. Нам потрібен Порожній об'єкт. Торкнувшись його, у центрі нашого проекту з'явиться маленький, порожній квадрат. Однак ми хочемо, щоб він займав весь екран. Торкніться всередині квадрата, щоб вибрати його.