ДИЗАЙН ГРИ: КАРАНДАШ СИЛЬНІШЕ КОДА – РОЗРОБКА ІГОР ДЛЯ ОС ANDROID

&nbsp

Як я говорив раніше, дуже спокусливо відразу запустити IDE і сколотити вражаюче демо Цілком нормально написати код-прототип ігрової механіки і подивитися на його роботу Проте відразу після цього забудьте про нього Візьміть олівець, пачку паперу, сідайте на зручний стілець і починайте думати про високорівневих аспектах вашої гри Не варто поки концентруватися на технічних подробицях – ви займетеся цим пізніше Прямо зараз вам необхідно зосередитися на розробці інтерфейсу гри Для мене найкращий спосіб зробити це – намалювати ескізи головних компонентів: основну механіку гри чорновий сюжет і основні персонажі чорнові начерки графічного оформлення гри ескізи всіх екранів, а також схема переходів між ними разом з ініціаторами переходів (наприклад, закінчення гри)

Якщо ви заглядали у зміст, то вже зрозуміли, що ми збираємося написати Android-варіант знаменитої Змейки (Snake) Це одна з найпопулярніших в історії ігор для мобільних телефонів Якщо ви ніколи не чули про змійкою, пошукайте її в Мережі, я почекаю ..

Отже, повертаємося Тепер, коли ви знаєте суть Змейки, прикинемося, що ця чудова ідея прийшла в голову нам Будемо придумувати дизайн гри Почнемо з основною механіки гри

Основна механіка гри

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

На даному етапі розробки дизайну гри нам вистачить і цього Замість того щоб ретельно промальовувати зображення в Paint, Gimp або Photoshop, я пропоную створити чорнові варіанти на папері і скласти з них таблицю Ми легко зможемо переміщати листи з ескізами, не страждаючи з мишкою в редакторі Коли дизайн нас задовольнить, ми відскануємо або сфотографуємо ескізи для використання в майбутньому

Почнемо зі створення начерків базових компонентів На рис 311 продемонстрована моя версія елементів, необхідних для забезпечення основної механіки гри

Рис 311 Основні елементи дизайну

Прямокутник ліворуч – екран (розміром приблизно як у мого Nexus One) Тут ми будемо розміщувати всі інші елементи Наступні компоненти – дві кнопки, за допомогою яких ми будемо управляти змійкою Як обійтися без її голови, кількох хвостових ланок і того, що вона буде їсти Крім того, я намалював (і потім вирізав) тут кілька цифр, які стануть в нагоді нам для демонстрації результатів Малюнок 312 ілюструє моє бачення стартового ігрового поля

Рис 312 Стартове ігрове поле

Визначимося з загальної механікою: змійка рухається в тому напрямку, куди дивиться її голова, тягнучи за собою хвіст Голова і хвіст створені з частин однакового розміру, лише трохи розрізняються зовні При досягненні змійкою кордонів екрану вона зявляється з його протилежного боку При натисканні кнопки Вправо або Вліво змійка повертається на 90 ° за годинниковою або проти годинникової стрілки відповідно Якщо змія кусає себе за хвіст, гра закінчується Якщо торкнутися обєкта головою він зникає, рахунок збільшується на 10, а на не зайнятих змійкою ділянці екрана зявляється новий Змійка при цьому збільшується в розмірах – її хвіст росте

Досить докладний опис для настільки простої гри, чи не так Зверніть увагу – я розташував елементи гри відповідно до їх складністю, тому опис поведінки гри при пожиранні змійкою елемента залишив наостанок Більш продумані гри, звичайно, не можуть бути описані так швидко Зазвичай розробник розбиває елементи гри на кілька груп розробляє їх окремо, згодом поєднуючи в єдине ціле Гра має явне умова завершення: вона закінчується при заповненні всього простору екрану змійкою

Тепер, коли наша абсолютно оригінальна гра знайшла механіку, спробуємо придумати для неї сюжет

Сюжет та оформлення

Хоча різні епічні історії про зомбі, космічні кораблі, гномів і вибухи розбурхують нашу уяву, потрібно розуміти, що наші можливості обмежені Як зрозуміло з рис 312, великим художником мені ніколи не стати Я не зможу намалювати зомбі навіть під страхом смерті Тому я поступаю як типовий незалежний розробник – використовую стиль пятирічної дитини

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

Ця коротка передісторія дозволяє нам визначитися з деякими моментами, наприклад зі стилем оформлення гри Ми зможемо відсканувати намальовані нами елементи, щоб використовувати їх при створенні графічних активів

Оскільки містер Ном – індивідуальність, ми злегка змінимо його зовнішність: намалюємо йому зміїну морду І капелюх Поїдається елементи будуть виглядати як набір чорнильних плям Додамо також грі звук – кожен раз при поїданні плями містер Ном будемо хрюкати І ще – замість того, щоб давати грі нудне назву начебто Мальована змійка, назвемо її Містер Ном, так набагато цікавіше

На рис 313 містер Ном показаний у всій красі g декількома чорнильними плямами, які заміняють безликі елементи для поїдання Я також намалював тут логотип гри, який ми будемо неодноразово використовувати

Рис 313 Містер Ном, його капелюх, чорнильні плями і логотип

Екрани й трансформації

Отже, у нас вже є основні принципи, передісторія, персонажі і візуальне рішення Ми можемо почати малювати екрани і трансформації між ними Однак для початку необхідно точно зясувати для себе, що розуміється під екраном В даному випадку це нероздільний елемент, що займає весь простір дисплея і відповідає за одну складову частину гри (наприклад, головне меню, меню налаштувань або ігровий екран, де все і відбувається) Екран може складатися з декількох компонентів (кнопок, елементів управління, заголовків або намальованого ігрового світу) Екран дозволяє гравцеві взаємодіяти зі своїми елементами До числа таких взаємодій відносяться переходи між екранами (наприклад, натискання пункту New Game (Нова гра) в головному меню робить активним ігровий екран або екран вибору рівня) Озброївшись цими визначеннями, ми можемо намалювати всі екрани гри Містер Ном

Перше, що побачать користувачі, запустивши нашу гру, – екран головного меню З чого складається вдале головне меню Хорошим тоном є демонстрація на головному екрані назви гри, тому ми помістимо туди наш логотип Щоб екран не виглядав чужим елементом, варто додати фон, який ми візьмемо з ігрового екрана Зазвичай гру запускають для того, щоб в неї грати, тому не зайвою буде і кнопка PLAY (Грати) (це буде перший інтерактивний компонент екрану) Гравці люблять відстежувати свої досягнення, тому додамо кнопку перегляду кращих результатів (HIGHSCORES), також інтерактивну Можливо, у світі існують ще люди, які не знають правил гри в Змійку, – для них ми додамо кнопку виклику допомоги (HELP) для переходу до відповідного екрану Хоча звукове оформлення нашої гри обіцяє бути захоплюючим, деякі вважають за краще грати в тиші Спеціально для таких гравців на екрані буде присутній вмикач / вимикач звуку

Як розмістити всі ці елементи на екрані – справа смаку Ви можете вивчити підрозділ інформатики, який називається Взаємодія людини і компютера (Human Computer Interfaces, HCI), щоб познайомитися з новітніми науковими поглядами на цей рахунок Але у випадку з Містером номом це виглядає як стрільба з гармат по горобцях Мій варіант розміщення елементів на екрані головного меню представлений на рис 314

Рис 314 Екран головного меню

Зверніть увагу – всі елементи (логотип, кнопки меню і т д) є окремими зображеннями Стартуючи з екрану головного меню, ми можемо переходити на інші екрани Для Містера Нома нам потрібні ще ігровий екран, екран кращих результатів і екран допомоги У даному випадку можна обійтися без екрану налаштувань – єдина настройка (перемикач звуку) виведена на головний екран

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

Рис 315 Екран кращих результатів

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

І ось ми підійшли до головного – ігровому екрану Загалом-то, ми бачили його і раніше, тому нам залишилося уточнити лише кілька деталей Гра не повинна починатися негайно – гравцеві треба дати трохи часу, щоб підготуватися Тому перше, що він побачить при вході в ігровий екран, – пропозиція натиснути екран для початку процесу пожирання чорнила Це не означає створення окремого екрану ми просто реалізуємо стартову паузу на ігровому екрані

Рис 316 Екран допомоги

До речі, про паузах – нам потрібна спеціальна кнопка для призупинення ігрового процесу А раз є можливість натиснути паузу – повинна бути і можливість продовжити У даному випадку для обох дій намалюємо велику кнопку Resume (Продовжити) У режимі паузи буде показана ще одна кнопка, що дозволяє повернутися в екран головного меню

Якщо раптом містер Ном вкусить себе за хвіст, гравцеві треба повідомити про закінчення гри Для цього можна намалювати окремий екран або просто показати велике повідомлення Game Over (Гра закінчена) поверх ігрового У даному випадку виберемо другий варіант

Перед тим як закруглитися, покажемо, якого результату домігся гравець, а також додамо сюди можливість повернення в головне меню Разом у нас виходить чотири подекрана для ігрового екрану: початкової підготовки до гри, власне для гри, паузи і кінця гри На рис 317 показані всі вони

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

І це все про переходах Непогано, чи не так Малюнок 318 наочно демонструє всі переходи за допомогою стрілок між інтерактивними компонентами Для більшої ясності я також намалював тут всі елементи наших екранів

Рис 317 Ігровий екран в чотирьох станах

Рис 318 Всі елементи дизайну і переходи

Таким чином, дизайн нашої гри можна вважати створеним Залишилося всього нічого – реалізувати його у вигляді виконуваного програми

ПРИМІТКА

Метод, який ми використовували для створення дизайну, прекрасно підходить для невеликих ігор Ця а призначена для початківців розробників, і в даному випадку така технологія цілком підходить У великих проектах ви, швидше за все, будете працювати в команді з чітким поділом обовязків Хоча і в такому випадку ви можете скористатися описаним вище методом, але вам може знадобитися його злегка підкоригувати До того ж процес розробки стане більш інтерактивним через те, що дизайн буде постійно переглядатися –

Джерело: Mario Zechner / Маріо Цехнер, «Програмування ігор під Android», пров Єгор Сидорович, Євген зазноби, Видавництво «Пітер»

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*